/* Plyr TV Player Frontend Styles
 * Dark theme matching Puzzles-9
 */

/* Container */
.plyr-tv-container {
    margin: 20px 0;
}

/* Header with season selector - using specific selectors to override theme CSS */
.plyr-tv-container .plyr-tv-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 15px !important;
    float: right !important;
    margin-right: -14px !important;
}

.plyr-tv-container .plyr-tv-header label {
    color: #ffffff !important;
    font-family: Oxygen, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.plyr-tv-container .plyr-tv-header select.plyr-season-select {
    max-width: 280px !important;
    height: 40px !important;
    padding: 8px 40px 8px 14px !important;
    font-family: Oxygen, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    background-color: #333333 !important;
    border: 2px solid #00a0db !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300a0db' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px !important;
}

.plyr-tv-container .plyr-tv-header select.plyr-season-select:hover {
    background-color: #3d3d3d !important;
    border-color: #00bcff !important;
}

/* Dropdown options */
.plyr-tv-container .plyr-tv-header select.plyr-season-select option {
    background-color: #333333 !important;
    color: #ffffff !important;
    padding: 10px !important;
}

/* Main wrapper - player + playlist side by side */
.plyr-tv-wrapper {
    display: flex;
    gap: 0;
    background: #111111;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    clear: both;
    max-height: 550px;
}

/* Player area */
.plyr-tv-player {
    flex: 1;
    min-width: 0;
    background: #000000;
    display: flex;
    position: relative;
}

/* Plyr customization - JWPlayer-like styling */
.plyr-tv-player .plyr {
    --plyr-color-main: #cc1010;
    --plyr-video-background: #000000;
    --plyr-range-fill-background: #cc1010;
    --plyr-audio-controls-background: #1a1a1a;
    --plyr-video-controls-background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
    --plyr-range-thumb-background: #fff;
    --plyr-range-thumb-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.2);
    --plyr-range-track-height: 3px;
    --plyr-range-thumb-height: 8px;
    --plyr-control-spacing: 4px;
    --plyr-control-icon-size: 13px;
    --plyr-font-size-small: 10px;
    --plyr-font-size-time: 10px;
    width: 100%;
    margin: 0;
}

.plyr-tv-player .plyr__video-wrapper {
    background: #000000;
}

.plyr-tv-player .plyr__poster {
    background-size: contain;
    background-color: #000000;
}

/* ========== JWPlayer-like Control Bar ========== */

/* Control bar container - solid dark background like JWPlayer */
.plyr-tv-player .plyr__controls,
.plyr-tv-container .plyr__controls,
.plyr--video .plyr__controls,
.plyr .plyr__controls {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 10px !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 24px) !important;
    max-width: 560px !important;
    background: linear-gradient(#2b2b2b, #191919) !important;
    padding: 2px 6px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    border: 1px solid #2f2f2f !important;
    border-radius: 4px !important;
    margin: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 3px 8px rgba(0, 0, 0, 0.6) !important;
    box-sizing: border-box !important;
}

