/* === TV / Landscape Mode ===
   Activates when device is landscape + large enough (tablet/TV/Fire Stick).
   Kids profiles automatically get this via JS detection.
*/

/* Base TV-mode sizing */
html.tv-mode {
    --tv-card-min-width: 280px;
    --tv-card-gap: 24px;
    --tv-font-scale: 1.3;
}

html.tv-mode body {
    font-size: calc(16px * var(--tv-font-scale));
}

/* === Video Grid === */
html.tv-mode .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--tv-card-min-width), 1fr));
    gap: var(--tv-card-gap);
}

/* === Video Cards === */
html.tv-mode .video-card {
    border-radius: 18px;
    transition: transform 0.2s, box-shadow 0.2s, outline 0.15s;
}

html.tv-mode .video-card:focus,
html.tv-mode .video-card:focus-visible {
    outline: 4px solid var(--accent);
    outline-offset: 4px;
    transform: scale(1.04);
    box-shadow: 0 8px 32px rgba(233, 69, 96, 0.3);
}

html.tv-mode .video-card:focus:not(:focus-visible) {
    outline: none;
}

html.tv-mode .video-thumbnail {
    border-radius: 18px 18px 0 0;
}

html.tv-mode .video-title {
    font-size: 1.1rem;
    line-height: 1.3;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

html.tv-mode .video-info {
    padding: 14px;
}

html.tv-mode .video-channel {
    font-size: 0.95rem;
}

html.tv-mode .duration-badge {
    font-size: 0.9rem;
    padding: 4px 10px;
    border-radius: 8px;
}

html.tv-mode .category-badge {
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 8px;
}

/* === Header / Nav === */
html.tv-mode header {
    padding-top: calc(1rem + var(--safe-top));
    padding-bottom: 1rem;
}

html.tv-mode .header-search-input {
    font-size: 1.1rem;
    padding: 12px 18px;
}

html.tv-mode .header-search-btn {
    font-size: 1.1rem;
    padding: 12px 24px;
}

html.tv-mode .logo-img {
    max-height: 3rem;
}

html.tv-mode .logo-name {
    font-size: 1rem;
}

/* === Hero Carousel === */
html.tv-mode .hero-slide {
    border-radius: 18px;
}

html.tv-mode .hero-title {
    font-size: 1.6rem;
}

html.tv-mode .hero-channel {
    font-size: 1.1rem;
}

html.tv-mode .hero-duration {
    font-size: 1rem;
}

html.tv-mode .hero-play-hint {
    font-size: 1.1rem;
    padding: 12px 24px;
}

/* === Channel Pills === */
html.tv-mode .channel-pills {
    gap: 12px;
    padding: 8px 0;
}

html.tv-mode .channel-pill {
    font-size: 1.1rem;
    padding: 12px 24px;
    border-radius: 999px;
}

html.tv-mode .channel-pill:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

/* === Category Cards === */
html.tv-mode .cat-card {
    padding: 16px 20px;
    border-radius: 16px;
}

html.tv-mode .cat-card-name,
html.tv-mode .cat-card-time {
    font-size: 1.2rem;
}

html.tv-mode .cat-card-sub {
    font-size: 0.9rem;
}

/* === Section Titles === */
html.tv-mode .section-title {
    font-size: 1.4rem;
}

/* === Shorts Row === */
html.tv-mode .shorts-row {
    gap: 16px;
}

html.tv-mode .shorts-card {
    min-width: 200px;
}

html.tv-mode .shorts-card:focus-visible {
    outline: 4px solid var(--accent);
    outline-offset: 4px;
    transform: scale(1.05);
}

html.tv-mode .shorts-title {
    font-size: 1rem;
}

/* === Watch Page === */
html.tv-mode .video-wrapper {
    max-width: 100%;
}

html.tv-mode .watch-title {
    font-size: 1.5rem;
}

html.tv-mode .watch-channel {
    font-size: 1.1rem;
}

html.tv-mode .fs-toggle {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
    bottom: 20px;
    right: 20px;
}

html.tv-mode #pause-overlay div,
html.tv-mode #end-overlay div {
    width: 96px;
    height: 96px;
}

html.tv-mode #pause-overlay svg,
html.tv-mode #end-overlay svg {
    width: 48px;
    height: 48px;
}

/* === Time Budget === */
html.tv-mode .time-budget {
    font-size: 1.2rem;
    padding: 14px 20px;
    border-radius: 14px;
}

/* === Back Button === */
html.tv-mode .back-link {
    font-size: 1.1rem;
    padding: 14px 24px;
}

/* === Footer === */
html.tv-mode footer {
    font-size: 1rem;
    padding: 2rem;
}

/* === Focus-visible for all interactive elements === */
html.tv-mode button:focus-visible,
html.tv-mode a:focus-visible,
html.tv-mode input:focus-visible,
html.tv-mode [tabindex]:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

html.tv-mode button:focus:not(:focus-visible),
html.tv-mode a:focus:not(:focus-visible),
html.tv-mode input:focus:not(:focus-visible) {
    outline: none;
}

/* === Avatar Dropdown === */
html.tv-mode .avatar-option,
html.tv-mode .color-option {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
}

html.tv-mode .profile-badge {
    padding: 10px 16px;
    font-size: 1.1rem;
}

html.tv-mode .profile-avatar {
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
}

/* === Improved D-pad scroll behavior === */
html.tv-mode .video-grid {
    scroll-behavior: smooth;
}

html.tv-mode .shorts-row {
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

html.tv-mode .shorts-card {
    scroll-snap-align: start;
}

/* === Active section dismiss button (larger for TV) === */
html.tv-mode .active-dismiss-btn {
    width: 32px;
    height: 32px;
}

html.tv-mode .active-dismiss-icon {
    width: 18px;
    height: 18px;
}

/* === Profile Badge === */
html.tv-mode .avatar-dropdown {
    font-size: 1rem;
}

html.tv-mode .avatar-dd-greeting {
    font-size: 1.2rem;
}