.eclipse-player,
.eclipse-player * {
    box-sizing: border-box;
}

:root {
    --eclipse-sticky-footer-offset: 104px;
}

.eclipse-homepage-sticky-player-wrap[data-eclipse-homepage-sticky="1"] {
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: #02030a !important;
    overflow: visible !important;
    z-index: 999 !important;
    pointer-events: none !important;
    transform: none !important;
    box-sizing: border-box !important;
}

.eclipse-homepage-sticky-player-wrap[data-eclipse-homepage-sticky="1"] .eclipse-player {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    pointer-events: auto !important;
}

/* Manual sticky footer mode. Only players with stickyfooter enabled receive this class. */
html body .eclipse-player.eclipse-sticky-footer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    z-index: 999 !important;
    pointer-events: auto !important;
}

html body .eclipse-sticky-placeholder {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

.eclipse-player {
    --eclipse-font: 'Orbitron', 'Rajdhani', Arial, sans-serif;
    --eclipse-color: #f7f8ff;
    --eclipse-highlight: #ff2f92;
    --eclipse-cyan: #00eaff;
    --eclipse-magenta: #ff2f92;
    --eclipse-red: #ff323c;
    --eclipse-viz-opacity: .98;
    --eclipse-viz-ghost: 0;
    --eclipse-volume-level: 100%;
    --eclipse-info-width: clamp(240px, 16vw, 320px);
    --eclipse-desktop-lcd-badge-gap: 16px;
    --eclipse-right-width: clamp(174px, 14vw, 228px);
    --eclipse-title-lcd-align-shift: 0px;

    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 104px !important;
    height: 104px !important;
    padding: 14px 28px !important;
    overflow: hidden !important;
    isolation: isolate !important;
    color: var(--eclipse-color) !important;
    font-family: var(--eclipse-font) !important;
    border-radius: 0 !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    background:
        linear-gradient(180deg, rgba(24,27,38,.96), rgba(5,7,13,.985) 47%, rgba(0,0,0,.99) 100%) !important;
    box-shadow:
        0 0 0 1px rgba(255,47,146,.38),
        0 0 28px rgba(255,47,146,.34),
        0 0 30px rgba(0,234,255,.20),
        0 14px 34px rgba(0,0,0,.68),
        inset 0 1px 0 rgba(255,255,255,.23),
        inset 0 -22px 34px rgba(0,0,0,.45) !important;
    backdrop-filter: blur(14px) saturate(125%);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
}

/* Top glass sheen, kept subtle so no odd teal/purple container shows behind the controls. */
.eclipse-player::before,
.eclipse-player::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.eclipse-player::before {
    inset: 1px;
    border-radius: 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.035) 31%, rgba(255,255,255,0) 58%),
        linear-gradient(90deg, rgba(0,234,255,.035), transparent 34%, transparent 68%, rgba(255,47,146,.045));
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.055),
        inset 0 0 44px rgba(0,0,0,.24);
}

/* Large meter glass panel like the approved mockup. */
.eclipse-player::after {
    top: 15px;
    bottom: 15px;
    left: calc(28px + 68px + 22px + var(--eclipse-info-width) + 6px);
    right: calc(18px + var(--eclipse-right-width) + 14px);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(13,16,24,.98), rgba(0,0,0,.84) 100%);
    border: 1px solid rgba(255,255,255,.105);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -20px 28px rgba(0,0,0,.36),
        0 0 17px rgba(255,47,146,.14),
        0 0 14px rgba(0,234,255,.065);
}

.eclipse-player > * {
    position: relative;
    z-index: 5;
}

.eclipse-player .eclipse-audio,
.eclipse-player .eclipse-glow {
    display: none !important;
}

.eclipse-player .eclipse-canvas {
    position: absolute !important;
    inset: 0 !important;
    z-index: 4 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    pointer-events: none !important;
    transition: opacity .18s ease;
}

.eclipse-player .eclipse-play,
.eclipse-player .eclipse-mute {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    cursor: pointer;
    color: #fff;
    font-family: var(--eclipse-font);
    user-select: none;
}