/* Hide the gradient overlay */
.plyr-tv-player .plyr__controls::before,
.plyr-tv-container .plyr__controls::before,
.plyr--video .plyr__controls::before,
.plyr .plyr__controls::before {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* Control buttons - compact */
.plyr-tv-player .plyr__controls .plyr__control,
.plyr-tv-container .plyr__controls .plyr__control,
.plyr .plyr__controls .plyr__control {
    padding: 0 4px !important;
    margin: 0 !important;
    color: #cfcfcf !important;
    opacity: 1 !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: 3px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
}

.plyr-tv-player .plyr__controls .plyr__control:hover,
.plyr-tv-container .plyr__controls .plyr__control:hover,
.plyr .plyr__controls .plyr__control:hover {
    background: transparent !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
}

.plyr-tv-player .plyr__controls .plyr__control:focus,
.plyr-tv-container .plyr__controls .plyr__control:focus,
.plyr .plyr__controls .plyr__control:focus,
.plyr-tv-player .plyr__controls .plyr__control:focus-visible,
.plyr-tv-container .plyr__controls .plyr__control:focus-visible,
.plyr .plyr__controls .plyr__control:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.plyr-tv-player .plyr__controls .plyr__control[aria-pressed="true"],
.plyr-tv-container .plyr__controls .plyr__control[aria-pressed="true"],
.plyr .plyr__controls .plyr__control[aria-pressed="true"] {
    background: transparent !important;
    color: #ffffff !important;
}

.plyr-tv-player .plyr__controls .plyr__control svg,
.plyr-tv-container .plyr__controls .plyr__control svg,
.plyr .plyr__controls .plyr__control svg {
    width: 13px !important;
    height: 13px !important;
    transition: none !important;
    transform: none !important;
}

/* Progress bar - inline with controls like JWPlayer */
.plyr-tv-player .plyr__controls .plyr__progress,
.plyr-tv-container .plyr__controls .plyr__progress,
.plyr .plyr__controls .plyr__progress {
    width: 100% !important;
    margin: 0 6px !important;
    padding: 0 !important;
}

.plyr-tv-player .plyr__controls .plyr__progress__container,
.plyr-tv-container .plyr__controls .plyr__progress__container,
.plyr .plyr__controls .plyr__progress__container {
    flex: 1 1 160px !important;
    min-width: 140px !important;
    max-width: 420px !important;
}

.plyr-tv-player .plyr__controls > .plyr__control,
.plyr-tv-container .plyr__controls > .plyr__control,
.plyr .plyr__controls > .plyr__control {
    flex: 0 0 auto !important;
}

.plyr-tv-player .plyr__controls .plyr__progress input[type="range"],
.plyr-tv-container .plyr__controls .plyr__progress input[type="range"],
.plyr .plyr__controls .plyr__progress input[type="range"] {
    height: 3px !important;
}

.plyr-tv-player .plyr__controls .plyr__progress__buffer,
.plyr-tv-container .plyr__controls .plyr__progress__buffer,
.plyr .plyr__controls .plyr__progress__buffer {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Time display */
.plyr-tv-player .plyr__controls .plyr__time,
.plyr-tv-container .plyr__controls .plyr__time,
.plyr .plyr__controls .plyr__time {
    font-size: 10px !important;
    font-weight: 400 !important;
    color: #cfcfcf !important;
    padding: 0 4px !important;
    height: 24px !important;
    line-height: 24px !important;
    font-family: Arial, sans-serif !important;
    min-width: 42px !important;
    text-align: center !important;
}

/* Duration time - add spacing from progress bar */
.plyr-tv-player .plyr__controls .plyr__time--duration,
.plyr-tv-container .plyr__controls .plyr__time--duration,
.plyr .plyr__controls .plyr__time--duration {
    margin-left: 8px !important;
}

/* Volume container */
.plyr-tv-player .plyr__controls .plyr__volume,
.plyr-tv-container .plyr__controls .plyr__volume,
.plyr .plyr__controls .plyr__volume {
    position: relative !important;
    max-width: 24px !important;
    min-width: 24px !important;
    width: 24px !important;
    overflow: visible !important;
    /* Expand hover area upward so the slider stays visible while moving to it */
    padding-top: 90px !important;
    margin-top: -90px !important;
}

.plyr-tv-player .plyr__controls .plyr__volume input[type="range"],
.plyr-tv-container .plyr__controls .plyr__volume input[type="range"],
.plyr .plyr__controls .plyr__volume input[type="range"] {
    position: absolute !important;
    left: 64% !important;
    right: auto !important;
    bottom: 70px !important;
    width: 78px !important;
    height: 3px !important;
    transform: translateX(-58%) rotate(-90deg) !important;
    transform-origin: center !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.15s ease !important;
    z-index: 3 !important;
}

.plyr-tv-player .plyr__controls .plyr__volume::after,
.plyr-tv-container .plyr__controls .plyr__volume::after,
.plyr .plyr__controls .plyr__volume::after {
    display: none !important;
}

.plyr-tv-player .plyr__controls .plyr__volume:hover input[type="range"],
.plyr-tv-player .plyr__controls .plyr__volume:focus-within input[type="range"],
.plyr-tv-container .plyr__controls .plyr__volume:hover input[type="range"],
.plyr-tv-container .plyr__controls .plyr__volume:focus-within input[type="range"],
.plyr .plyr__controls .plyr__volume:hover input[type="range"],
.plyr .plyr__controls .plyr__volume:focus-within input[type="range"] {
    opacity: 1 !important;
    pointer-events: auto !important;
}


/* Big play button in center - completely disable ALL hover effects */
.plyr-tv-player .plyr__control--overlaid,
.plyr-tv-container .plyr__control--overlaid,
.plyr--video .plyr__control--overlaid,
.plyr .plyr__control--overlaid {
    background: rgba(0, 0, 0, 0.6) !important;
    border: none !important;
    border-radius: 50% !important;
    width: clamp(48px, 12vw, 72px) !important;
    height: clamp(48px, 12vw, 72px) !important;
    padding: 0 !important;
    opacity: 0.9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: none !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    animation: none !important;
}

.plyr-tv-player .plyr__control--overlaid:hover,
.plyr-tv-player .plyr__control--overlaid:focus,
.plyr-tv-container .plyr__control--overlaid:hover,
.plyr-tv-container .plyr__control--overlaid:focus,
.plyr--video .plyr__control--overlaid:hover,
.plyr--video .plyr__control--overlaid:focus,
.plyr .plyr__control--overlaid:hover,
.plyr .plyr__control--overlaid:focus {
    background: rgba(0, 0, 0, 0.6) !important;
    opacity: 0.9 !important;
    transform: translate(-50%, -50%) !important;
    transition: none !important;
    animation: none !important;
    box-shadow: none !important;
}

.plyr-tv-player .plyr__control--overlaid svg,
.plyr-tv-container .plyr__control--overlaid svg,
.plyr--video .plyr__control--overlaid svg,
.plyr .plyr__control--overlaid svg {
    width: 28px !important;
    height: 28px !important;
    fill: #ffffff !important;
    margin-left: 3px !important;
    transition: none !important;
}

/* Tooltip styling */
.plyr-tv-player .plyr__tooltip,
.plyr-tv-container .plyr__tooltip {
    background: #000000 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    padding: 5px 10px !important;
    border-radius: 2px !important;
    font-family: Arial, sans-serif !important;
}

/* Menu (settings) styling */
.plyr-tv-player .plyr__menu__container,
.plyr-tv-container .plyr__menu__container {
    background: #1a1a1a !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

.plyr-tv-player .plyr__menu__container .plyr__control,
.plyr-tv-container .plyr__menu__container .plyr__control {
    color: #ffffff !important;
    font-size: 13px !important;
    height: auto !important;
}

.plyr-tv-player .plyr__menu__container .plyr__control:hover,
.plyr-tv-container .plyr__menu__container .plyr__control:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.plyr-tv-player .plyr__menu__container .plyr__control[aria-checked="true"]::before,
.plyr-tv-container .plyr__menu__container .plyr__control[aria-checked="true"]::before {
    background: #cc1010 !important;
}

/* Captions styling */
.plyr-tv-player .plyr__captions,
.plyr-tv-container .plyr__captions {
    font-size: 18px !important;
    padding-bottom: 10px !important;
}

.plyr-tv-player .plyr__caption,
.plyr-tv-container .plyr__caption {
    background: rgba(0, 0, 0, 0.8) !important;
    padding: 6px 12px !important;
    border-radius: 2px !important;
}

/* Playlist sidebar - using specific selectors to override theme CSS */
.plyr-tv-container .plyr-tv-playlist {
    width: 130px !important;
    flex-shrink: 0 !important;
    background: #333333 !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.plyr-tv-container .plyr-playlist-header {
    display: none !important;
}

.plyr-tv-container .plyr-playlist-items {
    flex: 1 !important;
    overflow-y: auto !important;
    background: #333333 !important;
}

.plyr-tv-container .plyr-tv-playlist button.plyr-playlist-item {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 32px !important;
    padding: 0 12px !important;
    font-family: Oxygen, sans-serif !important;
    font-size: 13px !important;
    color: #888888 !important;
    background: #333333 !important;
    border: none !important;
    border-bottom: 1px solid #2a2a2a !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    box-sizing: border-box !important;
}

.plyr-tv-container .plyr-tv-playlist button.plyr-playlist-item:hover {
    background: #3a3a3a !important;
    color: #ffffff !important;
}

.plyr-tv-container .plyr-tv-playlist button.plyr-playlist-item.active {
    background: #cc1010 !important;
    color: #ffffff !important;
}

.plyr-tv-container .plyr-tv-playlist button.plyr-playlist-item.active:hover {
    background: #e01515 !important;
}

/* Playlist toggle button */
.plyr-tv-container .plyr-playlist-toggle {
    width: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #1a1a1a !important;
    border: none !important;
    border-left: 1px solid #333333 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: background 0.2s ease !important;
}

.plyr-tv-container .plyr-playlist-toggle:hover {
    background: #2a2a2a !important;
}

.plyr-tv-container .plyr-playlist-toggle .toggle-icon {
    width: 0 !important;
    height: 0 !important;
    border-top: 6px solid transparent !important;
    border-bottom: 6px solid transparent !important;
    border-left: 8px solid #888888 !important;
    transition: transform 0.3s ease !important;
}

.plyr-tv-container .plyr-playlist-toggle:hover .toggle-icon {
    border-left-color: #ffffff !important;
}

/* Collapsed state */
.plyr-tv-container .plyr-tv-playlist.collapsed {
    width: 0 !important;
    overflow: hidden !important;
}

.plyr-tv-container .plyr-playlist-toggle.collapsed .toggle-icon {
    transform: rotate(180deg) !important;
}

/* Scrollbar styling */
.plyr-playlist-items::-webkit-scrollbar {
    width: 6px;
}

.plyr-playlist-items::-webkit-scrollbar-track {
    background: #1a1a1a;
}

.plyr-playlist-items::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
}

.plyr-playlist-items::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Season pagination */
.plyr-tv-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
}

.plyr-season-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    font-family: Oxygen, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    background-color: #333333;
    border: 2px solid #555555;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.plyr-season-btn:hover {
    background-color: #444444;
    border-color: #00a0db;
}

