/* Every change is scoped to the successfully attached skin. */
body.p100s-silver-radio-active {
    padding-bottom: calc(var(--p100s-radio-body-padding, 0px) + var(--p100s-radio-height, 150px) + env(safe-area-inset-bottom, 0px)) !important;
    margin-bottom: 0 !important;
}

.streemPlayer-bar.p100s-silver-radio {
    position: fixed !important;
    inset: auto 0 0 !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: calc(var(--p100s-radio-height, 150px) + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #191919 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transform: none !important;
    transition: none !important;
    isolation: isolate;
    z-index: 999999 !important;
    box-shadow: 0 -6px 20px #0008 !important;
}

.p100s-silver-radio .p100s-radio-picture {
    position: absolute !important;
    inset: 0 0 auto !important;
    height: var(--p100s-radio-height) !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 0;
}

.p100s-silver-radio .p100s-radio-picture img {
    position: absolute !important;
    left: var(--p100s-image-left) !important;
    top: var(--p100s-image-top) !important;
    display: block !important;
    width: var(--p100s-image-width) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    object-fit: initial !important;
    filter: none !important;
    transform: none !important;
    user-select: none !important;
}

.p100s-silver-radio > .streemPlayer-barMetadata,
.p100s-silver-radio .streemPlayer-barVolWrapper > a,
.p100s-silver-radio .streemPlayer-barVolWrapper > .streemPlayer-volIcon,
.p100s-silver-radio .streemPlayer-barVolWrapper > .streemPlayer-volSliderBar {
    display: none !important;
}

/* The original native play element keeps its original onclick handler. */
.p100s-silver-radio > .streemPlayer-barppBtn {
    position: absolute !important;
    left: var(--p100s-play-x) !important;
    top: var(--p100s-play-y) !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--p100s-play-size) !important;
    height: var(--p100s-play-size) !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: none !important;
    box-shadow: none !important;
    transform: translate(-50%, -50%) !important;
    color: #f8f2de !important;
    font-size: 0 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    z-index: 3;
}

.p100s-silver-radio > .streemPlayer-barppBtn::before {
    content: "" !important;
    position: absolute !important;
    inset: 9% !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #8b817366 !important;
    border-radius: 50% !important;
    background: conic-gradient(from 12deg, #171717, #47443e 12%, #1c1c1b 25%, #34322e 48%, #111 67%, #393732 87%, #171717) !important;
    box-shadow: inset 0 0 9px #000c !important;
    transform: none !important;
    font-size: 0 !important;
}

.p100s-silver-radio > .streemPlayer-barppBtn::after {
    content: "" !important;
    position: absolute !important;
    inset: 29% 28% 29% 37% !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #f8f2de !important;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transform: none !important;
    font-size: 0 !important;
    pointer-events: none;
}

.p100s-silver-radio > .streemPlayer-barppBtn.pauseBtn::after,
.p100s-silver-radio > .streemPlayer-barppBtn.playing::after {
    inset: 32% !important;
    background: linear-gradient(to right, #f8f2de 0 31%, transparent 31% 69%, #f8f2de 69% 100%) !important;
    clip-path: none;
}

.p100s-silver-radio > .streemPlayer-barppBtn:hover::before {
    box-shadow: inset 0 0 9px #000c, 0 0 9px #58bded38 !important;
}

.p100s-silver-radio > .streemPlayer-barppBtn:focus-visible,
.p100s-silver-radio .streemPlayer-barVolWrapper:focus-within {
    outline: 2px solid #9edcff !important;
    outline-offset: 3px !important;
}

/* The original range input stays interactive and keyboard accessible. */
.p100s-silver-radio > .streemPlayer-barVolWrapper {
    position: absolute !important;
    left: var(--p100s-volume-x) !important;
    top: var(--p100s-volume-y) !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--p100s-volume-size) !important;
    height: var(--p100s-volume-size) !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    transform: translate(-50%, -50%) !important;
    z-index: 3;
}

.p100s-silver-radio .p100s-radio-volume-face {
    position: absolute !important;
    inset: 8% !important;
    display: block;
    border-radius: 50%;
    border: 1px solid #e2e1dd;
    background: conic-gradient(from 40deg, #a7a5a0, #eeeae1 10%, #8a8984 26%, #dfdcd4 45%, #999792 64%, #ede9df 89%, #a7a5a0);
    box-shadow: inset 0 0 5px #000, 0 0 2px #000;
    transform: rotate(var(--p100s-volume-angle, 67.5deg));
    pointer-events: none;
}

.p100s-silver-radio .p100s-radio-volume-face::after {
    content: "";
    position: absolute;
    top: 7%;
    left: 47.7%;
    width: 4.6%;
    height: 23%;
    background: #302d29;
    border-radius: 2px;
    box-shadow: 0 0 2px #fff4;
}

.p100s-silver-radio .streemPlayer-barVolWrapper > input[type="range"] {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    cursor: ns-resize !important;
    touch-action: none !important;
    z-index: 4;
}

.p100s-silver-radio .p100s-radio-volume-caption {
    display: none;
}

/* Narrow screens retain the dial and nameplate with full-sized controls. */
.p100s-silver-radio.p100s-radio-compact::before,
.p100s-silver-radio.p100s-radio-compact::after {
    content: "";
    position: absolute;
    top: 52px;
    bottom: calc(7px + env(safe-area-inset-bottom, 0px));
    width: 76px;
    border: 1px solid #8b8c8d;
    background: repeating-linear-gradient(0deg, #b7b6b2 0px, #c7c6c1 1px, #b8b7b3 2px);
    box-shadow: inset 0 0 0 2px #4b4c4d;
    z-index: 1;
    pointer-events: none;
}

.p100s-silver-radio.p100s-radio-compact::before { left: 0; border-radius: 0 5px 5px 0; }
.p100s-silver-radio.p100s-radio-compact::after { right: 0; border-radius: 5px 0 0 5px; }

.p100s-silver-radio.p100s-radio-compact > .streemPlayer-barppBtn,
.p100s-silver-radio.p100s-radio-compact > .streemPlayer-barVolWrapper {
    background: linear-gradient(145deg, #e7e5df, #777875 27%, #383a39 56%, #d6d5cf) !important;
    box-shadow: 0 0 0 2px #333, 0 0 0 3px #dbd9d1, 0 3px 5px #000 !important;
}

.p100s-silver-radio.p100s-radio-compact .p100s-radio-volume-caption {
    display: block;
    position: absolute;
    top: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: #222;
    font: 700 9px/1 Arial, sans-serif;
    letter-spacing: .8px;
    white-space: nowrap;
    pointer-events: none;
}

@media (forced-colors: active) {
    .p100s-silver-radio > .streemPlayer-barppBtn,
    .p100s-silver-radio .streemPlayer-barVolWrapper { forced-color-adjust: none; }
}