/* ============================================================================
   ТВ-вид «Маджинариума» (GM5): сцена Unity на большом экране. Скрипт —
   connection/_Scripts/Game/Mg_Tv.js. Панель ведущего — общая (_Styles/tv-panel.css).

   Откуда числа: GameMode5.unity + Game Mode 5.prefab + Card3D.prefab, спроецированные
   камерой Unity (FOV 58.2, z −1.7321) на кадр 1920×1080 при камере в покое (y 0).
   Каждый план (.mgtv-plane) — своя глубина z: камера едет по Y (стол — y 1.14),
   план сдвигается на y·k(z). Картинки — public/images_web/tv/gm5 (tools/export_gm5_tv_sprites.py);
   птица 2 и облачко — общие с «Между нами» (gm1), огонь — со «Сказкой» (gm8).
   Приставка mgtv- — своя (телефонные окна Маджинариума — mg-).
   ============================================================================ */
:root {
  --mgtv-min-w: 1000;            /* ТВ-вид с ширины окна, px */
  --mgtv-min-aspect: 1.2;        /* …и окно не уже (ширина / высота) */
  --mgtv-plate-left: -0.6px;     /* плашки голосовавших на карте: от левого края карты (минус — вылезает; Unity −8.9) */
  --mgtv-plate-top: 27.25px;      /* …первая — от верха карты (Unity 8.75) */
  --mgtv-plate-step: 46.2px;     /* …шаг между плашками (Unity 46.2) */
  /* Костёр FX_Fire_05 (0.56, −0.64, 0) — видео «Сказки»; огонь Unity — другой эффект, размер подбирается. */
  --mgtv-fire-video: url('/images_web/tv/gm8/firewood.webm');
  --mgtv-fire-x: 1274px;         /* видео: центр по горизонтали (точка огня Unity — 1273.7) */
  --mgtv-fire-y: 944px;          /* видео: низ (точка огня Unity — 898.5) */
  --mgtv-fire-w: 158px;          /* видео: ширина */
  /* CFXR3 Ambient Glows — мягкие белые точки по всей сцене. */
  --mgtv-glows: 1;               /* 1 — есть, 0 — нет */
  --mgtv-glow-n: 28;             /* сколько точек одновременно (читается при постройке сцены) */
  /* Заголовки (юзер 29.10): подсказка («Выберите карту…», «Запутай…», над столом — ассоциация; до 2 строк), под ней
     ассоциация, под ней карты (рука ведущего или стол) — одним блоком по центру видимой части кадра
     (Mg_Tv.js, captions); карты — своего размера, не влезает — меньше заголовки (--k). Ручки — только расстояния. */
  --mgtv-cap-between: 4px;      /* между подсказкой и ассоциацией */
  --mgtv-cap-gap: 55.5px;        /* между ассоциацией (или подсказкой) и картами */
  --mgtv-cap-top: 70px;          /* верхняя граница (px кадра 1920×1080): выше блок не встаёт, не влезает — меньше заголовки */
  --mgtv-cap-lift: 34;            /* с картами: блок выше центра на столько % свободного места (100 — к верху) */
  --mgtv-cap-y: 324px;
  --mgtv-assoc-enter: 1;         /* окно 3, ассоциация рассказчика: 0 — проявление (Unity), 1 — прилёт со стороны зрителя (по Z) */
  --mgtv-assoc-fly-ms: 1200;     /* …прилёт: за столько мс, с плавным доездом */
  --mgtv-assoc-fly-from: 8;      /* …прилёт: стартует во столько раз крупнее */
  --mgtv-assoc-fly-ease: 3;      /* …прилёт: кривая — 0 cubic, 1 quart, 2 quint, 3 expo (мягче → резче), 4 back (с перелётом) */
  --mgtv-assoc-fly-fade: 0.15;   /* …прилёт: проявляется за такую долю пути */           /* без карт (окна 2, 3): центр заголовков по высоте (Unity — 324) */
  --mgtv-cap-w: 1279px;          /* длина строки */
  --mgtv-head-fs: 81px;          /* подсказка и ассоциация над столом (окна 5, 5б): кегль (не влезает — меньше) */
  --mgtv-teller-fs: 180px;       /* ассоциация рассказчика (окна 3, 4): кегль (Unity — 180) */
  /* Рука ведущего (в Unity её нет: ведущий здесь ещё и игрок). Выбор и наведение — как у карт
     телефона (style.css: .mg-card — кремовое кольцо, галочка, зум картинки --mg-hover-*). */
  --mgtv-hand-w: 322px;          /* карта: ширина (2:3) */
  --mgtv-hand-gap: 20px;         /* между картами */
  --mgtv-hand-dim: 0.86;          /* пока ведущий выбирает карту (сбор, подкладывание): всё остальное темнее на */
  /* Стол (SimpleGridLayout3D; по умолчанию — как в Unity). Масштаб: 1 = карта 355×532 px. */
  --mgtv-table-s1: 1;            /* до 4 карт (один ряд): масштаб карт */
  --mgtv-table-s5: 0.825;         /* 5 карт (один ряд) */
  --mgtv-table-s2: 0.64;        /* 6–10 карт (два ряда) */
  --mgtv-table-gap-x: 20px;    /* между картами (при масштабе 1; меньше карты — меньше и зазор) */
  --mgtv-table-gap-y: 20px;    /* между рядами (так же) */
  /* Правильная карта: листья, звёздочки, штрихи (CFXR3 Hit Leaves) — одним выбросом. */
  --mgtv-hit-size: 0.8;            /* размер частиц (1 — как в Unity) */
  --mgtv-hit-y: 61px;           /* точка выброса: от центра карты вниз (Unity — 0.33 юнита карты) */
}