.plyr-season-btn.active {
    background-color: #00a0db;
    border-color: #00a0db;
    color: #ffffff;
}

/* Season indicator - matches episode overlay styling */
.plyr-season-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    padding: 10px 20px;
    background: #cfe2ff !important;
    color: #000000 !important;
    font-family: 'Oxygen', Arial, sans-serif !important;
    font-size: 14px;
    font-weight: 700 !important;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    text-align: center;
}

.plyr-season-indicator.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.plyr-season-indicator .indicator-season {
    display: block;
    font-size: 18px;
    font-weight: 700 !important;
    margin-bottom: 2px;
}

.plyr-season-indicator .indicator-episodes {
    display: block;
    font-size: 12px;
    font-weight: 600;
    opacity: 0.8;
}

/* Episode overlay - S##E## display in corner */
.plyr-episode-overlay {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    background: #cfe2ff !important;
    color: #000000 !important;
    font-family: 'Oxygen', Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    border-radius: 3px;
    z-index: 5;
    pointer-events: none;
    user-select: none;
}

/* ===== FULLSCREEN MODE ===== */

/* Wrapper in fullscreen - layout with playlist */
.plyr-tv-wrapper.plyr-fullscreen-mode {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    height: 100% !important;
    background: #000000 !important;
}

.plyr-tv-wrapper.plyr-fullscreen-mode .plyr-tv-player {
    flex: 1 !important;
    min-width: 0 !important;
    height: 100% !important;
}

