/* Restyle existing mobile TV sessions. Entry points and navigation are unchanged. */
@media (max-width: 767px) {
    .tv-stage {
        --tv-accent: #ff986c;
        --tv-glow: #ffccaa;
        --tv-cyan: #c4b8d8;
        --tv-mint: #c9dbbe;
        --tv-nav-clearance: 0px;
        --tv-mobile-frame-w: calc(100vw - 28px);
        --tv-mobile-frame-h: calc((100vw - 28px) * 9 / 16);
        --tv-cluster-top: calc(50dvh + var(--tv-rest-y) + var(--tv-mobile-frame-h) / 2 + 12px);
        background: #151d1b;
    }
    .tv-stage .tv-ambilight {
        filter: blur(48px) saturate(0.75) brightness(0.7);
        opacity: 0.38;
    }
    .tv-stage .tv-ambient { opacity: 0.3; }
    .tv-stage > .tv-grain,
    .tv-stage .tv-scanlines,
    .tv-stage .tv-ticker { display: none; }
    .tv-stage .tv-overlay-grid {
        inset: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .tv-stage .tv-row-top {
        padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 0;
        gap: 8px;
        align-items: flex-start;
        flex-shrink: 0;
    }
    .tv-stage .tv-wordmark-block { flex: 1; min-width: 0; }
    .tv-stage .tv-status-row { margin: 0; gap: 6px; letter-spacing: 0; text-transform: none; }
    .tv-stage .tv-area-pill {
        min-height: 38px;
        min-width: 0;
        max-width: 100%;
        padding: 8px 10px;
        border-color: #ffffff2e;
        background: #ffffff0a;
        box-shadow: none;
        color: #d9d2df;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
    }
    .tv-stage .tv-area-pill span { letter-spacing: 0; }
    .tv-stage .tv-similar-pill,
    .tv-stage .tv-when-pill {
        max-width: 100%;
        border-color: #ffbd9855 !important;
        background: #ffbd9810 !important;
        color: #ffccaa !important;
        box-shadow: none !important;
    }
    .tv-stage .tv-area-pill.is-active {
        color: #ffccaa;
        background: #ff986c24;
        border-color: #ff986c88;
    }
    .tv-stage .tv-pos-indicator { width: auto; height: 40px; margin: 0; }
    .tv-stage .tv-pos-ring { display: none; }
    .tv-stage .tv-pos-text { font-size: 11px; color: #b8afc3; text-shadow: none; }
    .tv-stage .tv-pos-sep { margin: 0 2px; }
    .tv-stage .tv-stage-close { width: 40px; height: 40px; margin: 0; border-color: #ffffff2e; }
    .tv-stage .tv-row-rail { padding: 0 14px; gap: 6px; flex-shrink: 0; }
    .tv-stage .tv-channel-rail { mask-image: none; -webkit-mask-image: none; }
    .tv-stage .tv-channel-rail-track { padding: 2px; gap: 6px; }
    .tv-stage .tv-channel-tab {
        min-height: 36px;
        padding: 8px 12px;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
        color: #d2cbd9;
        background: #ffffff0e;
        border-color: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .tv-stage .tv-channel-tab.active {
        color: #24150e;
        background: #ffbd98;
        border-color: #ffbd98;
        font-weight: 700;
        box-shadow: none;
        text-shadow: none;
        transform: none;
    }
    .tv-stage .tv-channel-tab.active::before { display: none; }
    .tv-stage .tv-rail-chev { width: 32px; height: 36px; border-color: #ffffff24; background: transparent; }
    .tv-stage .tv-video,
    .tv-stage.tv-portrait .tv-video {
        width: var(--tv-mobile-frame-w);
        height: var(--tv-mobile-frame-h);
        max-height: none;
        aspect-ratio: 16 / 9;
        border-radius: 12px;
        box-shadow: 0 10px 40px #00000055;
    }
    .tv-stage .tv-player-footer {
        position: absolute;
        top: var(--tv-cluster-top);
        left: 14px;
        right: 14px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        max-height: calc(100dvh - var(--tv-cluster-top) - env(safe-area-inset-bottom, 0px) - 16px);
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #ffffff33 transparent;
        overscroll-behavior-y: contain;
        pointer-events: auto;
    }
    .tv-stage .tv-player-footer > * { flex-shrink: 0; }
    .tv-stage .tv-footer-scrollable { touch-action: pan-y; }
    .tv-stage .tv-transport {
        display: flex;
        justify-content: center;
        gap: 12px;
        padding: 0;
    }
    .tv-stage .tv-transport-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        width: auto;
        min-width: 44px;
        height: 44px;
        padding: 0 14px;
        border-color: #ffffff2e;
        background: #ffffff0a;
        color: #f5ede0;
        box-shadow: none;
    }
    .tv-stage .tv-control-label { display: inline; font: 500 12px/1.2 'DM Sans', sans-serif; }
    .tv-stage .tv-transport-play { padding: 0; background: #f5ede0; color: #211720; }
    .tv-stage .tv-fullscreen-btn { display: none; }
    .tv-stage .tv-scrub {
        order: 0;
        position: static;
        padding: 4px 0 8px;
        gap: 10px;
        background: none;
    }
    .tv-stage .tv-scrub-time { min-width: 30px; font-size: 11px; font-weight: 400; letter-spacing: 0; color: #b8afc3; }
    .tv-stage .tv-scrub-fill { background: #ffbd98; box-shadow: none; }
    .tv-stage .tv-scrub-handle { width: 10px; height: 10px; background: #ffbd98; box-shadow: none; }
    .tv-stage .tv-row-bottom {
        order: 1;
        position: static;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        padding: 0;
        gap: 16px;
        background: none;
    }
    .tv-stage .tv-now-playing { max-width: none; padding: 0; min-width: 0; }
    .tv-stage .tv-now-playing-label { margin-bottom: 6px; font-size: 10px; letter-spacing: 0.14em; color: #b8afc3; text-shadow: none; }
    .tv-stage .tv-now-playing-name { font-size: clamp(27px, 7.5vw, 34px); line-height: 1.15; text-shadow: none; overflow-wrap: anywhere; }
    .tv-stage .tv-now-playing-meta { margin-top: 7px; gap: 6px 8px; font-size: 12px; letter-spacing: 0; text-transform: none; }
    .tv-stage .tv-meta-city,
    .tv-stage .tv-genre { color: #b8afc3; letter-spacing: 0; text-transform: none; text-shadow: none; }
    .tv-stage .tv-genre { text-transform: capitalize; }
    .tv-stage .tv-upcoming {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 4px 12px;
        max-width: none;
        width: 100%;
        padding: 12px;
        border: 1px solid #ffffff24;
        border-radius: 12px;
        background: #ffffff09;
        text-align: left;
        letter-spacing: 0;
        text-transform: none;
    }
    .tv-stage .tv-upcoming-label { display: block !important; grid-column: 1; color: #b8afc3; font-size: 11px; }
    .tv-stage .tv-upcoming-line { grid-column: 1; color: var(--tv-ink); font-size: 13px; line-height: 1.4; letter-spacing: 0; text-shadow: none; overflow-wrap: anywhere; }
    .tv-stage .tv-upcoming-line::before { display: none; }
    .tv-stage .tv-upcoming.is-clickable .tv-upcoming-cta {
        display: block !important;
        grid-column: 2;
        grid-row: 1 / 3;
        padding: 12px 10px;
        border-radius: 8px;
        background: #ffbd98;
        color: #24150e;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
    }
    .tv-stage .tv-actions-rail { order: 2; position: static; padding-bottom: 2px; }
    .tv-stage .tv-rail-dock {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 6px;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .tv-stage .tv-rail-avatar { display: none; }
    .tv-stage .tv-rail-btn { position: relative; min-height: 54px; padding: 6px 4px; gap: 5px; border-radius: 10px; color: #d2cbd9; font: 500 12px 'DM Sans', sans-serif; }
    .tv-stage .tv-action-label { display: inline; }
    .tv-stage .tv-rail-icon { width: 20px; height: 20px; }
    .tv-stage .tv-rail-icon svg { width: 19px; height: 19px; filter: none; }
    .tv-stage .tv-rail-count { position: absolute; top: 5px; right: 10px; color: #b8afc3; font-size: 10px; text-shadow: none; }
    .tv-stage .tv-rail-dock .tv-rail-btn .tv-rail-icon { background: none; box-shadow: none; }
    .tv-stage .tv-rail-save.is-saved { color: #ffccaa; background: #ffbd9814; }
    .tv-stage button:focus-visible,
    .tv-stage a:focus-visible,
    .tv-stage .tv-scrub:focus-visible { outline: 2px solid #ffccaa; outline-offset: -2px; }
    .tv-stage.idle .tv-row-top,
    .tv-stage.idle .tv-row-rail,
    .tv-stage.idle .tv-scrub,
    .tv-stage.idle .tv-actions-rail { opacity: 1; pointer-events: auto; transform: none; }
}

@media (max-width: 360px) {
    .tv-stage .tv-player-footer { gap: 10px; }
    .tv-stage .tv-row-bottom { gap: 12px; }
    .tv-stage .tv-now-playing-name { font-size: 26px; }
    .tv-stage .tv-upcoming { padding: 10px; gap: 4px 8px; }
    .tv-stage .tv-rail-btn { min-height: 50px; }
    .tv-stage .tv-scrub { padding-bottom: 6px; }
}