/* ---------- привязка экрана ----------
   Это первое, что видно после загрузки страницы: чёрный кадр и код. Графика
   в это время ещё едет — восемь мегабайт идут заметно, и показывать их
   середину незачем. Как только тренер привязал экран, слой уходит насовсем.

   Поэтому фон здесь глухой чёрный, а не полупрозрачный: за ним нечего
   показывать, и мигать недогруженным артбордом мы не хотим. */
#link{
  position:absolute;inset:0;z-index:9;
  display:flex;align-items:center;justify-content:center;
  background:#000;
  font-family:'Inter Tight',Arial,sans-serif;
  opacity:0;visibility:hidden;
  transition:opacity .8s ease,visibility 0s .8s;
}
#link.on{opacity:1;visibility:visible;transition:opacity .8s ease}

#linkCard{
  display:flex;flex-direction:column;align-items:center;
  /* Карточка живёт в координатах кадра 1920x1080 и ужимается тем же
     множителем, что и титры, — иначе на телевизоре она будет другого
     размера, чем в мониторе оператора. */
  transform:scale(var(--tt-k,1));
}

/* Код тёмный по белому: инверсный берут не все камеры, а наводить будут
   с телефона через половину зала. Белая плашка на чёрном и есть весь свет
   в кадре — больше ничего не светится, глаз идёт прямо на неё. */
#linkQr{
  width:468px;height:468px;padding:24px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border-radius:28px;
  box-shadow:0 0 120px rgba(255,255,255,.08);
}
#linkQr svg{display:block;width:100%;height:100%}

#linkTitle{
  margin-top:44px;
  font-weight:500;font-size:44px;line-height:110%;letter-spacing:-0.02em;
  color:#FDFDFD;text-align:center;
}
#linkHint{
  margin-top:16px;
  font-weight:400;font-size:24px;line-height:140%;
  color:rgba(255,255,255,.42);text-align:center;max-width:560px;
}

/* Полоса загрузки графики. Живёт под кодом, пока едет .riv, и исчезает
   сама — человеку в зале про мегабайты знать незачем, но пустая пауза
   выглядит поломкой, а ползущая полоса — нет. */
#linkLoad{
  margin-top:52px;width:468px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  opacity:1;transition:opacity .8s ease;
}
#linkLoad.done{opacity:0}
#linkLoad .track{
  width:100%;height:2px;border-radius:2px;
  background:rgba(255,255,255,.12);overflow:hidden;
}
#linkLoad .fill{
  display:block;height:100%;width:0;
  background:rgba(255,255,255,.85);
  transition:width .2s linear;
}
#linkLoad .t{
  font-weight:400;font-size:17px;line-height:1;
  color:rgba(255,255,255,.3);
}

/* Обрыв связи. В эфире мигающих плашек быть не должно, поэтому метка
   маленькая, тусклая и появляется не сразу — см. LOST_AFTER в screen-link.js. */
#linkLost{
  position:absolute;left:24px;bottom:22px;z-index:6;
  display:flex;align-items:center;gap:9px;
  font:400 14px/1 'Inter Tight',Arial,sans-serif;
  color:rgba(255,255,255,.34);
  opacity:0;transition:opacity 1s ease;pointer-events:none;
}
#linkLost.on{opacity:1}
#linkLost i{
  width:7px;height:7px;border-radius:50%;
  background:#ff5a5a;display:block;
}