.plyr-tv-wrapper.plyr-fullscreen-mode .plyr-tv-player .plyr {
    width: 100% !important;
    height: 100% !important;
}

/* Playlist toggle button in fullscreen */
.plyr-tv-wrapper.plyr-fullscreen-mode .plyr-playlist-toggle {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 100 !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border: none !important;
    padding: 15px 8px !important;
    border-radius: 4px 0 0 4px !important;
}

.plyr-tv-wrapper.plyr-fullscreen-mode.playlist-open .plyr-playlist-toggle {
    right: 280px !important;
}

/* Toggle icon in fullscreen */
.plyr-tv-wrapper.plyr-fullscreen-mode .plyr-playlist-toggle .toggle-icon {
    width: 0 !important;
    height: 0 !important;
    border-top: 8px solid transparent !important;
    border-bottom: 8px solid transparent !important;
    border-right: 10px solid #888888 !important;
    border-left: none !important;
    transition: transform 0.3s ease, border-color 0.2s ease !important;
}

.plyr-tv-wrapper.plyr-fullscreen-mode .plyr-playlist-toggle:hover .toggle-icon {
    border-right-color: #ffffff !important;
}

/* Rotate icon when playlist is open */
.plyr-tv-wrapper.plyr-fullscreen-mode.playlist-open .plyr-playlist-toggle .toggle-icon {
    transform: rotate(180deg) !important;
}

