/* ══════════════════════════════════════════════════════════════
   podcasts_player_new.css
   ──────────────────────────────────────────────────────────────
   Stili AGGIUNTIVI per il nuovo player multi-podcast.
   Non sovrascrive il CSS esistente del player card.
   Organizzato in sezioni:
     1.  Player wrap — gestione stati
     2.  Selezione mask
     3.  Card podcast selezione
     4.  Player attivo — layout
     5.  Strip podcast
     6.  Sidebar desktop
     7.  Sidebar — cover attiva
     8.  Sidebar — altri podcast
     9.  Sidebar — dettaglio episodio
     10. Mobile fullscreen
     11. Mobile sheets (bottom sheet pattern)
     12. Sheet — lista episodi
     13. Sheet — info episodio
     14. Sheet — switch podcast
     15. Equalizzatore animato
     16. Stato caricamento / transizioni
     17. Utilities e override layout pagina
     18. Media queries
══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. Player wrap — gestione stati
───────────────────────────────────────────────────────────── */

/* Default: selection visibile, player nascosto */
#playerSelect {
    display: flex;
    flex-direction: column;
}
#playerActive {
    display: none;
}

/* In-player: player visibile, selection nascosta */
.player-wrap.in-player #playerSelect { display: none; }
.player-wrap.in-player #playerActive { display: flex;  flex-direction: column; }

/* Animazione entrata stato player */
.player-wrap.transitioning.in-player #playerActive {
    animation: ps-fade-in 0.35s ease forwards;
}
/* Animazione entrata stato selezione (tornando indietro) */
.player-wrap.transitioning:not(.in-player) #playerSelect {
    animation: ps-fade-in 0.35s ease forwards;
}

@keyframes ps-fade-in {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
}

/* ─────────────────────────────────────────────────────────────
   2. Selezione mask
───────────────────────────────────────────────────────────── */

.player-select {
    background: var(--player-select-bg, #0d1118);
    border-radius: inherit;
    overflow: hidden;
    min-height: 320px;
    flex: 1;
}

.player-select-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 20px 24px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.player-select-title {
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, .9);
    letter-spacing: .01em;
}

.player-select-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, .3);
}

.player-select-cards {
    padding: 20px 20px 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.select-empty {
    grid-column: 1 / -1;
    font-size: 13px;
    color: rgba(255, 255, 255, .3);
    text-align: center;
    padding: 24px 0;
}

/* ─────────────────────────────────────────────────────────────
   3. Card podcast selezione
───────────────────────────────────────────────────────────── */

.select-card {
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .06);
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, border-color .2s ease;
    outline: none;
}
.select-card:hover,
.select-card:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, .18);
}
.select-card:active {
    transform: scale(.98);
}

.select-card-cover {
    aspect-ratio: 1;
    background-size: cover;
    background-position: center;
    background-color: #1a1f38;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.select-card-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 50%,
        rgba(0, 0, 0, .55) 100%
    );
    pointer-events: none;
}

.select-card-eq {
    position: absolute;
    top: 8px;
    left: 8px;
    align-items: center;
    gap: 2px;
    background: rgba(0, 0, 0, .55);
    border-radius: 20px;
    padding: 4px 8px;
    z-index: 1;
}

.select-card-body {
    padding: 10px 12px 12px;
    background: rgba(0, 0, 0, .45);
}

.select-card-name {
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.select-card-desc {
    font-size: 11px;
    color: rgba(255, 255, 255, .4);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.select-card-eps {
    font-size: 10px;
    color: rgba(255, 255, 255, .22);
    margin-top: 6px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────
   4. Player attivo — layout
───────────────────────────────────────────────────────────── */

#playerActive {
    flex-direction: column;
    flex: 1;
}

.player-main-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Su desktop, player attivo è riga: main col + sidebar */
@media (min-width: 901px) {
    #playerActive {
        flex-direction: row;
        align-items: stretch;
    }
    .player-main-col {
        flex: 1;
        border-right: 1px solid rgba(255, 255, 255, .07);
    }
}

/* ─────────────────────────────────────────────────────────────
   5. Strip podcast
───────────────────────────────────────────────────────────── */

.podcast-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    height: 44px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    flex-shrink: 0;
    background: rgba(0, 0, 0, .2);
}

