/* vdo – 10-foot mode (html.tv, set by public/js/tv.js: the webOS app, or ?tv=1).
   The TV app runs the pages at 1280x720 and the set scales that up, so sizes here are modest:
   a little more type, roomier targets, and a focus ring you can see from the sofa. */

html.tv { font-size: 112.5%; }
html.tv body { overscroll-behavior: none; }
html.tv * { scrollbar-width: none; }
html.tv *::-webkit-scrollbar { display: none; }

/* focus is the cursor on a TV: always visible, never subtle */
html.tv :focus { outline: none; }
html.tv :focus-visible,
html.tv .poster:focus-visible .poster-art,
html.tv .episode-card:focus-visible .still,
html.tv .continue-still:focus-visible .still,
html.tv .history-main:focus-visible .still {
  outline: 3px solid var(--marquee);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgb(26 21 48 / 90%), 0 14px 30px rgb(6 3 16 / 60%);
}
html.tv .poster:focus-visible .poster-art, html.tv .continue-still:focus-visible .still { transform: scale(1.04); }
html.tv .poster:focus-visible .poster-name { color: var(--marquee); }
html.tv .episode-row:focus-visible { outline: none; border-color: var(--marquee); background: var(--ink-2); box-shadow: 0 0 0 2px var(--marquee); }
html.tv .ctl:focus-visible { outline: none; background: var(--marquee); color: var(--marquee-ink); box-shadow: 0 0 0 3px rgb(0 0 0 / 60%); }
html.tv .seekbar:focus-visible { outline: 3px solid var(--marquee); outline-offset: 6px; }
html.tv .menu-row:focus-visible, html.tv .menu-pop [role="menuitem"]:focus-visible, html.tv .season-tab:focus-visible, html.tv .segmented button:focus-visible, html.tv .letter-bar button:focus-visible, html.tv .picker-tabs button:focus-visible {
  outline: none;
  background: var(--marquee);
  color: var(--marquee-ink);
  box-shadow: none;
}
html.tv .nav a:focus-visible { outline: none; background: var(--marquee); color: var(--marquee-ink); }

/* no hover on a remote: show what hover would reveal */
html.tv .wordmark-hint { display: none; }
html.tv .continue-remove, html.tv .history-remove { opacity: 1; }
html.tv .episode-row:focus-visible .still-play, html.tv .continue-still:focus-visible .still-play { opacity: 1; }
html.tv .stage.no-cursor { cursor: default; }

/* bigger targets and artwork */
html.tv .btn { min-height: 46px; }
html.tv .btn-lg { min-height: 54px; }
html.tv .input { min-height: 46px; }
html.tv .poster-grid { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 26px 20px; }
html.tv .scroller { grid-auto-columns: 184px; gap: 20px; padding: 8px 6px 14px; margin: -8px -6px 0; scroll-padding: 0 6px; }
html.tv .scroller.episodes { grid-auto-columns: 320px; }
html.tv .scroller.continue { grid-auto-columns: 340px; }
html.tv .poster-art, html.tv .still { border-radius: 12px; }
html.tv .topbar { gap: 28px; }
html.tv .nav a { padding: 0.45rem 0.8rem; }
html.tv .row { margin-bottom: 40px; }
html.tv .spotlight { min-height: 400px; }

/* the player: wider controls, subtitles that read from across the room */
html.tv .ctl { width: 52px; height: 52px; border-radius: 10px; }
html.tv .ctl .icon { width: 26px; height: 26px; }
html.tv .control-row { gap: 6px; }
html.tv .sub-line { font-size: clamp(22px, 2.8vw, 40px); }
html.tv .menu-row { min-height: 46px; }
html.tv .hud-home { padding: 8px 14px; border-radius: 10px; }
html.tv .hud-home:focus-visible { outline: none; background: var(--marquee); color: var(--marquee-ink); }