* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #000;
}

body {
    position: fixed;
    inset: 0;
    font: 14px "DIN Pro", Arial, sans-serif;
    line-height: normal;
    font-weight: 400;
}

main.player-shell,
main.fadein,
main.fadeout {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #000;
}

.plyr,
.plyr__video-wrapper,
#hls-video {
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
}

.plyr__video-wrapper {
    overflow: hidden;
}

/* PB_FULLSCREEN_FIT_V1: the iframe already defines the HTML5 video area.
   Plyr's percentage padding must not make that area taller than the viewport. */
.plyr--html5 .plyr__video-wrapper {
    padding-bottom: 0 !important;
}

#hls-video {
    display: block;
    object-fit: contain;
}

.episode-picker {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3333;
    display: block;
    max-width: calc(100% - 20px);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    opacity: 1;
}

.episode-picker:hover,
.episode-picker:focus-within {
    background: transparent;
    box-shadow: none;
    opacity: 1;
}

.episode-picker__select {
    width: auto;
    max-width: min(260px, calc(100vw - 40px));
    min-width: 118px;
    height: 34px;
    margin: 0;
    padding: 0 34px 0 11px;
    border: 0;
    border-radius: 6px;
    outline: 0;
    box-shadow: none;
    color: #f3f6fb;
    background-color: #242833;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #cbd3df 50%), linear-gradient(135deg, #cbd3df 50%, transparent 50%);
    background-position: calc(100% - 14px) 14px, calc(100% - 9px) 14px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.episode-picker__select:focus,
.episode-picker__select:focus-visible {
    border: 0;
    outline: 0;
    box-shadow: none;
}

[data-plyr="remember"] {
    display: none !important;
    pointer-events: none !important;
}

.player-notice {
    position: absolute;
    top: 58px;
    left: 50%;
    z-index: 3334;
    max-width: calc(100% - 28px);
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 7px;
    color: #fff;
    background: rgba(10, 13, 19, 0.88);
    box-shadow: 0 5px 22px rgba(0, 0, 0, 0.3);
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
    opacity: 0;
    transform: translate(-50%, -6px);
    transition: opacity 200ms ease, transform 200ms ease;
    pointer-events: none;
}

.player-notice.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.mol-video-ad-container video {
    max-width: 100%;
    max-height: 100%;
}

.plyr__preview-scrubbing {
    filter: blur(5px);
}

.vast_video_loading,
div#vast_video_loading_hls-video.vast_video_loading {
}

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.66);
    z-index: 99999;
    pointer-events: none;
    font-size: 11px;
    color: #fff;
    height: 30px;
}

.modalDialog ul {
    list-style: none;
    padding-left: 5px;
}

.modalDialog ul li {
    float: left;
    padding-left: 5px;
}

.modalDialog ul li:last-child {
    float: right;
    padding-right: 5px;
}

.close {
    float: right;
    text-decoration: none;
    color: #fff;
}

.op-controls__p2p > img {
    max-height: 18px;
    transition: filter 0.5s ease-in-out;
}

.op-controls__p2p #p2pnumb {
    padding: 0;
    color: #fff;
    font-size: 10px;
    margin: 0;
}

.colorlight {
    filter: invert(.5) sepia(1) saturate(5) hue-rotate(100deg);
}

.fadeout {
    animation: fadeout 220ms ease forwards;
}

.fadein {
    animation: fadein 240ms ease;
}

@keyframes fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 420px) {
    .episode-picker {
        top: 6px;
        left: 6px;
        max-width: calc(100% - 12px);
    }

    .episode-picker__select {
        max-width: calc(100vw - 24px);
        min-width: 104px;
        height: 32px;
        font-size: 13px;
    }

    .player-notice {
        top: 48px;
        font-size: 12px;
    }
}

/* v4: compact resume prompt shown instead of Plyr's large center play button. */
.resume-modal-open .plyr__control--overlaid {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.resume-modal {
    position: absolute;
    inset: 0;
    z-index: 3335;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 54px 18px 64px;
    pointer-events: none;
}

.resume-modal__card {
    width: min(360px, 100%);
    padding: 18px 20px 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    color: #fff;
    background: rgba(22, 22, 22, 0.86);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    text-align: center;
    pointer-events: auto;
}

.resume-modal__title {
    margin: 0 0 5px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
}

.resume-modal__text {
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: 13px;
    line-height: 1.4;
}

.resume-modal__meta {
    margin: 8px 0 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.resume-modal__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 10px 18px;
    border: 0;
    border-radius: 999px;
    outline: 0;
    color: #fff;
    background: #1aafff;
    box-shadow: 0 6px 20px rgba(26,175,255,.20);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background 140ms ease, transform 140ms ease;
}

.resume-modal__button:hover,
.resume-modal__button:focus-visible {
    background: #159ee6;
    outline: 0;
}

.resume-modal__button:active {
    transform: translateY(1px);
}

.resume-modal__play {
    display: inline-block;
    font-size: 12px;
    line-height: 1;
}

@media (max-width: 420px) {
    .resume-modal {
        padding: 48px 12px 58px;
    }

    .resume-modal__card {
        padding: 16px 16px 18px;
        border-radius: 22px;
    }

    .resume-modal__title {
        font-size: 15px;
    }

    .resume-modal__text,
    .resume-modal__button {
        font-size: 12px;
    }

    .resume-modal__meta {
        margin: 7px 0 10px;
        font-size: 13px;
    }
}

/* v15: YouTube-inspired player chrome based on the current compact/rounded player UI. */
.player-ui-modern.plyr--video .plyr__controls {
    display: block;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 54px 16px 12px;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.08) 18%, rgba(0,0,0,.46) 100%);
    transition: opacity 180ms ease, transform 180ms ease;
}

/* Never show Plyr's own centered overlaid play button: v15 uses only the transient action flash. */
.player-ui-modern .plyr__control--overlaid {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Progress line above the controls. */
.player-ui-modern .plyr__progress__container {
    width: 100%;
    margin: 0 0 9px;
    padding: 0 2px;
}

.player-ui-modern .plyr__progress {
    left: 0;
    margin: 0;
}

.player-ui-modern .plyr__progress input[type="range"],
.player-ui-modern .plyr__progress__buffer {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.player-ui-modern .plyr__progress input[type="range"] {
    height: 18px;
    color: #1aafff;
}

.player-ui-modern .plyr__progress input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background-color: rgba(255,255,255,.24);
}

.player-ui-modern .plyr__progress input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background-color: rgba(255,255,255,.24);
}

.player-ui-modern .plyr__progress input[type="range"]::-moz-range-progress {
    height: 4px;
    border-radius: 999px;
    background: #1aafff;
}

.player-ui-modern .plyr__progress input[type="range"]::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
    margin-top: -5px;
    border: 0;
    background: #1aafff;
    box-shadow: none;
    transform: scale(.75);
    transition: transform 100ms ease;
}

.player-ui-modern .plyr__progress input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 0;
    background: #1aafff;
    box-shadow: none;
    transform: scale(.75);
    transition: transform 100ms ease;
}

.player-ui-modern .plyr__progress__container:hover input[type="range"]::-webkit-slider-thumb,
.player-ui-modern .plyr__progress input[type="range"]:focus::-webkit-slider-thumb {
    transform: scale(1);
}

.player-ui-modern .plyr__progress__container:hover input[type="range"]::-moz-range-thumb,
.player-ui-modern .plyr__progress input[type="range"]:focus::-moz-range-thumb {
    transform: scale(1);
}

.player-ui-modern .plyr__progress__buffer {
    height: 4px;
    margin-top: -2px;
    color: rgba(255,255,255,.32);
}

