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

.streemPlayer-bar.p98-outlaw-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(--p98-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;
}

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

.p98-outlaw-radio .p98-radio-picture img {
    position: absolute !important;
    left: var(--p98-image-left) !important;
    top: var(--p98-image-top) !important;
    display: block !important;
    width: var(--p98-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;
}

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

/* The original native play element keeps its original onclick handler. */
.p98-outlaw-radio > .streemPlayer-barppBtn {
    position: absolute !important;
    left: var(--p98-play-x) !important;
    top: var(--p98-play-y) !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--p98-play-size) !important;
    height: var(--p98-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;
}

.p98-outlaw-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;
}

.p98-outlaw-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;
}

.p98-outlaw-radio > .streemPlayer-barppBtn.pauseBtn::after,
.p98-outlaw-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;
}

.p98-outlaw-radio > .streemPlayer-barppBtn:hover::before {
    box-shadow: inset 0 0 9px #000c, 0 0 9px #e9ad5938 !important;
}

.p98-outlaw-radio > .streemPlayer-barppBtn:focus-visible,
.p98-outlaw-radio .streemPlayer-barVolWrapper:focus-within {
    outline: 2px solid #f8cd86 !important;
    outline-offset: 3px !important;
}

/* The original range input stays interactive and keyboard accessible. */
.p98-outlaw-radio > .streemPlayer-barVolWrapper {
    position: absolute !important;
    left: var(--p98-volume-x) !important;
    top: var(--p98-volume-y) !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--p98-volume-size) !important;
    height: var(--p98-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;
}

.p98-outlaw-radio .p98-radio-volume-face {
    position: absolute !important;
    inset: 8% !important;
    display: block;
    border-radius: 50%;
    border: 1px solid #7a736a;
    background: conic-gradient(from 40deg, #191919, #44413b 10%, #151515 26%, #34322e 45%, #131313 64%, #33312e 89%, #191919);
    box-shadow: inset 0 0 5px #000, 0 0 2px #000;
    transform: rotate(var(--p98-volume-angle, 67.5deg));
    pointer-events: none;
}

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

.p98-outlaw-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;
}

.p98-outlaw-radio .p98-radio-volume-caption {
    display: none;
}

/* Narrow screens retain the dial and nameplate with full-sized controls. */
.p98-outlaw-radio.p98-radio-compact::before,
.p98-outlaw-radio.p98-radio-compact::after {
    content: "";
    position: absolute;
    top: 52px;
    bottom: calc(7px + env(safe-area-inset-bottom, 0px));
    width: 76px;
    border: 1px solid #703815;
    background: linear-gradient(110deg, #302119, #121212 38%, #27221b 90%);
    box-shadow: inset 0 0 0 2px #0b0907;
    z-index: 1;
    pointer-events: none;
}

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

.p98-outlaw-radio.p98-radio-compact > .streemPlayer-barppBtn,
.p98-outlaw-radio.p98-radio-compact > .streemPlayer-barVolWrapper {
    background: linear-gradient(145deg, #c5b69c, #332920 27%, #110e0a 56%, #a87542) !important;
    box-shadow: 0 0 0 2px #190b03, 0 0 0 3px #854317, 0 3px 5px #000 !important;
}

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

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