/* valdai.vidium.ru — страница просмотра по индивидуальной ссылке.
   Визуальный язык пакета broadcast2026: глубокий ультрамарин, пологие
   световые штрихи (~15°, вверх вправо), белый Arial Bold (docs/03). */

:root {
  --ink: #ffffff;
  --ink-2: rgba(255, 255, 255, .72);
  --accent: #34a3dc;           /* нижняя плоскость знака «Валдай» */
  --deep: #04124a;
  --pad: clamp(16px, 3vw, 40px);
  --gap: clamp(10px, 1.6vh, 20px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  font-family: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;
  color: var(--ink);
  background: var(--deep);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(var(--pad), env(safe-area-inset-top)) max(var(--pad), env(safe-area-inset-right))
           max(var(--pad), env(safe-area-inset-bottom)) max(var(--pad), env(safe-area-inset-left));
  gap: var(--gap);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Фон ---------- */

.bg {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background:
    radial-gradient(120% 90% at 8% 0%, #030b33 0%, rgba(3, 11, 51, 0) 55%),
    linear-gradient(162deg, #061a5c 0%, #0a2f96 38%, #0b56c4 72%, #1478d8 100%);
}
.bg__glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 45% at 85% 88%, rgba(90, 190, 255, .35), rgba(90, 190, 255, 0) 70%),
    radial-gradient(50% 35% at 20% 95%, rgba(60, 150, 240, .22), rgba(60, 150, 240, 0) 70%);
}
.bg__streaks {
  position: absolute;
  left: -50%; top: -20%; width: 200%; height: 140%;
  transform: rotate(-14deg);
  transform-origin: 50% 60%;
}
.bg__streaks i {
  position: absolute;
  left: 0; width: 100%;
  top: var(--y); height: var(--h);
  opacity: var(--o);
  filter: blur(var(--b));
  background: linear-gradient(90deg,
    rgba(150, 220, 255, 0) 0%,
    rgba(150, 220, 255, .9) 30%,
    rgba(255, 255, 255, 1) 45%,
    rgba(150, 220, 255, .8) 60%,
    rgba(150, 220, 255, 0) 90%);
  background-size: 60% 100%;
  background-repeat: no-repeat;
  animation: streak var(--d) linear infinite;
  animation-delay: var(--dl);
  will-change: background-position;
}
@keyframes streak {
  from { background-position: -80% 0; }
  to   { background-position: 180% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bg__streaks i { animation: none; background-position: 40% 0; }
}

/* ---------- Шапка ---------- */

.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  flex: 0 0 auto;
}
.brand { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); min-width: 0; }
.brand__logo { height: clamp(34px, 5.2vh, 56px); width: auto; display: block; flex: 0 0 auto; }
.brand__event {
  font-weight: 700;
  font-size: clamp(12px, 1.35vh + .2vw, 17px);
  line-height: 1.3;
  color: var(--ink);
  padding-left: clamp(12px, 2vw, 28px);
  border-left: 1px solid rgba(255, 255, 255, .35);
  min-width: 0;
}
.brand__event span { display: block; font-weight: 400; color: var(--ink-2); }

.lang {
  flex: 0 0 auto;
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(3, 14, 60, .35);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(6px);
}
.lang button {
  font: 700 14px/1 Arial, sans-serif;
  letter-spacing: .04em;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  min-width: 48px;
}
.lang button[aria-pressed="true"] { background: #fff; color: #0a2f96; }
.lang button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Плеер ---------- */

.stage {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  container-type: size;
}
.player {
  position: relative;
  width: min(100cqw, 100cqh * 16 / 9);
  aspect-ratio: 16 / 9;
  background: #020a2c;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0, 6, 40, .55), 0 0 0 1px rgba(255, 255, 255, .12);
}
/* Плеер выпущен на 2px за рамку, рамка (overflow: hidden) срезает лишнее. Размер плеера дробный,
   Chrome ставит чужой iframe на целые пиксели устройства — без запаса по краю просвечивает белая
   полоса в 1px (то сверху, то слева, в зависимости от размера окна). */
.player iframe {
  position: absolute; inset: -2px;
  width: calc(100% + 4px); height: calc(100% + 4px);
  border: 0; display: block;
  background: #020a2c;
}

.stub {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 6%;
  background:
    radial-gradient(80% 70% at 50% 40%, rgba(20, 90, 200, .45), rgba(2, 10, 44, 0) 70%),
    #020a2c;
  text-align: center;
}
.stub[hidden] { display: none; }
.stub__card { max-width: 34em; }
.stub__title {
  font-weight: 700;
  font-size: clamp(17px, 2.6cqw, 30px);
  line-height: 1.25;
}
.stub__text {
  margin-top: .7em;
  color: var(--ink-2);
  font-size: clamp(14px, 1.7cqw, 19px);
  line-height: 1.45;
}
.stub__btn {
  margin-top: 1.4em;
  font: 700 clamp(14px, 1.6cqw, 18px)/1 Arial, sans-serif;
  color: #0a2f96;
  background: #fff;
  border: 0;
  border-radius: 999px;
  padding: .9em 1.8em;
  cursor: pointer;
}
.stub__btn[hidden] { display: none; }
.stub__btn:hover { background: #e6f3ff; }
.stub__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.spinner {
  width: 42px; height: 42px; margin: 0 auto;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .2);
  border-top-color: #fff;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Подпись сессии ---------- */

.caption {
  flex: 0 0 auto;
  display: flex; align-items: baseline; gap: 14px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  min-height: 2.6em;
}
.caption__label {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: clamp(11px, 1.2vh + .15vw, 14px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(3, 14, 60, .45);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  padding: .45em .9em;
  white-space: nowrap;
}
.caption__label.is-live { background: #d7263d; border-color: #d7263d; }
.caption__label.is-live::before {
  content: ""; display: inline-block;
  width: .55em; height: .55em; margin-right: .5em;
  border-radius: 50%; background: #fff;
  animation: blink 1.6s ease-in-out infinite;
  vertical-align: .05em;
}
@keyframes blink { 50% { opacity: .25; } }
.caption__title {
  font-weight: 700;
  font-size: clamp(14px, 1.9vh + .2vw, 22px);
  line-height: 1.3;
  text-wrap: balance;
}
.caption__title small {
  display: block;
  font-weight: 400;
  font-size: .78em;
  color: var(--ink-2);
  margin-top: .2em;
}
.caption:empty, .caption.is-empty { visibility: hidden; }

/* ---------- Узкие экраны ---------- */

@media (max-width: 760px) {
  .brand__event { display: none; }
  .caption { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 760px) and (orientation: portrait) {
  /* На телефоне вертикально плеер во всю ширину, подпись сразу под ним. */
  .stage { flex: 0 0 auto; container-type: inline-size; }
  .player { width: 100%; }
  .stub__title { font-size: 17px; }
  .stub__text { font-size: 14px; }
  .stub__btn { font-size: 15px; }
}
@media (max-height: 480px) and (orientation: landscape) {
  /* Телефон горизонтально: шапку и подпись ужимаем, плеер главный. */
  body { --pad: 10px; --gap: 8px; }
  .brand__logo { height: 28px; }
  .brand__event { display: none; }
  .lang button { padding: 6px 12px; font-size: 12px; min-width: 40px; }
  .caption { min-height: 0; }
  .caption__title { font-size: 13px; }
  .caption__title small { display: none; }
}