.strip-back-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, .4);
    font-size: 16px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    flex-shrink: 0;
    transition: color .15s;
}
.strip-back-btn:hover { color: rgba(255, 255, 255, .8); }

.strip-thumb {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .08);
}

.strip-name {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, .65);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.strip-eq {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .2s;
}
.strip-eq.playing { opacity: 1; }

.strip-change-btn {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    color: rgba(255, 255, 255, .45);
    font-size: 11px;
    padding: 3px 10px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s;
    font-family: inherit;
}
.strip-change-btn:hover {
    background: rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .8);
}

.strip-rubrica-link {
    font-size: 11px;
    color: rgba(255, 255, 255, .3);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
    flex-shrink: 0;
    white-space: nowrap;
    transition: color .15s;
}
.strip-rubrica-link:hover { color: rgba(255, 255, 255, .7); }

/* Su mobile nascondi link rubrica nella strip (c'è nel sheet) */
@media (max-width: 768px) {
    .strip-rubrica-link { display: none; }
    .strip-change-btn   { display: flex; } /* visibile su mobile */
}
@media (min-width: 769px) {
    .strip-change-btn   { display: none; } /* la sidebar gestisce lo switch */
}

/* ─────────────────────────────────────────────────────────────
   6. Sidebar desktop
───────────────────────────────────────────────────────────── */

.player-sidebar {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .1) transparent;
}

@media (max-width: 900px) {
    .player-sidebar { display: none; }
}

.sidebar-pod-switcher {
    padding: 16px 16px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────
   7. Sidebar — cover attiva
───────────────────────────────────────────────────────────── */

.sidebar-active-cover {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
    cursor: pointer;
}

.sidebar-cover-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    background: #1a1f38;
}

.sidebar-now-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, .6);
    border-radius: 20px;
    padding: 3px 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: #fff;
    opacity: 0;
    transition: opacity .2s;
}
.sidebar-now-badge.playing { opacity: 1; }

.sidebar-eq {
    display: flex;
    align-items: center;
    gap: 2px;
}

.sidebar-cover-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 10px 9px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .72));
    border-radius: 0 0 10px 10px;
}

.sidebar-cover-name {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
}

.sidebar-cover-ep {
    display: block;
    font-size: 10px;
    color: rgba(255, 255, 255, .5);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─────────────────────────────────────────────────────────────
   8. Sidebar — altri podcast
───────────────────────────────────────────────────────────── */

.sidebar-others-label {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, .28);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}

.sidebar-other-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 4px;
    transition: background .15s;
    outline: none;
}
.sidebar-other-item:hover,
.sidebar-other-item:focus-visible {
    background: rgba(255, 255, 255, .06);
}

.sidebar-other-cover {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .06);
}

.sidebar-other-name {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, .65);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-other-eps {
    font-size: 10px;
    color: rgba(255, 255, 255, .28);
    margin-top: 1px;
}

.sidebar-rubrica-link {
    display: inline-block;
    font-size: 11px;
    color: rgba(255, 255, 255, .3);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
    margin-top: 8px;
    transition: color .15s;
}
.sidebar-rubrica-link:hover { color: rgba(255, 255, 255, .7); }

/* ─────────────────────────────────────────────────────────────
   9. Sidebar — dettaglio episodio
───────────────────────────────────────────────────────────── */

.sidebar-ep-detail {
    padding: 14px 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    flex: 1;
}

.sidebar-ep-badge {
    font-size: 10px;
    color: rgba(255, 255, 255, .3);
    font-weight: 500;
    letter-spacing: .04em;
    margin-bottom: 4px;
}

.sidebar-ep-title {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, .85);
    line-height: 1.35;
    margin-bottom: 8px;
}

.sidebar-ep-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, .45);
    line-height: 1.6;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sidebar-ep-desc.expanded {
    display: block;
    -webkit-line-clamp: unset;
}

.sidebar-ep-readmore {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 11px;
    color: rgba(255, 255, 255, .3);
    cursor: pointer;
    padding: 2px 0 6px;
    display: block;
    transition: color .15s;
}
.sidebar-ep-readmore:hover { color: rgba(255, 255, 255, .7); }

.sidebar-ep-block {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.sidebar-ep-label {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, .25);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}