.eclipse-player .eclipse-play {
    flex: 0 0 68px !important;
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    min-height: 68px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    background:
        radial-gradient(circle at 34% 24%, rgba(255,255,255,.20), transparent 18%),
        radial-gradient(circle at 49% 58%, rgba(0,234,255,.13), transparent 58%),
        linear-gradient(145deg, rgba(35,38,50,.98), rgba(4,6,12,.99) 72%) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    box-shadow:
        0 0 0 1px rgba(255,47,146,.44),
        0 0 22px rgba(255,47,146,.44),
        0 0 24px rgba(0,234,255,.34),
        inset 0 1px 0 rgba(255,255,255,.23),
        inset 0 -15px 22px rgba(0,0,0,.62) !important;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.eclipse-player .eclipse-play:hover {
    transform: translateY(-1px) scale(1.012);
    filter: brightness(1.08);
    box-shadow:
        0 0 0 1px rgba(255,47,146,.60),
        0 0 28px rgba(255,47,146,.56),
        0 0 28px rgba(0,234,255,.40),
        inset 0 1px 0 rgba(255,255,255,.24),
        inset 0 -15px 22px rgba(0,0,0,.58) !important;
}

.eclipse-player .eclipse-play:active {
    transform: translateY(0) scale(.985);
}

.eclipse-player.is-loading .eclipse-play {
    animation: eclipseModernLoading .72s ease-in-out infinite alternate;
}

.eclipse-player.is-playing .eclipse-play {
    animation: eclipseModernRing 1.8s ease-in-out infinite;
}

.eclipse-player .eclipse-play-icon {
    width: 0;
    height: 0;
    margin-left: 6px;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 19px solid #f8fbff;
    filter: drop-shadow(0 0 7px rgba(255,255,255,.62)) drop-shadow(0 0 12px rgba(0,234,255,.46));
}

.eclipse-player.is-playing .eclipse-play-icon {
    width: 18px;
    height: 25px;
    margin-left: 0;
    border: 0;
    border-left: 7px solid #f8fbff;
    border-right: 7px solid #f8fbff;
    filter: drop-shadow(0 0 8px rgba(255,255,255,.65)) drop-shadow(0 0 14px rgba(255,47,146,.42));
}

.eclipse-player .eclipse-info {
    flex: 0 0 var(--eclipse-info-width) !important;
    width: var(--eclipse-info-width) !important;
    min-width: 0 !important;
    max-width: var(--eclipse-info-width) !important;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden !important;
    padding: 3px 12px 3px 24px !important;
    border-left: 1px solid rgba(255,255,255,.18);
    line-height: 1.08;
    text-shadow: 0 1px 5px rgba(0,0,0,.92), 0 0 12px rgba(0,0,0,.70);
}


.eclipse-player .eclipse-info-no-station {
    justify-content: center !important;
}

.eclipse-player .eclipse-station {
    display: none !important;
}

.eclipse-player .eclipse-info-no-station .eclipse-title-wrap {
    margin: 0 !important;
}

.eclipse-player .eclipse-info-no-station .eclipse-live {
    margin-top: 8px !important;
}

.eclipse-player .eclipse-station,
.eclipse-player .eclipse-title-wrap {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.eclipse-player .eclipse-station span,
.eclipse-player .eclipse-title {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

.eclipse-player .eclipse-station {
    margin: 0 0 8px 0;
    color: rgba(232,239,255,.80);
    font-weight: 900;
    font-size: clamp(10px, .78vw, 13px);
    letter-spacing: .26em;
    text-transform: uppercase;
}

.eclipse-player .eclipse-title-wrap {
    min-height: 1.15em;
    color: #f6f8ff;
    font-size: clamp(18px, 1.45vw, 26px);
    font-weight: 700;
    letter-spacing: .045em;
}

.eclipse-player.is-playing[data-scroll-title="1"] .eclipse-title.is-overflowing,
.eclipse-player[data-scroll-name="1"] .eclipse-station span.is-overflowing {
    max-width: none;
    padding-right: 48px;
    animation: eclipseMarquee var(--eclipse-scroll-speed, 15s) linear infinite;
}


.eclipse-player .eclipse-title-wrap {
    overflow: hidden !important;
    white-space: nowrap !important;
}

.eclipse-player .eclipse-title .eclipse-marquee-main {
    display: inline-block !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

.eclipse-player .eclipse-title.is-js-scrolling,
.eclipse-player[data-scroll-title="1"] .eclipse-title.is-js-scrolling,
.eclipse-player.is-playing[data-scroll-title="1"] .eclipse-title.is-js-scrolling {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    padding-right: 0 !important;
    animation: none !important;
    transform: translate3d(var(--eclipse-js-scroll-x, 0px), 0, 0) !important;
    opacity: var(--eclipse-js-title-opacity, 1) !important;
    transition: none !important;
    will-change: transform, opacity !important;
}

.eclipse-player .eclipse-title.is-js-scrolling .eclipse-marquee-gap,
.eclipse-player .eclipse-title.is-js-scrolling .eclipse-marquee-clone {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.eclipse-player .eclipse-title-wrap.is-js-title-scrolling {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

.eclipse-player .eclipse-live {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 23px;
    margin-top: 10px;
    border-radius: 999px;
    padding: 0 14px 0 12px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .15em;
    font-size: 10px;
    color: #ff5aa8;
    background: linear-gradient(180deg, rgba(255,47,146,.13), rgba(0,0,0,.55));
    border: 1px solid rgba(255,47,146,.32);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 12px rgba(255,47,146,.18);
    text-shadow: 0 0 8px rgba(255,47,146,.35);
    white-space: nowrap;
}

.eclipse-player .eclipse-live span {
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 50%;
    background: #ff2f92;
    box-shadow: 0 0 8px rgba(255,47,146,.88), 0 0 12px rgba(255,47,146,.40);
}

.eclipse-player .eclipse-live b {
    font-size: 0;
}

.eclipse-player .eclipse-live b::after {
    content: "ON AIR";
    font-size: 10px;
}

.eclipse-player .eclipse-live.is-live {
    color: #f8fbff;
    border-color: rgba(0,234,255,.42);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 12px rgba(0,234,255,.23),
        0 0 12px rgba(255,47,146,.12);
}

.eclipse-player .eclipse-live.is-live span {
    background: #00eaff;
    box-shadow: 0 0 10px rgba(0,234,255,.90), 0 0 16px rgba(255,47,146,.25);
    animation: eclipseLivePulse 1.15s ease-in-out infinite;
}

.eclipse-player .eclipse-cover,
.eclipse-player .eclipse-eq-label {
    display: none !important;
}


.eclipse-player .eclipse-right {
    margin-left: auto !important;
    flex: 0 0 var(--eclipse-right-width) !important;
    width: var(--eclipse-right-width) !important;
    max-width: var(--eclipse-right-width) !important;
    min-width: var(--eclipse-right-width) !important;
    height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px !important;
    padding: 0 13px !important;
    border-radius: 18px !important;
    background:
        linear-gradient(180deg, rgba(16,19,29,.95), rgba(2,3,9,.94) 100%) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 -14px 20px rgba(0,0,0,.44),
        0 8px 18px rgba(0,0,0,.26) !important;
    z-index: 8 !important;
}

.eclipse-player .eclipse-volume-shell {
    position: relative !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
}

.eclipse-player .eclipse-volume {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
    width: 100% !important;
    height: 24px !important;
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    cursor: pointer !important;
    background: transparent !important;
    overflow: visible !important;
    accent-color: var(--eclipse-cyan) !important;
}

.eclipse-player .eclipse-volume::-webkit-slider-runnable-track {
    height: 8px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    background:
        linear-gradient(90deg,
            rgba(0,234,255,.95) 0%,
            rgba(255,47,146,.95) var(--eclipse-volume-level, 100%),
            rgba(255,255,255,.11) var(--eclipse-volume-level, 100%),
            rgba(255,255,255,.07) 100%) !important;
    box-shadow:
        inset 0 1px 3px rgba(0,0,0,.78),
        0 0 9px rgba(0,234,255,.20),
        0 0 10px rgba(255,47,146,.12) !important;
}

.eclipse-player .eclipse-volume::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 19px !important;
    height: 19px !important;
    margin-top: -6px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.65) !important;
    background:
        radial-gradient(circle at 35% 28%, rgba(255,255,255,.98), rgba(255,255,255,.20) 22%, transparent 23%),
        linear-gradient(135deg, #00eaff, #ff2f92) !important;
    box-shadow:
        0 0 10px rgba(0,234,255,.60),
        0 0 13px rgba(255,47,146,.40),
        inset 0 1px 0 rgba(255,255,255,.46),
        inset 0 -3px 7px rgba(0,0,0,.35) !important;
}

.eclipse-player .eclipse-volume::-moz-range-track {
    height: 8px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    background: rgba(255,255,255,.10) !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.78) !important;
}

.eclipse-player .eclipse-volume::-moz-range-progress {
    height: 8px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, rgba(0,234,255,.95), rgba(255,47,146,.95)) !important;
    box-shadow: 0 0 9px rgba(0,234,255,.20), 0 0 10px rgba(255,47,146,.12) !important;
}

.eclipse-player .eclipse-volume::-moz-range-thumb {
    width: 19px !important;
    height: 19px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.65) !important;
    background: linear-gradient(135deg, #00eaff, #ff2f92) !important;
    box-shadow: 0 0 10px rgba(0,234,255,.60), 0 0 13px rgba(255,47,146,.40) !important;
}

.eclipse-player .eclipse-mute {
    appearance: none !important;
    -webkit-appearance: none !important;
    position: relative !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    cursor: pointer !important;
    background: linear-gradient(180deg, rgba(26,29,37,.98), rgba(8,10,14,.99) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 -10px 14px rgba(0,0,0,.54),
        0 4px 10px rgba(0,0,0,.32) !important;
    color: #f4f7fb !important;
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}

.eclipse-player .eclipse-mute:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    border-color: rgba(255,255,255,.18) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        inset 0 -10px 14px rgba(0,0,0,.50),
        0 6px 12px rgba(0,0,0,.36) !important;
}

.eclipse-player .eclipse-mute span {
    position: relative !important;
    display: block !important;
    width: 18px !important;
    height: 16px !important;
}

.eclipse-player .eclipse-mute span::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 1px !important;
    width: 10px !important;
    height: 14px !important;
    background: #f4f7fb !important;
    clip-path: polygon(0 38%, 28% 38%, 58% 16%, 58% 84%, 28% 62%, 0 62%) !important;
}

.eclipse-player .eclipse-mute span::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    top: 3px !important;
    width: 6px !important;
    height: 6px !important;
    border: 2px solid #f4f7fb !important;
    border-left: 0 !important;
    border-radius: 0 10px 10px 0 !important;
    box-shadow: 5px 0 0 -1px rgba(244,247,251,.92) !important;
}

.eclipse-player .eclipse-mute.is-muted {
    border-color: rgba(255,255,255,.12) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        inset 0 -10px 14px rgba(0,0,0,.54),
        0 4px 10px rgba(0,0,0,.32) !important;
}

.eclipse-player .eclipse-mute.is-muted span i,
.eclipse-player .eclipse-mute span i {
    display: none !important;
}

.eclipse-player .eclipse-mute.is-muted::after {
    content: "" !important;
    position: absolute !important;
    width: 20px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: #f4f7fb !important;
    transform: rotate(-42deg) !important;
}

.eclipse-player.is-error .eclipse-title {
    color: #ffb4c8;
}

@keyframes eclipseModernRing {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(255,47,146,.44),
            0 0 22px rgba(255,47,146,.38),
            0 0 24px rgba(0,234,255,.28),
            inset 0 1px 0 rgba(255,255,255,.23),
            inset 0 -15px 22px rgba(0,0,0,.62);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(0,234,255,.44),
            0 0 30px rgba(255,47,146,.50),
            0 0 30px rgba(0,234,255,.36),
            inset 0 1px 0 rgba(255,255,255,.23),
            inset 0 -15px 22px rgba(0,0,0,.62);
    }
}

