.listener-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    width: fit-content;
    max-width: 100%;
    margin: .8rem auto 0;
    padding: .62rem .9rem;
    border: 1px solid rgba(119, 240, 190, .22);
    border-radius: 999px;
    color: #eafcf5;
    background: rgba(13, 18, 25, .78);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .04);
    font-size: .82rem;
    line-height: 1.2;
    backdrop-filter: blur(8px);
}

.listener-count__dot {
    flex: 0 0 auto;
    width: .56rem;
    height: .56rem;
    border-radius: 50%;
    background: #4de7a2;
    box-shadow: 0 0 0 .28rem rgba(77, 231, 162, .1), 0 0 14px rgba(77, 231, 162, .7);
    animation: listener-count-pulse 2.2s ease-in-out infinite;
}

.listener-count__value { color: #68f0b2; font-size: .92rem; }
.listener-count__label { color: rgba(242, 238, 250, .82); font-weight: 650; }
.listener-count.is-loading .listener-count__dot { background: #b792ff; box-shadow: 0 0 12px rgba(183, 146, 255, .55); }
.listener-count.is-unavailable { border-color: rgba(255, 255, 255, .1); }
.listener-count.is-unavailable .listener-count__dot { background: #8e8799; box-shadow: none; animation: none; }

.listener-count--drawer {
    margin: .65rem auto .15rem;
    background: rgba(4, 4, 7, .74);
    font-size: .76rem;
}

/* Odtwarzacz AzuraCast jest celowo przycięty do 124 px; licznik wysuwamy
   pod jego ramkę, żeby nie znikał razem z dolnym fragmentem iframe. */
.drawer-player--embedded:has(> .listener-count) {
    position: relative;
    margin-bottom: 3.45rem;
    overflow: visible;
}

.drawer-player--embedded > .listener-count {
    position: absolute;
    top: calc(100% + .55rem);
    right: 0;
    left: 0;
    z-index: 2;
    margin: 0 auto;
}

.listener-count--home { margin-top: .75rem; border-color: rgba(83,231,170,.32); background: rgba(8,6,14,.88); }
.listener-count--compact { gap:.38rem; margin:.18rem 0 0; padding:0; border:0; background:transparent; box-shadow:none; font-size:.5rem; backdrop-filter:none; }
.listener-count--compact .listener-count__dot { width:.4rem; height:.4rem; box-shadow:0 0 8px rgba(77,231,162,.7); }
.listener-count--compact .listener-count__value { font-size:.56rem; }

@keyframes listener-count-pulse {
    50% { transform: scale(1.12); opacity: .72; }
}

@media (prefers-reduced-motion: reduce) {
    .listener-count__dot { animation: none; }
}