.sidebar-ep-block a {
    display: block;
    font-size: 11px;
    color: rgba(100, 160, 230, .85);
    margin-top: 3px;
    text-decoration: none;
    word-break: break-word;
}
.sidebar-ep-block a:hover { text-decoration: underline; }

.sidebar-ep-block p,
.sidebar-ep-block div {
    font-size: 11px;
    color: rgba(255, 255, 255, .4);
    line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────
   10. Mobile fullscreen
───────────────────────────────────────────────────────────── */

.player-wrap.mobile-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000 !important;
    border-radius: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;     /* dynamic viewport height */
    height: 100vh !important;      /* fallback */
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
}

/* Quando fullscreen è attivo, impedisci scroll del body */
body:has(.player-wrap.mobile-fullscreen) {
    overflow: hidden;
}

/* In fullscreen, #playerActive riempie lo schermo */
.player-wrap.mobile-fullscreen #playerActive {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Player main col riempie lo spazio rimanente */
.player-wrap.mobile-fullscreen .player-main-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* In fullscreen mobile, il playlist drawer è nascosto
   (sostituito dagli sheet) */
.player-wrap.mobile-fullscreen .playlist-drawer {
    display: none !important;
}

/* Bottoni secondari: su mobile fullscreen mostra solo
   Episodi, Info, Condividi — nascondi ripeti e playlist toggle */
@media (max-width: 768px) {
    .player-wrap.mobile-fullscreen .repeat-btn,
    .player-wrap.mobile-fullscreen #playlistToggle .ep-dot { display: none; }
    .player-wrap.mobile-fullscreen #infoBtn { display: flex; }
}

/* ─────────────────────────────────────────────────────────────
   11. Mobile sheets — base
───────────────────────────────────────────────────────────── */

.mobile-sheet {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #151c28;
    border-radius: 16px 16px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.32, .72, 0, 1);
    z-index: 20;
    max-height: 80dvh;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    will-change: transform;
}
.mobile-sheet.open {
    transform: translateY(0);
}

/* Overlay per sheet */
.sheet-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 19;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
.sheet-overlay.on {
    opacity: 1;
    pointer-events: all;
}

/* Handle */
.sheet-handle {
    width: 36px;
    height: 3px;
    background: rgba(255, 255, 255, .15);
    border-radius: 2px;
    margin: 10px auto 12px;
    flex-shrink: 0;
}

/* Header sheet */
.sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 10px;
    flex-shrink: 0;
}
.sheet-title {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, .45);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.sheet-close-btn {
    background: rgba(255, 255, 255, .08);
    border: none;
    border-radius: 20px;
    color: rgba(255, 255, 255, .4);
    font-size: 11px;
    padding: 3px 10px;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s;
}
.sheet-close-btn:hover { background: rgba(255, 255, 255, .14); }

/* Scroll interno sheet */
.sheet-scroll {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .1) transparent;
}

/* ─────────────────────────────────────────────────────────────
   12. Sheet — lista episodi
───────────────────────────────────────────────────────────── */

#sheetEpisodi {
    max-height: 85dvh;
    max-height: 85vh;
}

.sheet-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    flex-shrink: 0;
}

.sheet-season-select {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    color: rgba(255, 255, 255, .65);
    font-size: 11px;
    padding: 4px 10px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.sheet-season-select:focus {
    border-color: rgba(255, 255, 255, .25);
}

.sheet-sort-btn {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    color: rgba(255, 255, 255, .65);
    font-size: 11px;
    padding: 4px 10px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}
.sheet-sort-btn:hover { background: rgba(255, 255, 255, .13); }

.sheet-ep-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .08) transparent;
}

/* Righe episodio nello sheet */
.sheet-ep-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    cursor: pointer;
    transition: background .12s;
}
.sheet-ep-row:active,
.sheet-ep-row:hover { background: rgba(255, 255, 255, .05); }
.sheet-ep-row.active { background: rgba(255, 255, 255, .07); }
.sheet-ep-row.upcoming { opacity: .5; cursor: default; }

.sheet-ep-thumb {
    width: 42px;
    height: 42px;
    border-radius: 6px;
    flex-shrink: 0;
    object-fit: cover;
    background: rgba(255, 255, 255, .06);
}

.sheet-ep-info {
    flex: 1;
    min-width: 0;
}

