/* ============================================================================
   ОКНО ОЧКОВ НА ТВ-ВИДАХ — одно на все режимы («Между нами», Квиз, Маджинариум, Пати Гессер,
   Резонанс). Скрипт: connection/_Scripts/Utils/PBTvScore.js. Образец — утверждённое окно Гессера
   (юзер 30.10): колонки игроков, лидер — выше, линии за ними, не в первой тройке — прозрачнее,
   ворвался в тройку — круг, обогнал троих — пламя со звуком, огромный номер раунда за всеми,
   облака сцены на это время гаснут. Координаты — кадр 1920×1080 при камере в покое.
   Приставка tvs- — своя (с телефонными окнами style.css не пересекается).
   ============================================================================ */
:root {
  --tvs-x: 960px;              /* колонки: центр по горизонтали */
  --tvs-step: 151.5px;         /* между колонками */
  --tvs-top: 171px;            /* лидер: центр аватарки */
  --tvs-bottom: 733px;         /* последний: центр аватарки */
  --tvs-line-w: 1px;           /* линия за игроком: толщина */
  --tvs-line-a: 0.11;          /* …непрозрачность */
  --tvs-dim: 0.2;              /* не в первой тройке — непрозрачность */
  --tvs-dim-ms: 400;           /* вошёл в тройку / вылетел — прозрачность меняется в миг обгона за, мс */
  --tvs-move-at: 0;            /* места начинают ехать через столько мс от проявления */
  --tvs-sname-shift: 3px;      /* ник в плашке — ниже середины на */
  --tvs-bonus-x: 0px;          /* плашка бонуса («< 100 km», Гессер): сдвиг по горизонтали */
  --tvs-bonus-y: -9px;         /* …по вертикали */
  --tvs-round-a: 0.061;        /* огромный номер раунда за игроками: непрозрачность */
  --tvs-round-fs: 1251px;      /* …размер */
  --tvs-round-x: 960px;        /* …центр по горизонтали */
  --tvs-round-y: 674px;        /* …центр по высоте */
  --tvs-round-blend: overlay;  /* …наложение на фон (юзер 30.10: оверлей) */
  --tvs-clouds-fade-ms: 1000;  /* облака сцены на время окна гаснут и потом возвращаются за, мс */
  --tvs-ring-size: 92px;       /* ворвался в тройку: круг, начальный размер */
  --tvs-ring-w: 1.5px;         /* …толщина */
  --tvs-ring-scale: 3.3;       /* …расходится во столько раз */
  --tvs-ring-ms: 1400;         /* …за, мс */
  --tvs-flame-video: url('/images_web/tv/gm6/flame.webm');   /* обогнал троих: пламя (Loop-Flame) на весь переезд */
  --tvs-flame-size: 96px;      /* …размер */
  --tvs-flame-x: 0px;          /* …сдвиг от центра аватарки по горизонтали */
  --tvs-flame-y: 87px;         /* …по вертикали (плюс — ниже: остриём вниз, хвостом под игроком) */
  --tvs-flame-a: 1;            /* …непрозрачность */
  --tvs-flame-speed: 3;        /* …скорость анимации, ×1…×3 */
  --tvs-flame-fade: 300;       /* …проявляется и гаснет за, мс */
}

.tvs { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; pointer-events: none; opacity: 0;
  font-family: 'Bebas Neue', 'Bebas Neue Pro', Impact, sans-serif; line-height: 1; }
.tvs > * { position: absolute; }
.tvs img, .tvs video { max-width: none; }
.tvs-text > .tvs-in { display: block; width: 100%; }
.tvs-leaf { left: 0; top: 0; width: 1920px; height: 1080px; }
.tvs-sc { font-size: 0.8em; }
.tvs-text { display: flex; align-items: center; justify-content: center; text-align: center; white-space: normal; overflow-wrap: anywhere; }

/* Огромный номер раунда — свой слой (.tvs-rwrap) сразу перед фоном сцены: ближе фона, но дальше всего остального
   (юзер 30.10) — облаков, холмов, леса, дерева, игроков. */