@keyframes eclipseModernLoading {
    from { filter: brightness(.88); transform: scale(.985); }
    to { filter: brightness(1.12); transform: scale(1.015); }
}

@keyframes eclipseLivePulse {
    0%, 100% { opacity: .70; transform: scale(.90); }
    50% { opacity: 1; transform: scale(1.12); }
}

@keyframes eclipseMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-100% + var(--eclipse-title-wrap-width, 100%))); }
}

.eclipse-player.eclipse-only-cover-image .eclipse-info,
.eclipse-player.eclipse-only-cover-image .eclipse-live,
.eclipse-player.eclipse-only-cover-image .eclipse-volume-shell,
.eclipse-player.eclipse-only-cover-image .eclipse-mute {
    display: none !important;
}

.eclipse-player.eclipse-only-cover-image {
    justify-content: center;
}

@media (min-width: 1600px) {
    .eclipse-player {
        --eclipse-info-width: clamp(260px, 16vw, 330px);
        padding-left: 30px !important;
        padding-right: 26px !important;
    }

    .eclipse-player .eclipse-play {
        flex-basis: 70px !important;
        width: 70px !important;
        height: 70px !important;
        min-width: 70px !important;
        min-height: 70px !important;
    }

    .eclipse-player::after {
        left: calc(30px + 70px + 22px + var(--eclipse-info-width) + 6px);
    }
}