.sheet-ep-badge {
    font-size: 10px;
    color: rgba(255, 255, 255, .28);
    font-weight: 500;
    letter-spacing: .03em;
}

.sheet-ep-title {
    font-size: 13px;
    color: rgba(255, 255, 255, .85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.sheet-ep-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, .28);
    margin-top: 2px;
}

.sheet-ep-eq {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────
   13. Sheet — info episodio
───────────────────────────────────────────────────────────── */

#sheetInfo {
    max-height: 75dvh;
    max-height: 75vh;
}

#sheetInfo .sheet-scroll {
    padding: 0 16px 20px;
}

.sheet-info-badge {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, .3);
    letter-spacing: .04em;
    margin-bottom: 4px;
}

.sheet-info-title {
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 16px;
}

.sheet-info-section {
    margin-bottom: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .06);
}
.sheet-info-section:first-child { border-top: none; padding-top: 0; }

.sheet-info-label {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, .25);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}

.sheet-info-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, .5);
    line-height: 1.6;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sheet-info-desc.expanded {
    display: block;
    -webkit-line-clamp: unset;
}

.sheet-readmore-btn {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 12px;
    color: rgba(255, 255, 255, .35);
    cursor: pointer;
    padding: 4px 0 8px;
    display: block;
    transition: color .15s;
}
.sheet-readmore-btn:hover { color: rgba(255, 255, 255, .7); }

#sheetInfoSourcesWrap a,
#sheetInfoCreditsWrap  a {
    display: block;
    font-size: 12px;
    color: rgba(100, 160, 230, .85);
    margin-top: 3px;
    text-decoration: none;
    word-break: break-word;
}
#sheetInfoSourcesWrap a:hover,
#sheetInfoCreditsWrap  a:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────
   14. Sheet — switch podcast
───────────────────────────────────────────────────────────── */

#sheetSwitch {
    max-height: 65dvh;
    max-height: 65vh;
}

.sheet-switch-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background .12s;
}
.sheet-switch-row:active,
.sheet-switch-row:hover { background: rgba(255, 255, 255, .05); }

.sheet-switch-cover {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .06);
}

.sheet-switch-name {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, .85);
}

.sheet-switch-eps {
    font-size: 12px;
    color: rgba(255, 255, 255, .3);
    margin-top: 2px;
}

.sheet-cancel-btn {
    width: calc(100% - 32px);
    margin: 8px 16px 12px;
    padding: 10px;
    background: rgba(255, 255, 255, .06);
    border: none;
    border-radius: 10px;
    font-size: 14px;
    color: rgba(255, 255, 255, .45);
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    transition: background .15s;
}
.sheet-cancel-btn:hover { background: rgba(255, 255, 255, .1); }

/* ─────────────────────────────────────────────────────────────
   15. Equalizzatore animato
───────────────────────────────────────────────────────────── */

@keyframes eq-bar {
    from { transform: scaleY(.25); }
    to   { transform: scaleY(1); }
}

/* Base span per tutti gli equalizzatori */
.strip-eq span,
.sidebar-eq span,
.select-card-eq span,
.sheet-ep-eq span,
.sidebar-now-badge .sidebar-eq span {
    display: block;
    width: 2px;
    border-radius: 1px;
    background: #1D9E75;
    transform-origin: bottom;
    animation: eq-bar .7s ease-in-out infinite alternate;
}

/* Strip */
.strip-eq span:nth-child(1) { height: 5px;  animation-delay: 0s; }
.strip-eq span:nth-child(2) { height: 8px;  animation-delay: .2s; }
.strip-eq span:nth-child(3) { height: 4px;  animation-delay: .4s; }

/* Sidebar now badge */
.sidebar-eq span:nth-child(1) { height: 5px;  animation-delay: 0s; }
.sidebar-eq span:nth-child(2) { height: 9px;  animation-delay: .2s; }
.sidebar-eq span:nth-child(3) { height: 4px;  animation-delay: .4s; }

/* Select card */
.select-card-eq span:nth-child(1) { height: 6px;  animation-delay: 0s; }
.select-card-eq span:nth-child(2) { height: 10px; animation-delay: .2s; }
.select-card-eq span:nth-child(3) { height: 5px;  animation-delay: .4s; }

