/* ═══════════════════════════════════════════════════════════════════════════
   KRANIUM WATCH — TV-läge (10-foot UI)
   Aktiveras av tv-mode.js när användaren surfar från en TV-browser:
   Tizen/WebOS/Android TV/PlayStation eller viewport ≥1600px + touchlöst.
   Typiskt TV-OS förväntar mig stor text (3m-läsavstånd), tydligt fokus-läge
   (D-pad/Enter), och större ytor. Samma DOM — bara omstämning.
   ═══════════════════════════════════════════════════════════════════════ */

html.tv-mode {
  font-size: 20px; /* rem-skalning av ALLA texter med em-enhet i style.css */
}

html.tv-mode body { background: #000; }

/* ─── Topnav: bort med sök-fält och dropdown-in ihopslängd — större länkar ── */
html.tv-mode .topnav { height: 84px; background: linear-gradient(180deg, rgba(0,0,0,.88), transparent); }
html.tv-mode .topnav-inner { padding: 0 42px; height: 84px; }
html.tv-mode .brand-mark { width: 44px; height: 44px; }
html.tv-mode .brand-word { display: inline; font-size: 22px; }
html.tv-mode .main-nav { gap: 18px; }
html.tv-mode .nav-link { font-size: 20px; padding: 14px 18px; border-radius: 10px; }
html.tv-mode .nav-link.active { background: rgba(168,85,247,.18); }
/* fokus (D-pad) — granat-glow istället för outline */
html.tv-mode .nav-link:focus-visible,
html.tv-mode .media-card:focus-visible,
html.tv-mode .btn:focus-visible,
html.tv-mode .hero-play:focus-visible,
html.tv-mode .provider-auto:focus-visible,
html.tv-mode .provider-file:focus-visible,
html.tv-mode .dl-chip:focus-visible,
html.tv-mode .ep-card:focus-visible,
html.tv-mode .ep-tab:focus-visible,
html.tv-mode .player-btn:focus-visible,
html.tv-mode .settings-item:focus-visible,
html.tv-mode .pl-card:focus-visible,
html.tv-mode .pl-pick-item:focus-visible,
html.tv-mode select:focus-visible,
html.tv-mode button:focus-visible,
html.tv-mode a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(168,85,247,.85), 0 0 24px rgba(168,85,247,.35);
  border-radius: 10px;
}

/* ─── Hero: 3m-vy ─────────────────────────────────────────────────────────── */
html.tv-mode .hero { height: 52vh; min-height: 440px; }
html.tv-mode .hero-content { max-width: 900px; padding-left: 64px; }
html.tv-mode .hero-title { font-size: 4.4vmax !important; line-height: 1.08; }
html.tv-mode .hero-overview { font-size: 20px; max-width: 640px; }
html.tv-mode .hero-play, html.tv-mode .btn { font-size: 19px; padding: 15px 34px; border-radius: 12px; }

/* ─── Film-rader: större kort, luftig eftersläppning ─────────────────────── */
html.tv-mode .row-title { font-size: 24px; padding-left: 64px; }
html.tv-mode .row-scroller { padding-left: 64px; padding-right: 64px; gap: 22px; }
html.tv-mode .media-card { width: 264px; border-radius: 14px; }
html.tv-mode .media-card:hover { transform: scale(1.09); }
html.tv-mode .media-card-title { font-size: 16px; }
html.tv-mode .card-badge { font-size: 11.5px; }
html.tv-mode .row-group { margin-bottom: 42px; }

/* ─── Sök + playlists: kolumnstöd för D-pad-navigering ───────────────────── */
html.tv-mode .search-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 26px; padding: 0 64px; }
html.tv-mode .search-bar-xl input { font-size: 22px !important; height: 68px; }
html.tv-mode .pl-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 26px; padding: 0 64px; }
html.tv-mode .pl-card { padding: 30px; font-size: 20px; }
html.tv-mode .pl-head h1, html.tv-mode .pl-detail-head h1 { font-size: 34px; }
html.tv-mode .pl-detail-head, html.tv-mode .search-head { padding: 24px 64px 20px; }

/* ─── Spelaren: stor beträgg/OUD-kontroller ─────────────────────────────── */
html.tv-mode .watch-player .player-btn { width: 58px; height: 58px; }
html.tv-mode .watch-player .player-btn svg { width: 30px; height: 30px; }
html.tv-mode #pp-time { font-size: 19px; }
html.tv-mode #pp-vol { width: 150px; height: 9px; }
html.tv-mode #seek-thumb { width: 22px; height: 22px; }
html.tv-mode #seek-track { height: 9px; }
html.tv-mode #watch-title { font-size: 27px; }
html.tv-mode #watch-year, html.tv-mode #watch-type, html.tv-mode #watch-rating { font-size: 18px; }
html.tv-mode .quality-selector select { font-size: 18px; padding: 10px 14px; }
html.tv-mode .quality-selector label { font-size: 16px; }
html.tv-mode .quality-btn { font-size: 17px; padding: 10px 16px; }
html.tv-mode .watch-downloads { bottom: 118px; }
html.tv-mode .dl-chip { font-size: 17px; padding: 12px 18px; }
html.tv-mode .player-notice { font-size: 18px; padding: 14px 22px; }

/* Settings-panel (subs/speed/audio) — tv-vänlig */
html.tv-mode .settings-panel { width: 480px; }
html.tv-mode .settings-item { font-size: 20px; padding: 18px 22px; }
html.tv-mode .settings-head h3 { font-size: 24px; }

/* Provider-grid + downloads-modal (D-pad-vänlig: fokus-markering + stort
   klick-mål, kvadraten togglar redan vid enter pga <button>) */
html.tv-mode .provider-grid-modal { width: min(1100px, 92vw); }
html.tv-mode .provider-name { font-size: 22px; }
html.tv-mode .provider-file { font-size: 18px; padding: 14px 18px; }
html.tv-mode .provider-meta { font-size: 16px; }
html.tv-mode .provider-auto-badge { font-size: 14px; padding: 4px 12px; }
html.tv-mode .provider-grid-head h3 { font-size: 22px; }
html.tv-mode .provider-tile { margin-bottom: 18px; }

/* Avsnittsgrid för TV (film-tiles blir kvadratiske med större typografi) */
html.tv-mode .ep-grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); padding: 0 64px; gap: 22px; }
html.tv-mode .ep-name { font-size: 18px; }
html.tv-mode .ep-tab { font-size: 18px; padding: 12px 22px; }
html.tv-mode .ep-picker-head label, html.tv-mode .ep-picker-group label { font-size: 17px; }

/* Toasts: läsbart från soffan */
html.tv-mode .toast { font-size: 18px; padding: 14px 22px; max-width: 560px; }

/* modal-overlay: samma storlek som provider-grid */
html.tv-mode #modal-overlay .modal { width: min(900px, 92vw); padding: 34px; }
html.tv-mode #modal-title { font-size: 32px; }
html.tv-mode #modal-overview { font-size: 18px; }

/* ─── D-pad-hjälp: focus alltid synlig på body nivå (fallback) ───────────── */
html.tv-mode :focus { outline: none !important; }