/* Bottom controls are split into rounded translucent groups. */
.player-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.player-controls-left,
.player-controls-right {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.player-controls-right {
    min-height: 44px;
    padding: 4px 7px;
    border: 0;
    border-radius: 999px;
    background: rgba(22,22,22,.62);
    box-shadow: 0 4px 18px rgba(0,0,0,.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.player-control-pill,
.player-time-pill {
    min-height: 44px;
    border: 0;
    border-radius: 999px;
    background: rgba(22,22,22,.62);
    box-shadow: 0 4px 18px rgba(0,0,0,.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.player-control-pill--play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    padding: 10px !important;
}

.player-control-pill--volume {
    flex: 0 0 auto !important;
    width: 44px;
    max-width: 44px !important;
    padding: 3px 5px;
    overflow: hidden;
    transition: width 150ms ease, max-width 150ms ease, background 120ms ease;
}

.player-control-pill--volume:hover,
.player-control-pill--volume:focus-within {
    width: 126px;
    max-width: 126px !important;
}

.player-control-pill--volume input[type="range"] {
    width: 72px;
    min-width: 72px;
    margin-left: 5px;
    color: #fff;
}

.player-control-pill--volume input[type="range"]::-webkit-slider-runnable-track,
.player-control-pill--volume input[type="range"]::-moz-range-track {
    height: 3px;
    background-color: rgba(255,255,255,.30);
}

.player-time-pill {
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-width: 92px;
    padding: 0 16px;
    color: #fff;
    white-space: nowrap;
}

.player-ui-modern .player-time-pill .plyr__time {
    margin: 0;
    padding: 0;
}

.player-time-pill .plyr__time {
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
}

.player-ui-modern .player-time-pill .plyr__time--duration::before {
    content: "/";
    display: inline-block;
    margin: 0 5px;
    padding: 0;
    color: rgba(255,255,255,.72);
}

.player-ui-modern .plyr__control {
    border-radius: 999px;
    color: #fff;
    transition: background 110ms ease, color 110ms ease, transform 110ms ease;
}

.player-ui-modern .player-controls-right > .plyr__control,
.player-ui-modern .player-controls-right > .plyr__menu > .plyr__control,
.player-ui-modern .player-controls-left .plyr__volume > .plyr__control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0 !important;
    margin: 0;
    line-height: 1;
}

.player-ui-modern .player-controls-right .plyr__menu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
}

.player-ui-modern .player-controls-right > .plyr__control svg,
.player-ui-modern .player-controls-right > .plyr__menu > .plyr__control svg,
.player-ui-modern .player-controls-left .plyr__volume > .plyr__control svg {
    margin: 0 auto;
    transform: none;
}

/* Preserve Plyr's pressed/unpressed icon visibility. Do not force hidden
   state icons to display, otherwise mute/captions/fullscreen icons overlap. */
.player-ui-modern .plyr__control.plyr__control--pressed .icon--not-pressed,
.player-ui-modern .plyr__control.plyr__control--pressed .label--not-pressed,
.player-ui-modern .plyr__control:not(.plyr__control--pressed) .icon--pressed,
.player-ui-modern .plyr__control:not(.plyr__control--pressed) .label--pressed {
    display: none !important;
}

.player-ui-modern.plyr--video .plyr__control:hover,
.player-ui-modern.plyr--video .plyr__control[aria-expanded="true"],
.player-ui-modern.plyr--video .plyr__control.plyr__tab-focus {
    color: #fff;
    background: rgba(255,255,255,.12);
    box-shadow: none;
}

/* Settings menu follows the same dark rounded surface language. */
.player-ui-modern .plyr__menu__container {
    border: 0;
    border-radius: 16px;
    background: rgba(24,24,24,.97);
    box-shadow: 0 12px 34px rgba(0,0,0,.38);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.player-ui-modern .plyr__menu__container::after {
    display: none;
}

.player-ui-modern .plyr__menu__container [role="menu"] {
    padding: 6px;
}

.player-ui-modern .plyr__menu__container [role="menuitemradio"],
.player-ui-modern .plyr__menu__container [role="menuitem"] {
    min-height: 38px;
    border-radius: 16px;
}

.player-ui-modern .plyr__menu__container .plyr__control {
    color: #fff;
}

.player-ui-modern .plyr__menu__container .plyr__control:hover,
.player-ui-modern .plyr__menu__container .plyr__control.plyr__tab-focus {
    background: rgba(255,255,255,.10);
}

.player-ui-modern .plyr__tooltip {
    border-radius: 8px;
    background: rgba(20,20,20,.95);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.28);
}

.player-ui-modern .plyr__tooltip::before {
    border-top-color: rgba(20,20,20,.95);
}

/* YouTube-like thumbnail: bordered image, separate time pill below. */
.player-ui-modern .plyr__preview-thumb {
    padding: 0;
    margin-bottom: 44px;
    border: 2px solid rgba(255,255,255,.95);
    border-radius: 13px;
    background: transparent;
    box-shadow: 0 12px 34px rgba(0,0,0,.38);
    overflow: visible;
}

.player-ui-modern .plyr__preview-thumb::before {
    display: none;
}

.player-ui-modern .plyr__preview-thumb__image-container {
    border-radius: 11px;
    overflow: hidden;
    background: #101216;
}

.player-ui-modern .plyr__preview-thumb__time-container {
    bottom: -38px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    white-space: nowrap;
}

.player-ui-modern .plyr__preview-thumb__time-container span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    min-height: 30px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(22,23,27,.94);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(0,0,0,.30);
}

/* Center Play: a radial entrance on pause, a gentle expanding dissolve on play. */
.player-action-flash {
    position: absolute;
    inset: 0;
    z-index: 3336;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1250ms cubic-bezier(.22,.61,.36,1);
}

.player-action-flash.is-visible {
    opacity: 1;
}

.player-action-flash__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    border-radius: 999px;
    background: rgba(24,24,24,.54);
    color: #fff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.player-action-flash__icon svg {
    width: 58px;
    height: 58px;
}


/* Episode selector: closed pill + attached menu as one continuous component. */
.player-ui-modern .episode-picker,
.episode-picker--custom {
    width: 152px;
    min-width: 152px;
    max-width: 152px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.episode-picker--custom .episode-picker__native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.player-ui-modern .episode-picker__button,
.episode-picker--custom .episode-picker__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100% !important;
    min-width: 152px !important;
    max-width: 152px !important;
    height: 38px;
    padding: 0 13px;
    border: 0;
    border-radius: 19px;
    outline: 0;
    color: #fff;
    background: rgba(22,22,22,.82);
    box-shadow: none;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    text-align: left;
}

.episode-picker__button:hover,
.episode-picker__button:focus-visible {
    background: rgba(30,30,30,.94);
    outline: 0;
}

.episode-picker.is-open .episode-picker__button {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: rgba(22,22,22,.97);
}

.episode-picker__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* One clean CSS chevron instead of two thick diagonal bars. */
.episode-picker__chevron {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    margin-top: -4px;
    border-right: 2px solid rgba(255,255,255,.98);
    border-bottom: 2px solid rgba(255,255,255,.98);
    transform: rotate(45deg);
    transition: transform 140ms ease, margin 140ms ease;
}

.episode-picker__chevron::before,
.episode-picker__chevron::after {
    display: none;
}

.episode-picker.is-open .episode-picker__chevron {
    margin-top: 4px;
    transform: rotate(225deg);
}

.episode-picker__menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 3334;
    display: none;
    width: 100%;
    max-height: 248px;
    margin: 0;
    padding: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    border-top: 1px solid rgba(255,255,255,.07);
    border-radius: 0 0 19px 19px;
    background: rgba(22,22,22,.97);
    box-shadow: 0 14px 30px rgba(0,0,0,.38);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.22) transparent;
}

.episode-picker.is-open .episode-picker__menu {
    display: block;
}

.episode-picker__menu::-webkit-scrollbar {
    width: 6px;
}

.episode-picker__menu::-webkit-scrollbar-track {
    background: transparent;
}