@media (max-width: 1024px) {
    .eclipse-player {
        --eclipse-info-width: clamp(210px, 24vw, 280px);
        --eclipse-right-width: 164px;
        gap: 15px !important;
        padding-left: 18px !important;
        padding-right: 14px !important;
        border-radius: 0 !important;
    }

    .eclipse-player::before { border-radius: 0; }
    .eclipse-player::after {
        left: calc(18px + 64px + 15px + var(--eclipse-info-width) + 4px);
        right: calc(12px + var(--eclipse-right-width) + 10px);
        border-radius: 16px;
    }

    .eclipse-player .eclipse-play {
        flex-basis: 64px !important;
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        min-height: 64px !important;
    }

    .eclipse-player .eclipse-info {
        padding-left: 22px !important;
    }

    .eclipse-player .eclipse-right {
        height: 52px !important;
        border-radius: 16px !important;
        gap: 9px !important;
        padding: 0 10px !important;
    }

    .eclipse-player .eclipse-mute {
        flex-basis: 38px !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }
}

@media (max-width: 1024px) {
    
    .eclipse-player .eclipse-info {
        transform: translateY(3px);
    }

    .eclipse-player .eclipse-info-no-station .eclipse-live {
        margin-top: 7px !important;
    }

    
    .eclipse-player .eclipse-right,
    .eclipse-player .eclipse-volume-shell,
    .eclipse-player .eclipse-volume,
    .eclipse-player .eclipse-mute {
        display: none !important;
    }

    
    .eclipse-player .eclipse-title-wrap {
        transform: translateX(var(--eclipse-title-lcd-align-shift, 0px)) !important;
        will-change: transform;
    }
}