.mgtv {
  position: fixed; inset: 0; z-index: 25;
  overflow: hidden; display: none;
  /* очень высокое окно: сверху — край неба, снизу — земля */
  background: linear-gradient(#56829C 50%, #010709 50%);
  -webkit-user-select: none; user-select: none;
}
body.mgtv-on .mgtv { display: block; }
.mgtv.is-cover::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.mgtv img { max-width: none; }

.mgtv-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;
}
.mgtv-plane {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  pointer-events: none;
}
.mgtv-plane > * { position: absolute; }
/* Пока летит камера — планы на видеокарте (Mg_Tv.js, moveCamera). */
.mgtv.is-flying .mgtv-plane { will-change: transform; }
.mgtv-sc { font-size: 0.8em; }                        /* TMP SmallCaps */
.mgtv-ch { display: inline-block; }                   /* буква подсказки круга — качается */
.mgtv-spr { background: center / 100% 100% no-repeat; }
.mgtv-text {
  display: flex; align-items: center; justify-content: center; text-align: center;
  white-space: normal; overflow-wrap: anywhere;
}
.mgtv-text > .mgtv-in { display: block; width: 100%; }
.mgtv-canvas { position: absolute; left: 0; top: 0; }

/* -------------------------------------------------------- Background -- */
/* 3_BG (z 4), лес 2_forest ×3 (z 1.48), стоянка 1_camp ×3 (z 0; боковые — отражены). */
/* Небо — CSS вместо картинки (юзер 30.10: у сжатой картинки была видна ступенчатость): градиент и зарево подобраны
   под 3_BG.png Unity по пикселям, звёзды — на тех же местах и того же размера. */