.episode-picker__menu::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255,255,255,.22);
}

.episode-picker__menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,.34);
}

.episode-picker__item {
    display: block;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    border: 0;
    border-radius: 16px;
    color: #fff;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
}

.episode-picker__item:hover,
.episode-picker__item:focus-visible {
    background: rgba(255,255,255,.09);
    outline: 0;
}

.episode-picker__item.is-selected {
    background: rgba(26,175,255,.18);
    color: #fff;
}

@media (max-width: 640px) {
    .player-ui-modern.plyr--video .plyr__controls {
        padding: 48px 8px 8px;
    }

    .player-controls-row {
        gap: 6px;
    }

    .player-controls-left,
    .player-controls-right {
        gap: 3px;
    }

    .player-controls-right,
    .player-control-pill,
    .player-time-pill {
        min-height: 38px;
    }

    .player-controls-right {
        padding: 3px 4px;
    }

    .player-control-pill--play {
        width: 38px;
        min-width: 38px;
        padding: 8px !important;
    }

    .player-control-pill--volume {
        width: 38px;
        max-width: 38px !important;
        padding: 1px 2px;
    }

    .player-control-pill--volume:hover,
    .player-control-pill--volume:focus-within {
        width: 38px;
        max-width: 38px !important;
    }

    .player-control-pill--volume input[type="range"] {
        display: none;
    }

    .player-time-pill {
        min-width: 0;
        padding: 0 10px;
    }

    .player-time-pill .plyr__time {
        font-size: 12px;
    }

    .player-ui-modern .plyr__control {
        padding: 6px;
    }

    .player-ui-modern .player-controls-right .plyr__control,
    .player-ui-modern .player-controls-left .plyr__volume .plyr__control,
    .player-ui-modern .player-controls-right .plyr__menu {
        width: 32px;
        height: 32px;
        min-width: 32px;
        padding: 0 !important;
    }


    .player-action-flash__icon {
        width: 88px;
        height: 88px;
    }

    .player-action-flash__icon svg {
        width: 46px;
        height: 46px;
    }

    .player-ui-modern .episode-picker,
    .episode-picker--custom {
        width: 152px;
        min-width: 152px;
        max-width: 152px;
    }

    .episode-picker__button {
        height: 34px;
        border-radius: 17px;
        font-size: 12px;
    }

    .episode-picker.is-open .episode-picker__button {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .episode-picker__menu {
        max-height: 210px;
        border-radius: 0 0 17px 17px;
    }

    .player-ui-modern .plyr__preview-thumb__time-container span {
        min-height: 27px;
        padding: 4px 10px;
        font-size: 12px;
    }
}

@media (max-width: 420px) {
    .player-time-pill .plyr__time--duration {
        display: none;
    }

    .player-time-pill .plyr__time--duration::before {
        display: none;
    }

    .player-ui-modern .player-controls-right [data-plyr="captions"] {
        display: none;
    }
}


/* v17: selector sizing and control-state corrections. */
.player-ui-modern .episode-picker,
.player-ui-modern .episode-picker.episode-picker--custom,
.episode-picker--custom {
    width: 152px !important;
    min-width: 152px !important;
    max-width: 152px !important;
}

.player-ui-modern .episode-picker__button,
.episode-picker--custom .episode-picker__button,
.player-ui-modern.plyr button.episode-picker__button {
    display: flex;
    width: 152px !important;
    min-width: 152px !important;
    max-width: 152px !important;
    box-sizing: border-box;
}

.player-ui-modern .episode-picker__menu,
.episode-picker--custom .episode-picker__menu {
    width: 152px !important;
    min-width: 152px !important;
    max-width: 152px !important;
    box-sizing: border-box;
}


/* Keep the fullscreen tooltip inside the right edge of the player. */
.player-ui-modern .player-controls-right [data-plyr="fullscreen"] .plyr__tooltip {
    left: auto;
    right: 0;
    transform: translate(0, 10px) scale(.8);
    transform-origin: 100% 100%;
}

.player-ui-modern .player-controls-right [data-plyr="fullscreen"] .plyr__tooltip::before {
    left: auto;
    right: 18px;
    transform: translateX(50%);
}

.player-ui-modern .player-controls-right [data-plyr="fullscreen"]:hover .plyr__tooltip,
.player-ui-modern .player-controls-right [data-plyr="fullscreen"].plyr__tab-focus .plyr__tooltip,
.player-ui-modern .player-controls-right [data-plyr="fullscreen"] .plyr__tooltip--visible {
    transform: translate(0, 0) scale(1);
}


@media (max-width: 640px) {
    .player-ui-modern .episode-picker,
    .player-ui-modern .episode-picker.episode-picker--custom,
    .episode-picker--custom,
    .player-ui-modern .episode-picker__button,
    .episode-picker--custom .episode-picker__button,
    .player-ui-modern.plyr button.episode-picker__button,
    .player-ui-modern .episode-picker__menu,
    .episode-picker--custom .episode-picker__menu {
        width: 152px !important;
        min-width: 152px !important;
        max-width: 152px !important;
    }
}


/* v18: final control alignment, selector cleanup and left-edge tooltip fix. */
.player-ui-modern [data-plyr="captions"] {
    display: none !important;
}

.player-ui-modern .episode-picker,
.player-ui-modern .episode-picker.episode-picker--custom,
.episode-picker--custom {
    width: 152px !important;
    min-width: 152px !important;
    max-width: 152px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
}

.player-ui-modern.plyr button.episode-picker__button,
.player-ui-modern .episode-picker__button,
.episode-picker--custom .episode-picker__button,
.player-ui-modern .episode-picker__menu,
.episode-picker--custom .episode-picker__menu {
    width: 152px !important;
    min-width: 152px !important;
    max-width: 152px !important;
    box-sizing: border-box;
}

/* The play button is no longer a direct child of .plyr__controls, therefore
   Plyr's built-in first-control tooltip boundary rule no longer applies. */
.player-ui-modern .player-control-pill--play .plyr__tooltip {
    left: 0;
    right: auto;
    transform: translate(0, 10px) scale(.8);
    transform-origin: 0 100%;
}

.player-ui-modern .player-control-pill--play .plyr__tooltip::before {
    left: 18px;
    right: auto;
    transform: translateX(-50%);
}

.player-ui-modern .player-control-pill--play:hover .plyr__tooltip,
.player-ui-modern .player-control-pill--play.plyr__tab-focus .plyr__tooltip,
.player-ui-modern .player-control-pill--play .plyr__tooltip--visible {
    transform: translate(0, 0) scale(1);
}

@media (max-width: 640px) {
    .player-ui-modern .episode-picker,
    .player-ui-modern .episode-picker.episode-picker--custom,
    .episode-picker--custom,
    .player-ui-modern.plyr button.episode-picker__button,
    .player-ui-modern .episode-picker__button,
    .episode-picker--custom .episode-picker__button,
    .player-ui-modern .episode-picker__menu,
    .episode-picker--custom .episode-picker__menu {
        width: 152px !important;
        min-width: 152px !important;
        max-width: 152px !important;
    }
}


/* v22: keep the left Play tooltip above the progress bar, matching the right-edge fullscreen tooltip visually. */
.player-ui-modern .player-control-pill--play .plyr__tooltip {
    bottom: calc(100% + 22px);
    margin-bottom: 0;
}

/* v23: episode selector visibility follows pointer activity in the player. */
.player-ui-modern .episode-picker {
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 0s;
}

.player-ui-modern .episode-picker.episode-picker--auto-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-6px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}

.player-ui-modern .episode-picker.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none;
}

/* v26: consolidated responsive control layer. Replaces the v24/v25
   Settings sizing patches so the final cascade has one source of truth. */

/* Deterministic stacking: the filled timeline stays below transient UI. */
.player-ui-modern .plyr__progress__container {
    position: relative;
    z-index: 1;
}

