/* Без inset/flex-gap: браузеры телевизоров бывают на старом Chromium. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #07080c; color: #f2f2f5;
  font-family: Manrope, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.hidden { display: none !important; }
.error { color: #ff8a80; min-height: 1.4em; white-space: pre-line; }

/* ------------------------------ Стартовая ------------------------------ */
.landing { min-height: 0; display: flex; align-items: center; justify-content: center; padding: 32px 16px;
  background: radial-gradient(ellipse at top, #1b2340 0%, #07080c 65%); }
.landing-inner { width: 100%; max-width: 720px; text-align: center; }
.logo { font-size: 64px; }
h1 { font-size: 44px; margin: 8px 0 12px; letter-spacing: .5px; }
.lead { font-size: 19px; color: #c3c8d6; line-height: 1.5; margin: 0 0 28px; }
.link-form { display: flex; flex-wrap: wrap; }
.link-form input { flex: 1 1 320px; min-width: 0; padding: 16px 18px; font: inherit; font-size: 17px; color: #fff;
  background: #10141f; border: 2px solid #2a3350; border-radius: 12px; outline: none; margin: 0 8px 8px 0; }
.link-form input:focus { border-color: #d47dff; }
.link-form button { flex: 0 0 auto; padding: 16px 28px; font: inherit; font-size: 17px; font-weight: 600; color: #1a1205;
  color: #fff; background: linear-gradient(135deg, #b45cff, #ff2d7a); border: 0; border-radius: 12px; cursor: pointer; margin-bottom: 8px; }
.link-form button:focus, .link-form button:hover { filter: brightness(1.08); outline: 3px solid rgba(212,125,255,.4); }
.steps { text-align: left; color: #c3c8d6; line-height: 1.6; margin: 24px auto; max-width: 600px; padding-left: 22px; }
.note { color: #8a90a2; font-size: 15px; line-height: 1.5; }

/* -------------------------------- Плеер -------------------------------- */
.player { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #000; overflow: hidden; }
.stage { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; cursor: none; }
.player.with-ads .stage { bottom: 90px; }
.player.pointer .stage { cursor: default; }

.layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s ease-in-out; overflow: hidden; }
.layer.visible { opacity: 1; }
.backdrop { position: absolute; top: -5%; left: -5%; width: 110%; height: 110%; background-size: cover; background-position: center;
  filter: blur(28px) brightness(.45) saturate(1.2); }
.photo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;
  transform-origin: 50% 50%; will-change: transform; }
.photo.cover { object-fit: cover; }

.title-card { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 0 8%;
  background: radial-gradient(ellipse at center, rgba(20,22,32,.85) 0%, rgba(0,0,0,.96) 70%);
  opacity: 0; transition: opacity 1.4s ease-in-out; pointer-events: none; }
.title-card.visible { opacity: 1; }
.t-main { font-size: 6.5vh; font-weight: 300; letter-spacing: .06em; transform: translateY(12px); transition: transform 3s ease-out; }
.t-sub { font-size: 2.6vh; color: #ff9cc6; margin-top: 2vh; letter-spacing: .25em; text-transform: uppercase; }
.title-card.visible .t-main { transform: translateY(0); }

.caption { position: absolute; left: 4vw; bottom: 4vh; font-size: 2.3vh; color: rgba(255,255,255,.85);
  text-shadow: 0 2px 10px rgba(0,0,0,.9); transition: opacity .8s; }
.badge { position: absolute; left: 50%; top: 4vh; transform: translateX(-50%); padding: 1vh 2.4vh; font-size: 2.4vh;
  background: rgba(0,0,0,.6); border-radius: 4vh; opacity: 0; transition: opacity .4s; white-space: nowrap; }
.badge.show { opacity: 1; }
.help { position: absolute; right: 3vw; bottom: 3vh; font-size: 1.8vh; color: rgba(255,255,255,.7); background: rgba(0,0,0,.5);
  padding: .8vh 1.6vh; border-radius: 1vh; opacity: 0; transition: opacity .5s; }
.player.pointer .help { opacity: 1; }

/* Заставка перед стартом */
.intro { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #171b2b 0%, #000 75%); z-index: 5; transition: opacity .8s; }
.intro.gone { opacity: 0; pointer-events: none; }
.intro-inner { text-align: center; padding: 0 16px; }
.intro-title { font-size: 7vh; font-weight: 300; letter-spacing: .05em; }
.intro-sub { color: #aab0c0; font-size: 2.6vh; margin: 1.5vh 0 4vh; }
.intro-play { font: inherit; font-size: 3vh; font-weight: 600; padding: 1.6vh 5vh; color: #fff; background: linear-gradient(135deg, #b45cff, #ff2d7a);
  border: 0; border-radius: 6vh; cursor: pointer; }
.intro-play:focus { outline: .6vh solid rgba(255,210,228,.55); }
.intro-play:disabled { opacity: .4; }


/* ------------------------------ Меню папок на ТВ ------------------------------ */
.menu { position: absolute; top: 0; right: 0; bottom: 0; width: 34vw; min-width: 320px; background: rgba(8,10,16,.92);
  padding: 6vh 3vw; z-index: 6; display: flex; flex-direction: column; }
.menu-title { font-size: 3.4vh; margin-bottom: 3vh; color: #e2c4ff; }
.menu-list { flex: 1; overflow: hidden; }
.menu-item { font-size: 2.8vh; padding: 1.6vh 2vh; border-radius: 1.2vh; margin-bottom: .8vh; color: #dfe3ec;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: .3vh solid transparent; cursor: pointer; }
.menu-item small { color: #8a90a2; font-size: 2.2vh; margin-left: 1vh; }
.menu-item.active { background: #1f2638; border-color: #ff2d7a; color: #fff; }
.menu-item.playing::before { content: "▶ "; color: #ff7ab0; }
.menu-hint { font-size: 1.9vh; color: #8a90a2; margin-top: 2vh; }

/* Главная: основной сценарий через бота */
.steps.big { font-size: 18px; }
.steps.big li { margin-bottom: 14px; }
.bot-button { display: inline-block; margin: 10px 0 2px; padding: 12px 22px; border-radius: 12px; background: #2aabee;
  color: #fff; font-weight: 600; text-decoration: none; }
.bot-button:hover, .bot-button:focus { background: #45b8f2; }
.sub-h { font-size: 20px; color: #c3c8d6; margin: 36px 0 14px; font-weight: 500; }

/* Страница политики */
.doc-page { background: #0b0d14; }
.doc { max-width: 820px; margin: 0 auto; padding: 32px 16px 64px; line-height: 1.6; color: #dfe3ec; font-size: 16px; }
.doc h1 { font-size: 32px; margin: 8px 0; }
.doc h2 { font-size: 21px; margin: 28px 0 8px; color: #d47dff; }
.doc a { color: #7cc4ff; }
.doc-back { text-decoration: none; }
.doc-meta { color: #8a90a2; font-size: 14px; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto; }
.doc-table th, .doc-table td { border: 1px solid #262c3e; padding: 8px 10px; text-align: left; vertical-align: top; }
.doc-table th { background: #141a28; }
.site-footer { margin-top: 32px; font-size: 14px; color: #6b7290; }
.site-footer a { color: #8a90a2; }

/* Часы на экране телевизора (настройка в мини-приложении) */
.tag-label { position: absolute; left: 3vw; top: 4vh; font-size: 2vh; color: rgba(255,255,255,.75); background: rgba(0,0,0,.45);
  padding: .6vh 1.4vh; border-radius: 3vh; letter-spacing: .02em; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clock-tv { position: absolute; right: 4vw; top: 4vh; font-size: 5vh; font-weight: 300; color: rgba(255,255,255,.9);
  text-shadow: 0 2px 12px rgba(0,0,0,.9); letter-spacing: .03em; }

/* ------------------------- Телевизор: экран привязки (QR) ------------------------- */
.pairing { position: relative; min-height: 100vh; overflow: hidden; background: #06070d;
  display: flex; align-items: center; justify-content: center; padding: 6vh 6vw; }
/* Мягкое «северное сияние» — анимируется только transform, это дёшево для телевизора */
.aurora { position: absolute; width: 90vh; height: 90vh; border-radius: 50%; opacity: .55; will-change: transform; }
.aurora.a1 { top: -30vh; left: -15vh; background: radial-gradient(circle, rgba(64,92,255,.55) 0%, rgba(64,92,255,0) 65%);
  animation: drift1 18s ease-in-out infinite alternate; }
.aurora.a2 { bottom: -35vh; right: -10vh; background: radial-gradient(circle, rgba(255,45,122,.36) 0%, rgba(255,45,122,0) 65%);
  animation: drift2 22s ease-in-out infinite alternate; }
@keyframes drift1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(25vw, 12vh) scale(1.15); } }
@keyframes drift2 { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-22vw, -10vh) scale(.95); } }

.pair-brand { position: absolute; top: 5vh; left: 5vw; display: flex; align-items: center; font-weight: 800;
  font-size: 3vh; letter-spacing: .02em; color: #fff; z-index: 1; }
.pair-brand img { width: 7vh; height: 7vh; margin-right: 1.6vh; }

.pair-box { position: relative; z-index: 1; display: flex; align-items: center; max-width: 165vh; }
.pair-left { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; }
.pair-qr-wrap { padding: 1.2vh; border-radius: 4vh; background: linear-gradient(135deg, #b45cff, #ff2d7a);
  box-shadow: 0 3vh 10vh rgba(255,45,122,.25), 0 0 0 1vh rgba(180,92,255,.08); }
.pair-qr { width: 46vh; height: 46vh; background: #fff; border-radius: 3vh; padding: 2.2vh; }
.pair-qr svg { width: 100%; height: 100%; display: block; }
.pair-qr-cap { margin-top: 2.4vh; font-size: 2.4vh; color: #c9cfdd; font-weight: 600; }

.pair-text { margin-left: 8vh; color: #fff; max-width: 82vh; }
.pair-text h1 { font-size: 7.2vh; line-height: 1.08; font-weight: 800; margin: 0 0 2.6vh; letter-spacing: -.01em; }
.pair-text .accent { color: #ff2d7a; }
.pair-lead { font-size: 2.9vh; line-height: 1.45; color: #c9cfdd; margin: 0 0 4vh; }
.pair-steps { list-style: none; padding: 0; margin: 0 0 4vh; }
.pair-steps li { display: flex; align-items: center; font-size: 2.8vh; font-weight: 600; margin-bottom: 2vh; color: #eef1f6; }
.pair-steps b { flex: 0 0 auto; width: 5.2vh; height: 5.2vh; border-radius: 50%; margin-right: 2.2vh; display: flex;
  align-items: center; justify-content: center; font-size: 2.6vh; font-weight: 800; color: #fff; background: linear-gradient(135deg, #b45cff, #ff2d7a); }
.pair-steps em { font-style: normal; color: #ff9cc6; }
.pair-safe { font-size: 2.2vh; color: #dfe4f0; margin: -2vh 0 3vh; line-height: 1.5; }
.pair-safe b { color: #d47dff; font-weight: 600; }
.author-card { display: flex; gap: 16px; align-items: flex-start; background: #141a28; border-radius: 16px; padding: 16px; }
.author-card img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; }
.author-card p { margin: 0 0 8px; }
.author-name { font-weight: 700; color: #fff; }
@media (max-width: 520px) { .author-card { flex-direction: column; } }
.pair-alt { font-size: 2.3vh; color: #9aa2b6; line-height: 1.6; }
.pair-alt b { color: #dfe4f0; font-weight: 600; }
.pair-code { display: inline-block; margin-top: 1.4vh; padding: .6vh 2.8vh; border-radius: 2vh; background: rgba(180,92,255,.16);
  color: #e2c4ff; font-weight: 800; letter-spacing: .14em; font-size: 7vh; line-height: 1.2; }
.pair-status { margin-top: 3vh; font-size: 2.1vh; color: #7f879b; display: flex; align-items: center; }
.pulse { width: 1.3vh; height: 1.3vh; border-radius: 50%; background: #3ddc84; margin-right: 1.2vh; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

/* Окно «Подключить ещё телефон» на телевизоре */
.join { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 7; display: flex; align-items: center; justify-content: center;
  background: rgba(6,7,13,.97); }
.join-box { display: flex; align-items: center; max-width: 150vh; padding: 0 6vw; }
.join-qr { width: 40vh; height: 40vh; }
.join-text { margin-left: 7vh; color: #fff; max-width: 70vh; }
.join-text h2 { font-size: 5.4vh; font-weight: 800; margin: 0 0 3vh; line-height: 1.15; }
.join-text p { font-size: 2.8vh; line-height: 1.5; color: #c9cfdd; margin: 0 0 2vh; }
.join-text .join-hint { font-size: 2.1vh; color: #7f879b; margin-top: 3vh; }

/* Невидимое видео, которое не даёт телевизору уйти в заставку */
/* Во весь экран ПОД плеером: крошечное или прозрачное видео браузер ТВ считает невидимым и ставит на паузу,
   а закрытое сверху фотографиями — нет. Сам ролик чёрный, поэтому его не видно. */
.keepawake { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: -1; pointer-events: none; background: #000; }
.logo-img { width: 96px; height: 96px; display: block; margin: 0 auto 6px; }
.pair-tagline { font-size: 2vh; font-weight: 600; color: #9aa2b6; letter-spacing: .01em; margin-top: .3vh; }

/* «кино» в заголовке экрана привязки: широкий шрифт и градиент как у кнопки ▶ в логотипе */
.pair-text .accent, .pair-phone .accent { font-family: Unbounded, Manrope, sans-serif; font-weight: 800; font-size: 1.05em; letter-spacing: .03em;
  color: #ff2d7a; background: linear-gradient(100deg, #b45cff 0%, #ff2d7a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: .04em; }

/* Заставка бесплатной версии — каждый 10-й кадр. Полный экран, плавно появляется, ничего не стоит на месте долго. */
.ad-card { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 4; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 20% 15%, rgba(180,92,255,.38), rgba(180,92,255,0) 55%),
              radial-gradient(ellipse at 85% 90%, rgba(255,45,122,.32), rgba(255,45,122,0) 55%), #0b0d16;
  opacity: 0; pointer-events: none; transition: opacity 1.2s ease; }
.ad-card.visible { opacity: 1; }
.ad-box { display: flex; align-items: center; max-width: 160vh; padding: 0 6vw; transform: translateY(2vh); transition: transform 1.6s ease; }
.ad-card.visible .ad-box { transform: translateY(0); }
.ad-text { margin-right: 8vh; color: #fff; max-width: 78vh; }
.ad-brand { display: flex; align-items: center; gap: 2.4vh; margin-bottom: 3.2vh; }
.ad-logo { width: 17vh; height: 17vh; display: block; border-radius: 3.6vh; box-shadow: 0 1.5vh 5vh rgba(180,92,255,.35); }
.ad-kicker { font-family: Unbounded, Manrope, sans-serif; font-size: 4.4vh; font-weight: 800; color: #fff; letter-spacing: .01em; }
.ad-text h2 { font-family: Unbounded, Manrope, sans-serif; font-size: 6vh; font-weight: 800; line-height: 1.1; margin: 0 0 2.6vh;
  background: linear-gradient(90deg, #ffffff, #ffd2e4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ad-text p { font-size: 2.8vh; line-height: 1.5; color: #c9cfdd; margin: 0 0 2vh; }
.ad-text .ad-price { font-size: 3.6vh; color: #fff; }
.ad-text .ad-price b { color: #ff7ab0; }
.ad-text .ad-gift { font-size: 2.4vh; color: #9aa2b6; margin-top: 3vh; }
.ad-qr { width: 40vh; height: 40vh; }
.ad-card .pair-qr-wrap { background: linear-gradient(135deg, #b45cff, #ff2d7a); }

/* Тарифы на главной */
.tariffs { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.tariff { flex: 1 1 180px; display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 14px; background: #151826; border: 1px solid #262b3e; text-align: left; }
.tariff b { font-size: 16px; }
.tariff .t-price { font-size: 26px; font-weight: 800; color: #fff; }
.tariff span { color: #9aa2b6; font-size: 14px; line-height: 1.45; }
.tariff.best { border-color: #b45cff; background: linear-gradient(135deg, rgba(180,92,255,.18), rgba(255,45,122,.12)), #151826; }
.site-footer p { margin: 6px 0; line-height: 1.5; }


/* Одна страница для всех: на телевизоре — только первый экран; на телефоне — кнопка бота и описание ниже */
.pair-mobile { display: none; }
.sub-h.first { margin-top: 0; }
.landing { background: #07080c; border-top: 1px solid #1a1e2c; }
@media (max-width: 820px), (orientation: portrait) {
  .pairing { padding: 88px 18px 36px; align-items: flex-start; }
  .pair-brand { top: 22px; left: 18px; font-size: 18px; }
  .pair-brand img { width: 40px; height: 40px; margin-right: 10px; }
  .pair-tagline { font-size: 12px; }
  .pair-box { flex-direction: column; width: 100%; }
  .pair-qr { width: min(62vw, 300px); height: min(62vw, 300px); padding: 12px; border-radius: 18px; }
  .pair-qr-wrap { padding: 6px; border-radius: 22px; }
  .pair-qr-cap { font-size: 14px; margin-top: 12px; }
  .pair-text { margin: 26px 0 0; text-align: center; max-width: 520px; }
  .pair-text h1 { font-size: 30px; margin-bottom: 12px; }
  .pair-lead { font-size: 16px; margin-bottom: 18px; }
  .pair-steps { display: none; }
  .pair-alt { font-size: 14px; }
  .pair-code { font-size: 34px; padding: 4px 16px; border-radius: 12px; border-width: 2px; margin-top: 8px; }
  .pair-status { justify-content: center; font-size: 13px; margin-top: 12px; }
  .pulse { width: 9px; height: 9px; margin-right: 8px; }
  .pair-mobile { display: block; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }
  .pair-mobile p { color: #c9cfdd; font-size: 15px; margin: 0 0 12px; }
  .pair-bot-btn { display: block; padding: 15px; border-radius: 14px; font-weight: 800; font-size: 17px; color: #fff; text-decoration: none;
    background: linear-gradient(135deg, #b45cff, #ff2d7a); }
  .pair-more { display: inline-block; margin-top: 14px; color: #d47dff; font-weight: 600; text-decoration: none; }
}

/* Экранные кнопки: видны, пока двигается курсор пульта (Magic Remote, Hisense) */
.tv-controls { position: absolute; left: 50%; bottom: 6vh; transform: translateX(-50%); z-index: 6; display: flex; gap: 2vh;
  opacity: 0; pointer-events: none; transition: opacity .3s; }
.player.pointer .tv-controls { opacity: 1; pointer-events: auto; }
.tv-controls button { width: 11vh; height: 11vh; border-radius: 50%; border: 0; padding: 0;
  background: rgba(10,12,20,.72); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.tv-controls button:hover, .tv-controls button:focus { background: linear-gradient(135deg, #b45cff, #ff2d7a); outline: none; }

/* Подсказки зон для курсора: слева — назад, справа — дальше */
.zone-hint { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; font-size: 14vh; line-height: 1; color: rgba(255,255,255,.55);
  text-shadow: 0 0 3vh rgba(0,0,0,.8); opacity: 0; pointer-events: none; transition: opacity .3s; }
.zone-hint.left { left: 3vw; } .zone-hint.right { right: 3vw; }
.player.pointer .zone-hint { opacity: 1; }

/* Фирменные цвета на экране ТВ вместо оранжевого: градиент логотипа (сиреневый → малиновый) */
.intro-play { color: #fff; background: linear-gradient(135deg, #b45cff, #ff2d7a); box-shadow: 0 1.2vh 4vh rgba(255,45,122,.35); font-weight: 700; }
.intro-play:focus { outline: .6vh solid rgba(255,210,228,.55); outline-offset: .4vh; }
.t-sub { color: #ff9cc6; }
.menu-title { color: #e2c4ff; }
.menu-item.active { border-color: #ff2d7a; }
.menu-item.playing::before { color: #ff7ab0; }

/* Значки на ТВ: только заливка */
svg.i { width: 1.1em; height: 1.1em; fill: currentColor; vertical-align: -.18em; }
.tv-controls svg.i { width: 4.6vh; height: 4.6vh; }
.intro-play svg.i { margin-right: .45em; }
.ad-gift svg.i { margin-right: .4em; fill: #ff7ab0; }

/* Телефон: по размеру экрана, не по браузеру (телевизоры всегда шире 520 и выше 450 точек).
   Вместо QR — объяснение «откройте на телевизоре» и кнопка бота. */
.pair-phone { display: none; }
@media (max-width: 520px), (max-height: 450px) {
  .pair-box { display: none; }
  .pairing { padding: 84px 18px 32px; align-items: flex-start; }
  .pair-phone { display: block; position: relative; z-index: 1; width: 100%; max-width: 460px; margin: 0 auto; text-align: left; color: #fff; }
  .pp-badge { display: inline-block; padding: 7px 12px; border-radius: 999px; background: rgba(180,92,255,.18); color: #e2c4ff;
    font-size: 13px; font-weight: 700; margin-bottom: 14px; }
  .pair-phone h1 { font-size: 28px; line-height: 1.12; font-weight: 800; margin: 0 0 10px; }
  .pp-lead { font-size: 15px; line-height: 1.45; color: #c9cfdd; margin: 0 0 18px; }
  .pp-steps { list-style: none; padding: 0; margin: 0 0 20px; }
  .pp-steps li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.4; font-weight: 600; margin-bottom: 12px; color: #eef1f6; }
  .pp-steps b { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #b45cff, #ff2d7a); }
  .pp-steps em { font-style: normal; color: #ff9cc6; }
  .pair-phone .pair-bot-btn { display: block; text-align: center; padding: 15px; border-radius: 14px; font-weight: 800; font-size: 17px;
    color: #fff; text-decoration: none; background: linear-gradient(135deg, #b45cff, #ff2d7a); }
  .pp-note { font-size: 13px; color: #9aa2b6; margin: 10px 0 0; text-align: center; }
  .pair-phone .pair-more { display: block; text-align: center; margin-top: 16px; color: #d47dff; font-weight: 600; text-decoration: none; }
}