/* ═══ TV MODE ═══════════════════════════════════════════════════
   Стили активируются классом body.tv-mode (выставляется автоматом
   по UA, либо вручную через ?tv=1 в URL для тестов на десктопе).

   Принципы:
   1. Всё крупнее ×1.3 — юзер смотрит с 2-3м, мелочи не видит.
   2. Hover-эффекты ОТРУБАЕМ — на пульте hover не существует, всё что
      раньше реагировало на :hover должно реагировать на :focus.
   3. Заметный focus-ring — золотая рамка 4px + scale, чтобы было видно
      какой элемент сейчас «выбран» пультом.
   4. Tap-зоны ≥48px по высоте (Android TV рекомендация).
   5. Скрываем мобильно-специфичные кнопки (бургер-меню итд).
═══════════════════════════════════════════════════════════════════ */

body.tv-mode {
  /* 2026-06-17 (T1): 17px → 22px. Стандарт TV — 24-28px для body (юзер на
     2-3 метра). 17px было слишком мелким, особенно на 4K. */
  font-size: 22px;
  /* 2026-06-17 (T2): safe-area / overscan. Smart TV обрезают 5-10% по краям.
     40px padding на 1920×1080 = ~2% — баланс между запасом и не-урезанием контента.
     max-width 1840px центрирует на ультрашироких / проекторах 21:9. */
  padding: 40px;
  max-width: 1840px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ── Скрываем мобильный бургер на ТВ — у пульта всегда «хватает рук» ── */
body.tv-mode #mobile-menu-btn { display: none !important; }

/* ── Focus-ring: основной паттерн для всех интерактивных элементов ── */
body.tv-mode :focus,
body.tv-mode :focus-visible {
  /* 2026-06-17 (T3): adaptive focus-ring — на 4K 4px не виден с дивана.
     max(4px, 0.2vw) даёт ~7-8px на 3840×2160, ~4-5px на 1920×1080. */
  outline: max(4px, 0.2vw) solid var(--gold) !important;
  outline-offset: max(2px, 0.1vw) !important;
  box-shadow: 0 0 0 max(8px, 0.4vw) rgba(201, 168, 76, 0.22) !important;
  z-index: 5;
  position: relative;
}

/* На карточках добавляем scale + поднятие — особенно заметно на сетке */
body.tv-mode .card:focus,
body.tv-mode .card:focus-visible,
body.tv-mode .aig-card:focus,
body.tv-mode .aig-card:focus-visible,
body.tv-mode .blog-card:focus,
body.tv-mode .blog-card:focus-visible,
body.tv-mode .shop-card:focus,
body.tv-mode .shop-card:focus-visible {
  transform: scale(1.08);
  transition: transform 0.18s ease;
  z-index: 10;
}

/* ── Hero: больше воздуха, заголовок крупнее ── */
body.tv-mode .hero h1 {
  font-size: clamp(96px, 12vw, 180px) !important;
  line-height: 0.9;
}
body.tv-mode .hero p {
  font-size: 22px !important;
  max-width: 720px;
  margin: 18px auto;
}
body.tv-mode .hero-ai-cta {
  font-size: 18px !important;
  padding: 18px 44px !important;
  min-height: 60px;
}

/* ── Хедер: крупнее, кнопки nav жирнее ── */
body.tv-mode header {
  padding: 18px 32px !important;
  min-height: 80px;
}
body.tv-mode .logo {
  font-size: 32px !important;
}
body.tv-mode nav .nb,
body.tv-mode nav button {
  font-size: 15px !important;
  padding: 14px 22px !important;
  min-height: 52px;
  letter-spacing: 2px;
}
body.tv-mode .auth-btn,
body.tv-mode .theme-btn,
body.tv-mode .cart-header-btn,
body.tv-mode .notif-btn {
  min-width: 52px;
  min-height: 52px;
  font-size: 15px !important;
}

/* ── Карточки фильмов: больше, читаемее ── */
body.tv-mode .aig-card {
  min-height: 360px;
}
body.tv-mode .aig-card-title {
  font-size: 15px !important;
}
body.tv-mode .aig-card-meta {
  font-size: 12px !important;
}

/* ── Поиск в шапке: крупнее ── */
body.tv-mode .hsearch input {
  font-size: 16px !important;
  padding: 14px 18px !important;
  min-height: 52px;
}

/* ── Hover-only фишки выключаем, делаем focus-only ── */
@media (hover: none), (pointer: coarse) {
  body.tv-mode .nb-drop:hover .nb-drop-menu { display: none; }
}
body.tv-mode .nb-drop-menu {
  /* На ТВ откроем dropdown по клику/Enter, hover не работает */
  display: none;
}
body.tv-mode .nb-drop:focus-within .nb-drop-menu,
body.tv-mode .nb-drop.tv-open .nb-drop-menu {
  display: block;
}

/* ── Кнопки в плеере (controls): крупные tap-зоны ── */
body.tv-mode #p-play-btn,
body.tv-mode #p-vol-btn,
body.tv-mode #pqbtn,
body.tv-mode .pclose {
  min-width: 56px;
  min-height: 56px;
  font-size: 20px !important;
}
body.tv-mode #p-prog-wrap {
  height: 12px !important;  /* толще progress-bar — легче целиться */
}
body.tv-mode #p-time {
  font-size: 16px !important;
}