.player-ui-modern .player-controls-row {
    position: relative;
    z-index: 4;
}

.player-ui-modern .player-controls-row .plyr__control,
.player-ui-modern .player-controls-row .plyr__menu {
    position: relative;
}

.player-ui-modern .player-controls-row .plyr__control:hover,
.player-ui-modern .player-controls-row .plyr__control.plyr__tab-focus,
.player-ui-modern .player-controls-row .plyr__control[aria-expanded="true"],
.player-ui-modern .player-controls-row .plyr__menu:focus-within {
    z-index: 8;
}

/* Keep control tooltips above the timeline. Existing left/right edge rules
   for Play and Fullscreen continue to clamp them horizontally. */
.player-ui-modern .player-controls-row .plyr__tooltip {
    bottom: calc(100% + 28px);
    margin-bottom: 0;
    z-index: 20;
}

.player-ui-modern .plyr__menu {
    z-index: 12;
}

/* Settings width, vertical room and bottom offset are supplied by
   bindResponsiveSettings() from the real player rectangle. */
.player-ui-modern .plyr__menu__container {
    bottom: var(--player-settings-bottom, calc(100% + 28px));
    right: 0;
    width: var(--player-settings-width, 220px) !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: var(--player-settings-max-height, 280px);
    margin-bottom: 0;
    overflow: hidden !important;
    z-index: 40;
}

/* Plyr normally animates both width and height of this wrapper. Width
   animation caused the compact menu to collapse, so the wrapper is stable. */
.player-ui-modern .plyr__menu__container > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: var(--player-settings-max-height, 280px) !important;
    overflow: hidden !important;
    transition: none !important;
}

/* Home, Quality and Speed are separate Plyr panels. The visible panel is a
   flex column: its Back/header stays fixed; only options are scrollable. */
.player-ui-modern .plyr__menu__container > div > div:not([hidden]) {
    display: flex;
    flex-direction: column;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: var(--player-settings-max-height, 280px);
    overflow: hidden;
}

.player-ui-modern .plyr__menu__container .plyr__control--back {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: calc(100% - 12px) !important;
    min-width: 0 !important;
    min-height: 38px;
    margin: 6px 6px 3px;
    padding: 6px 10px 6px 30px !important;
    border-radius: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-ui-modern .plyr__menu__container .plyr__control--back::before {
    display: none;
}

.player-ui-modern .plyr__menu__container [role="menu"] {
    flex: 1 1 auto;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0;
    max-height: none !important;
    padding: 6px;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.24) transparent;
}

.player-ui-modern .plyr__menu__container [role="menu"]::-webkit-scrollbar {
    width: 5px;
}

.player-ui-modern .plyr__menu__container [role="menu"]::-webkit-scrollbar-track {
    background: transparent;
}

.player-ui-modern .plyr__menu__container [role="menu"]::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255,255,255,.24);
}

.player-ui-modern .plyr__menu__container .plyr__control {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 38px;
    margin: 2px 0 0;
    padding: 6px 10px !important;
    border-radius: 16px;
    overflow: hidden;
    white-space: nowrap;
}

.player-ui-modern .plyr__menu__container [role="menu"] > .plyr__control:first-child {
    margin-top: 0;
}

/* Main Settings rows are a strict two-column grid. This prevents values such
   as "Нормальная" from ever occupying the label's column. */
.player-ui-modern .plyr__menu__container .plyr__control > span:not(.plyr__sr-only) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden;
}

.player-ui-modern .plyr__menu__container .plyr__control--forward {
    padding-right: 25px !important;
}

.player-ui-modern .plyr__menu__container .plyr__control--forward::after {
    right: 9px;
}

