/* tv-focus.css — high-visibility focus ring for D-pad navigation.
   Uses :focus-visible (keyboard-only) so mouse users on desktop never
   see the chunky ring. .tv-mode (or [data-tv]) forces it always-on. */

:root { --tv-focus: #1db954; --tv-focus-glow: rgba(29,185,84,.55); }

/* Universal focus baseline */
:focus-visible {
  outline: 4px solid var(--tv-focus);
  outline-offset: 4px;
  box-shadow: 0 0 24px var(--tv-focus-glow);
  transition: transform .18s ease, box-shadow .18s ease, outline-offset .18s ease;
}
.tv-mode :focus, [data-tv] :focus {
  outline: 4px solid var(--tv-focus) !important;
  outline-offset: 6px !important;
  box-shadow: 0 0 28px var(--tv-focus-glow) !important;
}

/* Cards — scale + lift for cinematic feel */
.card:focus-visible, .mui-card:focus-visible, .tv-card:focus-visible,
.tui-row:focus-visible, .rui-row:focus-visible, .sui-card:focus-visible,
.tv-mode .card:focus, .tv-mode .mui-card:focus, .tv-mode .tv-card:focus,
.tv-mode .tui-row:focus, .tv-mode .rui-row:focus, .tv-mode .sui-card:focus,
[data-tv] .card:focus, [data-tv] .mui-card:focus, [data-tv] .tv-card:focus,
[data-tv] .tui-row:focus, [data-tv] .rui-row:focus, [data-tv] .sui-card:focus {
  transform: scale(1.08);
  z-index: 50;
  border-radius: 8px;
}

/* Buttons / nav */
.btn:focus-visible, .nav-tool:focus-visible, .hero-btn:focus-visible,
.tv-mode .btn:focus, .tv-mode .nav-tool:focus, .tv-mode .hero-btn:focus,
[data-tv] .btn:focus, [data-tv] .nav-tool:focus, [data-tv] .hero-btn:focus {
  outline-offset: 5px;
  background: rgba(29,185,84,.15);
  transform: translateY(-2px);
}

/* Mini-bar (music) — keep focus visible against dark backdrop */
.mini-bar :focus-visible, #mui-mini-bar :focus-visible,
.tv-mode .mini-bar :focus, .tv-mode #mui-mini-bar :focus,
[data-tv] .mini-bar :focus, [data-tv] #mui-mini-bar :focus {
  outline-offset: 3px;
  box-shadow: 0 0 18px var(--tv-focus-glow), inset 0 0 0 1px rgba(255,255,255,.1);
}

/* Inputs — softer ring (text editing context) */
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--tv-focus);
  outline-offset: 1px;
  box-shadow: 0 0 12px var(--tv-focus-glow);
  transform: none;
}

/* Tizen browser quirk: hide default cursor in TV mode */
.tv-mode, [data-tv] { cursor: none; }
.tv-mode *, [data-tv] * { cursor: none !important; }

/* Auto-scroll padding so focus ring is never clipped at row edges */
.row, .row-track, .mui-grid, .tv-grid, .rui-grid {
  scroll-padding-inline: 80px;
  scroll-padding-block: 40px;
}