/* TV-Optimized Styles - 10-foot UI */
/* These styles are scoped to large screens (TVs/desktops) */

/* Larger fonts and touch targets for TV viewing */
@media screen and (min-width: 1920px) {
    body {
        font-size: 18px;
    }

    .hero-title {
        font-size: 4rem;
    }

    .btn {
        padding: 1.5rem 3rem;
        font-size: 1.5rem;
    }
}

/* Overscan-safe area - only on large screens */
@media screen and (min-width: 1025px) {
    .screen {
        padding: 3% 5%;
    }


    /* Hide scrollbars on TV */
    .stream-carousel::-webkit-scrollbar {
        display: none;
    }

    .content::-webkit-scrollbar {
        display: none;
    }

    /* Cursor styles for TV remotes */
    body {
        cursor: none;
    }

    .focusable {
        cursor: pointer;
    }
}

/* Reduce motion for better TV experience */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Contrast improvements for TV displays */
.text-secondary {
    color: #cccccc;
}

/* Prevent text selection on TV */
* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Optimize images for TV */
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Video player optimizations */
.video-player {
    image-rendering: auto;
    image-rendering: high-quality;
}

/* Ensure clickable areas are large enough */
button, a, .focusable {
    min-width: 44px;
    min-height: 44px;
}

/* Platform-specific optimizations */

/* Samsung Tizen */
@supports (-webkit-appearance: none) and (not (-webkit-overflow-scrolling: touch)) {
    body {
        -webkit-font-smoothing: antialiased;
    }
}

/* LG webOS */
@media screen and (-webkit-device-pixel-ratio: 1) {
    .screen {
        transform: scale(1.0);
    }
}

/* Fire TV / Android TV - only applies to devices without hover (no mouse) */
@media (hover: none) and (orientation: landscape) {
    .screen {
        padding: 2% 4%;
    }

    .content {
        padding: 0 4% 2rem;
    }

    /* Smaller stream cards so more rows fit on screen */
    .stream-card {
        width: 280px;
        min-width: 280px;
        height: 157px;
    }

    .stream-row {
        margin-bottom: 1rem;
    }

    .stream-row h3 {
        font-size: 1.4rem;
        margin-bottom: 1rem;
    }

    .stream-carousel {
        padding: 20px 4% 20px 20px;
        margin: -20px 0;
        gap: 1rem;
        overflow-x: auto;
        overflow-y: visible;
    }

    .stream-rows {
        gap: 1rem;
    }
}

/* TV Browse Screen Fixes - Force proper layout on TV displays */
/* TVs often report smaller viewports even at 1080p, override mobile styles */
/* Use landscape + min-height to detect TV-like devices */
@media screen and (orientation: landscape) and (min-height: 500px) {
    /* Ensure stream grid shows 4 columns on TV */
    .stream-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 1.5rem;
    }

    .stream-grid .stream-card {
        width: 100%;
        min-width: unset;
        /* padding-bottom hack for 16:9 — aspect-ratio CSS isn't supported on
           older webOS Chromium (<88), which collapsed the cards to ~10:1. */
        height: 0;
        padding-bottom: 56.25%;
    }

    /* Add spacing for browse categories title */
    #browse-categories-view h2 {
        margin-bottom: 1.5rem;
    }

    /* Ensure category list has proper spacing from title */
    .category-list {
        margin-top: 1.5rem;
    }

    /* Browse header spacing */
    .browse-header {
        margin-top: 0;
        margin-bottom: 1.5rem;
    }
}