.player-ui-modern .plyr__menu__container .plyr__menu__value {
    display: block;
    min-width: 0 !important;
    max-width: 112px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-ui-modern .plyr__menu__container .plyr__badge {
    display: inline-block;
    margin-left: 0;
}

/* Quality/Speed option rows use Plyr's selection dot plus one text column. */
.player-ui-modern .plyr__menu__container .plyr__control[role="menuitemradio"] {
    display: flex;
    align-items: center;
    padding: 6px 9px 6px 7px !important;
}

.player-ui-modern .plyr__menu__container .plyr__control[role="menuitemradio"] > span:not(.plyr__sr-only) {
    display: block !important;
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* PiP is never hidden due to embed width. Plyr still decides whether the
   browser/Permissions Policy actually supports PiP in this iframe. */
.player-ui-modern.plyr--pip-supported [data-plyr="pip"] {
    display: inline-flex !important;
}

.player-ui-modern:not(.plyr--pip-supported) [data-plyr="pip"] {
    display: none !important;
}

.player-ui-modern [data-plyr="pip"] svg {
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Restore the expandable volume range that old <=640px rules intentionally
   hid. Hover/focus works on mouse/pen; player-ui.js adds is-volume-open for
   compact touch layouts. */
.player-ui-modern .player-control-pill--volume.is-volume-open,
.player-ui-modern .player-control-pill--volume:hover,
.player-ui-modern .player-control-pill--volume:focus-within {
    width: 126px;
    max-width: 126px !important;
}

@media (max-width: 640px) {
    .player-ui-modern.plyr--video .plyr__controls {
        padding-left: 8px;
        padding-right: 8px;
    }

    .player-ui-modern .player-controls-row .plyr__tooltip {
        bottom: calc(100% + 25px);
    }

    .player-ui-modern .player-control-pill--volume input[type="range"] {
        display: block;
        width: 68px;
        min-width: 68px;
        flex: 1 1 auto;
    }

    .player-ui-modern .player-control-pill--volume.is-volume-open,
    .player-ui-modern .player-control-pill--volume:hover,
    .player-ui-modern .player-control-pill--volume:focus-within {
        width: 116px;
        max-width: 116px !important;
        padding-left: 3px;
        padding-right: 6px;
    }
}

@media (max-width: 480px) {
    .player-ui-modern.plyr--video .plyr__controls {
        padding: 44px 6px 6px;
    }

    .player-controls-row {
        gap: 4px;
    }

    .player-controls-left,
    .player-controls-right {
        gap: 2px;
    }

    .player-controls-right {
        min-height: 36px;
        padding: 2px 3px;
    }

    .player-control-pill,
    .player-time-pill {
        min-height: 36px;
    }

    .player-control-pill--play,
    .player-control-pill--volume {
        width: 36px;
        min-width: 36px;
        max-width: 36px !important;
    }

    .player-time-pill {
        padding: 0 7px;
    }

    .player-time-pill .plyr__time {
        font-size: 11px;
    }

    .player-ui-modern .player-controls-right > .plyr__control,
    .player-ui-modern .player-controls-right > .plyr__menu > .plyr__control,
    .player-ui-modern .player-controls-left .plyr__volume > .plyr__control,
    .player-ui-modern .player-controls-right .plyr__menu {
        width: 30px;
        height: 30px;
        min-width: 30px;
    }

    .player-ui-modern .player-control-pill--volume input[type="range"] {
        width: min(64px, 22vw);
        min-width: min(64px, 22vw);
    }

    .player-ui-modern .player-control-pill--volume.is-volume-open,
    .player-ui-modern .player-control-pill--volume:hover,
    .player-ui-modern .player-control-pill--volume:focus-within {
        width: min(108px, 36vw);
        max-width: min(108px, 36vw) !important;
        padding-left: 3px;
        padding-right: 5px;
    }

    .player-ui-modern .plyr__menu__container {
        font-size: 14px;
    }

    .player-ui-modern .plyr__menu__container .plyr__control,
    .player-ui-modern .plyr__menu__container .plyr__control--back {
        min-height: 36px;
        font-size: 13px;
    }
}

@media (max-width: 360px) {
    .player-ui-modern.plyr--video .plyr__controls {
        padding-left: 5px;
        padding-right: 5px;
    }

    .player-controls-row {
        gap: 3px;
    }

    .player-control-pill--play,
    .player-control-pill--volume {
        width: 34px;
        min-width: 34px;
        max-width: 34px !important;
    }

    .player-time-pill {
        padding: 0 5px;
    }

    .player-ui-modern .player-controls-right > .plyr__control,
    .player-ui-modern .player-controls-right > .plyr__menu > .plyr__control,
    .player-ui-modern .player-controls-left .plyr__volume > .plyr__control,
    .player-ui-modern .player-controls-right .plyr__menu {
        width: 29px;
        height: 29px;
        min-width: 29px;
    }

    .player-ui-modern .player-controls-right {
        padding-left: 2px;
        padding-right: 2px;
    }

    .player-ui-modern .player-control-pill--volume.is-volume-open,
    .player-ui-modern .player-control-pill--volume:hover,
    .player-ui-modern .player-control-pill--volume:focus-within {
        width: min(100px, 35vw);
        max-width: min(100px, 35vw) !important;
    }
}

/* Low-height landscape/compact embeds: keep the menu inside the video and
   use its internal scrollbar rather than letting the panel escape upward. */
@media (max-height: 260px) {
    .player-ui-modern .plyr__menu__container .plyr__control,
    .player-ui-modern .plyr__menu__container .plyr__control--back {
        min-height: 32px;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        font-size: 12px;
    }

    .player-ui-modern .plyr__menu__container [role="menu"] {
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

/* Preserve actual playback controls first in extremely tiny embeds. */
@media (max-width: 285px) {
    .player-time-pill {
        display: none;
    }
}

.player-ui-modern .plyr__preview-thumb {
    z-index: 30;
}


/* v27: container-driven adaptive layer.
   This final layer is based on the real .plyr rectangle (data-ui-width /
   data-ui-height from player-ui.js), so parent-site layout and iframe aspect
   ratio no longer make Settings/controls depend on unrelated viewport rules. */

/* Settings keeps Plyr's native absolute positioning. JS calculates a
   local bottom/right offset from the actual player rectangle. This avoids
   disappearing menus when a transformed ancestor changes fixed positioning. */
.player-ui-modern .plyr__menu__container {
    position: absolute !important;
    left: auto !important;
    top: auto !important;
    bottom: var(--player-settings-bottom, calc(100% + 28px)) !important;
    width: var(--player-settings-width, 220px) !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: var(--player-settings-max-height, 300px) !important;
    margin: 0 !important;
    border-radius: var(--player-settings-radius, 16px) !important;
    font-size: var(--player-settings-font-size, 14px) !important;
    overflow: hidden !important;
    transform: none !important;
    z-index: 60 !important;
}

.player-ui-modern .plyr__menu__container > div {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: var(--player-settings-max-height, 300px) !important;
    overflow: hidden !important;
    transition: none !important;
}

.player-ui-modern .plyr__menu__container > div > div:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: var(--player-settings-max-height, 300px) !important;
    overflow: hidden !important;
}

.player-ui-modern .plyr__menu__container [role="menu"] {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 5px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    text-align: left !important;
}

.player-ui-modern .plyr__menu__container .plyr__control,
.player-ui-modern .plyr__menu__container .plyr__control--back {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: var(--player-settings-row-height, 38px) !important;
    height: var(--player-settings-row-height, 38px) !important;
    margin: 2px 0 0 !important;
    padding: 4px var(--player-settings-pad-x, 10px) !important;
    border-radius: var(--player-settings-radius, 16px) !important;
    font-size: var(--player-settings-font-size, 14px) !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
    text-align: left !important;
    white-space: nowrap !important;
}

.player-ui-modern .plyr__menu__container .plyr__control--back {
    flex: 0 0 var(--player-settings-row-height, 38px) !important;
    width: calc(100% - 10px) !important;
    margin: 5px 5px 2px !important;
    padding-left: calc(var(--player-settings-pad-x, 10px) + 20px) !important;
    text-align: center !important;
}

.player-ui-modern .plyr__menu__container .plyr__control--back::after {
    left: 8px !important;
}

.player-ui-modern .plyr__menu__container .plyr__control--forward {
    padding-right: calc(var(--player-settings-pad-x, 10px) + 15px) !important;
}

.player-ui-modern .plyr__menu__container .plyr__control--forward::after {
    right: 7px !important;
}

/* Main Settings rows: label and current value cannot overlap. */
.player-ui-modern .plyr__menu__container .plyr__control > span:not(.plyr__sr-only) {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-align: left !important;
}

.player-ui-modern .plyr__menu__container .plyr__menu__value {
    flex: 0 1 48% !important;
    min-width: 0 !important;
    max-width: 48% !important;
    margin-left: auto !important;
    overflow: hidden !important;
    text-align: right !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Quality/Speed rows are compact and use the native Plyr radio marker. */
.player-ui-modern .plyr__menu__container .plyr__control[role="menuitemradio"] {
    display: flex !important;
    align-items: center !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
}
.player-ui-modern .plyr__menu__container .plyr__control[role="menuitemradio"]::before {
    width: 14px !important;
    height: 14px !important;
    margin-right: 8px !important;
}
.player-ui-modern .plyr__menu__container .plyr__control[role="menuitemradio"]::after {
    left: 11px !important;
    width: 5px !important;
    height: 5px !important;
}
.player-ui-modern .plyr__menu__container .plyr__control[role="menuitemradio"] > span:not(.plyr__sr-only) {
    display: inline-flex !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.player-ui-modern .plyr__menu__container .plyr__badge {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    font-size: .68em !important;
}

/* Actual-player width classes. They intentionally override the legacy
   viewport media queries above. */
.player-ui-modern[data-ui-width="lg"] .player-controls-right,
.player-ui-modern[data-ui-width="lg"] .player-control-pill,
.player-ui-modern[data-ui-width="lg"] .player-time-pill {
    min-height: 40px !important;
}

.player-ui-modern[data-ui-width="md"] .player-controls-right,
.player-ui-modern[data-ui-width="md"] .player-control-pill,
.player-ui-modern[data-ui-width="md"] .player-time-pill {
    min-height: 36px !important;
}
.player-ui-modern[data-ui-width="md"] .player-control-pill--play,
.player-ui-modern[data-ui-width="md"] .player-control-pill--volume {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
}
.player-ui-modern[data-ui-width="md"] .player-controls-right > .plyr__control,
.player-ui-modern[data-ui-width="md"] .player-controls-right > .plyr__menu > .plyr__control,
.player-ui-modern[data-ui-width="md"] .player-controls-left .plyr__volume > .plyr__control,
.player-ui-modern[data-ui-width="md"] .player-controls-right .plyr__menu {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
}
.player-ui-modern[data-ui-width="md"] .player-time-pill {
    min-width: 0 !important;
    padding: 0 8px !important;
}
.player-ui-modern[data-ui-width="md"] .player-time-pill .plyr__time {
    font-size: 11.5px !important;
}
.player-ui-modern[data-ui-width="md"] .episode-picker,
.player-ui-modern[data-ui-width="md"] .episode-picker__button,
.player-ui-modern[data-ui-width="md"] .episode-picker__menu {
    width: 144px !important;
    min-width: 144px !important;
    max-width: 144px !important;
}

.player-ui-modern[data-ui-width="sm"] .player-controls-row,
.player-ui-modern[data-ui-width="xs"] .player-controls-row {
    gap: 3px !important;
}
.player-ui-modern[data-ui-width="sm"] .player-controls-left,
.player-ui-modern[data-ui-width="sm"] .player-controls-right,
.player-ui-modern[data-ui-width="xs"] .player-controls-left,
.player-ui-modern[data-ui-width="xs"] .player-controls-right {
    gap: 2px !important;
}
.player-ui-modern[data-ui-width="sm"] .player-controls-right,
.player-ui-modern[data-ui-width="sm"] .player-control-pill,
.player-ui-modern[data-ui-width="sm"] .player-time-pill,
.player-ui-modern[data-ui-width="xs"] .player-controls-right,
.player-ui-modern[data-ui-width="xs"] .player-control-pill,
.player-ui-modern[data-ui-width="xs"] .player-time-pill {
    min-height: 34px !important;
}
.player-ui-modern[data-ui-width="sm"] .player-control-pill--play,
.player-ui-modern[data-ui-width="sm"] .player-control-pill--volume,
.player-ui-modern[data-ui-width="xs"] .player-control-pill--play,
.player-ui-modern[data-ui-width="xs"] .player-control-pill--volume {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
}
.player-ui-modern[data-ui-width="sm"] .player-controls-right > .plyr__control,
.player-ui-modern[data-ui-width="sm"] .player-controls-right > .plyr__menu > .plyr__control,
.player-ui-modern[data-ui-width="sm"] .player-controls-left .plyr__volume > .plyr__control,
.player-ui-modern[data-ui-width="sm"] .player-controls-right .plyr__menu,
.player-ui-modern[data-ui-width="xs"] .player-controls-right > .plyr__control,
.player-ui-modern[data-ui-width="xs"] .player-controls-right > .plyr__menu > .plyr__control,
.player-ui-modern[data-ui-width="xs"] .player-controls-left .plyr__volume > .plyr__control,
.player-ui-modern[data-ui-width="xs"] .player-controls-right .plyr__menu {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
}
.player-ui-modern[data-ui-width="sm"] .player-time-pill,
.player-ui-modern[data-ui-width="xs"] .player-time-pill {
    min-width: 0 !important;
    padding: 0 6px !important;
}
.player-ui-modern[data-ui-width="sm"] .player-time-pill .plyr__time,
.player-ui-modern[data-ui-width="xs"] .player-time-pill .plyr__time {
    font-size: 11px !important;
}
.player-ui-modern[data-ui-width="sm"] .player-time-pill .plyr__time--duration,
.player-ui-modern[data-ui-width="xs"] .player-time-pill .plyr__time--duration {
    display: none !important;
}
.player-ui-modern[data-ui-width="sm"] .episode-picker,
.player-ui-modern[data-ui-width="sm"] .episode-picker__button,
.player-ui-modern[data-ui-width="sm"] .episode-picker__menu {
    width: 136px !important;
    min-width: 136px !important;
    max-width: 136px !important;
}
.player-ui-modern[data-ui-width="xs"] .episode-picker,
.player-ui-modern[data-ui-width="xs"] .episode-picker__button,
.player-ui-modern[data-ui-width="xs"] .episode-picker__menu {
    width: 126px !important;
    min-width: 126px !important;
    max-width: 126px !important;
}

/* Volume: medium embeds can still expand inline. Narrow embeds use a flyout
   above the button so the controls row never gets pushed into the right group. */
.player-ui-modern[data-ui-width="md"] .player-control-pill--volume.is-volume-open,
.player-ui-modern[data-ui-width="md"] .player-control-pill--volume:hover,
.player-ui-modern[data-ui-width="md"] .player-control-pill--volume:focus-within {
    width: 108px !important;
    max-width: 108px !important;
}
.player-ui-modern[data-ui-width="md"] .player-control-pill--volume input[type="range"] {
    display: block !important;
    width: 62px !important;
    min-width: 62px !important;
}

.player-ui-modern[data-ui-width="sm"] .player-control-pill--volume,
.player-ui-modern[data-ui-width="xs"] .player-control-pill--volume {
    position: relative !important;
    overflow: visible !important;
}
.player-ui-modern[data-ui-width="sm"] .player-control-pill--volume:hover,
.player-ui-modern[data-ui-width="sm"] .player-control-pill--volume:focus-within,
.player-ui-modern[data-ui-width="sm"] .player-control-pill--volume.is-volume-open,
.player-ui-modern[data-ui-width="xs"] .player-control-pill--volume:hover,
.player-ui-modern[data-ui-width="xs"] .player-control-pill--volume:focus-within,
.player-ui-modern[data-ui-width="xs"] .player-control-pill--volume.is-volume-open {
    width: 34px !important;
    max-width: 34px !important;
}
/* Keep the compact volume button and its flyout in one hover corridor.
   Without this transparent bridge the 8px visual gap causes :hover/pointerleave
   to close the flyout before the pointer can reach the range input. */
.player-ui-modern[data-ui-width="sm"] .player-control-pill--volume::before,
.player-ui-modern[data-ui-width="xs"] .player-control-pill--volume::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 100%;
    width: 104px;
    height: 10px;
    background: transparent;
    pointer-events: none;
    z-index: 34;
}
.player-ui-modern[data-ui-width="sm"] .player-control-pill--volume:hover::before,
.player-ui-modern[data-ui-width="sm"] .player-control-pill--volume:focus-within::before,
.player-ui-modern[data-ui-width="sm"] .player-control-pill--volume.is-volume-open::before,
.player-ui-modern[data-ui-width="xs"] .player-control-pill--volume:hover::before,
.player-ui-modern[data-ui-width="xs"] .player-control-pill--volume:focus-within::before,
.player-ui-modern[data-ui-width="xs"] .player-control-pill--volume.is-volume-open::before {
    pointer-events: auto;
}

.player-ui-modern[data-ui-width="sm"] .player-control-pill--volume input[type="range"],
.player-ui-modern[data-ui-width="xs"] .player-control-pill--volume input[type="range"] {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    bottom: calc(100% + 8px) !important;
    width: 104px !important;
    min-width: 104px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    background: rgba(22,22,22,.92) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.28) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(4px) !important;
    transition: opacity .12s ease, transform .12s ease, visibility .12s ease !important;
    z-index: 35 !important;
}
.player-ui-modern[data-ui-width="sm"] .player-control-pill--volume:hover input[type="range"],
.player-ui-modern[data-ui-width="sm"] .player-control-pill--volume:focus-within input[type="range"],
.player-ui-modern[data-ui-width="sm"] .player-control-pill--volume.is-volume-open input[type="range"],
.player-ui-modern[data-ui-width="xs"] .player-control-pill--volume:hover input[type="range"],
.player-ui-modern[data-ui-width="xs"] .player-control-pill--volume:focus-within input[type="range"],
.player-ui-modern[data-ui-width="xs"] .player-control-pill--volume.is-volume-open input[type="range"] {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

/* Low player height gets compact vertical UI regardless of width. */
.player-ui-modern[data-ui-height="short"] .plyr__controls,
.player-ui-modern[data-ui-height="xshort"] .plyr__controls {
    padding-top: 34px !important;
}
.player-ui-modern[data-ui-height="xshort"] .player-controls-right,
.player-ui-modern[data-ui-height="xshort"] .player-control-pill,
.player-ui-modern[data-ui-height="xshort"] .player-time-pill {
    min-height: 32px !important;
}
.player-ui-modern[data-ui-height="xshort"] .player-action-flash__icon {
    width: 72px !important;
    height: 72px !important;
}
.player-ui-modern[data-ui-height="short"] .episode-picker__menu {
    max-height: 160px !important;
}
.player-ui-modern[data-ui-height="xshort"] .episode-picker__menu {
    max-height: 118px !important;
}

/* Preview also scales from the player, avoiding a large thumbnail in compact embeds. */
.player-ui-modern[data-ui-width="md"] .plyr__preview-thumb__image-container {
    max-width: 190px !important;
}
.player-ui-modern[data-ui-width="sm"] .plyr__preview-thumb__image-container,
.player-ui-modern[data-ui-width="xs"] .plyr__preview-thumb__image-container {
    max-width: 150px !important;
}
.player-ui-modern[data-ui-height="xshort"] .plyr__preview-thumb {
    margin-bottom: 34px !important;
}
.player-ui-modern[data-ui-height="xshort"] .plyr__preview-thumb__time-container {
    bottom: -31px !important;
}
.player-ui-modern[data-ui-height="xshort"] .plyr__preview-thumb__time-container span {
    min-height: 24px !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
}

/* Tooltips stay compact on small players while retaining the existing edge clamps. */
.player-ui-modern[data-ui-width="sm"] .player-controls-row .plyr__tooltip,
.player-ui-modern[data-ui-width="xs"] .player-controls-row .plyr__tooltip,
.player-ui-modern[data-ui-height="xshort"] .player-controls-row .plyr__tooltip {
    padding: 4px 7px !important;
    font-size: 11px !important;
}

/* v37: compact controls polish.
   On SM/XS players the volume range expands horizontally over the time pill.
   This avoids the competing Mute tooltip + vertical flyout and keeps pointer
   travel inside one continuous interactive area. */
.player-ui-modern[data-ui-width="sm"] .player-control-pill--volume,
.player-ui-modern[data-ui-width="xs"] .player-control-pill--volume {
    z-index: 60 !important;
}

/* The slider itself replaces the compact Mute tooltip. */
.player-ui-modern[data-ui-width="sm"] .player-control-pill--volume .plyr__tooltip,
.player-ui-modern[data-ui-width="xs"] .player-control-pill--volume .plyr__tooltip {
    display: none !important;
}

/* v36 used a vertical transparent bridge. It is no longer needed because
   the horizontal range overlaps the mute pill by a few pixels. */
.player-ui-modern[data-ui-width="sm"] .player-control-pill--volume::before,
.player-ui-modern[data-ui-width="xs"] .player-control-pill--volume::before {
    display: none !important;
    pointer-events: none !important;
}

.player-ui-modern[data-ui-width="sm"] .player-control-pill--volume input[type="range"],
.player-ui-modern[data-ui-width="xs"] .player-control-pill--volume input[type="range"] {
    top: 0 !important;
    bottom: auto !important;
    left: 30px !important;
    height: 34px !important;
    margin: 0 !important;
    transform: translateX(-4px) !important;
    transform-origin: 0 50% !important;
    z-index: 59 !important;
}
.player-ui-modern[data-ui-width="sm"] .player-control-pill--volume input[type="range"] {
    width: 104px !important;
    min-width: 104px !important;
    padding: 0 11px !important;
}
.player-ui-modern[data-ui-width="xs"] .player-control-pill--volume input[type="range"] {
    width: 92px !important;
    min-width: 92px !important;
    padding: 0 10px !important;
}
.player-ui-modern[data-ui-width="sm"] .player-control-pill--volume:hover input[type="range"],
.player-ui-modern[data-ui-width="sm"] .player-control-pill--volume:focus-within input[type="range"],
.player-ui-modern[data-ui-width="sm"] .player-control-pill--volume.is-volume-open input[type="range"],
.player-ui-modern[data-ui-width="xs"] .player-control-pill--volume:hover input[type="range"],
.player-ui-modern[data-ui-width="xs"] .player-control-pill--volume:focus-within input[type="range"],
.player-ui-modern[data-ui-width="xs"] .player-control-pill--volume.is-volume-open input[type="range"] {
    transform: translateX(0) !important;
}

/* The time pill stays in layout and is intentionally covered by the open
   volume flyout instead of being pushed sideways. */
.player-ui-modern[data-ui-width="sm"] .player-time-pill,
.player-ui-modern[data-ui-width="xs"] .player-time-pill {
    position: relative !important;
    z-index: 1 !important;
}

/* v37-tm-bild-11: compact resume card, persistent paused Play state,
   restored ±10s controls and slightly roomier volume range edge spacing. */

/* Resume card scales from the actual player size, not only the outer page. */
.resume-modal__card {
    max-height: calc(100% - 8px);
    overflow: auto;
}

.player-ui-modern[data-ui-width="md"] .resume-modal {
    padding: 40px 14px 50px;
}
.player-ui-modern[data-ui-width="md"] .resume-modal__card {
    width: min(330px, 100%);
    padding: 16px 18px 18px;
    border-radius: 21px;
}

.player-ui-modern[data-ui-width="sm"] .resume-modal,
.player-ui-modern[data-ui-width="xs"] .resume-modal {
    padding: 30px 10px 40px;
}
.player-ui-modern[data-ui-width="sm"] .resume-modal__card,
.player-ui-modern[data-ui-width="xs"] .resume-modal__card {
    width: min(300px, 100%);
    padding: 14px 15px 16px;
    border-radius: 19px;
}
.player-ui-modern[data-ui-width="sm"] .resume-modal__title,
.player-ui-modern[data-ui-width="xs"] .resume-modal__title {
    font-size: 14px;
}
.player-ui-modern[data-ui-width="sm"] .resume-modal__text,
.player-ui-modern[data-ui-width="xs"] .resume-modal__text,
.player-ui-modern[data-ui-width="sm"] .resume-modal__button,
.player-ui-modern[data-ui-width="xs"] .resume-modal__button {
    font-size: 11.5px;
}
.player-ui-modern[data-ui-width="sm"] .resume-modal__meta,
.player-ui-modern[data-ui-width="xs"] .resume-modal__meta {
    margin: 6px 0 9px;
    font-size: 12px;
}
.player-ui-modern[data-ui-width="sm"] .resume-modal__button,
.player-ui-modern[data-ui-width="xs"] .resume-modal__button {
    min-height: 38px;
    padding: 8px 14px;
}

.player-ui-modern[data-ui-height="short"] .resume-modal {
    padding-top: 16px;
    padding-bottom: 24px;
}
.player-ui-modern[data-ui-height="short"] .resume-modal__card {
    padding-top: 13px;
    padding-bottom: 14px;
}
.player-ui-modern[data-ui-height="short"] .resume-modal__title {
    font-size: 14px;
}
.player-ui-modern[data-ui-height="short"] .resume-modal__text {
    font-size: 11.5px;
    line-height: 1.3;
}
.player-ui-modern[data-ui-height="short"] .resume-modal__meta {
    margin: 5px 0 8px;
    font-size: 12px;
}
.player-ui-modern[data-ui-height="short"] .resume-modal__button {
    min-height: 36px;
    padding: 7px 13px;
    font-size: 11.5px;
}

.player-ui-modern[data-ui-height="xshort"] .resume-modal {
    padding: 8px 9px 10px;
}
.player-ui-modern[data-ui-height="xshort"] .resume-modal__card {
    width: min(280px, 100%);
    padding: 10px 12px 11px;
    border-radius: 16px;
}
.player-ui-modern[data-ui-height="xshort"] .resume-modal__title {
    margin-bottom: 3px;
    font-size: 12.5px;
    line-height: 1.18;
}
.player-ui-modern[data-ui-height="xshort"] .resume-modal__text {
    font-size: 10.5px;
    line-height: 1.22;
}
.player-ui-modern[data-ui-height="xshort"] .resume-modal__meta {
    margin: 4px 0 6px;
    font-size: 11px;
    line-height: 1.2;
}
.player-ui-modern[data-ui-height="xshort"] .resume-modal__button {
    min-height: 32px;
    padding: 6px 11px;
    font-size: 10.5px;
}

/* The center icon is a Play affordance only. While paused it remains
   visible; playback start removes it without showing a separate action flash. */
.resume-modal-open .player-action-flash {
    opacity: 0 !important;
    visibility: hidden !important;
}
.player-action-flash.is-static .player-action-flash__icon {
    background: rgba(24,24,24,.58);
}

/* Restored rewind / fast-forward controls as one pill immediately after time. */
.player-seek-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 4px 7px;
    border: 0;
    border-radius: 999px;
    background: rgba(22,22,22,.62);
    box-shadow: 0 4px 18px rgba(0,0,0,.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.player-ui-modern .player-seek-pill > .plyr__control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    margin: 0;
    padding: 0 !important;
    line-height: 1;
}
.player-ui-modern .player-seek-pill > .plyr__control svg {
    margin: 0 auto;
    transform: none;
}

.player-ui-modern[data-ui-width="lg"] .player-seek-pill {
    min-height: 40px;
}
.player-ui-modern[data-ui-width="md"] .player-seek-pill {
    min-height: 36px;
    padding: 3px 5px;
}
.player-ui-modern[data-ui-width="md"] .player-seek-pill > .plyr__control {
    width: 30px;
    height: 30px;
    min-width: 30px;
}
.player-ui-modern[data-ui-width="sm"] .player-seek-pill,
.player-ui-modern[data-ui-width="xs"] .player-seek-pill {
    min-height: 34px;
    padding: 3px 3px;
    gap: 0;
}
.player-ui-modern[data-ui-width="sm"] .player-seek-pill > .plyr__control,
.player-ui-modern[data-ui-width="xs"] .player-seek-pill > .plyr__control {
    width: 28px;
    height: 28px;
    min-width: 28px;
}
.player-ui-modern[data-ui-height="xshort"] .player-seek-pill {
    min-height: 32px;
}

/* Give the expanded volume range a little more breathing room on its right. */
.player-control-pill--volume:hover,
.player-control-pill--volume:focus-within,
.player-control-pill--volume.is-volume-open {
    width: 134px;
    max-width: 134px !important;
}
.player-control-pill--volume input[type="range"] {
    margin-right: 7px;
}
.player-ui-modern[data-ui-width="md"] .player-control-pill--volume.is-volume-open,
.player-ui-modern[data-ui-width="md"] .player-control-pill--volume:hover,
.player-ui-modern[data-ui-width="md"] .player-control-pill--volume:focus-within {
    width: 116px !important;
    max-width: 116px !important;
}
.player-ui-modern[data-ui-width="sm"] .player-control-pill--volume input[type="range"] {
    width: 108px !important;
    min-width: 108px !important;
    padding-left: 11px !important;
    padding-right: 15px !important;
    margin-right: 0 !important;
}
.player-ui-modern[data-ui-width="xs"] .player-control-pill--volume input[type="range"] {
    width: 96px !important;
    min-width: 96px !important;
    padding-left: 10px !important;
    padding-right: 14px !important;
    margin-right: 0 !important;
}

/* Adaptive center Play dimensions. */
.player-action-flash__icon {
    width: 134px;
    height: 134px;
}
.player-action-flash__icon svg {
    width: 70px;
    height: 70px;
}

@media (max-width: 640px) {
    .player-action-flash__icon {
        width: 106px;
        height: 106px;
    }
    .player-action-flash__icon svg {
        width: 55px;
        height: 55px;
    }
}

/* Actual player size remains authoritative when an iframe is narrower than the
   page viewport. Keep enough breathing room around every glyph instead of
   letting desktop-sized SVGs fill compact hit areas. */
.player-ui-modern[data-ui-width="md"] .player-action-flash__icon {
    width: 112px;
    height: 112px;
}
.player-ui-modern[data-ui-width="md"] .player-action-flash__icon svg {
    width: 58px;
    height: 58px;
}
.player-ui-modern[data-ui-width="sm"] .player-action-flash__icon {
    width: 100px;
    height: 100px;
}
.player-ui-modern[data-ui-width="sm"] .player-action-flash__icon svg {
    width: 52px;
    height: 52px;
}
.player-ui-modern[data-ui-width="xs"] .player-action-flash__icon {
    width: 90px;
    height: 90px;
}
.player-ui-modern[data-ui-width="xs"] .player-action-flash__icon svg {
    width: 47px;
    height: 47px;
}
.player-ui-modern[data-ui-height="short"] .player-action-flash__icon {
    width: 98px !important;
    height: 98px !important;
}
.player-ui-modern[data-ui-height="short"] .player-action-flash__icon svg {
    width: 50px !important;
    height: 50px !important;
}
.player-ui-modern[data-ui-height="xshort"] .player-action-flash__icon {
    width: 84px !important;
    height: 84px !important;
}
.player-ui-modern[data-ui-height="xshort"] .player-action-flash__icon svg {
    width: 43px !important;
    height: 43px !important;
}

/* Control geometry: scale the 18x18 sprite through its SVG viewBox.
   Keep one icon size per actual-player width and center each button explicitly. */
.player-ui-modern {
    --player-control-icon-size: 20px;
    --player-control-button-size: 36px;
    --player-control-pill-size: 44px;
}
.player-ui-modern[data-ui-width="md"] {
    --player-control-icon-size: 18px;
    --player-control-button-size: 30px;
    --player-control-pill-size: 36px;
}
.player-ui-modern[data-ui-width="sm"] {
    --player-control-icon-size: 17px;
    --player-control-button-size: 28px;
    --player-control-pill-size: 34px;
}
.player-ui-modern[data-ui-width="xs"] {
    --player-control-icon-size: 16px;
    --player-control-button-size: 28px;
    --player-control-pill-size: 34px;
}
.player-ui-modern .player-controls-row .plyr__control > svg {
    width: var(--player-control-icon-size) !important;
    height: var(--player-control-icon-size) !important;
    flex: 0 0 auto;
    position: relative;
    left: 0;
    top: 0;
    margin: 0;
}
.player-ui-modern .player-control-pill--play {
    height: var(--player-control-pill-size) !important;
    padding: 0 !important;
    line-height: 1;
}
.player-ui-modern .player-controls-row .player-control-pill--play > .icon--not-pressed {
    left: 1px;
}
.player-ui-modern .player-control-pill--volume {
    padding-left: calc((var(--player-control-pill-size) - var(--player-control-button-size)) / 2) !important;
}
.player-ui-modern .player-control-pill--volume > .plyr__control {
    flex: 0 0 var(--player-control-button-size);
}
.player-ui-modern .player-seek-pill > .plyr__control {
    box-sizing: border-box;
    line-height: 1;
}

/* The circle and its glyph move together around their common center.
   Entrance waves travel inward around the complete circumference, then stop. */
.player-action-flash__icon {
    position: relative;
    transform: scale(1.12);
    transform-origin: 50% 50%;
    transition: transform 1250ms cubic-bezier(.22,.61,.36,1);
}
.player-action-flash.is-visible .player-action-flash__icon {
    transform: scale(1);
}
.player-action-flash__icon::before,
.player-action-flash__icon::after {
    content: "";
    position: absolute;
    inset: -3px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: inherit;
    box-shadow: 0 0 12px rgba(255,255,255,.06);
    opacity: 0;
    pointer-events: none;
}
.player-action-flash.is-entering .player-action-flash__icon {
    animation: player-play-enter 1250ms cubic-bezier(.22,.61,.36,1) both;
}
.player-action-flash.is-entering .player-action-flash__icon::before {
    animation: player-play-wave 1250ms cubic-bezier(.22,.61,.36,1) both;
}
.player-action-flash.is-entering .player-action-flash__icon::after {
    animation: player-play-wave 1000ms 230ms cubic-bezier(.22,.61,.36,1) both;
}
@keyframes player-play-enter {
    0% { opacity: 0; transform: scale(1.14); filter: blur(3px); }
    65% { opacity: 1; transform: scale(.99); filter: blur(0); }
    100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes player-play-wave {
    0% { opacity: 0; transform: scale(1.18); }
    28% { opacity: .48; }
    100% { opacity: 0; transform: scale(.98); }
}
@media (prefers-reduced-motion: reduce) {
    .player-action-flash { transition-duration: 120ms; }
    .player-action-flash .player-action-flash__icon {
        animation: none !important;
        transform: none !important;
        transition: none;
    }
    .player-action-flash__icon::before,
    .player-action-flash__icon::after { display: none; }
}