/* Plain CSS for TV engines that cannot interpret modern Tailwind colors/layers. */
html.tv-browser { background: #07111f; color: #f1f5f9; font-size: 20px; }
html.tv-browser body { background: #07111f; color: #f1f5f9; margin: 0; padding: 3vh 4vw; font-family: Arial, sans-serif; }
html.tv-browser main { background: #07111f; color: #f1f5f9; padding-bottom: 140px; }
html.tv-browser a { color: #7dd3fc; text-decoration: none; }
html.tv-browser button { color: #e2e8f0; cursor: pointer; }
html.tv-browser a:focus, html.tv-browser button:focus, html.tv-browser input:focus { outline: 4px solid #67e8f9 !important; outline-offset: 5px; }
html.tv-browser header { position: relative !important; background: #07111f; border-bottom: 1px solid #334155; }
html.tv-browser header > div { display: grid !important; grid-template-columns: 1fr auto 1fr; max-width: 1440px; margin: auto; padding: 16px; }
html.tv-browser header .site-desktop-navigation { display: flex !important; grid-column: 1 / -1; grid-row: 2; justify-content: center; }
html.tv-browser header nav { display: flex; flex-wrap: wrap; justify-content: center; }
html.tv-browser header nav a { display: inline-flex; align-items: center; padding: 12px 16px; margin: 6px; border: 1px solid #334155; border-radius: 28px; color: #e2e8f0; font-weight: bold; }
html.tv-browser header nav a[aria-current="page"] { background: #163447; color: #7dd3fc; }
html.tv-browser header button[aria-controls="mobile-website-menu"], html.tv-browser #mobile-website-menu { display: none !important; }
html.tv-browser .site-header-radio { grid-column: 2; grid-row: 1 !important; margin-top: 0 !important; }
html.tv-browser img { max-width: 100%; height: auto; }
html.tv-browser #original-programs { max-width: 1440px; margin: auto; padding: 24px 0; }
html.tv-browser #original-programs > div { padding: 24px; }
html.tv-browser #original-programs h2 { font-size: 32px; margin: 16px 0; }
html.tv-browser #original-programs h3 { font-size: 28px; }
html.tv-browser #original-programs .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
html.tv-browser #original-programs .grid > a, html.tv-browser #original-programs .grid > button { display: block; min-width: 0; overflow: hidden; border: 1px solid #475569; border-radius: 18px; background: #0f172a; text-align: right; }
html.tv-browser #original-programs .grid > a > span, html.tv-browser #original-programs .grid > button > span { display: block; padding: 20px; }
html.tv-browser #original-programs .grid > a > span > span, html.tv-browser #original-programs .grid > button > span > span { display: block; margin-top: 8px; }
html.tv-browser #original-programs iframe { display: block; border: 0; }
html.tv-browser #original-category-content > div { margin-top: 24px; padding: 24px; background: #0f172a; border-radius: 18px; }
html.tv-browser #original-category-content button, html.tv-browser #original-category-content a { min-height: 48px; }
@media (max-width: 900px) { html.tv-browser #original-programs .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Older TV engines need explicit banner dimensions rather than aspect-ratio. */
html.tv-browser .desktop-banner-frame { display: block; width: 1200px; max-width: 100%; margin: 0 auto; }
html.tv-browser .desktop-banner-frame img { display: block; width: 100%; height: auto !important; max-height: none; object-fit: contain !important; }
html.tv-browser .banner-transition { display: block; min-height: 80px; }
html.tv-browser .radio-live-control { background: #164e63; color: #e2e8f0; border: 1px solid #67e8f9; }

/* Fluid TV layout and reduced GPU work on built-in TV browsers. */
html.tv-browser { font-size: clamp(18px, 1.2vw, 24px); }
html.tv-browser header > div,
html.tv-browser #original-programs { width: 100%; max-width: 92vw; }
html.tv-browser .desktop-banner-frame { width: 100%; max-width: 88vw; }
html.tv-browser .desktop-banner-frame img { width: 100%; height: auto !important; max-height: none; }
html.tv-browser *, html.tv-browser *::before, html.tv-browser *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  animation: none !important;
  transition: none !important;
}
html.tv-browser .banner-fade-out { display: none !important; }
html.tv-browser header, html.tv-browser [data-persistent-controls] { background-color: #07111f !important; }
html.tv-browser a:focus, html.tv-browser button:focus { outline: 4px solid #67e8f9 !important; outline-offset: 5px; }

/* Keep long player titles scrolling (marquee) on TV; space the two copies without flex gap. */
html.tv-browser .marquee-track {
  animation-name: marquee-title !important;
  animation-duration: 16s !important;
  animation-timing-function: linear !important;
  animation-delay: 1s !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
}
html.tv-browser .marquee-track > span + span { margin-left: 2rem !important; }
html.tv-browser .marquee-track.marquee-rtl { animation-name: marquee-title-rtl !important; }

/* Keep the news ticker moving while other TV animations remain disabled. */
html.tv-browser [data-tv-news-viewport] { overflow: hidden !important; }
html.tv-browser [data-tv-news-copy] { display: flex !important; flex: none; min-width: 0; }
html.tv-browser [data-tv-news-track] {
  animation-name: tv-news-scroll !important;
  animation-duration: 180s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
  will-change: transform;
}
html.tv-browser [data-tv-news-track][data-news-paused="true"],
html.tv-browser [data-tv-news-viewport]:focus-within [data-tv-news-track] { animation-play-state: paused !important; }
@keyframes tv-news-scroll { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  html.tv-browser [data-tv-news-track] { animation: none !important; transform: none !important; }
  html.tv-browser [data-tv-news-copy="1"] { display: none !important; }
  html.tv-browser [data-tv-news-viewport] { overflow-x: auto !important; }
}

/* Chromium 68 ignores flex gap; space the live radio button's icon, label and bars with margins. */
html.tv-browser .radio-live-control > * { margin: 0 .3rem !important; }
html.tv-browser .radio-live-wave i { margin: 0 .09rem !important; }

/* Bottom player: Tailwind's inset-inline and env() are unknown to Chromium 68, so anchor and center it explicitly. */
html.tv-browser div[data-persistent-controls] { left: 0 !important; right: 0 !important; width: calc(100% - 8vw) !important; max-width: 48rem !important; margin-left: auto !important; margin-right: auto !important; bottom: 7vh !important; }
/* Title-safe zone: keep the shrunk player on the same raised line (selector outranks the globals.css TV rule). */
html.tv-browser body > button.tv-compact-player { bottom: 7vh !important; }
/* Shrunk player: center the play/pause icon and the small expand arrow. */
html.tv-browser .tv-compact-player { display: flex !important; align-items: center !important; justify-content: center !important; }
html.tv-browser .tv-compact-player > svg:last-child { left: 50% !important; margin-left: -.375rem !important; transform: none !important; }
/* Keep "back to top" above the bottom player instead of overlapping it. */
html.tv-browser .back-to-top-button { bottom: calc(7vh + 8rem) !important; left: calc(6vw + 12px) !important; }

/* Reserve the banner's 4:1 space so a loading image never collapses to zero height on older engines. */
html.tv-browser .desktop-banner-frame { position: relative; overflow: hidden; }
html.tv-browser .desktop-banner-frame::before { content: ''; display: block !important; padding-top: 25% !important; }
html.tv-browser .desktop-banner-frame img { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: contain !important; }

/* Site video controls overlay the picture in fullscreen (separate rules: an unknown pseudo-class drops the whole rule). */
html.tv-browser .youtube-resume-shell:-webkit-full-screen { max-width: none !important; width: 100% !important; height: 100% !important; position: relative; background: #000; }
html.tv-browser .youtube-resume-shell:fullscreen { max-width: none !important; width: 100% !important; height: 100% !important; position: relative; background: #000; }
html.tv-browser .youtube-resume-shell:-webkit-full-screen .youtube-tv-controls { position: absolute; left: 0; right: 0; bottom: 0; }
html.tv-browser .youtube-resume-shell:fullscreen .youtube-tv-controls { position: absolute; left: 0; right: 0; bottom: 0; }

html.tv-browser .youtube-resume-shell { width: 100%; max-width: 80vw; margin: 0 auto; }
html.tv-browser .youtube-resume-ratio { position: relative; height: 0; padding-top: 0; padding-bottom: 56.25%; overflow: hidden; background: #000; }
html.tv-browser .youtube-resume-ratio iframe { position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important; border: 0; }

/* TV banner: full page width at a fixed, lower height (15vw = 288px on 1080p); the artwork stretches sideways to fill it. */
html.tv-browser .desktop-banner-frame { max-width: 88vw !important; height: 15vw !important; }
html.tv-browser .desktop-banner-frame::before { display: none !important; }
html.tv-browser .desktop-banner-frame img { object-fit: fill !important; }