/* * TV Mode — styles applied when running on Samsung Tizen TV * or when ?tv=1 query param is present. * * Activated by .tv-mode class on . */ /* === Focus ring — highly visible for D-pad navigation === */ .tv-mode *:focus { outline: 3px solid #FFD700 !important; outline-offset: 4px; box-shadow: 0 0 0 6px rgba(255, 215, 0, 0.25); } .tv-mode *:focus:not(:focus-visible) { outline: none !important; box-shadow: none; } /* === Settings FAB — low opacity on TV (accessible via Red button on remote) === */ .tv-mode #btn-fab-settings { opacity: 0.3; } /* === Font size boost for TV viewing distance (3m+) === */ .tv-mode .widget-title, .tv-mode .kiosk-name { font-size: 1.4rem; } /* === Navigation overlay — larger buttons for TV === */ .tv-mode .nav-btn-large { width: 80px; height: 80px; font-size: 2rem; } .tv-mode .nav-btn-playback { width: 64px; height: 64px; font-size: 1.5rem; } /* === Start overlay — larger text for TV === */ .tv-mode .start-prompt { font-size: 2rem; } .tv-mode .start-name-input { font-size: 1.2rem; padding: 16px 24px; } .tv-mode .start-name-btn { font-size: 1.1rem; padding: 14px 32px; } /* === Settings — ensure scrollable with D-pad === */ .tv-mode .settings-main { scroll-behavior: smooth; } .tv-mode .settings-main button, .tv-mode .settings-main input, .tv-mode .settings-main select { min-height: 48px; font-size: 1rem; } /* === Cursor hidden on real TV (no mouse) — only when Tizen user-agent detected === */ /* On ?tv=1 desktop testing the cursor stays visible for convenience. */ /* The Tizen build injects a body class via tizen-config.js if needed. */ /* === Indicator dots — larger for TV === */ .tv-mode .indicator-dot { width: 12px; height: 12px; } .tv-mode .indicator-dot.active { width: 16px; height: 16px; }