@media (max-width: 760px) {
    :root { --eclipse-sticky-footer-offset: 78px; }

    .eclipse-homepage-sticky-player-wrap[data-eclipse-homepage-sticky="1"] {
        padding: 0 !important;
    }

    .eclipse-player {
        --eclipse-info-width: 112px;
        --eclipse-right-width: 86px;
        gap: 8px !important;
        height: 78px !important;
        min-height: 78px !important;
        padding: 8px 9px !important;
        border-radius: 0 !important;
    }

    .eclipse-player::before { border-radius: 0; }
    .eclipse-player::after {
        top: 8px;
        bottom: 8px;
        left: calc(9px + 52px + 8px + var(--eclipse-info-width) + 6px);
        right: calc(7px + var(--eclipse-right-width) + 6px);
        border-radius: 13px;
    }

    .eclipse-player .eclipse-play {
        flex: 0 0 52px !important;
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
    }

    .eclipse-player .eclipse-play-icon {
        margin-left: 4px;
        border-top-width: 10px;
        border-bottom-width: 10px;
        border-left-width: 16px;
    }

    .eclipse-player.is-playing .eclipse-play-icon {
        width: 15px;
        height: 21px;
        border-left-width: 6px;
        border-right-width: 6px;
    }

    .eclipse-player .eclipse-info {
        flex-basis: var(--eclipse-info-width) !important;
        width: var(--eclipse-info-width) !important;
        max-width: var(--eclipse-info-width) !important;
        padding-left: 12px !important;
        padding-right: 4px !important;
        transform: translateY(1px);
    }

    .eclipse-player .eclipse-station {
        margin-bottom: 5px;
        font-size: 8px;
        letter-spacing: .13em;
    }

    .eclipse-player .eclipse-title-wrap {
        font-size: 14px;
        letter-spacing: .025em;
    }

    .eclipse-player .eclipse-live {
        height: 17px;
        margin-top: 5px;
        padding: 0 8px 0 7px;
        font-size: 8px;
        letter-spacing: .10em;
    }

    .eclipse-player .eclipse-live b::after { font-size: 8px; }
    .eclipse-player .eclipse-live span {
        width: 5px;
        height: 5px;
        margin-right: 5px;
    }

    .eclipse-player .eclipse-right {
        height: 48px !important;
        border-radius: 13px !important;
        gap: 5px !important;
        padding: 0 6px !important;
    }

    .eclipse-player .eclipse-mute {
        flex-basis: 30px !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
    }

    .eclipse-player .eclipse-mute span {
        transform: scale(.72);
    }

    .eclipse-player .eclipse-volume-shell {
        height: 20px !important;
    }

    .eclipse-player .eclipse-volume,
    .eclipse-player .eclipse-volume::-webkit-slider-runnable-track {
        height: 20px !important;
    }

    .eclipse-player .eclipse-volume::-webkit-slider-runnable-track,
    .eclipse-player .eclipse-volume::-moz-range-track,
    .eclipse-player .eclipse-volume::-moz-range-progress {
        height: 6px !important;
    }

    .eclipse-player .eclipse-volume::-webkit-slider-thumb {
        width: 15px !important;
        height: 15px !important;
        margin-top: -5px !important;
    }

    .eclipse-player .eclipse-volume::-moz-range-thumb {
        width: 15px !important;
        height: 15px !important;
    }
}