/* ── Списки (профиль, блог, магазин): крупнее текст ── */
body.tv-mode .blog-card-title,
body.tv-mode .shop-card h3 {
  font-size: 18px !important;
  line-height: 1.35;
}
body.tv-mode .blog-card-sub,
body.tv-mode .shop-card .desc {
  font-size: 13px !important;
}

/* ── Footer / прочая мелочь — крупнее ── */
body.tv-mode footer {
  font-size: 13px !important;
}

/* ── Скрываем тонкие подсказки и мобильно-специфичный UI ── */
body.tv-mode .mobile-only-nav { display: none !important; }
body.tv-mode .pwa-install-btn { display: none !important; }

/* ── Cookie-banner на ТВ — крупнее, чтобы можно было прочитать ── */
body.tv-mode #cookie-banner {
  padding: 28px 36px !important;
  font-size: 16px !important;
}
body.tv-mode #cookie-banner button {
  padding: 14px 28px !important;
  font-size: 14px !important;
  min-height: 52px;
}

/* ── Подсказка-плашка «нажмите OK» — появится сверху при первом заходе ── */
.tv-hint-overlay {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 15, 30, 0.95);
  border: 1px solid var(--gold);
  color: #fff;
  padding: 14px 28px;
  font-size: 14px;
  letter-spacing: 1px;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.tv-hint-overlay.show { opacity: 1; }

/* ── Полноэкранная справка по «i» / F1 ──────────────────────── */
.tv-help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.tv-help-overlay.show { opacity: 1; pointer-events: auto; }
.tv-help-card {
  background: #0a0a14;
  border: 2px solid var(--gold);
  padding: 50px 60px;
  max-width: 720px;
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  color: #fff;
}
.tv-help-card h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 42px;
  letter-spacing: 4px;
  color: var(--gold);
  margin: 0 0 32px;
  text-align: center;
}
.tv-help-card dl {
  display: grid;
  grid-template-columns: minmax(180px, max-content) 1fr;
  gap: 20px 32px;
  font-size: 20px;
  line-height: 1.4;
  margin: 0;
}
.tv-help-card dt {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 1px;
  white-space: nowrap;
}
.tv-help-card dd {
  margin: 0;
  color: #e8e4f0;
}
.tv-help-foot {
  margin: 36px 0 0;
  text-align: center;
  font-size: 14px;
  color: #888;
  letter-spacing: 2px;
  text-transform: uppercase;
}