/* Sheet ep list */
.sheet-ep-eq span:nth-child(1) { height: 6px;  animation-delay: 0s; }
.sheet-ep-eq span:nth-child(2) { height: 9px;  animation-delay: .2s; }
.sheet-ep-eq span:nth-child(3) { height: 4px;  animation-delay: .4s; }

/* Pause animazione quando non in riproduzione */
.strip-eq:not(.playing) span,
.sidebar-now-badge:not(.playing) .sidebar-eq span {
    animation-play-state: paused;
    transform: scaleY(.25);
}

/* ─────────────────────────────────────────────────────────────
   16. Stato caricamento / transizioni
───────────────────────────────────────────────────────────── */

/* Badge "In arrivo" nella playlist */
.badge-upcoming {
    display: inline-block;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .03em;
    text-transform: uppercase;
    background: rgba(255, 200, 80, .15);
    color: rgba(255, 200, 80, .8);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 5px;
    vertical-align: middle;
}

/* ─────────────────────────────────────────────────────────────
   17. Utilities e override layout pagina
───────────────────────────────────────────────────────────── */

/* .rub-zone-inner senza .rub-zone-cols (rimosso rub-col-detail):
   ora la zona player occupa tutta la larghezza */
.rub-zone-inner:not(.rub-zone-cols) {
    display: block;
}

/* scrollbar webkit per sidebar e sheet */
.player-sidebar::-webkit-scrollbar,
.sheet-ep-list::-webkit-scrollbar,
.sheet-scroll::-webkit-scrollbar {
    width: 3px;
}
.player-sidebar::-webkit-scrollbar-thumb,
.sheet-ep-list::-webkit-scrollbar-thumb,
.sheet-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .1);
    border-radius: 2px;
}
.player-sidebar::-webkit-scrollbar-track,
.sheet-ep-list::-webkit-scrollbar-track,
.sheet-scroll::-webkit-scrollbar-track {
    background: transparent;
}

/* ─────────────────────────────────────────────────────────────
   18. Media queries
───────────────────────────────────────────────────────────── */

/* Tablet: ridimensionamento sidebar */
@media (min-width: 901px) and (max-width: 1200px) {
    .player-sidebar { width: 210px; }
    .sidebar-pod-switcher { padding: 12px 12px 10px; }
    .sidebar-ep-detail { padding: 12px 12px 16px; }
}

/* Mobile < 900px: layout a colonna singola */
@media (max-width: 900px) {
    .player-sidebar { display: none !important; }
    #playerActive   { flex-direction: column; }
    .player-main-col { border-right: none; }
    .strip-change-btn { display: flex; }
}

/* Mobile < 768px: selezione mask a lista verticale */
@media (max-width: 768px) {
    .player-select-cards {
        grid-template-columns: 1fr;
        padding: 12px 16px 16px;
        gap: 10px;
    }

    /* Card in modalità lista orizzontale */
    .select-card {
        flex-direction: row;
        border-radius: 10px;
    }
    .select-card-cover {
        width: 64px;
        height: 64px;
        aspect-ratio: unset;
        flex-shrink: 0;
        border-radius: 8px 0 0 8px;
    }
    .select-card-cover::after { display: none; } /* rimuovi gradient su mobile list */
    .select-card-body {
        flex: 1;
        background: rgba(255, 255, 255, .04);
        padding: 10px 12px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .select-card-desc { -webkit-line-clamp: 1; }
    .select-card-eq {
        top: auto;
        left: auto;
        right: 10px;
        bottom: 50%;
        transform: translateY(50%);
    }

    /* Strip: nasconde link rubrica, mostra solo nome + change */
    .podcast-strip { gap: 6px; padding: 0 12px; }
    .strip-rubrica-link { display: none; }

    /* Sheet hanno z-index elevato (sopra fullscreen player) */
    .mobile-sheet  { z-index: 1020; }
    .sheet-overlay { z-index: 1019; }
}

/* iPhone SE e schermi molto piccoli */
@media (max-width: 380px) {
    .select-card-name  { font-size: 12px; }
    .select-card-desc  { display: none; }
    .sheet-ep-title    { font-size: 12px; }
    .sidebar-cover-name { font-size: 11px; }
}

.titleSection{background-image:url(
    
            https://politeia.blog/fileadmin/Politeia/Img/articoli/luca/agricoltura/innazione-genetica-agricoltura-politeia.jpg
          
);}