@media (max-width: 540px) {
    .eclipse-player { --eclipse-info-width: 96px; --eclipse-right-width: 78px; }
    .eclipse-player .eclipse-info { transform: translateY(0px); }
    .eclipse-player .eclipse-station { letter-spacing: .08em; }
    .eclipse-player .eclipse-title-wrap { font-size: 13px; }
    .eclipse-player .eclipse-live { display: none !important; }
}

@media (max-width: 380px) {
    .eclipse-player {
        --eclipse-info-width: 82px;
        --eclipse-right-width: 68px;
        gap: 5px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .eclipse-player::after {
        left: calc(6px + 44px + 5px + var(--eclipse-info-width) + 4px);
        right: calc(5px + var(--eclipse-right-width) + 4px);
    }

    .eclipse-player .eclipse-play {
        flex-basis: 44px !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .eclipse-player .eclipse-info {
        padding-left: 8px !important;
    }

    .eclipse-player .eclipse-title-wrap { font-size: 12px; }

    .eclipse-player .eclipse-right {
        height: 42px !important;
        gap: 4px !important;
        padding: 0 5px !important;
    }

    .eclipse-player .eclipse-mute {
        flex-basis: 27px !important;
        width: 27px !important;
        height: 27px !important;
        min-width: 27px !important;
        min-height: 27px !important;
    }

    .eclipse-player .eclipse-mute span {
        transform: scale(.62);
    }
}


html body .eclipse-player .eclipse-mute span {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html body .eclipse-player .eclipse-mute span::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 1px !important;
    width: 11px !important;
    height: 14px !important;
    background: #f4f7fb !important;
    clip-path: polygon(0 36%, 31% 36%, 62% 12%, 62% 88%, 31% 64%, 0 64%) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body .eclipse-player .eclipse-mute span::after {
    content: "" !important;
    position: absolute !important;
    left: 12px !important;
    top: 3px !important;
    width: 6px !important;
    height: 7px !important;
    background: transparent !important;
    border: 2px solid #f4f7fb !important;
    border-left: 0 !important;
    border-radius: 0 10px 10px 0 !important;
    box-shadow: 5px 0 0 -1px rgba(244,247,251,.92) !important;
    clip-path: none !important;
}

html body .eclipse-player .eclipse-mute.is-muted::after {
    background: #f4f7fb !important;
    box-shadow: none !important;
}

@media (max-width: 1024px) {
    html body .eclipse-player .eclipse-right,
    html body .eclipse-player .eclipse-volume-shell,
    html body .eclipse-player .eclipse-volume,
    html body .eclipse-player .eclipse-mute {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eclipse-player,
    .eclipse-player * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}


html body .eclipse-player .eclipse-mute {
    isolation: isolate;
}
html body .eclipse-player .eclipse-mute span {
    display: none !important;
}
html body .eclipse-player .eclipse-mute .eclipse-mute-svg {
    width: 23px !important;
    height: 23px !important;
    display: block !important;
    color: #f7fbff !important;
    overflow: visible !important;
    filter: drop-shadow(0 0 5px rgba(255,255,255,.18)) !important;
}
html body .eclipse-player .eclipse-mute .eclipse-mute-speaker {
    fill: currentColor !important;
}
html body .eclipse-player .eclipse-mute .eclipse-mute-wave {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.35 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    opacity: .92 !important;
    transition: opacity .16s ease, transform .16s ease !important;
}
html body .eclipse-player .eclipse-mute .eclipse-mute-slash {
    fill: none !important;
    stroke: #ff4f86 !important;
    stroke-width: 3 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    opacity: 0 !important;
    transition: opacity .16s ease !important;
    filter: drop-shadow(0 0 7px rgba(255,47,146,.65)) !important;
}
html body .eclipse-player .eclipse-mute.is-muted {
    color: #fff !important;
    border-color: rgba(255,79,134,.42) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -10px 16px rgba(0,0,0,.58), 0 0 16px rgba(255,47,146,.22) !important;
}
html body .eclipse-player .eclipse-mute.is-muted .eclipse-mute-wave {
    opacity: 0 !important;
}
html body .eclipse-player .eclipse-mute.is-muted .eclipse-mute-slash {
    opacity: 1 !important;
}


html body .eclipse-player .eclipse-mute::after { content: none !important; display: none !important; }


html body .eclipse-player.eclipse-sticky-footer,
html body .eclipse-player.eclipse-sticky-footer-active,
html body > .eclipse-player.eclipse-sticky-footer,
html body > .eclipse-player.eclipse-sticky-footer-active {
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    z-index: 999 !important;
    transform: none !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html body #eclipse-player-sticky-footer-portal.eclipse-sticky-footer-portal,
html body .eclipse-sticky-footer-portal[data-eclipse-sticky-portal="1"] {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: #02030a !important;
    overflow: visible !important;
    z-index: 999 !important;
    transform: none !important;
    pointer-events: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
}
html body #eclipse-player-sticky-footer-portal.eclipse-sticky-footer-portal > .eclipse-player.eclipse-sticky-footer,
html body #eclipse-player-sticky-footer-portal.eclipse-sticky-footer-portal > .eclipse-player.eclipse-sticky-footer-active,
html body .eclipse-sticky-footer-portal[data-eclipse-sticky-portal="1"] > .eclipse-player.eclipse-sticky-footer,
html body .eclipse-sticky-footer-portal[data-eclipse-sticky-portal="1"] > .eclipse-player.eclipse-sticky-footer-active {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    z-index: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
}
html body .eclipse-sticky-placeholder {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}


@media (min-width: 1025px) {
    .eclipse-player .eclipse-title-wrap,
    .eclipse-player .eclipse-live {
        transform: translateX(-22px) !important;
    }

    .eclipse-player .eclipse-title-wrap {
        width: calc(100% - 22px) !important;
        max-width: calc(100% - 22px) !important;
    }
}


@media (min-width: 761px) {
    .eclipse-player .eclipse-title-wrap {
        width: calc(100% - 22px) !important;
        max-width: calc(100% - 22px) !important;
        overflow: hidden !important;
        min-width: 0 !important;
    }
}


.eclipse-player::after {
    left: var(--eclipse-lcd-tray-left, calc(28px + 68px + 22px + var(--eclipse-info-width) + 6px)) !important;
    right: var(--eclipse-lcd-tray-right, calc(18px + var(--eclipse-right-width) + 14px)) !important;
}
@media (min-width: 1600px) {
    .eclipse-player::after {
        left: var(--eclipse-lcd-tray-left, calc(30px + 70px + 22px + var(--eclipse-info-width) + 6px)) !important;
    }
}
@media (min-width: 761px) and (max-width: 1024px) {
    .eclipse-player::after {
        left: var(--eclipse-lcd-tray-left, calc(18px + 64px + 15px + var(--eclipse-info-width) + 4px)) !important;
        right: var(--eclipse-lcd-tray-right, calc(12px + var(--eclipse-right-width) + 10px)) !important;
    }
}