/* Наложение: и слой номера, и его узел в плане сцены — иначе номер смешивается только с пустотой своего слоя
   (прозрачность и план — свои группы наложения), а не с фоном под ним. */
.tvs-roundin, .tvs-rwrap { mix-blend-mode: var(--tvs-round-blend); }
.tvs-round { position: absolute; left: calc(var(--tvs-round-x) - 960px); width: 1920px; top: calc(var(--tvs-round-y) - 676.85px); height: 1353.7px;
  color: #fff; font-weight: 700; font-size: var(--tvs-round-fs); opacity: var(--tvs-round-a); }
.tvs-line { top: -1080px; height: 3240px; width: var(--tvs-line-w); margin-left: calc(var(--tvs-line-w) / -2);
  background: rgba(247, 232, 220, var(--tvs-line-a)); }

/* Колонка: узел в центре аватарки, всё остальное — от него. */
.tvs-col { width: 0; height: 0; }
.tvs-col > * { position: absolute; }
.tvs-col img { left: -59.8px; top: -59.8px; width: 119.6px; height: 119.6px; }
.tvs-total, .tvs-delta { display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.tvs-total { left: -60px; top: -80.9px; width: 120px; height: 27.4px; font-size: 27px; font-weight: 700; color: #F7E8DC; text-shadow: 0 2px 0 rgba(0, 0, 0, .4); }
.tvs-delta { left: -60px; top: -118.3px; width: 120px; height: 37.9px; font-size: 34.7px; font-weight: 400; }
.tvs-delta.is-plus { color: #6DFF6D; }
.tvs-delta.is-minus { color: #FF6B6B; }
.tvs-delta.is-zero { color: #fff; }
.tvs-plate { left: -58.4px; top: 26.6px; width: 116.8px; height: 37.9px; background: #000;
  -webkit-mask: url('/images_web/tv/gm1/name_tab.webp') center / 100% 100% no-repeat;
  mask: url('/images_web/tv/gm1/name_tab.webp') center / 100% 100% no-repeat; }
.tvs-name { left: -50.4px; top: 26.6px; width: 100.8px; height: 37.9px; color: #F7E8DC; font-weight: 700; }
.tvs-name > .tvs-in { translate: 0 var(--tvs-sname-shift); }
/* Плашка бонуса за точность (Гессер присылает bonus: {text, level}). */
.tvs-bonus { left: calc(-48.6px + var(--tvs-bonus-x)); top: calc(70px + var(--tvs-bonus-y)); width: 97.2px; height: 28.4px;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; font-weight: 700; white-space: nowrap;
  background: var(--tvs-bonus-c, #008EFF); clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); }
.tvs-bonus.lvl-1 { --tvs-bonus-c: #008EFF; }
.tvs-bonus.lvl-2 { --tvs-bonus-c: #FF8700; }
.tvs-bonus.lvl-3 { --tvs-bonus-c: #A600FF; }
.tvs-bonus.lvl-4 { --tvs-bonus-c: #FF0009; }
.tvs-target { left: calc(32px + var(--tvs-bonus-x)); top: calc(59.7px + var(--tvs-bonus-y)); width: 48.7px; height: 48.7px;
  background: url('/images_web/tv/gm6/target.webp') center / contain no-repeat; }

/* Ворвался в тройку: одно кольцо от аватарки; коробка едет вместе с игроком. */
.tvs-rings { width: 0; height: 0; }
.tvs-ring { position: absolute; left: calc(var(--tvs-ring-size) / -2); top: calc(var(--tvs-ring-size) / -2);
  width: var(--tvs-ring-size); height: var(--tvs-ring-size); border-radius: 50%;
  border: var(--tvs-ring-w) solid #F7E8DC; opacity: 0; }
/* Обогнал троих: пламя за игроком (своя коробка за колонкой, тот же переезд), остриём вниз. */
.tvs-flamebox { top: 0; width: 0; height: 0; }
.tvs-flame { position: absolute; left: calc(var(--tvs-flame-size) / -2 + var(--tvs-flame-x)); top: calc(var(--tvs-flame-size) / -2 + var(--tvs-flame-y));
  width: var(--tvs-flame-size); height: var(--tvs-flame-size); object-fit: contain; scale: 1 -1; }