/* Playlist panel in fullscreen - hidden by default */
.plyr-tv-wrapper.plyr-fullscreen-mode .plyr-tv-playlist {
    position: absolute !important;
    right: -280px !important;
    top: 0 !important;
    width: 280px !important;
    height: 100% !important;
    background: rgba(18, 18, 18, 0.95) !important;
    transition: right 0.3s ease !important;
    z-index: 99 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Playlist visible when open */
.plyr-tv-wrapper.plyr-fullscreen-mode.playlist-open .plyr-tv-playlist {
    right: 0 !important;
}

/* Playlist header in fullscreen */
.plyr-tv-wrapper.plyr-fullscreen-mode .plyr-playlist-header {
    padding: 15px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-bottom: 1px solid #333 !important;
    color: #ffffff !important;
}

/* Playlist items container in fullscreen */
.plyr-tv-wrapper.plyr-fullscreen-mode .plyr-playlist-items {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 10px !important;
}

/* Playlist items in fullscreen */
.plyr-tv-wrapper.plyr-fullscreen-mode .plyr-playlist-item {
    width: 100% !important;
    padding: 12px 15px !important;
    margin-bottom: 5px !important;
    font-size: 14px !important;
}

/* Episode overlay in fullscreen - ensure visible */
.plyr-tv-wrapper.plyr-fullscreen-mode .plyr-episode-overlay {
    z-index: 50 !important;
}

/* Season indicator in fullscreen */
.plyr-tv-wrapper.plyr-fullscreen-mode .plyr-season-indicator {
    z-index: 50 !important;
}

/* ===== MOBILE RESPONSIVE ===== */

@media (max-width: 1000px) {
    /* Episode overlay - smaller on mobile */
    .plyr-episode-overlay {
        top: 8px;
        left: 8px;
        padding: 3px 8px;
        font-size: 11px;
    }

    /* Wrapper is relative for overlay positioning */
    .plyr-tv-wrapper {
        height: 220px !important;
        position: relative !important;
    }

    /* Player takes full width */
    .plyr-tv-player {
        width: 100% !important;
        height: 220px !important;
    }

    /* Playlist overlays on top of video */
    .plyr-tv-container .plyr-tv-playlist {
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        width: 100px !important;
        height: 100% !important;
        max-height: 220px !important;
        z-index: 10 !important;
        background: rgba(51, 51, 51, 0.95) !important;
    }

    /* Collapsed by default on small screens (via CSS) */
    .plyr-tv-container .plyr-tv-playlist.mobile-default-collapsed {
        width: 0 !important;
        overflow: hidden !important;
    }

    /* Toggle button - smaller on mobile so it doesn't block video touch area */
    .plyr-tv-container .plyr-playlist-toggle {
        position: absolute !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        height: 60px !important;
        z-index: 11 !important;
    }

    /* When playlist is open, toggle moves with it */
    .plyr-tv-container .plyr-tv-playlist:not(.collapsed) ~ .plyr-playlist-toggle,
    .plyr-tv-container .plyr-playlist-toggle:not(.collapsed) {
        right: 100px !important;
    }

    /* Ensure video area receives touch events for click-to-play */
    .plyr-tv-player .plyr,
    .plyr-tv-player .plyr__video-wrapper {
        touch-action: manipulation !important;
    }

    .plyr-tv-container .plyr-tv-playlist button.plyr-playlist-item {
        height: 24px !important;
        padding: 0 8px !important;
        font-size: 10px !important;
    }

    .plyr-season-btn {
        min-width: 32px;
        height: 32px;
        padding: 0 10px;
        font-size: 13px;
    }

    /* Smaller screens: ultra-compact control bar */
    .plyr-tv-player .plyr__controls,
    .plyr-tv-container .plyr__controls,
    .plyr--video .plyr__controls,
    .plyr .plyr__controls {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 6px !important;
        transform: none !important;
        width: auto !important;
        max-width: 300px !important;
        margin: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        border-radius: 3px !important;
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        padding: 2px 4px !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        gap: 2px !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    /* All control buttons - very compact */
    .plyr-tv-player .plyr__controls .plyr__control,
    .plyr-tv-container .plyr__controls .plyr__control,
    .plyr .plyr__controls .plyr__control {
        height: 20px !important;
        min-width: 18px !important;
        width: 18px !important;
        padding: 0 2px !important;
        flex-shrink: 0 !important;
    }

    .plyr-tv-player .plyr__controls .plyr__control svg,
    .plyr-tv-container .plyr__controls .plyr__control svg,
    .plyr .plyr__controls .plyr__control svg {
        width: 10px !important;
        height: 20px !important;
    }

    /* Time displays - minimal */
    .plyr-tv-player .plyr__controls .plyr__time,
    .plyr-tv-container .plyr__controls .plyr__time,
    .plyr .plyr__controls .plyr__time {
        height: 20px !important;
        line-height: 20px !important;
        font-size: 9px !important;
        min-width: auto !important;
        padding: 0 2px !important;
        flex-shrink: 0 !important;
    }

    /* Progress bar - flexible */
    .plyr-tv-player .plyr__controls .plyr__progress,
    .plyr-tv-container .plyr__controls .plyr__progress,
    .plyr .plyr__controls .plyr__progress {
        margin: 0 2px !important;
    }

    .plyr-tv-player .plyr__controls .plyr__progress__container,
    .plyr-tv-container .plyr__controls .plyr__progress__container,
    .plyr .plyr__controls .plyr__progress__container {
        flex: 1 1 40px !important;
        min-width: 30px !important;
        max-width: 120px !important;
        margin-right: 10px !important;
    }

    /* Force play button visible */
    .plyr-tv-player .plyr__controls .plyr__control[data-plyr="play"],
    .plyr-tv-container .plyr__controls .plyr__control[data-plyr="play"],
    .plyr .plyr__controls .plyr__control[data-plyr="play"] {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        order: -1 !important;
    }

    /* Volume - no extended hover area on mobile (touch devices) */
    .plyr-tv-player .plyr__controls .plyr__volume,
    .plyr-tv-container .plyr__controls .plyr__volume,
    .plyr .plyr__controls .plyr__volume {
        position: relative !important;
        max-width: 18px !important;
        min-width: 18px !important;
        width: 18px !important;
        overflow: visible !important;
        /* Remove extended hover area on mobile - it blocks touch on video */
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Hide volume slider on mobile - use device volume instead */
    .plyr-tv-player .plyr__controls .plyr__volume input[type="range"],
    .plyr-tv-container .plyr__controls .plyr__volume input[type="range"],
    .plyr .plyr__controls .plyr__volume input[type="range"] {
        display: none !important;
    }

    /* Settings menu on mobile - ensure it's not cut off */
    .plyr-tv-player .plyr__menu__container,
    .plyr-tv-container .plyr__menu__container,
    .plyr .plyr__menu__container {
        z-index: 20 !important;
        right: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: 100% !important;
        min-width: 120px !important;
        max-width: 200px !important;
    }

    /* Ensure menu text doesn't truncate */
    .plyr-tv-player .plyr__menu__container .plyr__control,
    .plyr-tv-container .plyr__menu__container .plyr__control,
    .plyr .plyr__menu__container .plyr__control {
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 12px !important;
        padding: 8px 12px !important;
    }
}

@media (max-width: 767px) {
    /* Smaller captions on mobile */
    .plyr-tv-player .plyr__captions,
    .plyr-tv-container .plyr__captions {
        font-size: 14px !important;
        padding-bottom: 8px !important;
    }

    /* Keep horizontal layout on mobile - playlist stays on right */
    .plyr-tv-wrapper {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }

    .plyr-tv-container .plyr-tv-player {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .plyr-tv-container .plyr-tv-playlist {
        width: 100px !important;
        transition: width 0.3s ease !important;
    }

    .plyr-tv-container .plyr-tv-playlist.collapsed {
        width: 0 !important;
        overflow: hidden !important;
    }

    .plyr-tv-header {
        float: none;
        justify-content: center;
        margin-right: 0;
    }

    .plyr-season-select {
        width: 100%;
        max-width: 100%;
        font-size: 16px;
    }

    /* Toggle button for mobile */
    .plyr-tv-container .plyr-playlist-toggle {
        width: 20px !important;
    }

    .plyr-tv-container .plyr-tv-playlist button.plyr-playlist-item {
        height: 28px !important;
        padding: 0 8px !important;
        font-size: 11px !important;
    }

    .plyr-tv-container .plyr-playlist-toggle.collapsed .toggle-icon {
        transform: rotate(180deg) !important;
    }
}

@media (max-width: 480px) {
    /* Even smaller captions on small phones */
    .plyr-tv-player .plyr__captions,
    .plyr-tv-container .plyr__captions {
        font-size: 12px !important;
        padding-bottom: 6px !important;
    }

    .plyr-season-btn {
        min-width: 40px;
        height: 40px;
    }
}