/* Pannello "a misura di colonna" con larghezza configurabile via CSS var */
.er-panel {
    --er-width: 336px;
    /* di default non metto l'immagine: la passeremo inline con la var --er-bg-url */
    width: var(--er-width);
    max-width: 100%;
    color: #fff;
    border-radius: 12px;
    padding: 12px;
    font-family: system-ui, Arial, sans-serif;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    display: inline-block;
    position: relative; /* necessario per ::before / ::after */
    overflow: hidden; /* arrotondamento anche allo sfondo */
    background: #111; /* fallback se l’immagine non c’è */
}

    /* sfondo: immagine coprente + sfocatura + scurimento */
    .er-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--er-bg-url) center/cover no-repeat;
        filter: blur(0px) brightness(1); /* sfoca + scurisce */
        transform: scale(1.05); /* niente bordini dopo blur */
        z-index: 0;
    }
    /* overlay delicato per contrasto */
    .er-panel::after {
        content: "";
        position: absolute;
        inset: 0;
        /*background: linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.35));*/
        z-index: 0;
    }

    /* i contenuti del player stanno sopra allo sfondo */
    .er-panel > * {
        position: relative;
        z-index: 1;
    }

/* --- resto stile (identico al tuo) --- */
.er-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.er-logo-text {
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.er-audio {
    display: flex;
    align-items: center;
    gap: 10px;
}

.er-play {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-size: 18px;
    background: #E53935;
    color: #fff;
}

    .er-play:hover {
        filter: brightness(1.05);
    }

.er-status-wrap {
    display: flex;
    flex-direction: column;
}

.er-title {
    font-size: 13px;
    opacity: .9;
}

.er-status {
    font-size: 12px;
    opacity: .85;
    min-height: 1em;
}

.er-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.er-vol {
    width: 100%;
}

.er-external {
    margin-top: 8px;
}

.er-open {
    color: #9ad;
    text-decoration: none;
    font-size: 13px;
}

    .er-open:hover {
        text-decoration: underline;
    }

/* Variante compatta */
.er-panel.er-compact {
    --er-width: 320px;
    padding: 10px;
}

    .er-panel.er-compact .er-title {
        display: none;
    }