/* MediaNet TV Mode — 10-foot interface overrides Activates when attribute is set (toggle via smarttv-nav.js or ?tv=1). Targets: 50" 1080p Samsung Smart TV, ~3m viewing distance. Rules: 22px base font, WCAG AAA contrast, no hover states, GPU-light. */ html[data-tv] { --base-fs: 22px; /* Desaturate accents ~10% — punchy red on TV is fatiguing */ --mn-accent: #d11f2a; --mn-accent-2: #e6447a; --mn-accent-grad: linear-gradient(135deg, #e6447a 0%, #d11f2a 50%, #a83de0 100%); /* Avoid pure white on glossy panels — reflections + clipping */ --mn-text: #f0f0f0; --mn-text-dim: #c8c8c8; font-size: var(--base-fs); } html[data-tv] body { line-height: 1.5; font-size: var(--base-fs); } /* Kill GPU-expensive effects — TV browsers (Tizen) choke on blur+saturate */ html[data-tv] .navbar, html[data-tv] .navbar.scrolled, html[data-tv] .navbar.glass, html[data-tv] .modal, html[data-tv] .jarvis-overlay, html[data-tv] #mui-mini-bar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(10, 10, 15, 0.96) !important; } html[data-tv] * { /* Simplify shadows — TV pixels can't resolve subtle blur anyway */ box-shadow: none; } html[data-tv] .card:focus-within, html[data-tv] .btn:focus-visible { box-shadow: 0 0 0 4px var(--mn-accent-2); } /* Navbar */ html[data-tv] .navbar { padding: 18px 4%; min-height: 88px; } html[data-tv] .nav-tool { width: 56px; height: 56px; font-size: 1.3rem; } html[data-tv] .nav-tool-label { font-size: 0.95rem; } html[data-tv] .nav-prime .np-btn { padding: 14px 22px; font-size: 1.1rem; min-height: 56px; } html[data-tv] .nav-prime .np-icon { font-size: 1.5rem; } html[data-tv] .navbar-row-filters button { padding: 12px 20px; font-size: 1rem; min-height: 52px; } html[data-tv] .search-box input { font-size: 1.15rem; padding: 14px 18px; } /* Rows + cards (already +30%, just bump typography + breathing room) */ html[data-tv] .row { margin-bottom: 56px; } html[data-tv] .row-title { font-size: 1.6rem; padding: 0 4% 14px; font-weight: 800; letter-spacing: 0.3px; } html[data-tv] .card-title { font-size: 1.05rem; padding: 12px 14px; line-height: 1.3; } html[data-tv] .card-overlay { padding: 18px; font-size: 1rem; } html[data-tv] .card-overlay .meta { font-size: 0.95rem; } /* Buttons — 64px min-height meets 10ft tap-equivalent target */ html[data-tv] .btn { padding: 16px 28px; font-size: 1.1rem; min-height: 64px; border-radius: 10px; font-weight: 700; } html[data-tv] .btn-primary { background: var(--mn-accent-grad); } /* Hero */ html[data-tv] .hero-title { font-size: 4.2rem; line-height: 1.05; letter-spacing: -1px; } html[data-tv] .hero-desc { font-size: 1.4rem; max-width: 700px; line-height: 1.5; } html[data-tv] .hero-buttons { gap: 16px; margin-top: 24px; } /* Music mini-bar — most-glanced surface, deserves the bump */ html[data-tv] #mui-mini-bar { height: 96px !important; font-size: 1.05rem; padding: 0 4%; } html[data-tv] .mui-card-title { font-size: 1.1rem; line-height: 1.3; } html[data-tv] .mui-card-artist { font-size: 0.95rem; color: var(--mn-text-dim); } html[data-tv] .mui-mini-controls button { width: 56px; height: 56px; font-size: 1.4rem; } html[data-tv] .mui-mini-progress { height: 6px; } /* TV / Radio sections */ html[data-tv] .tv-section .channel-card, html[data-tv] .radio-section .station-card { min-height: 180px; padding: 20px; } html[data-tv] .tv-section .channel-name, html[data-tv] .radio-section .station-name { font-size: 1.15rem; font-weight: 700; } html[data-tv] .tv-section .channel-meta, html[data-tv] .radio-section .station-meta { font-size: 0.95rem; } /* Jarvis overlay + modal — full-screen surfaces, scale text proportionally */ html[data-tv] .jarvis-overlay h1 { font-size: 2.8rem; } html[data-tv] .jarvis-overlay p, html[data-tv] .jarvis-overlay .transcript { font-size: 1.4rem; line-height: 1.5; } html[data-tv] .modal-title { font-size: 2rem; } html[data-tv] .modal-body { font-size: 1.15rem; line-height: 1.6; } html[data-tv] .modal-close { width: 56px; height: 56px; font-size: 1.6rem; } /* Command palette — must remain readable from couch */ html[data-tv] .cp-input { font-size: 1.4rem; padding: 20px 24px; } html[data-tv] .cp-item { font-size: 1.15rem; padding: 16px 20px; min-height: 64px; } /* Z-index — focus rings need to overlap card edges without being clipped */ html[data-tv] .card { z-index: 1; } html[data-tv] .card:focus-within, html[data-tv] .card.is-focused { z-index: 10; position: relative; } /* Disable hover-only transforms — TV has no cursor, prevents stuck-zoom bugs */ html[data-tv] .card:hover { transform: none; } html[data-tv] .btn:hover { transform: none; } /* Reduced-motion respect (some TVs report this) */ @media (prefers-reduced-motion: reduce) { html[data-tv] * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* === Tizen GPU rescue: backdrop-filter kills 20-30 FPS on UHD TVs. Catch-all overrides the 60+ scattered usages site-wide. === */ html[data-tv] *, html[data-tv] *::before, html[data-tv] *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Solid backgrounds on previously-glassy chrome */ html[data-tv] .navbar, html[data-tv] .modal-content, html[data-tv] .player-modal, html[data-tv] #mui-mini-bar, html[data-tv] #music-ui-overlay, html[data-tv] #tv-ui-overlay, html[data-tv] #radio-ui-overlay, html[data-tv] #jarvis-overlay, html[data-tv] .cp-root, html[data-tv] .pg-card, html[data-tv] .ctx-menu, html[data-tv] .bottom-sheet { background: rgba(10,10,15,0.97) !important; } /* Cap animation/transition durations — kills slow per-frame compositing. CRITICAL: must NOT scope :focus or focus rings flicker via 50ms transitions. `animation-duration: 0.001s` was wrong — that plays 1000x/sec ricochet. Use `animation: none` to truly stop infinite animations. */ html[data-tv] *:not(:focus):not(:focus-visible):not(:focus-within), html[data-tv] *::before, html[data-tv] *::after { animation: none !important; animation-play-state: paused !important; transition-duration: 0.05s !important; } /* Focus elements get instant state changes — NO transitions/animations at all */ html[data-tv] :focus, html[data-tv] :focus-visible, html[data-tv] :focus-within { transition: none !important; animation: none !important; } /* Hide cobe-globe toggle buttons — globe is WebGL/ESM and broken on Tizen */ html[data-tv] .globe-toggle, html[data-tv] [data-action="globe"], html[data-tv] .mui-view-toggle, html[data-tv] .rui-globe-toggle, html[data-tv] .mui-globe-wrap, html[data-tv] .rui-globe-wrap { display: none !important; } /* aspect-ratio fallback (Tizen 5.x ignores → cards collapse to 0 height) */ html[data-tv] .mui-card { aspect-ratio: auto; } html[data-tv] .mui-art { height: 220px; } /* sticky → static (Tizen sticky is flaky inside overflow containers) */ html[data-tv] .mui-search-row, html[data-tv] .bui-toolbar, html[data-tv] .sui-filters, html[data-tv] .rui-toolbar, html[data-tv] .tui-toolbar { position: static !important; } /* Kill expensive card hover preview features (autoplay video peek) */ html[data-tv] .card:hover .card-preview, html[data-tv] .card.previewing, html[data-tv] .card .quick-preview { display: none !important; } /* Now-playing breathing pulse off — extra GPU layer for nothing */ html[data-tv] #mui-mini-bar.show.is-playing .mui-now-art { animation: none !important; } /* Kill 60+ infinite green pulses (one per visible card) — they animate box-shadow which is non-GPU on Tizen, causing 60+ continuous repaints/sec. */ html[data-tv] .card.is-playable::before, html[data-tv] .mui-card.is-full-stream::after, html[data-tv] .rui-row::after { animation: none !important; } /* Outline-only focus on TV — no transform scale (causes layer destroy/recreate) */ html[data-tv] .card:focus, html[data-tv] .card:focus-visible, html[data-tv] .mui-card:focus, html[data-tv] .mui-card:focus-visible, html[data-tv] .tv-card:focus, html[data-tv] .tv-card:focus-visible { transform: none !important; outline: 4px solid #1db954 !important; outline-offset: 6px !important; box-shadow: none !important; } html[data-tv] .btn:focus, html[data-tv] .btn:focus-visible, html[data-tv] .nav-tool:focus, html[data-tv] .nav-tool:focus-visible, html[data-tv] .hero-btn:focus, html[data-tv] .hero-btn:focus-visible { transform: none !important; outline: 4px solid #1db954 !important; outline-offset: 4px !important; box-shadow: none !important; } /* ==== PIN/Profile gate Tizen redesign (per UX agent) ==== */ html[data-tv] #profile-gate { background: #06060c !important; } html[data-tv] .pg-logo { background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: #f0f0f0 !important; color: #f0f0f0 !important; font-size: 3.4rem !important; margin-bottom: 28px !important; } html[data-tv] .pg-title { font-size: 2.2rem !important; } html[data-tv] .pg-subtitle { font-size: 1.2rem !important; max-width: 720px !important; } html[data-tv] .pg-profiles { gap: 48px !important; margin-bottom: 40px !important; } html[data-tv] .pg-profile { opacity: 1 !important; outline: 4px solid transparent; outline-offset: 6px; border-radius: 20px; padding: 8px; transform: none !important; } html[data-tv] .pg-profile:focus, html[data-tv] .pg-profile:focus-visible, html[data-tv] .pg-profile.selected { outline-color: #1db954 !important; transform: none !important; } html[data-tv] .pg-avatar, html[data-tv] .pg-add { width: 200px !important; height: 200px !important; font-size: 4.4rem !important; border-radius: 24px !important; } html[data-tv] .pg-name { font-size: 1.4rem !important; margin-top: 14px !important; } html[data-tv] .pg-keypad { gap: 18px !important; max-width: 360px !important; } html[data-tv] .pg-key { width: 100px !important; height: 100px !important; font-size: 2.2rem !important; border-radius: 16px !important; background: rgba(255,255,255,0.10) !important; outline: 4px solid transparent; transform: none !important; } html[data-tv] .pg-key:focus, html[data-tv] .pg-key:focus-visible { outline-color: #1db954 !important; background: rgba(29,185,84,0.20) !important; transform: none !important; } html[data-tv] .pg-key:hover { transform: none !important; } html[data-tv] .pg-pin-dot { width: 26px !important; height: 26px !important; } html[data-tv] .pg-pin-dot.error { animation: none !important; background: #d11f2a !important; } html[data-tv] .pg-back { font-size: 1.15rem !important; padding: 14px 24px !important; } html[data-tv] .pg-back:focus, html[data-tv] .pg-back:focus-visible { outline: 4px solid #1db954 !important; outline-offset: 2px; color: #fff !important; } html[data-tv] .pg-hint { font-size: 1.05rem !important; } html[data-tv] .pg-sync { display: none !important; }