/* Без 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: 100%; 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: #ffb547; }
.link-form button { flex: 0 0 auto; padding: 16px 28px; font: inherit; font-size: 17px; font-weight: 600; color: #1a1205;
  background: #ffb547; border: 0; border-radius: 12px; cursor: pointer; margin-bottom: 8px; }
.link-form button:focus, .link-form button:hover { background: #ffc871; outline: 3px solid rgba(255,181,71,.35); }
.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: #ffb547; 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: #1a1205; background: #ffb547;
  border: 0; border-radius: 6vh; cursor: pointer; }
.intro-play:focus { outline: .6vh solid rgba(255,181,71,.4); }
.intro-play:disabled { opacity: .4; }

/* Реклама */
.ad-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; display: flex; align-items: center;
  background: #0d0f15; border-top: 1px solid #1d2130; padding: 0 16px; z-index: 4; }
.ad-slot { flex: 1; height: 70px; display: flex; align-items: center; justify-content: center; position: relative;
  border: 1px dashed #2a3048; border-radius: 8px; color: #6b7290; font-size: 15px; overflow: hidden; }
.ad-label { position: absolute; left: 8px; top: 4px; font-size: 11px; color: #555c75; }
.ad-cta { flex: 0 0 auto; margin-left: 16px; color: #c3c8d6; font-size: 15px; }
@media (max-width: 700px) { .ad-cta { display: none; } }

/* ------------------------------ Меню папок на ТВ ------------------------------ */
.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: #ffb547; }
.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: #ffb547; color: #fff; }
.menu-item.playing::before { content: "▶ "; color: #ffb547; }
.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: #ffb547; }
.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; }

/* Часы на экране телевизора (настройка в мини-приложении) */
.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: fixed; top: 0; left: 0; right: 0; bottom: 0; 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,150,60,.42) 0%, rgba(255,150,60,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: 5vh; height: 5vh; margin-right: 1.4vh; border-radius: 1.2vh; }

.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, #ffb547, #ff7a59 60%, #7b6cff);
  box-shadow: 0 3vh 10vh rgba(255,140,80,.25), 0 0 0 1vh rgba(255,181,71,.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: #ffb547; }
.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: #1a1205; background: #ffb547; }
.pair-steps em { font-style: normal; color: #ffb547; }
.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(255,181,71,.12);
  border: .3vh solid rgba(255,181,71,.5); color: #ffb547; 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; right: 0; bottom: 0; width: 2px; height: 2px; opacity: .01; pointer-events: none; }