.mgtv-sky { left: -317.9px; top: -1041.2px; width: 2572.7px; height: 2377px;
  background:
    radial-gradient(circle 7.7px at 10.37% 21.56%, #fff 70%, rgb(255 255 255 / 0) 100%),
    radial-gradient(circle 10.8px at 24.56% 36.6%, #fff 70%, rgb(255 255 255 / 0) 100%),
    radial-gradient(circle 9.3px at 94.41% 45.22%, #fff 70%, rgb(255 255 255 / 0) 100%),
    radial-gradient(circle 9.8px at 1.95% 71.22%, #fff 70%, rgb(255 255 255 / 0) 100%),
    radial-gradient(circle 7.7px at 86.5% 86.15%, #fff 70%, rgb(255 255 255 / 0) 100%),
    linear-gradient(to bottom, rgb(159 53 81 / 0) 40.83%, rgb(159 53 81 / 0.031) 62.37%, rgb(198 91 91 / 0.052) 86.33%, rgb(183 83 88 / 0.042) 100%),
    radial-gradient(ellipse 123.9% 52.84% at 57.32% 87.1%, rgb(255 87 13 / 0.84) 0%, rgb(255 87 13 / 0.762) 12.5%, rgb(255 87 13 / 0.668) 25%, rgb(255 87 13 / 0.566) 37.5%, rgb(255 87 13 / 0.458) 50%, rgb(255 87 13 / 0.345) 62.5%, rgb(255 87 13 / 0.233) 75%, rgb(255 87 13 / 0.121) 87.5%, rgb(255 87 13 / 0) 100%),
    linear-gradient(179.5deg, rgb(87 130 156 / 1) 0%, rgb(87 130 156 / 1) 33.58%, rgb(87 134 158 / 1) 70.62%, rgb(85 132 156 / 1) 86.63%, rgb(86 132 157 / 1) 100%); }
.mgtv-forest { top: 303.2px; width: 1968.7px; height: 834.3px; background-image: url('/images_web/tv/gm5/forest.webp'); }
.mgtv-forest.f0 { left: 9.2px; }
.mgtv-forest.f1 { left: -1909.1px; }
.mgtv-forest.f2 { left: 1914.8px; }
.mgtv-camp { top: 640.6px; width: 1991.5px; height: 462.4px; background-image: url('/images_web/tv/gm5/camp.webp'); }
.mgtv-camp.c0 { left: -35.8px; }
.mgtv-camp.c1 { left: -2023.6px; scale: -1 1; }
.mgtv-camp.c2 { left: 1949.3px; scale: -1 1; }
/* Птицы (слой Front): 1 — Game Mode 3/Bird, 2 — Game Mode 4/Bird (flipX). */
.mgtv-bird1 { left: 1093.2px; top: 820.7px; width: 96.6px; height: 108.6px; background-image: url('/images_web/tv/gm5/bird1.webp'); }
.mgtv-bird2 { left: 1378.3px; top: 837.6px; width: 79.8px; height: 90.3px; background-image: url('/images_web/tv/gm1/bird2.webp'); scale: -1 1; }
.mgtv-firevid {
  left: calc(var(--mgtv-fire-x) - var(--mgtv-fire-w) / 2); top: calc(var(--mgtv-fire-y) - var(--mgtv-fire-w) * 150 / 133);
  width: var(--mgtv-fire-w); height: calc(var(--mgtv-fire-w) * 150 / 133); display: none;
}
.mgtv.is-firevid .mgtv-firevid { display: block; }
/* Откуда Mg_Tv.js берёт лист кадров пламени для Safari (тот же, что у «Сказки»). */
.mgtv-fire-src { background-image: url('/images_web/tv/gm8/fire.webp'); }

/* ---------------------------------------------------- Overlay, порядок 0 -- */
/* Dark: 3_BG чёрным во весь кадр; под столом — 0.8 (2 с OutQuad). */
.mgtv-dark { left: -2000px; top: -3500px; width: 6000px; height: 7000px; background: #000; opacity: 0; }
/* Мерцание: точка живёт 1.5–2 с (длительность — у каждой своя), на новом круге — новое место. */
.mgtv-glows { left: 0; top: 0; width: 1920px; height: 1080px; opacity: var(--mgtv-glows); }
.mgtv-glow {
  position: absolute; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, .45) 35%, rgba(255, 255, 255, 0) 70%);
  animation: mgtv-glow 1.75s ease-in-out infinite;
}
@keyframes mgtv-glow { 0%, 100% { opacity: 0; } 50% { opacity: var(--a, .3); } }
/* Заголовки: подсказки и ассоциация (над рукой — план z 0, над столом — z 2, за картами). Высоту ставит
   Mg_Tv.js (captions); поле подсказки — 2 строки, текст прижат к низу. */
.mgtv-cap {
  left: calc(961px - var(--mgtv-cap-w) / 2); top: 0; width: var(--mgtv-cap-w);
  color: #F7E8DC; opacity: 0; transition: top 400ms var(--pb-ease); align-items: flex-end;
}
.mgtv-cap.is-head { height: calc(var(--mgtv-head-fs) * 2 * var(--k, 1)); font-weight: 300; }
.mgtv-cap.is-assoc { height: calc(var(--mgtv-teller-fs) * var(--k, 1)); font-weight: 400; }   /* ассоциация рассказчика (окна 3, 4) */
/* Countdown Text: «3», «2», «GO!» — 516 px, без автоподбора. */
:root { --mgtv-count-y: 387px; }     /* отсчёт 3-2-1 после интро: центр по вертикали на кадре (юзер 02.11) */
.mgtv-count { left: 651.5px; top: calc(var(--mgtv-count-y) - 304.3px); width: 617px; height: 608.6px; color: #fff; font-weight: 400; opacity: 0; }

/* ---------------------------------------------------- Overlay, порядок 1 -- */
/* Current Player Tab: Question 1.svg чёрным, отражена по X; имя рассказчика вытянуто по высоте ×1.29. */
.mgtv-tab { left: 818.1px; top: 46.3px; width: 283.9px; height: 100px; opacity: 0; }
.mgtv-tab i { position: absolute; inset: 0; background: #000; clip-path: polygon(0 0, 100% 0.58%, 95.83% 93.9%, 6.36% 100%); }
.mgtv-tab-t { position: absolute; left: 28.7px; top: 18px; width: 226.4px; height: 56.6px; color: #fff; font-weight: 400; scale: 1 1.2928; }

/* ------------------------------------------------------- стол (z −0.7) -- */
/* Card3D: карта 1×1.5 «юнита» = 355×532 px; left/top — центр карты, scale — масштаб раскладки. */
.mgtv-cards { left: 0; top: 0; }
.mgtv-card { position: absolute; width: 354.96px; height: 532.44px; margin: -266.22px 0 0 -177.48px; }
.mgtv-card > .mgtv-cimg { position: absolute; inset: 0; overflow: hidden; }
/* Скругление — как у карт телефона и руки (--mg-radius), с поправкой на масштаб раскладки (юзер 29.10:
   «карты везде должны быть с закруглениями»; в Unity на столе углы прямые). */
.mgtv-card > .mgtv-cimg, .mgtv-card > .mgtv-dim { border-radius: calc(var(--mg-radius) / var(--s, 1)); }
.mgtv-card .mgtv-cimg img { width: 100%; height: 100%; display: block; object-fit: fill; }   /* картинка растянута на 2:3, как в Unity */
.mgtv-dim { position: absolute; inset: 0; background: #000; opacity: 0; }                       /* неверная: _Color 0.316 */
.mgtv-card.is-vote { pointer-events: auto; cursor: pointer; }

/* Выбор и наведение — как у карт телефона (style.css, .mg-card): кремовое кольцо снаружи и галочка
   в кружке, под мышью картинка приближается внутри рамки, нажатие — чуть меньше. На столе — с
   поправкой на масштаб раскладки (--s), чтобы кольцо и галочка были того же размера. */
.mgtv-cimg { transition: box-shadow 500ms var(--pb-ease), transform 160ms var(--pb-ease); }
.mgtv-cimg img { transition: transform var(--mg-hover-ms) var(--mg-hover-ease); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .mgtv-card.is-vote:hover .mgtv-cimg img, .mgtv-hcard:hover .mgtv-cimg img { transform: scale(var(--mg-hover-zoom)); }
}
.mgtv-card.is-vote:active .mgtv-cimg, .mgtv-hcard:active .mgtv-cimg { transform: scale(.97); }
.mgtv-check {
  position: absolute; z-index: 3; display: none; align-items: center; justify-content: center;
  right: var(--pb-s-2); top: var(--pb-s-2); width: 30px; height: 30px; border-radius: 50%;
  background: var(--pb-cream); color: var(--pb-on-light);
}
.mgtv-check svg { width: 18px; height: 18px; }
.mgtv-card .mgtv-check { right: calc(var(--pb-s-2) / var(--s, 1)); top: calc(var(--pb-s-2) / var(--s, 1));
  width: calc(30px / var(--s, 1)); height: calc(30px / var(--s, 1)); }
.mgtv-card .mgtv-check svg { width: calc(18px / var(--s, 1)); height: calc(18px / var(--s, 1)); }
.mgtv-card.is-pick .mgtv-cimg, .mgtv-hcard.is-pick .mgtv-cimg { box-shadow: 0 0 0 calc(3px / var(--s, 1)) var(--pb-cream); }
.mgtv-card.is-pick .mgtv-check, .mgtv-hcard.is-pick .mgtv-check { display: flex; }
/* Плашка Description.png (чёрный четырёхугольник) с именем владельца на низу карты. Плашки с номером
   карты (в Unity — под картой) на ТВ нет: голос — нажатием по карте (юзер 29.10 убрал). */
.mgtv-name { position: absolute; background: #000; clip-path: polygon(0.22% 0.4%, 99.68% 0.4%, 96.65% 98.79%, 4.64% 98.79%); }
.mgtv-name { left: 46.4px; top: 487.8px; width: 263.1px; height: 70.3px; display: none; }
.mgtv-name .mgtv-text { position: absolute; left: 43.56px; top: 10.35px; width: 179px; height: 53.6px; color: #F7E8DC; font-weight: 700; }
.mgtv-card.is-revealed .mgtv-name { display: block; }
.mgtv-card.is-right .mgtv-name { background: #F7E8DC; }
.mgtv-card.is-right .mgtv-name .mgtv-text { color: #543D36; }
/* Плашки голосовавших: PlayerResultTab_2 чёрным, сверху карты, шаг 46 px; аватарка обрезана плашкой. */
.mgtv-voters { position: absolute; left: 0; top: 0; }
.mgtv-plate {
  position: absolute; left: var(--mgtv-plate-left); width: 202.4px; height: 43.2px; background: #000;
  clip-path: polygon(0 0, 99.85% 0, 91% 100%, 0 100%);
}
.mgtv-plate img { position: absolute; left: 4.5px; top: -2.5px; width: 58.1px; height: 58.2px; }
.mgtv-plate .mgtv-text { position: absolute; left: 62.1px; top: 0; width: 114px; height: 43.2px; color: #fff; font-weight: 400; }

/* ------------------------------------------------- облачка птиц (порядок 2–3) -- */
/* Растут от точки облачка (CloudObject) за 0.25 с; облачко 2 отражено, текст — нет. */
.mgtv-bub { scale: 0; }
.mgtv-bub i { position: absolute; inset: 0; background: url('/images_web/tv/gm1/bubble.webp') center / 100% 100% no-repeat; }
.mgtv-btext { position: absolute; color: #543D36; font-weight: 400; }
.mgtv-bub1 { left: 1151.6px; top: 668.6px; width: 240.5px; height: 148px; transform-origin: 114.2px 108.9px; }
.mgtv-bub1 .mgtv-btext { left: 47.7px; top: 33.9px; width: 147.9px; height: 51.6px; }
.mgtv-bub2 { left: 1140.6px; top: 689.9px; width: 262.7px; height: 161.7px; transform-origin: 181.1px 93.5px; }
.mgtv-bub2 i { scale: -1 1; }
.mgtv-bub2 .mgtv-btext { left: 49.1px; top: 37px; width: 161.6px; height: 56.4px; }

/* Окно очков (z 2, за лесом) — общее для всех режимов: tv-score.css (--tvs-*). */

/* ------------------------------------------------------ рука ведущего -- */
.mgtv-hand {
  position: absolute; left: 0; width: 1920px; top: 0;   /* ставит Mg_Tv.js (captions) */
  display: flex; justify-content: center; gap: var(--mgtv-hand-gap);
  pointer-events: none; transition: opacity .3s;
}
.mgtv-hand.is-out { opacity: 0; }
.mgtv-hcard { position: relative; width: var(--mgtv-hand-w); aspect-ratio: 2 / 3; pointer-events: auto; cursor: pointer; }
.mgtv-hand.is-out .mgtv-hcard { pointer-events: none; }
/* Карта телефона: скруглённая рамка (--mg-radius), фото без обрезки по пропорциям пака. */
.mgtv-hcard .mgtv-cimg { position: absolute; inset: 0; border-radius: var(--mg-radius); overflow: hidden; }
.mgtv-hcard .mgtv-cimg img { width: 100%; height: 100%; display: block; object-fit: cover; }
/* Пока ведущий выбирает карту (сбор, подкладывание) — всё остальное темнее. */
.mgtv-veil { position: absolute; z-index: 1; inset: -3000px; background: #000; opacity: 0; pointer-events: none; transition: opacity .3s; }
/* Над затемнением: заголовки (подсказка круга, ассоциация, плашка рассказчика) — не темнеют;
   выше всех — рука ведущего и таймер. */
.mgtv-plane.is-caption { z-index: 2; }
.mgtv-hand, .mgtv-timer { z-index: 3; }
.mgtv-veil.is-on { opacity: var(--mgtv-hand-dim); }

/* --------------------------------------------------- таймер (Main UI) -- */
.mgtv-timer {
  position: absolute; left: 59px; top: 24px; color: #fff; font-size: 41.4px; font-weight: 700; display: none;
  font-variant-numeric: tabular-nums;
}

/* Название режима на заставке — как в «Шпионаже» (Game Name: z 0.6 → на кадре 1547×663 по центру 960, 411;
   Bebas 407 px, #FFDAB1, капитель), юзер 30.10. Скрипт — gameNameIn(). */
.mgtv-gname { position: absolute; left: 186.3px; top: calc(var(--mgtv-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(--mgtv-gname-c); font-family: 'Bebas Neue', 'Bebas Neue Pro', Impact, sans-serif; font-weight: 400; pointer-events: none; }
:root {
  --mgtv-gname-z: 3.18;            /* название режима на заставке: дальше камеры в покое на, единиц Unity (как «Шпионаж»: 1.36) */
  --mgtv-gname-y: 337px;         /* …центр по высоте на кадре в покое */
  --mgtv-gname-fs: 407px;        /* …кегль (длинное название уменьшается, чтобы влезть) */
  --mgtv-gname-c: #FFDAB1;         /* …цвет */
}
.mgtv-gname > span { display: block; }
.mgtv-gname-sc { font-size: 0.8em; }