/* ========================================
   ALBUM DETAIL PAGE — BASE LAYOUT
   Core layout rules for the album detail
   page. Previously inline in album.ejs,
   now externalised for cacheability.
   ======================================== */

.album-detail-page {
    padding-bottom: clamp(2rem, 5vw, 4rem);
    position: relative;
    overflow: hidden;
}

.album-header {
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.album-header__grid {
    display: grid;
    grid-template-columns: minmax(200px, 400px) 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}

.album-artwork-large {
    text-align: center;
}

.album-artwork-large img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: var(--shadow-xl, 0 8px 30px rgba(0, 0, 0, 0.4));
}

.album-placeholder-large {
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-secondary, linear-gradient(135deg, #1a1a2e, #16213e));
    font-size: 4rem;
    color: var(--text-muted, rgba(255, 255, 255, 0.3));
    border-radius: 12px;
    margin: 0 auto;
}

.album-info h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin: 0 0 0.75rem;
    color: var(--text-primary, #e0e0f0);
    line-height: 1.15;
}

.album-meta-detail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.album-meta-sep {
    opacity: 0.4;
}

.album-artist {
    font-weight: 600;
    color: var(--text-primary, #e0e0f0);
}

.album-description {
    color: var(--text-secondary, rgba(255, 255, 255, 0.65));
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    max-width: 65ch;
}

/* Action buttons */
.album-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

.album-play-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--accent-red, #dc2626);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 200ms, transform 150ms;
}

.album-play-all-btn:hover {
    background: var(--accent-red-dark, #b91c1c);
    transform: translateY(-1px);
}

.album-queue-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #e0e0f0);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 0.6rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 200ms, border-color 200ms;
}

.album-queue-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

.album-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: color 200ms, border-color 200ms, background 200ms;
}

.album-share-btn:hover {
    color: var(--text-primary, #e0e0f0);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.04);
}

.album-share-btn .share-copied {
    color: var(--accent-green, #22c55e);
}

/* Tracks section */
.album-tracks-section {
    margin-top: 1rem;
}

.album-tracks-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.album-tracks-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #e0e0f0);
    margin: 0;
}

.album-tracks-total-duration {
    font-size: 0.85rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.5));
    font-variant-numeric: tabular-nums;
}

.track-item {
    display: grid;
    grid-template-columns: 2rem 1fr auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    transition: background-color 200ms;
}

.track-item:hover {
    background: var(--bg-secondary, rgba(255, 255, 255, 0.04));
}

.track-number {
    font-variant-numeric: tabular-nums;
    color: var(--text-muted, rgba(255, 255, 255, 0.35));
    text-align: center;
    font-size: 0.9rem;
}

.track-title span {
    color: var(--text-primary, #e0e0f0);
    font-size: 0.95rem;
}

.track-duration {
    font-size: 0.85rem;
    color: var(--text-muted, rgba(255, 255, 255, 0.4));
    font-variant-numeric: tabular-nums;
    min-width: 3.5ch;
    text-align: right;
}

.track-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.track-play-btn {
    background: var(--accent-red, #dc2626);
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 150ms, transform 150ms;
}

.track-play-btn:hover {
    background: var(--accent-red-dark, #b91c1c);
    transform: scale(1.1);
}

.track-add-to-queue-btn {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 150ms, color 150ms, transform 150ms;
    font-size: 1.1rem;
    line-height: 1;
}

.track-add-to-queue-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #e0e0f0);
    transform: scale(1.08);
}

.track-share-btn {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 150ms, color 150ms, transform 150ms;
}
.track-share-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #e0e0f0);
    transform: scale(1.08);
}

.lyrics-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 0.25rem 0.4rem;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 200ms, color 200ms, border-color 200ms, background 200ms;
    display: flex;
    align-items: center;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
}

.lyrics-btn:hover,
.lyrics-btn.active {
    opacity: 1;
    color: var(--accent-red, #dc2626);
    border-color: rgba(220, 38, 38, 0.3);
    background: rgba(220, 38, 38, 0.06);
}

.track-lyrics {
    grid-column: 1 / -1;
    margin-top: 0.5rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border-left: 3px solid var(--accent-red, #dc2626);
}

.lyrics-content {
    line-height: 1.7;
    white-space: pre-line;
    color: var(--text-secondary, rgba(255, 255, 255, 0.65));
    font-size: 0.9rem;
}

.lyrics-line.has-annotation {
    background-color: rgba(255, 200, 50, 0.1);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
}

.annotation-display {
    margin-top: 15px;
    padding: 15px;
    background-color: var(--bg-secondary, rgba(255, 255, 255, 0.04));
    border-left: 4px solid var(--accent-blue, #3b82f6);
    border-radius: 8px;
}

.annotation-display p {
    margin-bottom: 5px;
    color: var(--text-primary, #e0e0f0);
}

.annotation-display strong {
    color: var(--accent-blue, #3b82f6);
}

/* Streaming Links Container */
#streaming-links-container {
    margin-top: 1.5rem;
    width: 100%;
}

/* Prev/Next Navigation */
.album-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.album-nav__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: inherit;
    text-decoration: none;
    transition: background 200ms, border-color 200ms, transform 200ms;
    max-width: 48%;
}

.album-nav__link:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

.album-nav__link--next {
    text-align: right;
    margin-left: auto;
}

.album-nav__arrow {
    font-size: 1.25rem;
    color: var(--accent-red, #dc2626);
    flex-shrink: 0;
}

.album-nav__info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.album-nav__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, rgba(255, 255, 255, 0.4));
    font-weight: 600;
}

.album-nav__title {
    font-size: 0.95rem;
    color: var(--text-primary, #e0e0f0);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.album-nav__spacer {
    flex: 0 0 48%;
}

/* ========================================
   ALBUM DETAIL — RESPONSIVE (BASE)
   ======================================== */
@media (max-width: 768px) {
    .album-header__grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1.5rem;
    }

    .album-artwork-large img {
        max-width: 280px;
        margin: 0 auto;
        display: block;
    }

    .album-meta-detail {
        justify-content: center;
    }

    .album-actions {
        justify-content: center;
    }

    .album-description {
        text-align: left;
    }

    .album-info h1 {
        font-size: 1.75rem;
    }

    .album-placeholder-large {
        width: 250px;
        height: 250px;
    }

    .track-item {
        grid-template-columns: 1.5rem 1fr auto;
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .track-duration {
        display: none;
    }

    .album-nav {
        flex-direction: column;
        gap: 0.75rem;
    }

    .album-nav__link {
        max-width: 100%;
    }

    .album-nav__link--next {
        flex-direction: row-reverse;
        text-align: left;
    }

    .album-nav__spacer {
        display: none;
    }
}

/* ========================================
   ALBUM DETAIL — LIGHT THEME (BASE)
   ======================================== */
[data-theme="light"] .album-queue-btn {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
}

[data-theme="light"] .album-queue-btn:hover {
    background: rgba(0, 0, 0, 0.07);
}

[data-theme="light"] .album-share-btn {
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .album-nav__link {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .album-nav__link:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .track-add-to-queue-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .lyrics-btn {
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .track-lyrics {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .album-tracks-header {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .album-nav {
    border-top-color: rgba(0, 0, 0, 0.08);
}

/* ========================================
   ALBUM DETAIL PAGE ENHANCEMENTS
   Subtle polish for track list, lyrics,
   cover art, and now-playing states.
   ======================================== */

/* --- Track list hover effects ---
   Enhance the default hover with a warm red tint
   that hints at the band's rock identity. */
.track-item:hover {
    background: rgba(220, 38, 38, 0.05);
    transition: background var(--transition-fast, 150ms);
}

/* --- Track keyboard focus --- */
.track-item:focus-visible {
    outline: 2px solid var(--color-primary, #dc2626);
    outline-offset: -2px;
    background: rgba(220, 38, 38, 0.08);
}

/* --- Track number styling ---
   Style track numbers like vinyl markers with
   a display font and clear minimum width. */
.track-number {
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 1.1em;
    min-width: 2ch;
    letter-spacing: 0.02em;
}

/* --- Lyrics button visibility ---
   Make lyrics buttons more discoverable by
   starting slightly more visible and coloring on hover. */
.lyrics-btn {
    opacity: 0.6;
    transition: opacity var(--transition-fast, 150ms), color var(--transition-fast, 150ms);
}

.lyrics-btn:hover {
    opacity: 1;
    color: var(--accent-red, #dc2626);
}

/* --- Album cover enhanced shadow ---
   Dramatic shadow with a subtle red ambient glow
   to reinforce the rock aesthetic. */
.album-artwork-large img {
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.4),
        0 0 60px rgba(220, 38, 38, 0.1);
    border-radius: var(--radius-md, 8px);
}

.album-artwork-large img:hover {
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(220, 38, 38, 0.15);
}

/* --- Now playing track indicator ---
   The .track-now-playing class is applied by
   album-detail.js when a track is active. */
.track-item.track-now-playing {
    background: rgba(220, 38, 38, 0.08);
    border-left: 3px solid var(--accent-red, #dc2626);
}

/* --- Add-to-queue button enhancement ---
   Subtle red tint on hover. */
.track-add-to-queue-btn:hover {
    color: var(--accent-red, #dc2626);
    border-color: rgba(220, 38, 38, 0.3);
}

/* --- Track title hover emphasis ---
   Slight brightness boost when hovering a track row. */
.track-item:hover .track-title span {
    color: var(--text-primary);
}

.track-item:hover .track-number {
    color: var(--text-secondary);
}

/* --- Play button glow on track hover --- */
.track-item:hover .track-play-btn {
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

/* ========================================
   LIGHT THEME SUPPORT
   ======================================== */
[data-theme="light"] .track-item:hover {
    background: rgba(220, 38, 38, 0.03);
}

[data-theme="light"] .lyrics-btn:hover {
    color: var(--accent-red, #dc2626);
}

[data-theme="light"] .track-item.track-now-playing {
    background: rgba(220, 38, 38, 0.06);
}

[data-theme="light"] .track-item:hover .track-play-btn {
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);
}

[data-theme="light"] .album-artwork-large img {
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.15),
        0 0 40px rgba(220, 38, 38, 0.06);
}

[data-theme="light"] .album-artwork-large img:hover {
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.2),
        0 0 60px rgba(220, 38, 38, 0.1);
}

/* ========================================
   STREAMING PLATFORMS SECTION
   Links to external music services
   ======================================== */
.album-streaming-platforms {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md, 8px);
}

.album-streaming-title {
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary, rgba(255, 255, 255, 0.55));
    margin: 0 0 0.75rem;
}

.streaming-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.streaming-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 180ms, color 180ms, transform 120ms;
    border: 1px solid transparent;
}

.streaming-link:hover {
    color: #fff;
    transform: translateY(-1px);
}

.streaming-link:active {
    transform: translateY(0);
}

.streaming-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Platform brand colors on hover */
.streaming-link--youtube:hover {
    background: rgba(255, 0, 0, 0.15);
    border-color: rgba(255, 0, 0, 0.25);
    color: #ff4444;
}

.streaming-link--yandex:hover {
    background: rgba(255, 204, 0, 0.12);
    border-color: rgba(255, 204, 0, 0.25);
    color: #ffcc00;
}

.streaming-link--vk:hover {
    background: rgba(39, 135, 245, 0.15);
    border-color: rgba(39, 135, 245, 0.25);
    color: #2787f5;
}

.streaming-link--apple:hover {
    background: rgba(252, 60, 68, 0.15);
    border-color: rgba(252, 60, 68, 0.25);
    color: #fc3c44;
}

/* Light theme */
[data-theme="light"] .album-streaming-platforms {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .streaming-link {
    background: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.55);
}

[data-theme="light"] .streaming-link:hover {
    color: #000;
}

[data-theme="light"] .streaming-link--youtube:hover {
    background: rgba(255, 0, 0, 0.08);
    color: #cc0000;
}

[data-theme="light"] .streaming-link--yandex:hover {
    background: rgba(255, 204, 0, 0.1);
    color: #cc9900;
}

[data-theme="light"] .streaming-link--vk:hover {
    background: rgba(39, 135, 245, 0.08);
    color: #1a6dd6;
}

[data-theme="light"] .streaming-link--apple:hover {
    background: rgba(252, 60, 68, 0.08);
    color: #d92d34;
}

/* ========================================
   RELATED ARTICLES SECTION
   Article cards linked from album detail page
   ======================================== */
.album-related-articles {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.album-related-articles h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1.25rem;
    color: var(--text-primary, #fff);
}

.related-articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.related-article-card {
    display: block;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md, 8px);
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: transform 200ms ease, background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.related-article-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(220, 38, 38, 0.3);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.related-article-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.related-article-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    color: var(--text-primary, #fff);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-article-card:hover .related-article-title {
    color: var(--accent-red, #dc2626);
}

.related-article-date {
    font-size: 0.8rem;
    color: var(--text-muted, rgba(255, 255, 255, 0.4));
    letter-spacing: 0.02em;
}

.related-article-excerpt {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-article-readmore {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-red, #dc2626);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 200ms ease, transform 200ms ease;
}

.related-article-card:hover .related-article-readmore {
    opacity: 1;
    transform: translateX(0);
}

/* Light theme */
[data-theme="light"] .album-related-articles {
    border-top-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .related-article-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .related-article-card:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(220, 38, 38, 0.25);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .related-article-title {
    color: var(--text-primary, #1a1a2e);
}

[data-theme="light"] .related-article-excerpt {
    color: var(--text-secondary, rgba(0, 0, 0, 0.6));
}

[data-theme="light"] .related-article-date {
    color: var(--text-muted, rgba(0, 0, 0, 0.4));
}

/* ========================================
   MOBILE RESPONSIVE
   ======================================== */
@media (max-width: 600px) {
    .track-number {
        font-size: 1em;
        min-width: 1.5ch;
    }

    .track-item.track-now-playing {
        padding-left: calc(var(--space-3, 0.5rem) - 3px);
    }

    .track-item:hover .track-play-btn {
        box-shadow: none;
    }

    .album-streaming-platforms {
        padding: 0.75rem 1rem;
        margin-top: 1rem;
    }

    .streaming-links {
        gap: 0.4rem;
    }

    .streaming-link {
        font-size: 0.75rem;
        padding: 0.35rem 0.6rem;
    }

    .streaming-link svg {
        width: 16px;
        height: 16px;
    }

    /* Related articles responsive */
    .related-articles-grid {
        grid-template-columns: 1fr;
    }

    .album-related-articles {
        margin-top: 1.5rem;
        padding-top: 1rem;
    }

    .related-article-card {
        padding: 1rem;
    }

    .related-article-readmore {
        opacity: 1;
        transform: none;
    }
}

/* ========================================
   ALBUM COVER LIGHTBOX
   Full-screen overlay for browsing cover images.
   Uses native <dialog> for accessibility.
   ======================================== */

.album-cover-lightbox {
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    color: #fff;
    z-index: var(--z-lightbox, 9999);
}

.album-cover-lightbox[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.album-cover-lightbox::backdrop {
    background: rgba(5, 5, 10, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Inner layout */
.acl-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem 2rem;
    box-sizing: border-box;
}

/* Click-outside overlay */
.acl-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Image container */
.acl-image-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    user-select: none;
    z-index: 1;
}

.acl-img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 250ms ease, transform 250ms ease;
}

.album-cover-lightbox[open] .acl-img {
    opacity: 1;
    transform: scale(1);
}

/* Counter badge */
.acl-counter {
    position: absolute;
    top: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.5);
    padding: 0.3rem 0.8rem;
    border-radius: 100px;
    pointer-events: none;
    z-index: 3;
}

/* Caption (filename) */
.acl-caption {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    max-width: 60ch;
    padding: 0 1rem;
    flex-shrink: 0;
    z-index: 1;
}

/* Close button */
.acl-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 3;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 200ms ease, color 200ms ease;
}

.acl-close:hover,
.acl-close:focus-visible {
    background: rgba(220, 38, 38, 0.8);
    color: #fff;
}

.acl-close:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
}

/* Navigation arrows */
.acl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 3rem;
    height: 3rem;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 200ms ease, box-shadow 200ms ease, color 200ms ease;
}

.acl-nav:hover,
.acl-nav:focus-visible {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.1);
}

.acl-nav:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
}

.acl-nav:disabled {
    opacity: 0.2;
    cursor: default;
    pointer-events: none;
}

.acl-prev { left: 0.75rem; }
.acl-next { right: 0.75rem; }

/* Thumbnail strip inside lightbox */
.acl-thumbs {
    display: flex;
    gap: 6px;
    margin-top: 0.75rem;
    padding: 4px 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.3) transparent;
    flex-shrink: 0;
    z-index: 1;
    max-width: 90vw;
}

.acl-thumbs::-webkit-scrollbar { height: 4px; }
.acl-thumbs::-webkit-scrollbar-track { background: transparent; }
.acl-thumbs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 2px; }

.acl-thumb {
    width: 48px;
    height: 48px;
    border-radius: 3px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.5;
    transition: opacity 200ms, border-color 200ms, transform 150ms;
    flex-shrink: 0;
}

.acl-thumb:hover {
    opacity: 0.85;
    transform: scale(1.06);
}

.acl-thumb.active {
    border-color: var(--accent-red, #dc2626);
    opacity: 1;
}

/* cover cursor handled by tier-20 lightbox rule */

/* Cover crossfade transition */
#album-main-cover.cover-fading {
    opacity: 0;
    transition: opacity 280ms ease;
}

/* ========================================
   ALBUM CD SCANS GALLERY
   Labeled grid of additional cover scans
   below the main album artwork.
   ======================================== */

.album-cover-thumbs {
    margin-top: 1rem;
    padding: 0;
}

.album-scans-title {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary, rgba(255, 255, 255, 0.55));
    margin-bottom: 0.5rem;
}

.album-scans-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.album-scan-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: border-color 200ms ease, transform 150ms ease, background 200ms ease;
    overflow: hidden;
    flex-shrink: 0;
    max-width: 200px;
}

.album-scan-card:hover {
    border-color: var(--accent-red, #dc2626);
    transform: translateY(-2px);
    background: rgba(0, 0, 0, 0.4);
}

.album-scan-card:focus-visible {
    outline: 2px solid var(--accent-red, #dc2626);
    outline-offset: 2px;
}

.album-scan-img {
    width: auto;
    height: 120px;
    max-width: 200px;
    object-fit: contain;
    display: block;
}

.album-scan-label {
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, rgba(255, 255, 255, 0.5));
    padding: 0.25rem 0.5rem;
    text-align: center;
    white-space: nowrap;
}

/* Light theme */
[data-theme="light"] .album-scan-card {
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .album-scan-card:hover {
    border-color: var(--accent-red, #dc2626);
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .album-scans-title {
    color: var(--text-secondary, rgba(0, 0, 0, 0.55));
}

[data-theme="light"] .album-scan-label {
    color: var(--text-secondary, rgba(0, 0, 0, 0.5));
}

/* Mobile: smaller scan cards */
@media (max-width: 600px) {
    .album-scan-img {
        height: 80px;
        max-width: 140px;
    }
    .album-scan-card {
        max-width: 140px;
    }
    .album-scan-label {
        font-size: 0.6rem;
    }
    .album-scans-grid {
        gap: 0.35rem;
    }
}

/* ========================================
   LIGHTBOX MOBILE RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .acl-inner {
        padding: 2.5rem 0.25rem 1.5rem;
    }

    .acl-img {
        max-width: 98vw;
        max-height: 70vh;
        border-radius: 2px;
    }

    .acl-nav {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.1rem;
    }

    .acl-prev { left: 0.25rem; }
    .acl-next { right: 0.25rem; }

    .acl-close {
        top: 0.5rem;
        right: 0.5rem;
        width: 2.25rem;
        height: 2.25rem;
    }

    .acl-caption {
        font-size: 0.8rem;
        max-width: 95vw;
    }

    .acl-thumbs {
        gap: 4px;
        padding: 4px 0.5rem;
        max-width: 98vw;
    }

    .acl-thumb {
        width: 40px;
        height: 40px;
    }
}

/* ========================================
   LIGHTBOX REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .acl-img {
        transition: none;
        opacity: 1;
        transform: none;
    }

    .acl-close,
    .acl-nav,
    .acl-thumb {
        transition: none;
    }
}

/* ========================================
   LIGHTBOX PRINT
   ======================================== */
@media print {
    .album-cover-lightbox {
        display: none !important;
    }
}

/* ========================================
   ENHANCED TRACK LIST INTERACTIONS (v5)
   Staggered row hover, playing pulse,
   better mobile touch targets.
   ======================================== */

/* Subtle row striping for readability */
.track-list .track-item:nth-child(even) {
    background: rgba(255, 255, 255, 0.015);
}

/* Animated now-playing indicator - pulsing border */
.track-item.track-now-playing .track-number {
    color: var(--accent-red, #dc2626);
    animation: trackPulse 1.8s ease-in-out infinite;
}

@keyframes trackPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Paused track has static indicator */
.track-item.track-now-playing.track-is-paused .track-number {
    animation: none;
    opacity: 0.6;
}

/* Track row slide-in on hover */
.track-item {
    transition: background 200ms ease, transform 150ms ease, box-shadow 200ms ease;
}

.track-item:hover {
    transform: translateX(4px);
}

.track-item.track-now-playing:hover {
    transform: translateX(4px);
    background: rgba(220, 38, 38, 0.1);
}

/* Better lyrics button styling */
.lyrics-btn {
    position: relative;
}

.lyrics-btn::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--accent-red, #dc2626);
    transition: width 200ms ease, left 200ms ease;
}

.lyrics-btn:hover::after,
.lyrics-btn.active::after {
    width: 100%;
    left: 0;
}

/* Album card hover on listing page */
.album-card-modern {
    transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}

.album-card-modern:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 24px rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.2);
}

.album-card-modern .album-cover img {
    transition: transform 400ms ease;
}

.album-card-modern:hover .album-cover img {
    transform: scale(1.04);
}

/* Reveal animation for album cards */
.album-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 500ms ease, transform 500ms ease;
    transition-delay: var(--reveal-delay, 0s);
}

.album-reveal.album-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   ALBUMS LISTING: DECADE SECTION HEADERS
   ======================================== */
.decade-group-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0 0.25rem;
    margin-top: 0.5rem;
}

.decade-group-header:first-child {
    margin-top: 0;
}

.decade-group-header__label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-red, #dc2626);
    white-space: nowrap;
}

.decade-group-header__line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.3), transparent);
}

/* ========================================
   MOBILE RESPONSIVE ENHANCEMENTS (v5)
   Better touch targets and spacing.
   ======================================== */
@media (max-width: 600px) {
    /* Larger touch targets for track buttons */
    .track-play-btn {
        width: 36px;
        height: 36px;
    }

    .track-add-to-queue-btn {
        width: 34px;
        height: 34px;
    }

    .lyrics-btn {
        padding: 0.35rem 0.5rem;
    }

    /* No hover slide on mobile (touch) */
    .track-item:hover {
        transform: none;
    }

    /* Album cards - less dramatic hover */
    .album-card-modern:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    }

    /* Album action buttons stack on narrow screens */
    .album-actions {
        flex-direction: column;
    }

    .album-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Prev/next nav on mobile */
    .album-nav__title {
        font-size: 0.85rem;
    }
}

/* Touch-friendly: larger targets on touch-only devices */
@media (hover: none) {
    .track-item {
        padding: 0.75rem;
        min-height: 48px;
    }

    .track-play-btn {
        width: 40px;
        height: 40px;
    }

    .lyrics-btn {
        min-height: 40px;
        padding: 0.4rem 0.6rem;
    }

    /* No hover effects on touch */
    .track-item:hover {
        transform: none;
        background: transparent;
    }

    .album-card-modern:hover {
        transform: none;
        box-shadow: none;
    }
}

/* ========================================
   LYRICS MODAL / EXPANDED STYLING (v5)
   ======================================== */
.track-lyrics {
    animation: lyricsSlideDown 300ms ease-out;
}

@keyframes lyricsSlideDown {
    from {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    to {
        opacity: 1;
        max-height: 2000px;
    }
}

/* Lyrics text hover line highlight */
.lyrics-content .lyrics-line:hover {
    background: rgba(220, 38, 38, 0.04);
    border-radius: 2px;
}

/* ========================================
   LIGHT THEME ENHANCEMENTS (v5)
   ======================================== */
[data-theme="light"] .track-list .track-item:nth-child(even) {
    background: rgba(0, 0, 0, 0.015);
}

[data-theme="light"] .album-card-modern:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 0 24px rgba(220, 38, 38, 0.04);
    border-color: rgba(220, 38, 38, 0.15);
}

[data-theme="light"] .decade-group-header__line {
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.2), transparent);
}

[data-theme="light"] .lyrics-content .lyrics-line:hover {
    background: rgba(220, 38, 38, 0.03);
}

/* ========================================
   REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .album-card-modern,
    .album-card-modern .album-cover img,
    .track-item,
    .album-reveal {
        transition: none;
    }

    .track-item.track-now-playing .track-number {
        animation: none;
    }

    .track-lyrics {
        animation: none;
    }

    .album-reveal {
        opacity: 1;
        transform: none;
    }
}

/* ========================================
   Phase 73: Albums Discovery Enhancement
   - Discography statistics banner
   - Vinyl peek-out hover effect
   - Play overlay on album cards
   - Quick stats on album cards
   - Credits section on detail page
   - Waveform decoration behind track list
   - Enhanced streaming links
   - Improved track row alternation
   ======================================== */

/* ========================================
   DISCOGRAPHY STATISTICS BANNER
   Full-width animated banner at top of
   albums page with key stats.
   ======================================== */
.disco-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1rem, 3vw, 2rem);
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.06) 0%, rgba(18, 18, 22, 0.95) 50%, rgba(220, 38, 38, 0.04) 100%);
    border: 1px solid rgba(220, 38, 38, 0.12);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

/* Subtle red glow accent in background */
.disco-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.5), transparent);
}

.disco-banner__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.disco-banner__value {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    color: var(--text-primary, #e0e0f0);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.disco-banner__label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary, #a0a0b0);
    font-weight: 600;
}

.disco-banner__divider {
    width: 1px;
    height: 2.5rem;
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

/* Scroll-into-view animation */
.disco-banner {
    animation: bannierSlideIn 0.6s ease-out both;
}

@keyframes bannierSlideIn {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Light theme */
[data-theme="light"] .disco-banner {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.04) 0%, rgba(255, 255, 255, 0.95) 50%, rgba(220, 38, 38, 0.03) 100%);
    border-color: rgba(220, 38, 38, 0.1);
}

[data-theme="light"] .disco-banner__divider {
    background: rgba(0, 0, 0, 0.08);
}

/* Responsive */
@media (max-width: 480px) {
    .disco-banner {
        gap: 0.75rem;
        padding: 0.75rem;
        flex-wrap: wrap;
    }

    .disco-banner__value {
        font-size: 1.25rem;
    }

    .disco-banner__divider {
        height: 2rem;
    }
}

/* ========================================
   VINYL PEEK-OUT EFFECT
   On card hover, a vinyl record slides out
   from behind the album cover.
   ======================================== */
.album-vinyl-peek {
    position: absolute;
    top: 50%;
    right: -20%;
    width: 85%;
    height: 85%;
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        #1a1a1a 20%,
        #0d0d0d 22%,
        #1a1a1a 24%,
        #111 30%,
        #1a1a1a 36%,
        #111 42%,
        #1a1a1a 48%,
        #111 54%,
        #1a1a1a 60%,
        #111 66%,
        #1a1a1a 72%,
        #0d0d0d 100%
    );
    transform: translateY(-50%) translateX(0);
    transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 0;
    pointer-events: none;
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.5);
}

/* Vinyl label center dot */
.album-vinyl-peek::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28%;
    height: 28%;
    border-radius: 50%;
    background: radial-gradient(circle, #dc2626 0%, #991b1b 60%, #7f1d1d 100%);
    transform: translate(-50%, -50%);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
}

/* Vinyl spindle hole */
.album-vinyl-peek::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6%;
    height: 6%;
    border-radius: 50%;
    background: #0a0a0a;
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* Slide out on hover */
.album-card-modern:hover .album-vinyl-peek {
    transform: translateY(-50%) translateX(25%);
}

/* Ensure the cover image stays on top of the vinyl.
   <picture> has display:contents (from pages.css) so it generates no box;
   z-index on the <img> directly is what matters. */
.album-card-modern .album-cover img,
.album-card-modern .album-cover .blur-up {
    position: relative;
    z-index: 1;
}

.album-card-modern .album-year-badge {
    z-index: 2;
}

/* ========================================
   PLAY OVERLAY ON ALBUM CARDS
   Fades in on hover with a play icon.
   ======================================== */
.album-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 250ms ease;
    z-index: 3;
    pointer-events: none;
}

.album-play-overlay .icon {
    color: #fff;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
    transform: scale(0.8);
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.album-card-modern:hover .album-play-overlay {
    opacity: 1;
}

.album-card-modern:hover .album-play-overlay .icon {
    transform: scale(1);
}

/* ========================================
   ALBUM CARD QUICK STATS
   Track count, duration, lyrics indicator
   below the album title.
   ======================================== */
.album-card-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.6rem;
    margin-top: 0.15rem;
}

.album-card-stat {
    font-size: 0.75rem;
    color: var(--text-muted, rgba(255, 255, 255, 0.4));
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    line-height: 1.3;
}

.album-card-stat--duration {
    color: var(--text-secondary, rgba(255, 255, 255, 0.5));
}

.album-card-stat--lyrics {
    color: var(--accent-red, #dc2626);
    opacity: 0.7;
}

.album-card-stat--lyrics .icon {
    width: 12px;
    height: 12px;
}

/* Light theme */
[data-theme="light"] .album-card-stat {
    color: var(--text-muted, rgba(0, 0, 0, 0.4));
}

[data-theme="light"] .album-card-stat--duration {
    color: var(--text-secondary, rgba(0, 0, 0, 0.5));
}

/* ========================================
   ENHANCED ALBUM CARD HOVER
   Better shadow and border transitions.
   ======================================== */
.album-card-modern:hover {
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.5),
        0 0 32px rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.25);
}

/* ========================================
   TRACK LIST WAVEFORM DECORATION
   CSS art waveform behind the track list.
   ======================================== */
.album-tracks-section {
    position: relative;
}

.track-list-waveform {
    position: absolute;
    top: 3rem;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    opacity: 0.04;
}

.track-list-waveform__svg {
    width: 100%;
    height: 100%;
}

.waveform-bar {
    fill: var(--accent-red, #dc2626);
    animation: waveformPulse 3s ease-in-out infinite alternate;
}

@keyframes waveformPulse {
    0% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* Track list needs relative z-index to sit above waveform */
.album-tracks-header,
.track-list {
    position: relative;
    z-index: 1;
}

/* ========================================
   IMPROVED TRACK ROW ALTERNATION
   Better visual striping with subtle
   gradient on alternate rows.
   ======================================== */
.track-list .track-item:nth-child(odd) {
    background: rgba(255, 255, 255, 0.01);
}

.track-list .track-item:nth-child(even) {
    background: rgba(255, 255, 255, 0.025);
}

[data-theme="light"] .track-list .track-item:nth-child(odd) {
    background: rgba(0, 0, 0, 0.01);
}

[data-theme="light"] .track-list .track-item:nth-child(even) {
    background: rgba(0, 0, 0, 0.025);
}

/* ========================================
   ALBUM TRACKS HEADER IMPROVEMENTS
   Right side now holds lyrics badge
   and total duration.
   ======================================== */
.album-tracks-header__right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.album-lyrics-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-red, #dc2626);
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.15);
    border-radius: 100px;
    padding: 0.2rem 0.6rem;
}

.album-lyrics-badge .icon {
    width: 14px;
    height: 14px;
}

/* ========================================
   BAND CREDITS SECTION
   Grid of band member cards with links
   to their profile pages.
   ======================================== */
.album-credits {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.album-credits__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #e0e0f0);
    margin: 0 0 0.25rem;
}

.album-credits__subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.5));
    margin: 0 0 1rem;
}

.album-credits__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
}

.album-credit-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    text-decoration: none;
    color: inherit;
    transition: background 200ms, border-color 200ms, transform 200ms;
}

.album-credit-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(220, 38, 38, 0.2);
    transform: translateY(-2px);
}

.album-credit-card--deceased {
    opacity: 0.75;
}

.album-credit-card--deceased:hover {
    opacity: 1;
}

.album-credit-card__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.album-credit-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.album-credit-card__avatar .icon {
    color: var(--text-muted, rgba(255, 255, 255, 0.3));
}

.album-credit-card__info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.album-credit-card__name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #e0e0f0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.album-credit-card:hover .album-credit-card__name {
    color: var(--accent-red, #dc2626);
}

.album-credit-card__role {
    font-size: 0.75rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.5));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Light theme */
[data-theme="light"] .album-credits {
    border-top-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .album-credit-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .album-credit-card:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(220, 38, 38, 0.2);
}

[data-theme="light"] .album-credit-card__avatar {
    background: rgba(0, 0, 0, 0.04);
}

/* ========================================
   ENHANCED STREAMING LINKS SECTION
   Better button styling with gradient
   backgrounds and improved hover states.
   ======================================== */
.streaming-link {
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 8px;
    padding: 0.5rem 0.85rem;
}

.streaming-link:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.streaming-link--youtube {
    border: 1px solid rgba(255, 0, 0, 0.1);
}

.streaming-link--yandex {
    border: 1px solid rgba(255, 204, 0, 0.08);
}

.streaming-link--vk {
    border: 1px solid rgba(39, 135, 245, 0.1);
}

.streaming-link--apple {
    border: 1px solid rgba(252, 60, 68, 0.1);
}

/* ========================================
   MOBILE RESPONSIVE (Phase 73)
   ======================================== */
@media (max-width: 600px) {
    /* Vinyl peek disabled on mobile (touch) */
    .album-vinyl-peek {
        display: none;
    }

    /* Play overlay visible on mobile with less opacity */
    .album-play-overlay {
        opacity: 0;
    }

    /* Credits grid stacks */
    .album-credits__grid {
        grid-template-columns: 1fr;
    }

    /* Smaller card stats */
    .album-card-stats {
        gap: 0.25rem 0.5rem;
    }

    .album-card-stat {
        font-size: 0.7rem;
    }
}

/* Touch-only: hide vinyl and hover effects */
@media (hover: none) {
    .album-vinyl-peek {
        display: none;
    }

    .album-play-overlay {
        display: none;
    }
}

/* ========================================
   REDUCED MOTION (Phase 73)
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .disco-banner {
        animation: none;
    }

    .album-vinyl-peek {
        transition: none;
    }

    .album-play-overlay,
    .album-play-overlay .icon {
        transition: none;
    }

    .waveform-bar {
        animation: none;
    }
}

/* ========================================
   INTERACTIVE ALBUM CARD EFFECTS (v7)
   3D tilt, cover shine sweep, track count
   pulse, staggered entrance, focus ring.
   ======================================== */

/* --- 1. 3D Tilt Hover Effect ---
   Apply perspective on the grid container
   and rotate cards subtly on hover. */
.albums-bento-grid {
    perspective: 1200px;
}

.album-card-modern {
    transform-style: preserve-3d;
    will-change: transform;
}

.album-card-modern:hover {
    transform: translateY(-6px) rotateX(2deg) rotateY(-1.5deg);
}

/* --- 2. Cover Art Shine Sweep ---
   A diagonal light streak that sweeps
   across the album cover on hover. */
.album-card-modern .album-cover {
    position: relative;
    overflow: hidden;
}

.album-card-modern .album-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        115deg,
        transparent 20%,
        rgba(255, 255, 255, 0.15) 45%,
        rgba(255, 255, 255, 0.15) 55%,
        transparent 80%
    );
    transform: translateX(-110%);
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.album-card-modern:hover .album-cover::after {
    transform: translateX(110%);
}

/* --- 3. Track Count Badge Pulse ---
   Subtle scale pulse on the stat items
   when the parent card is hovered. */
.album-card-modern:hover .album-card-stat {
    animation: statBadgePulse 700ms ease-in-out;
}

@keyframes statBadgePulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.12); }
    70%  { transform: scale(0.97); }
    100% { transform: scale(1); }
}

/* --- 4. Staggered Grid Entrance ---
   Each card fades in and slides up with
   an increasing delay per card index. */
@keyframes albumCardEntrance {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.albums-bento-grid .album-card-modern {
    animation: albumCardEntrance 500ms ease-out both;
}

.albums-bento-grid .album-card-modern:nth-child(1)  { animation-delay: 0ms; }
.albums-bento-grid .album-card-modern:nth-child(2)  { animation-delay: 60ms; }
.albums-bento-grid .album-card-modern:nth-child(3)  { animation-delay: 120ms; }
.albums-bento-grid .album-card-modern:nth-child(4)  { animation-delay: 180ms; }
.albums-bento-grid .album-card-modern:nth-child(5)  { animation-delay: 240ms; }
.albums-bento-grid .album-card-modern:nth-child(6)  { animation-delay: 300ms; }
.albums-bento-grid .album-card-modern:nth-child(7)  { animation-delay: 360ms; }
.albums-bento-grid .album-card-modern:nth-child(8)  { animation-delay: 420ms; }
.albums-bento-grid .album-card-modern:nth-child(9)  { animation-delay: 480ms; }
.albums-bento-grid .album-card-modern:nth-child(10) { animation-delay: 540ms; }
.albums-bento-grid .album-card-modern:nth-child(11) { animation-delay: 600ms; }
.albums-bento-grid .album-card-modern:nth-child(12) { animation-delay: 660ms; }

/* Cards beyond the 12th still animate but with a capped delay */
.albums-bento-grid .album-card-modern:nth-child(n+13) {
    animation-delay: 700ms;
}

/* --- 5. Focus-Visible Keyboard Ring ---
   Prominent red outline for keyboard users. */
.album-card-modern:focus-visible {
    outline: 3px solid var(--color-primary, #dc2626);
    outline-offset: 3px;
    border-color: rgba(220, 38, 38, 0.4);
    box-shadow:
        0 0 0 6px rgba(220, 38, 38, 0.15),
        0 12px 32px rgba(0, 0, 0, 0.4);
}

/* Remove the default focus outline since we define our own */
.album-card-modern:focus:not(:focus-visible) {
    outline: none;
}

/* --- 6. Reduced Motion ---
   Disable all animations and transitions
   for users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .albums-bento-grid .album-card-modern {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .album-card-modern:hover {
        /* Keep the translateY lift but remove 3D rotation */
        transform: translateY(-6px);
    }

    .album-card-modern .album-cover::after {
        transition: none;
        transform: none;
        display: none;
    }

    .album-card-modern:hover .album-card-stat {
        animation: none;
    }
}

/* Touch devices: disable 3D tilt and shine sweep */
@media (hover: none) {
    .album-card-modern:hover {
        transform: none;
    }

    .album-card-modern .album-cover::after {
        display: none;
    }

    .album-card-modern:hover .album-card-stat {
        animation: none;
    }
}

/* Mobile: simplify entrance animation delay */
@media (max-width: 600px) {
    .albums-bento-grid .album-card-modern {
        animation-delay: 0ms;
        animation-duration: 300ms;
    }
}

/* ========================================
   TURNTABLE SYSTEM — unified vinyl + tonearm
   Vinyl slides out from behind cover;
   tonearm is attached to top-right corner
   of the artwork container (the pivot base),
   so it visually sits ON the record edge.
   ======================================== */

/* --- Artwork container --- */
.album-detail-page .album-artwork-large {
    position: relative;
    overflow: visible;
}

.album-detail-page .album-artwork-large img {
    position: relative;
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(220, 38, 38, 0.06),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Override modern-fixes.css hover scale — breaks vinyl slide-out */
.album-detail-page .album-artwork-large:hover img {
    transform: none;
}

/* Override modern-fixes.css sticky — vinyl needs relative + overflow visible */
.album-detail-page .album-artwork-large {
    position: relative !important;
}

/* ===========================================
   TURNTABLE PLATTER — dark disc platform

   Both platter & vinyl use left: calc(100% + 2%)
   with translate(-50%, -50%) so they share the
   EXACT same center point regardless of width.
   This guarantees perfect concentricity.
   =========================================== */
.turntable-platter {
    position: absolute;
    top: 50%;
    left: calc(100% + 2%);
    width: 92%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        #1a1a15 0%, #2a2a2a 35%, #1a1a1a 60%, #0a0a0a 100%);
    box-shadow:
        0 30px 80px rgba(0,0,0,0.9),
        inset 0 2px 4px rgba(255,255,255,0.08),
        inset 0 0 30px rgba(0,0,0,0.4);
    border: 8px solid #1a1a1a;
    z-index: 1;
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.album-artwork-large.vs-turntable-active .turntable-platter {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* ===========================================
   VINYL DISC — same center as platter

   Same left + translate(-50%,-50%) = same
   center. translateX(100%) hides it right.
   scale(0.94) makes it slightly smaller.
   =========================================== */
.vinyl-record {
    position: absolute;
    top: 50%;
    left: calc(100% + 2%);
    width: 92%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #111;
    transform: translate(-50%, -50%) translateX(100%);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
    z-index: 0;
    pointer-events: none;
    box-shadow:
        0 4px 40px rgba(0, 0, 0, 0.9),
        0 0 60px -10px rgba(0,0,0,0.5);
    opacity: 0;
}

/* Hover: suppressed */
.album-detail-page .album-artwork-large:not(.vs-turntable-active):hover .vinyl-record {
    opacity: 0 !important;
    transform: translate(-50%, -50%) translateX(100%) !important;
}

/* Extracting: slide-out animation */
.album-artwork-large.vs-extracting .vinyl-record {
    transform: translate(-50%, -50%) translateX(100%);
    z-index: 4;
    opacity: 1;
}

/* Active: centered on platter, scaled 94% so platter rim shows */
.album-artwork-large.vs-turntable-active .vinyl-record {
    transform: translate(-50%, -50%) translateX(0) scale(0.94);
    z-index: 6;
    opacity: 1;
    box-shadow:
        0 4px 40px rgba(0, 0, 0, 0.9),
        0 0 80px -10px rgba(220, 38, 38, 0.06);
}

/* Cover always above turntable-unit (z-index: 1). picture creates stacking context. */
.album-detail-page .album-artwork-large picture {
    position: relative !important;
    z-index: 3 !important;
}
/* When playing: cover slides aside */
.album-artwork-large.vs-turntable-active picture {
    display: block !important;
    position: relative !important;
    z-index: 3 !important;
    opacity: 1 !important;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease !important;
}

/* Target the img directly — picture is inline, percentage transforms fail on it */
.album-artwork-large.vs-turntable-active picture img {
    transform: translateX(-55%) rotate(-4deg) scale(0.85) !important;
    box-shadow: -20px 25px 50px rgba(0,0,0,0.7) !important;
    opacity: 1 !important;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease !important;
}

/* Disable all hover scale effects when vinyl is active (playing state) */
.album-detail-page .album-artwork-large.vs-turntable-active:hover img,
.album-detail-page .album-artwork-large.vs-turntable-active:hover picture img {
    transform: translateX(-55%) rotate(-4deg) scale(0.85) !important;
    box-shadow: -20px 25px 50px rgba(0,0,0,0.7) !important;
}

/* Also disable hover scale when extracting (transition to play) */
.album-detail-page .album-artwork-large.vs-extracting:hover img,
.album-detail-page .album-artwork-large.vs-extracting:hover picture img {
    transform: none !important;
}


/* ===========================================
   VINYL DETAILS — grooves, label, light
   =========================================== */

/* Dual-layer grooves: fine + coarse */
.vinyl-grooves {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        repeating-radial-gradient(
            circle at center,
            transparent 0px,
            transparent 1.8px,
            rgba(255, 255, 255, 0.035) 2px,
            transparent 2.2px
        ),
        repeating-radial-gradient(
            circle at center,
            transparent 0px,
            transparent 5px,
            rgba(255, 255, 255, 0.018) 5.5px,
            transparent 6px
        ) !important;
}

/* Conic light reflection */
.vinyl-record::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255,255,255,0.06) 30deg,
        transparent 60deg,
        rgba(255,255,255,0.03) 120deg,
        transparent 180deg,
        rgba(255,255,255,0.05) 240deg,
        transparent 300deg,
        rgba(255,255,255,0.02) 340deg,
        transparent 360deg
    );
    pointer-events: none;
    z-index: 1;
}

/* Center label */
.vinyl-label {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28%;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle, transparent 18%, rgba(0,0,0,0.15) 18.5%, transparent 19%),
        radial-gradient(circle, #333 20%, var(--era-accent-hex, var(--accent, #dc2626)) 22%,
            color-mix(in srgb, var(--era-accent-hex, var(--accent, #dc2626)) 70%, #000) 80%, #222 82%);
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

/* Center spindle hole */
.vinyl-label::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #111;
    transform: translate(-50%, -50%);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

/* Spinning */
@keyframes vinyl-spin {
    from { rotate: 0deg; }
    to   { rotate: 360deg; }
}

.vinyl-record.spinning {
    animation: vinyl-spin 2s linear infinite;
}

.vinyl-record.spinning.paused {
    animation-play-state: paused;
}

/* Mobile: hide entire turntable */
@media (max-width: 768px) {
    .vinyl-record,
    .turntable-platter,
    .vinyl-tonearm { display: none !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .vinyl-record,
    .vinyl-tonearm {
        transition: none !important;
    }
    .vinyl-record.spinning {
        animation: none !important;
    }
    .album-artwork-large:hover .vinyl-record {
        transform: translate(-50%, -50%) translateX(40%);
    }
}

/* Light theme */
[data-theme="light"] .vinyl-record {
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.3),
        inset 0 0 0 2px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .album-detail-page .album-artwork-large img {
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.2),
        0 0 60px rgba(220, 38, 38, 0.06);
}

/* Era-colored vinyl glow */
.album-detail-page.era-70s .vinyl-record       { box-shadow: 0 4px 40px rgba(0,0,0,0.9), 0 0 80px -10px rgba(220,165,38,0.1); }
.album-detail-page.era-early-80s .vinyl-record  { box-shadow: 0 4px 40px rgba(0,0,0,0.9), 0 0 80px -10px rgba(220,38,38,0.1); }
.album-detail-page.era-late-80s .vinyl-record   { box-shadow: 0 4px 40px rgba(0,0,0,0.9), 0 0 80px -10px rgba(168,85,247,0.1); }
.album-detail-page.era-90s .vinyl-record        { box-shadow: 0 4px 40px rgba(0,0,0,0.9), 0 0 80px -10px rgba(34,197,94,0.08); }
.album-detail-page.era-2000s .vinyl-record      { box-shadow: 0 4px 40px rgba(0,0,0,0.9), 0 0 80px -10px rgba(59,130,246,0.1); }

/* ========================================
   PHASE 74: ALBUM DETAIL POLISH 2026-2027
   - Blurred cover backdrop
   - Era-based color accents
   - Enhanced track numbers with hover play icon
   - CSS equalizer bars for now-playing
   - Prev/next nav with cover thumbnails
   - Share & Stream section
   - Lyrics indicator dots
   ======================================== */

/* ========================================
   BLURRED ALBUM COVER BACKDROP
   Creates an immersive header using the
   album cover as a blurred background.
   ======================================== */
.album-backdrop {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: clamp(320px, 55vw, 600px);
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

.album-backdrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(50px) saturate(1.6) brightness(0.3);
    transform: scale(1.15);
}

.album-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(var(--bg-body-rgb, 10, 10, 14), 0.25) 0%,
        rgba(var(--bg-body-rgb, 10, 10, 14), 0.6) 50%,
        var(--bg-body, #0a0a0e) 100%
    );
}

/* Ensure the album container sits above the backdrop */
#album-container {
    position: relative;
    z-index: 1;
}

/* Light theme backdrop */
[data-theme="light"] .album-backdrop img {
    filter: blur(40px) saturate(1.2) brightness(0.7);
}

[data-theme="light"] .album-backdrop::after {
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 255, 255, 0.5) 40%,
        rgba(255, 255, 255, 0.9) 70%,
        var(--bg-body, #ffffff) 100%
    );
}

/* ========================================
   ERA-BASED COLOR ACCENTS
   Each decade gets a unique accent tint
   applied via class on .album-detail-page.
   ======================================== */
.album-detail-page.era-70s {
    --era-accent: 220, 165, 38;
    --era-accent-hex: #dca526;
}
.album-detail-page.era-early80s {
    --era-accent: 220, 38, 38;
    --era-accent-hex: #dc2626;
}
.album-detail-page.era-late80s {
    --era-accent: 168, 85, 247;
    --era-accent-hex: #a855f7;
}
.album-detail-page.era-90s {
    --era-accent: 34, 197, 94;
    --era-accent-hex: #22c55e;
}
.album-detail-page.era-2000s {
    --era-accent: 59, 130, 246;
    --era-accent-hex: #3b82f6;
}

/* Apply era accent to key UI elements */
.album-detail-page[class*="era-"] .album-year-hero__year {
    color: var(--era-accent-hex, var(--accent-red, #dc2626));
}

.album-detail-page[class*="era-"] .album-year-hero__era {
    background: rgba(var(--era-accent, 220, 38, 38), 0.12);
    border-color: rgba(var(--era-accent, 220, 38, 38), 0.2);
    color: var(--era-accent-hex, var(--accent-red, #dc2626));
}

.album-detail-page[class*="era-"] .track-item.track-now-playing {
    border-left-color: var(--era-accent-hex, var(--accent-red, #dc2626));
    background: rgba(var(--era-accent, 220, 38, 38), 0.08);
}

.album-detail-page[class*="era-"] .vinyl-label {
    background: radial-gradient(circle, #333 20%, var(--era-accent-hex, #dc2626) 22%, color-mix(in srgb, var(--era-accent-hex, #dc2626) 70%, #000) 80%, #222 82%);
}

/* ========================================
   YEAR HERO DISPLAY
   Prominent year with era label badge
   above the album title.
   ======================================== */
.album-year-hero {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.album-year-hero__year {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--accent-red, #dc2626);
}

.album-year-hero__era {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.6rem;
    border-radius: 100px;
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.18);
    color: var(--accent-red, #dc2626);
    white-space: nowrap;
}

/* ========================================
   TRACK NUMBER WRAP
   Hover play icon replaces track number,
   CSS equalizer bars show on now-playing.
   ======================================== */
.track-number-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 1.5rem;
}

/* Default: show number, hide play icon and eq bars */
.track-number-wrap .track-number {
    transition: opacity 150ms;
}

.track-number-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 150ms;
    color: var(--accent-red, #dc2626);
}

/* On row hover: hide number, show play icon */
.track-item:hover .track-number-wrap .track-number {
    opacity: 0;
}

.track-item:hover .track-number-play {
    opacity: 1;
}

/* CSS Equalizer Bars for now-playing */
.track-eq-bars {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    opacity: 0;
    transition: opacity 150ms;
    padding-bottom: 2px;
}

.eq-bar {
    display: block;
    width: 3px;
    border-radius: 1px;
    background: var(--era-accent-hex, var(--accent-red, #dc2626));
}

/* Now-playing track: show equalizer, hide number and play icon */
.track-item.track-now-playing .track-eq-bars {
    opacity: 1;
}

.track-item.track-now-playing .track-number,
.track-item.track-now-playing .track-number-play {
    opacity: 0;
}

/* When hovering a now-playing track, show play icon instead of eq */
.track-item.track-now-playing:hover .track-eq-bars {
    opacity: 0;
}

.track-item.track-now-playing:hover .track-number-play {
    opacity: 1;
}

/* ========================================
   LYRICS AVAILABLE INDICATOR DOT
   Small icon next to the track title.
   ======================================== */
.track-has-lyrics-dot {
    display: inline-flex;
    align-items: center;
    margin-left: 0.35rem;
    opacity: 0.4;
    color: var(--era-accent-hex, var(--accent-red, #dc2626));
    vertical-align: middle;
}

.track-has-lyrics-dot .icon {
    width: 10px;
    height: 10px;
}

/* ========================================
   TOTAL DURATION WITH ICON
   ======================================== */
.album-total-duration {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.album-total-duration .icon {
    opacity: 0.6;
}

/* ========================================
   SHARE & STREAM SECTION
   Server-rendered streaming links and
   social share buttons.
   ======================================== */
.album-share-stream {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}

.album-share-stream__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem;
    justify-content: space-between;
}

.album-stream-links,
.album-share-buttons {
    min-width: 0;
}

.album-stream-links__label,
.album-share-buttons__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, rgba(255, 255, 255, 0.4));
    margin-bottom: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.album-share-buttons__row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.album-share-btn-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    transition: background 180ms, color 180ms, border-color 180ms, transform 120ms;
}

.album-share-btn-social:hover {
    transform: translateY(-1px);
}

.album-share-btn-social--vk:hover {
    background: rgba(39, 135, 245, 0.15);
    border-color: rgba(39, 135, 245, 0.25);
    color: #2787f5;
}

.album-share-btn-social--tg:hover {
    background: rgba(42, 171, 238, 0.15);
    border-color: rgba(42, 171, 238, 0.25);
    color: #2aabee;
}

.album-share-btn-social--copy:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-primary, #e0e0f0);
}

.album-share-btn-social--copy.share-copied {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

/* Light theme share/stream */
[data-theme="light"] .album-share-stream {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .album-share-btn-social {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--text-secondary, rgba(0, 0, 0, 0.5));
}

/* ========================================
   ALBUM NAV THUMBNAILS
   Cover art thumbnails in prev/next links.
   ======================================== */
.album-nav__thumb {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 200ms, box-shadow 200ms;
}

.album-nav__link:hover .album-nav__thumb {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.album-nav__year {
    font-size: 0.7rem;
    color: var(--text-muted, rgba(255, 255, 255, 0.35));
    font-variant-numeric: tabular-nums;
}

/* ========================================
   RESPONSIVE (Phase 74)
   ======================================== */
@media (max-width: 768px) {
    .album-backdrop {
        height: 200px;
    }

    .album-year-hero__year {
        font-size: 1.5rem;
    }

    .album-year-hero__era {
        font-size: 0.6rem;
    }

    .album-share-stream__row {
        flex-direction: column;
        gap: 1rem;
    }

    .album-nav__thumb {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 480px) {
    .album-backdrop {
        height: 150px;
    }

    .album-year-hero {
        flex-wrap: wrap;
        gap: 0.4rem;
    }
}

/* ========================================
   REDUCED MOTION (Phase 74)
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .eq-bar {
        animation: none;
    }

    .eq-bar:nth-child(1) { height: 50%; }
    .eq-bar:nth-child(2) { height: 80%; }
    .eq-bar:nth-child(3) { height: 35%; }

    .album-nav__thumb {
        transition: none;
    }

    .album-share-btn-social {
        transition: none;
    }
}

/* ========================================
   LIGHT THEME (Phase 74)
   ======================================== */
[data-theme="light"] .album-year-hero__year {
    color: var(--era-accent-hex, var(--accent-red, #dc2626));
}

[data-theme="light"] .album-year-hero__era {
    background: rgba(var(--era-accent, 220, 38, 38), 0.08);
    border-color: rgba(var(--era-accent, 220, 38, 38), 0.15);
}

[data-theme="light"] .track-has-lyrics-dot {
    color: var(--era-accent-hex, var(--accent-red, #dc2626));
}

[data-theme="light"] .album-nav__thumb {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .album-nav__link:hover .album-nav__thumb {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ========================================
   PRINT (Phase 74)
   ======================================== */
@media print {
    .album-backdrop,
    .album-share-stream,
    .track-eq-bars,
    .track-number-play {
        display: none !important;
    }
}

/* ========================================
   Phase 95: Album Detail Visual Fixes
   Resolves conflicting rules between
   modern-fixes.css and album-enhancements.css
   for correct album detail page rendering.
   ======================================== */

/* --- Fix 1: Neutralize orphaned ::before pseudo-element ---
   modern-fixes.css creates .album-header::before with
   var(--album-cover) background, but that CSS variable is
   never set. The blurred backdrop is handled by the
   .album-backdrop div instead. Remove the dead pseudo. */
.album-header::before {
    display: none;
}

/* --- Fix 2: Soften the dark ::after overlay ---
   modern-fixes.css creates .album-header::after with a heavy
   dark gradient. Without the matching ::before blur, this just
   darkens the header card making text and artwork look washed out.
   Replace with a subtler overlay that enhances the glassmorphism
   effect from the .album-backdrop blurred background. */
.album-header::after {
    background:
        radial-gradient(ellipse at 30% 50%, transparent 0%, rgba(14, 14, 17, 0.35) 80%),
        linear-gradient(180deg, rgba(14, 14, 17, 0.15) 0%, rgba(14, 14, 17, 0.45) 100%);
}

/* --- Fix 3: Album header card refinements ---
   Override the heavy card styling from modern-fixes.css
   with a lighter glassmorphism look that works better
   with the separate .album-backdrop blur. */
.album-header {
    background: rgba(14, 14, 17, 0.4);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

/* --- Fix 4: Ensure album artwork visible above overlay --- */
.album-header__grid {
    position: relative;
    z-index: 1;
}

/* --- Fix 5: Album header overflow adjustment ---
   Allow vinyl record to peek beyond header bounds on
   wide screens while keeping border-radius clipping
   on the backdrop content. Use clip-path for rounded
   corners when overflow is visible. */
@media (min-width: 769px) {
    .album-header {
        overflow: visible;
    }
    /* Clip the ::after overlay to rounded rect so it
       doesn't bleed outside the card border-radius */
    .album-header::after {
        border-radius: inherit;
    }
}

/* --- Fix 6: Album nav prev/next thumbnails ---
   Ensure thumbnails have consistent aspect ratio
   and don't stretch on missing images. */
.album-nav__thumb {
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.04);
}

/* --- Fix 7: Credits grid responsiveness ---
   On very narrow screens, ensure credit cards
   don't overflow or get too cramped. */
@media (max-width: 360px) {
    .album-credits__grid {
        grid-template-columns: 1fr;
    }

    .album-credit-card {
        padding: 0.5rem;
    }
}

/* --- Fix 8: Streaming links section alignment ---
   When labels wrap, keep items aligned properly. */
.album-stream-links,
.album-share-buttons {
    min-width: 0;
}

/* --- Fix 9: Related articles bottom spacing ---
   Add breathing room before footer. */
.album-related-articles {
    margin-bottom: 1rem;
}

/* --- Fix 10: Light theme header adjustments ---
   Match the softer overlay approach for light theme. */
[data-theme="light"] .album-header {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
}

[data-theme="light"] .album-header::after {
    background:
        radial-gradient(ellipse at 30% 50%, transparent 0%, rgba(255, 255, 255, 0.3) 80%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.35) 100%);
}

/* --- Fix 11: Track lyrics grid spanning fix ---
   Ensure expanded lyrics panel properly spans
   all columns without causing layout shift. */
.track-lyrics {
    width: 100%;
    box-sizing: border-box;
}

/* --- Fix 12: Waveform SVG containment ---
   Prevent waveform from affecting layout flow
   in the tracks section. */
.track-list-waveform {
    contain: strict;
}

/* ========================================
   INLINE LYRICS — SMOOTH ACCORDION (v12)
   Smooth expand/collapse via CSS grid
   rows transition. Only one panel open
   at a time (accordion behavior).
   ======================================== */

/* Wrapper: the animating container */
.track-lyrics-wrapper {
    grid-column: 1 / -1;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 350ms cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.track-lyrics-wrapper.is-open {
    grid-template-rows: 1fr;
}

/* Inner: must have min-height: 0 for the grid trick to work */
.track-lyrics-inner {
    min-height: 0;
    overflow: hidden;
}

.track-lyrics-wrapper.is-open .track-lyrics-inner {
    padding: 1rem 1.25rem;
    margin-top: 0.5rem;
    background: rgba(10, 10, 20, 0.6);
    border-radius: 10px;
    border-left: 3px solid var(--accent-red, #dc2626);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-left: 3px solid var(--accent-red, #dc2626);
}

/* Toolbar: label + copy/close buttons */
.track-lyrics-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 250ms ease 100ms, transform 250ms ease 100ms;
}

.track-lyrics-wrapper.is-open .track-lyrics-toolbar {
    opacity: 1;
    transform: translateY(0);
}

.track-lyrics-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-red, #dc2626);
}

.track-lyrics-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Copy button */
.track-lyrics-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    cursor: pointer;
    transition: background 150ms, color 150ms, border-color 150ms;
}

.track-lyrics-copy-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #fff);
    border-color: rgba(255, 255, 255, 0.2);
}

.track-lyrics-copy-btn.copied {
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.3);
    background: rgba(74, 222, 128, 0.08);
}

.track-lyrics-copy-btn .icon {
    width: 14px;
    height: 14px;
}

/* Close button */
.track-lyrics-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 150ms, color 150ms, transform 150ms;
}

.track-lyrics-close-btn:hover {
    background: rgba(220, 38, 38, 0.15);
    color: var(--accent-red, #dc2626);
    transform: scale(1.1);
}

/* Lyrics content formatting */
.track-lyrics-wrapper .lyrics-content {
    line-height: 1.8;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font-size: 0.9rem;
    font-family: 'Georgia', 'Times New Roman', serif;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 300ms ease 150ms, transform 300ms ease 150ms;
}

.track-lyrics-wrapper.is-open .lyrics-content {
    opacity: 1;
    transform: translateY(0);
}

/* Verse grouping */
.lyrics-verse {
    margin-bottom: 1em;
    padding-left: 0;
}

.lyrics-verse:last-child {
    margin-bottom: 0;
}

/* Chorus marker */
.lyrics-verse--chorus {
    padding-left: 1.25rem;
    border-left: 2px solid rgba(220, 38, 38, 0.25);
    font-style: italic;
}

.lyrics-verse--chorus::before {
    content: '';
}

/* Bridge / instrumental marker */
.lyrics-verse--bridge {
    padding-left: 1.25rem;
    border-left: 2px dashed rgba(255, 255, 255, 0.15);
    opacity: 0.7;
    font-style: italic;
}

/* Line hover highlight inside inline lyrics */
.track-lyrics-wrapper .lyrics-line {
    display: inline;
    padding: 1px 3px;
    border-radius: 2px;
    transition: background 150ms;
}

.track-lyrics-wrapper .lyrics-line:hover {
    background: rgba(220, 38, 38, 0.06);
}

/* --- Light theme overrides --- */
[data-theme="light"] .track-lyrics-wrapper.is-open .track-lyrics-inner {
    background: rgba(245, 245, 250, 0.95);
    border-color: rgba(0, 0, 0, 0.08);
    border-left-color: var(--accent-red, #dc2626);
}

[data-theme="light"] .track-lyrics-toolbar {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .track-lyrics-copy-btn {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .track-lyrics-copy-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.8);
}

[data-theme="light"] .track-lyrics-close-btn {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .track-lyrics-close-btn:hover {
    background: rgba(220, 38, 38, 0.08);
    color: var(--accent-red, #dc2626);
}

[data-theme="light"] .track-lyrics-wrapper .lyrics-content {
    color: rgba(0, 0, 0, 0.7);
}

[data-theme="light"] .track-lyrics-wrapper .lyrics-line:hover {
    background: rgba(220, 38, 38, 0.04);
}

[data-theme="light"] .lyrics-verse--chorus {
    border-left-color: rgba(220, 38, 38, 0.2);
}

[data-theme="light"] .lyrics-verse--bridge {
    border-left-color: rgba(0, 0, 0, 0.1);
}

/* --- Responsive: Mobile --- */
@media (max-width: 640px) {
    .track-lyrics-wrapper.is-open .track-lyrics-inner {
        padding: 0.75rem 0.875rem;
        margin-top: 0.35rem;
    }

    .track-lyrics-toolbar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .track-lyrics-wrapper .lyrics-content {
        font-size: 0.85rem;
        line-height: 1.75;
    }

    .lyrics-verse--chorus,
    .lyrics-verse--bridge {
        padding-left: 0.75rem;
    }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .track-lyrics-wrapper {
        transition: none;
    }

    .track-lyrics-toolbar,
    .track-lyrics-wrapper .lyrics-content {
        transition: none;
        opacity: 1;
        transform: none;
    }
}


/* ========================================
   DISCOGRAPHY STATS SECTION
   Toggle panel with server-rendered stats,
   decade bar chart, fun facts.
   ======================================== */

.disco-stats {
    margin-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 1.5rem;
}

/* --- Toggle button --- */
.disco-stats__toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    color: var(--text-secondary, #a0a0b0);
    cursor: pointer;
    font-size: 0.95rem;
    font-family: var(--font-primary, system-ui, sans-serif);
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, border-radius 0.25s ease;
    width: 100%;
    justify-content: center;
}

.disco-stats__toggle:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-primary, #e0e0f0);
    border-color: rgba(255, 255, 255, 0.12);
}

.disco-stats__toggle:focus-visible {
    outline: 2px solid var(--accent, #ff6b35);
    outline-offset: 2px;
}

.disco-stats__toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary, #e0e0f0);
    border-color: var(--accent, #ff6b35);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
}

.disco-stats__toggle-icon .icon {
    color: var(--accent, #ff6b35);
}

.disco-stats__toggle-chevron {
    transition: transform 0.3s ease;
    display: flex;
}

.disco-stats__toggle[aria-expanded="true"] .disco-stats__toggle-chevron {
    transform: rotate(180deg);
}

/* --- Panel expand/collapse animation --- */
.disco-stats__panel {
    overflow: hidden;
}

.disco-stats__panel[hidden] {
    display: none;
}

.disco-stats__panel--opening {
    animation: discoStatsExpand 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.disco-stats__panel--closing {
    animation: discoStatsCollapse 0.3s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes discoStatsExpand {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        max-height: 2000px;
        transform: translateY(0);
    }
}

@keyframes discoStatsCollapse {
    from {
        opacity: 1;
        max-height: 2000px;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        max-height: 0;
        transform: translateY(-12px);
    }
}

/* --- Content wrapper --- */
.disco-stats__content {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: clamp(1.25rem, 3vw, 2rem);
}

/* --- Header --- */
.disco-stats__header {
    text-align: center;
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.disco-stats__title {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    color: var(--text-primary, #e0e0f0);
    margin: 0 0 0.25rem;
    font-weight: 700;
}

.disco-stats__subtitle {
    color: var(--text-secondary, #a0a0b0);
    font-size: 0.9rem;
    margin: 0;
}

/* --- Stats grid --- */
.disco-stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

/* --- Stat card --- */
.disco-stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: border-color 0.25s ease, transform 0.25s ease;
    position: relative;
    overflow: hidden;
}

.disco-stat-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}

.disco-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent, #ff6b35);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.disco-stat-card:hover::before {
    opacity: 1;
}

/* Icon badge */
.disco-stat-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 107, 53, 0.1);
    flex-shrink: 0;
}

.disco-stat-card__icon .icon {
    color: var(--accent, #ff6b35);
    width: 18px;
    height: 18px;
}

/* Label */
.disco-stat-card__label {
    font-size: 0.8rem;
    color: var(--text-secondary, #a0a0b0);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

/* Value */
.disco-stat-card__value {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--text-primary, #e0e0f0);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.disco-stat-card__value small {
    font-size: 0.55em;
    font-weight: 600;
    opacity: 0.7;
    margin-left: 0.15em;
}

/* Detail text */
.disco-stat-card__detail {
    font-size: 0.85rem;
    color: var(--text-secondary, #a0a0b0);
    line-height: 1.4;
}

.disco-stat-card__detail a {
    color: var(--accent, #ff6b35);
    text-decoration: none;
}

.disco-stat-card__detail a:hover {
    text-decoration: underline;
}

/* Counter animation min-width */
.disco-stat-card__value[data-count-to],
.disco-stat-card__value[data-ds-count] {
    min-width: 2ch;
}

/* --- Album-linked stat card --- */
.disco-stat-card--album {
    padding: 1rem 1.25rem;
}

.disco-stat-card__album-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    border-radius: 6px;
    padding: 0.35rem;
    margin: 0 -0.35rem;
    transition: background 0.2s ease;
}

.disco-stat-card__album-link:hover {
    background: rgba(255, 255, 255, 0.04);
}

.disco-stat-card__cover {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.disco-stat-card__cover--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted, rgba(255, 255, 255, 0.3));
}

.disco-stat-card__album-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.disco-stat-card__album-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary, #e0e0f0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.disco-stat-card__album-meta {
    font-size: 0.8rem;
    color: var(--text-secondary, #a0a0b0);
}

/* --- Highlight card (spans 2 columns) --- */
.disco-stat-card--highlight {
    grid-column: span 2;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.06) 0%, rgba(255, 107, 53, 0.02) 100%);
    border-color: rgba(255, 107, 53, 0.15);
}

/* --- Decades bar chart --- */
.disco-decades {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 80px;
    margin-top: 0.5rem;
}

.disco-decade {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.disco-decade__bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(to top, var(--accent, #ff6b35), rgba(255, 107, 53, 0.5));
    min-height: 4px;
    transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.disco-decade__label {
    font-size: 0.7rem;
    color: var(--text-secondary, #a0a0b0);
    white-space: nowrap;
}

.disco-decade__count {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-primary, #e0e0f0);
}

/* --- Fun facts list --- */
.disco-funfacts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.disco-funfact {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary, #a0a0b0);
    line-height: 1.5;
}

.disco-funfact .icon {
    color: var(--accent, #ff6b35);
    flex-shrink: 0;
    margin-top: 0.2em;
}

.disco-funfact strong {
    color: var(--text-primary, #e0e0f0);
    font-weight: 700;
}

/* --- Loading spinner --- */
.disco-stats__loading {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    padding: 2rem;
}

.disco-stats__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--accent, #ff6b35);
    border-radius: 50%;
    animation: discoSpin 0.8s linear infinite;
}

@keyframes discoSpin {
    to { transform: rotate(360deg); }
}

/* --- Responsive --- */
@media (max-width: 600px) {
    .disco-stats__grid {
        grid-template-columns: 1fr 1fr;
    }
    .disco-stat-card--highlight {
        grid-column: span 2;
    }
    .disco-stat-card {
        padding: 1rem;
    }
    .disco-funfacts {
        gap: 0.5rem;
    }
    .disco-funfact {
        font-size: 0.85rem;
    }
}

@media (max-width: 380px) {
    .disco-stats__grid {
        grid-template-columns: 1fr;
    }
    .disco-stat-card--highlight {
        grid-column: span 1;
    }
}

/* --- Light theme overrides --- */
[data-theme="light"] .disco-stats__toggle {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-secondary);
}

[data-theme="light"] .disco-stats__toggle:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
}

[data-theme="light"] .disco-stats__content {
    background: rgba(0, 0, 0, 0.01);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .disco-stat-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .disco-stat-card:hover {
    border-color: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .disco-stat-card__album-link:hover {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .disco-stat-card__cover--placeholder {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .disco-funfact {
    color: var(--text-secondary);
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .disco-stats__panel--opening,
    .disco-stats__panel--closing {
        animation: none;
    }
    .disco-stats__panel--opening {
        opacity: 1;
        max-height: none;
    }
    .disco-stats__toggle-chevron {
        transition: none;
    }
    .disco-stat-card {
        transition: none;
    }
    .disco-decade__bar {
        transition: none;
    }
}

/* === ALBUM RATINGS === */
.album-rating {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-wrap: wrap;
}
.rating-label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.stars-widget {
  display: flex;
  gap: 0.25rem;
  cursor: pointer;
}
.stars-widget[data-rated] { cursor: default; }
.star-btn {
  background: none;
  border: none;
  font-size: 1.75rem;
  color: rgba(255,255,255,0.25);
  cursor: inherit;
  padding: 0;
  line-height: 1;
  transition: color 0.15s, transform 0.15s;
}
.star-btn.hovered,
.star-btn.active,
.star-btn.filled { color: rgba(var(--era-accent, 220,38,38), 0.85); }
.star-btn.hovered { transform: scale(1.2); }
.star-btn.partial { color: rgba(var(--era-accent, 220,38,38), 0.45); }
.rating-summary {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
}


/* ===========================================
   2026 MODERN DESIGN OVERHAUL
   Glassmorphism · 3D Depth · Mesh Gradients
   Spatial Design · Micro-interactions
   =========================================== */


/* ---- Phase 1: Backdrop & Header Atmosphere ---- */

/* Mesh gradient overlay on blurred backdrop — subtle accent, not neon */
.album-backdrop::before {
    content: '';
    position: absolute;
    inset: -10%;
    z-index: 1;
    background:
        radial-gradient(ellipse 80% 60% at 15% 25%,
            rgba(220, 38, 38, 0.08) 0%,
            transparent 60%),
        radial-gradient(ellipse 60% 80% at 80% 55%,
            rgba(168, 85, 247, 0.05) 0%,
            transparent 55%),
        radial-gradient(ellipse 70% 50% at 50% 85%,
            rgba(59, 130, 246, 0.04) 0%,
            transparent 50%);
    animation: meshDrift 25s ease-in-out infinite alternate;
    pointer-events: none;
}

/* Era-tinted mesh gradients — subtle color hint */
.album-detail-page.era-70s .album-backdrop::before {
    background:
        radial-gradient(ellipse 80% 60% at 15% 25%, rgba(220, 165, 38, 0.1) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 80% 55%, rgba(220, 165, 38, 0.05) 0%, transparent 55%);
}
.album-detail-page.era-early-80s .album-backdrop::before {
    background:
        radial-gradient(ellipse 80% 60% at 15% 25%, rgba(220, 38, 38, 0.1) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 80% 55%, rgba(239, 68, 68, 0.05) 0%, transparent 55%);
}
.album-detail-page.era-late-80s .album-backdrop::before {
    background:
        radial-gradient(ellipse 80% 60% at 15% 25%, rgba(168, 85, 247, 0.1) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 80% 55%, rgba(192, 132, 252, 0.05) 0%, transparent 55%);
}
.album-detail-page.era-90s .album-backdrop::before {
    background:
        radial-gradient(ellipse 80% 60% at 15% 25%, rgba(34, 197, 94, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 80% 55%, rgba(74, 222, 128, 0.04) 0%, transparent 55%);
}
.album-detail-page.era-2000s .album-backdrop::before {
    background:
        radial-gradient(ellipse 80% 60% at 15% 25%, rgba(59, 130, 246, 0.1) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 80% 55%, rgba(96, 165, 250, 0.05) 0%, transparent 55%);
}

@keyframes meshDrift {
    0%   { opacity: 1; transform: scale(1) translate(0, 0); }
    33%  { opacity: 0.85; transform: scale(1.04) translate(-2%, 2%); }
    66%  { opacity: 0.9; transform: scale(1.02) translate(1.5%, -1.5%); }
    100% { opacity: 1; transform: scale(1.03) translate(-1%, 1%); }
}

/* Noise texture for depth/grain */
.album-backdrop-noise {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0.35;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
    mix-blend-mode: overlay;
}

/* Ensure gradient overlay sits above mesh */
.album-backdrop::after {
    z-index: 3 !important;
}

/* Decorative year watermark behind album info */
.album-info[data-year]::before {
    content: attr(data-year);
    position: absolute;
    right: -5%;
    top: 5%;
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: clamp(6rem, 15vw, 12rem);
    color: rgba(255, 255, 255, 0.06);
    pointer-events: none;
    z-index: 0;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.02em;
    white-space: nowrap;
    user-select: none;
}

/* Era-tinted year watermark */
.album-detail-page.era-70s .album-info[data-year]::before   { color: rgba(220, 165, 38, 0.08); }
.album-detail-page.era-early-80s .album-info[data-year]::before { color: rgba(220, 38, 38, 0.08); }
.album-detail-page.era-late-80s .album-info[data-year]::before  { color: rgba(168, 85, 247, 0.08); }
.album-detail-page.era-90s .album-info[data-year]::before       { color: rgba(34, 197, 94, 0.08); }
.album-detail-page.era-2000s .album-info[data-year]::before     { color: rgba(59, 130, 246, 0.08); }

/* Typography: bolder title with tight tracking */
.album-detail-page .album-info h1 {
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.05;
    position: relative;
    z-index: 1;
}

/* Year hero gradient text */
.album-detail-page .album-year-hero__year {
    background: linear-gradient(135deg, var(--era-accent-hex, #dc2626), rgba(255, 255, 255, 0.9));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Text hierarchy with opacity */
.album-detail-page .album-meta-detail {
    color: rgba(255, 255, 255, 0.55);
}
.album-detail-page .album-description {
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
}


/* ---- Phase 3: Track List Modernization ---- */

/* Staggered entrance animation */
.album-tracks-section .track-item {
    opacity: 0;
    animation: trackReveal 400ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.album-tracks-section .track-item:nth-child(1)  { animation-delay: 0ms; }
.album-tracks-section .track-item:nth-child(2)  { animation-delay: 35ms; }
.album-tracks-section .track-item:nth-child(3)  { animation-delay: 70ms; }
.album-tracks-section .track-item:nth-child(4)  { animation-delay: 105ms; }
.album-tracks-section .track-item:nth-child(5)  { animation-delay: 140ms; }
.album-tracks-section .track-item:nth-child(6)  { animation-delay: 175ms; }
.album-tracks-section .track-item:nth-child(7)  { animation-delay: 210ms; }
.album-tracks-section .track-item:nth-child(8)  { animation-delay: 245ms; }
.album-tracks-section .track-item:nth-child(9)  { animation-delay: 280ms; }
.album-tracks-section .track-item:nth-child(10) { animation-delay: 315ms; }
.album-tracks-section .track-item:nth-child(11) { animation-delay: 350ms; }
.album-tracks-section .track-item:nth-child(12) { animation-delay: 385ms; }
.album-tracks-section .track-item:nth-child(13) { animation-delay: 420ms; }
.album-tracks-section .track-item:nth-child(14) { animation-delay: 455ms; }
.album-tracks-section .track-item:nth-child(15) { animation-delay: 490ms; }
.album-tracks-section .track-item:nth-child(16) { animation-delay: 525ms; }
.album-tracks-section .track-item:nth-child(17) { animation-delay: 560ms; }
.album-tracks-section .track-item:nth-child(18) { animation-delay: 595ms; }
.album-tracks-section .track-item:nth-child(19) { animation-delay: 630ms; }
.album-tracks-section .track-item:nth-child(20) { animation-delay: 665ms; }
.album-tracks-section .track-item:nth-child(n+21) { animation-delay: 700ms; }

@keyframes trackReveal {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* =============================================
   2026 PREMIUM VISUAL OVERHAUL
   Bold, high-impact overrides that transform
   the album page from "functional" to "premium"
   ============================================= */

/* --- HERO: Clean glass card --- */
.album-detail-page .album-header {
    position: relative !important;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 24px !important;
    padding: 2.5rem !important;
    margin-bottom: 2.5rem !important;
    background: rgba(12, 12, 18, 0.65) !important;
    backdrop-filter: blur(20px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
    box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.5) !important;
}

/* Disable pseudo-elements — the .album-backdrop handles the blurred cover */
.album-detail-page .album-header::before,
.album-detail-page .album-header::after {
    display: none !important;
    content: none !important;
}

/* Grid layout */
.album-detail-page .album-header .grid-2,
.album-detail-page .album-header__grid {
    display: grid !important;
    grid-template-columns: minmax(280px, 400px) 1fr !important;
    gap: clamp(2rem, 4vw, 4rem) !important;
    align-items: start !important;
    position: relative !important;
    z-index: 1 !important;
}

/* --- ALBUM COVER: Clean shadow + accent glow --- */
.album-detail-page .album-artwork-large {
    position: relative !important;
}

.album-detail-page .album-artwork-large img,
.album-detail-page .album-artwork-large picture img {
    width: 100% !important;
    max-width: 380px !important;
    aspect-ratio: 1 !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    box-shadow:
        0 8px 40px -8px rgba(0, 0, 0, 0.6),
        0 0 40px -8px color-mix(in oklch, var(--accent, #dc2626) 15%, transparent) !important;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease !important;
}

.album-detail-page .album-artwork-large:hover img {
    transform: scale(1.03) translateY(-3px) !important;
    box-shadow:
        0 16px 48px -8px rgba(0, 0, 0, 0.7),
        0 0 60px -8px color-mix(in oklch, var(--accent, #dc2626) 22%, transparent) !important;
}

/* Override hover scale when vinyl is active or extracting — cover must stay slid aside */
.album-detail-page .album-artwork-large.vs-turntable-active:hover img,
.album-detail-page .album-artwork-large.vs-turntable-active:hover picture img,
.album-detail-page .album-artwork-large.vs-extracting:hover img,
.album-detail-page .album-artwork-large.vs-extracting:hover picture img {
    transform: none !important;
    box-shadow:
        0 32px 80px -20px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

/* --- TYPOGRAPHY: Bold, tight, modern --- */
.album-detail-page .album-info h1 {
    font-size: clamp(2.25rem, 5vw, 3.75rem) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.04em !important;
    color: #fff !important;
    margin-bottom: 1rem !important;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5) !important;
}

.album-detail-page .album-meta-detail,
.album-detail-page .album-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    margin-bottom: 1.25rem !important;
}

.album-detail-page .album-meta-item,
.album-detail-page .album-meta-detail span,
.album-detail-page .album-meta-detail .album-meta-sep {
    padding: 0.35rem 0.875rem !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 100px !important;
    font-size: 0.85rem !important;
    backdrop-filter: blur(8px) !important;
}

.album-detail-page .album-meta-detail .album-artist {
    font-weight: 700 !important;
    color: #fff !important;
}

/* Year badge - gradient text */
.album-detail-page .album-meta-detail .album-year,
.album-detail-page .album-meta-item .meta-value {
    background: linear-gradient(135deg, var(--accent, #dc2626), #ff6b6b) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 800 !important;
    font-size: 1.05em !important;
}

/* Description */
.album-detail-page .album-description {
    font-size: 1rem !important;
    line-height: 1.75 !important;
    color: rgba(255, 255, 255, 0.55) !important;
    max-width: 60ch !important;
    margin-bottom: 2rem !important;
}

/* --- ACTION BUTTONS: Premium glass + glow --- */
.album-detail-page .album-actions,
.album-detail-page .album-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    margin-top: 1.5rem !important;
}

.album-detail-page .album-play-all-btn,
.album-detail-page .album-controls .btn-primary,
.album-detail-page .album-controls .btn.btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.9rem 2rem !important;
    background: linear-gradient(135deg, var(--accent, #dc2626), color-mix(in oklch, var(--accent, #dc2626) 80%, #ff4757)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
    box-shadow:
        0 8px 32px color-mix(in oklch, var(--accent, #dc2626) 40%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.album-detail-page .album-play-all-btn:hover,
.album-detail-page .album-controls .btn-primary:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow:
        0 16px 48px color-mix(in oklch, var(--accent, #dc2626) 50%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    filter: brightness(1.15) !important;
}

.album-detail-page .album-play-all-btn:active {
    transform: translateY(0) scale(0.98) !important;
}

.album-detail-page .album-queue-btn,
.album-detail-page .album-controls .btn-secondary,
.album-detail-page .album-controls .btn.btn-secondary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.9rem 1.75rem !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    backdrop-filter: blur(12px) !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.album-detail-page .album-queue-btn:hover,
.album-detail-page .album-controls .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

.album-detail-page .album-share-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.9rem 1.5rem !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.album-detail-page .album-share-btn:hover {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* --- TRACKLIST: Premium dark glass panel --- */
.album-detail-page .album-tracks-section,
.album-detail-page .album-tracks {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(12px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    padding: 2rem !important;
    margin-bottom: 2rem !important;
    box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.3) !important;
}

.album-detail-page .album-tracks h3,
.album-detail-page .tracks-header h3,
.album-detail-page .album-tracks-section h3 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Track items - glass hover + now-playing glow */
.album-detail-page .track-item {
    display: grid !important;
    grid-template-columns: 48px 1fr auto auto auto !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 0.875rem 1rem !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
}

.album-detail-page .track-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

/* .track-now-playing background — canonical rule is at line ~6773 (uses --era-accent).
   This earlier color-mix variant is overridden; removed to avoid cascade confusion. */

/* Track number - accent colored on hover */
.album-detail-page .track-number {
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', ui-monospace, monospace !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.3) !important;
    font-variant-numeric: tabular-nums !important;
    min-width: 28px !important;
    text-align: right !important;
}

.album-detail-page .track-item:hover .track-number {
    color: var(--accent, #dc2626) !important;
}

/* Track title */
.album-detail-page .track-title {
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.95rem !important;
}

.album-detail-page .track-item:hover .track-title span {
    color: #fff !important;
}

/* Track duration */
.album-detail-page .track-duration {
    color: rgba(255, 255, 255, 0.25) !important;
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', ui-monospace, monospace !important;
    font-size: 0.8rem !important;
}

/* Track play/queue/lyrics action buttons */
.album-detail-page .track-play-btn,
.album-detail-page .track-add-to-queue-btn,
.album-detail-page .lyrics-btn {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 10px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    padding: 0.4rem 0.6rem !important;
    transition: all 0.25s ease !important;
}

.album-detail-page .track-item:hover .track-play-btn,
.album-detail-page .track-item:hover .track-add-to-queue-btn,
.album-detail-page .track-item:hover .lyrics-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

.album-detail-page .track-play-btn:hover {
    background: color-mix(in oklch, var(--accent, #dc2626) 15%, transparent) !important;
    border-color: color-mix(in oklch, var(--accent, #dc2626) 30%, transparent) !important;
    color: #fff !important;
    box-shadow: 0 0 20px color-mix(in oklch, var(--accent, #dc2626) 20%, transparent) !important;
}

/* --- SECTION PANELS: Glass cards for credits, streaming, related --- */
.album-detail-page .album-credits,
.album-detail-page .album-share-stream,
.album-detail-page .album-related-articles,
.album-detail-page .album-nav {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(12px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 18px !important;
    padding: 1.75rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.3) !important;
}

/* --- CARD HOVER LIFTS --- */
.album-detail-page .album-credit-card,
.album-detail-page .related-article-card,
.album-detail-page .album-nav__link {
    border-radius: 14px !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.album-detail-page .album-credit-card:hover,
.album-detail-page .related-article-card:hover,
.album-detail-page .album-nav__link:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* --- STREAMING LINKS --- */
.album-detail-page .streaming-link,
.album-detail-page .album-share-stream a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.6rem 1.25rem !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    transition: all 0.25s ease !important;
}

.album-detail-page .streaming-link:hover,
.album-detail-page .album-share-stream a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
}

/* --- SCROLLBAR: Dark and subtle inside track sections --- */
.album-detail-page .album-tracks-section::-webkit-scrollbar,
.album-detail-page .album-tracks::-webkit-scrollbar {
    width: 4px !important;
}

.album-detail-page .album-tracks-section::-webkit-scrollbar-thumb,
.album-detail-page .album-tracks::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
}

/* --- FOCUS RINGS --- */
.album-detail-page button:focus-visible,
.album-detail-page a:focus-visible,
.album-detail-page .track-item:focus-visible {
    outline: 2px solid var(--accent, #dc2626) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent, #dc2626) 20%, transparent) !important;
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .album-detail-page .album-header .grid-2,
    .album-detail-page .album-header__grid {
        grid-template-columns: minmax(200px, 280px) 1fr !important;
        gap: 2rem !important;
    }
    .album-detail-page .album-header {
        padding: 2rem !important;
        border-radius: 20px !important;
    }
}

@media (max-width: 768px) {
    .album-detail-page .album-header .grid-2,
    .album-detail-page .album-header__grid {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }
    .album-detail-page .album-artwork-large {
        max-width: 300px !important;
        margin: 0 auto !important;
    }
    .album-detail-page .album-info {
        text-align: center !important;
    }
    .album-detail-page .album-actions,
    .album-detail-page .album-controls {
        justify-content: center !important;
    }
    .album-detail-page .album-header {
        padding: 1.5rem !important;
        border-radius: 16px !important;
    }
    .album-detail-page .album-info h1 {
        font-size: 2rem !important;
    }
}

@media (max-width: 480px) {
    .album-detail-page .album-header {
        padding: 1.25rem !important;
        border-radius: 12px !important;
    }
    .album-detail-page .album-tracks-section,
    .album-detail-page .album-tracks {
        padding: 1rem !important;
        border-radius: 16px !important;
    }
    .album-detail-page .album-credits,
    .album-detail-page .album-share-stream,
    .album-detail-page .album-related-articles {
        padding: 1rem !important;
        border-radius: 14px !important;
    }
}

/* --- LIGHT THEME --- */
[data-theme="light"] .album-detail-page .album-header {
    background: rgba(255, 255, 255, 0.6) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .album-detail-page .album-info h1 {
    color: #111 !important;
    text-shadow: none !important;
}

[data-theme="light"] .album-detail-page .album-tracks-section,
[data-theme="light"] .album-detail-page .album-tracks,
[data-theme="light"] .album-detail-page .album-credits,
[data-theme="light"] .album-detail-page .album-share-stream,
[data-theme="light"] .album-detail-page .album-related-articles {
    background: rgba(255, 255, 255, 0.6) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .album-detail-page .track-title {
    color: rgba(0, 0, 0, 0.85) !important;
}

[data-theme="light"] .album-detail-page .track-number {
    color: rgba(0, 0, 0, 0.3) !important;
}


/* =============================================
   2027 NEXT-GEN PREMIUM DESIGN
   Animated borders · Holographic vinyl ·
   Gradient typography · Ambient depth ·
   EQ animations · 3D reflections
   Overrides the 2026 Premium section above.
   ============================================= */

/* Register CSS Houdini properties for animated effects */
@property --border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@property --holo-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* --- 1. HEADER: Animated gradient border --- */
.album-detail-page .album-header {
    border: 1.5px solid transparent !important;
    border-radius: 28px !important;
    padding: 2.75rem !important;
    margin-bottom: 3rem !important;
    background:
        linear-gradient(rgba(6, 6, 12, 0.82), rgba(6, 6, 12, 0.82)) padding-box,
        conic-gradient(
            from var(--border-angle),
            var(--accent, #dc2626),
            rgba(255, 107, 107, 0.6) 8%,
            transparent 18%,
            transparent 48%,
            rgba(255, 255, 255, 0.12) 68%,
            transparent 82%,
            var(--accent, #dc2626)
        ) border-box !important;
    backdrop-filter: blur(28px) saturate(1.5) brightness(0.92) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.5) brightness(0.92) !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.03),
        0 30px 80px -15px rgba(0, 0, 0, 0.75),
        0 0 100px -25px color-mix(in oklch, var(--accent, #dc2626) 18%, transparent) !important;
    animation: borderRotate 8s linear infinite !important;
}

@keyframes borderRotate {
    to { --border-angle: 360deg; }
}

/* --- 2. ALBUM COVER: 3D depth + reflection --- */
/* perspective on container with preserve-3d breaks vinyl z-order; use inline perspective on img instead */
.album-detail-page .album-artwork-large {
    perspective: none !important;
    transform-style: flat !important;
}

.album-detail-page .album-artwork-large img,
.album-detail-page .album-artwork-large picture img {
    border-radius: 16px !important;
    box-shadow:
        0 16px 56px -10px rgba(0, 0, 0, 0.75),
        0 0 50px -8px color-mix(in oklch, var(--accent, #dc2626) 12%, transparent),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
    transform: perspective(1200px) rotateX(2deg) !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease !important;
}

.album-detail-page .album-artwork-large:hover img {
    transform: perspective(1200px) rotateX(0deg) scale(1.05) translateY(-6px) !important;
    box-shadow:
        0 28px 72px -12px rgba(0, 0, 0, 0.85),
        0 0 80px -8px color-mix(in oklch, var(--accent, #dc2626) 20%, transparent),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

/* Cover reflection — uses --album-cover CSS variable from inline style */
.album-detail-page .album-artwork-large::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    bottom: -30% !important;
    left: 12% !important;
    right: 12% !important;
    height: 30% !important;
    background: var(--album-cover, none) center / cover no-repeat !important;
    transform: scaleY(-1) !important;
    filter: blur(10px) brightness(0.15) saturate(2) !important;
    opacity: 0.12 !important;
    border-radius: 16px !important;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.1), transparent 70%) !important;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.1), transparent 70%) !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* --- 3. TYPOGRAPHY: Gradient title + animated year --- */
.album-detail-page .album-info h1 {
    font-size: clamp(2.5rem, 5.5vw, 4.25rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.05em !important;
    line-height: 1.05 !important;
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        rgba(255, 255, 255, 0.88) 50%,
        rgba(var(--era-accent, 220,38,38), 0.75) 100%
    ) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    margin-bottom: 1.25rem !important;
}

/* Year hero: animated gradient sweep */
.album-detail-page .album-year-hero__year {
    font-size: clamp(4.5rem, 11vw, 8rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.06em !important;
    line-height: 0.85 !important;
    background: linear-gradient(
        135deg,
        var(--accent, #dc2626),
        #ff6b6b 25%,
        rgba(255, 255, 255, 0.92) 50%,
        #ff6b6b 75%,
        var(--accent, #dc2626)
    ) !important;
    background-size: 300% 300% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: yearShimmer 5s ease-in-out infinite alternate !important;
}

@keyframes yearShimmer {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* --- 4. HOLOGRAPHIC VINYL SHIMMER --- */
.vinyl-record::after {
    content: '' !important;
    position: absolute !important;
    inset: 10% !important;
    border-radius: 50% !important;
    background: conic-gradient(
        from var(--holo-angle, 0deg),
        transparent 0deg,
        rgba(220, 38, 38, 0.12) 15deg,
        transparent 40deg,
        rgba(168, 85, 247, 0.1) 100deg,
        transparent 140deg,
        rgba(59, 130, 246, 0.1) 200deg,
        transparent 250deg,
        rgba(34, 197, 94, 0.07) 300deg,
        transparent 340deg
    ) !important;
    mix-blend-mode: screen !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity 1s ease !important;
}

.album-artwork-large.vs-turntable-active .vinyl-record::after {
    opacity: 1 !important;
    animation: holoShimmer 3.5s linear infinite !important;
}

@keyframes holoShimmer {
    to { --holo-angle: 360deg; }
}

/* Vinyl light reflection — counter-rotates while spinning */
.vinyl-record::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 50% !important;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(255, 255, 255, 0.035) 50deg,
        transparent 110deg,
        rgba(255, 255, 255, 0.025) 190deg,
        transparent 260deg,
        rgba(255, 255, 255, 0.04) 320deg,
        transparent 360deg
    ) !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity 0.8s ease !important;
}

.album-artwork-large.vs-turntable-active .vinyl-record::before {
    opacity: 1 !important;
}

.album-artwork-large.vs-turntable-active .vinyl-record.spinning::before {
    animation: vinylLight 1.8s linear infinite reverse !important;
}

@keyframes vinylLight {
    to { transform: rotate(360deg); }
}

/* --- 5. AMBIENT BACKDROP: Floating orbs --- */
.album-backdrop::before {
    background:
        radial-gradient(circle 280px at 12% 20%, rgba(220, 38, 38, 0.18), transparent),
        radial-gradient(circle 380px at 82% 40%, rgba(168, 85, 247, 0.12), transparent),
        radial-gradient(circle 300px at 45% 85%, rgba(59, 130, 246, 0.09), transparent),
        radial-gradient(circle 200px at 92% 10%, rgba(255, 180, 50, 0.07), transparent) !important;
    filter: blur(50px) !important;
    animation: ambientOrbs 16s ease-in-out infinite alternate !important;
}

@keyframes ambientOrbs {
    0%   { transform: translate(0, 0) scale(1); }
    25%  { transform: translate(-4%, 5%) scale(1.1); opacity: 1; }
    50%  { transform: translate(3%, -3%) scale(1.06); opacity: 0.85; }
    75%  { transform: translate(-2%, 4%) scale(1.08); opacity: 0.95; }
    100% { transform: translate(2%, -2%) scale(1.03); }
}

/* --- 6. NOW-PLAYING: EQ bars animation --- */
.track-item.track-now-playing .track-eq-bars {
    display: inline-flex !important;
    align-items: flex-end !important;
    gap: 2px !important;
    height: 16px !important;
}

/* EQ bar animations: canonical rules are the eq-a/eq-b/eq-c keyframes below (Tier 6) */

/* .track-now-playing gradient background — overridden by line ~6773; removed. */

/* --- 7. SECTION ENTRANCE: Depth reveal --- */
@keyframes depthReveal {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.96);
        filter: blur(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.album-detail-page .album-tracks-section,
.album-detail-page .album-credits,
.album-detail-page .album-share-stream,
.album-detail-page .album-related-articles {
    animation: depthReveal 1s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

.album-detail-page .album-credits { animation-delay: 0.15s !important; }
.album-detail-page .album-share-stream { animation-delay: 0.25s !important; }
.album-detail-page .album-related-articles { animation-delay: 0.35s !important; }

/* --- 8. ENHANCED PLATTER: Metallic depth --- */
.turntable-platter {
    background:
        radial-gradient(circle at 45% 42%,
            #353530 0%,
            #2a2a25 15%,
            #3a3a35 30%,
            #1a1a18 50%,
            #252520 70%,
            #1a1a15 85%,
            #0d0d0a 100%
        ) !important;
    border: 10px solid #1a1a1a !important;
    box-shadow:
        0 50px 100px rgba(0, 0, 0, 0.95),
        inset 0 3px 6px rgba(255, 255, 255, 0.12),
        inset 0 0 50px rgba(0, 0, 0, 0.5),
        0 0 70px -15px rgba(0, 0, 0, 0.9) !important;
}

.album-artwork-large.vs-turntable-active .turntable-platter {
    box-shadow:
        0 50px 100px rgba(0, 0, 0, 0.95),
        inset 0 3px 6px rgba(255, 255, 255, 0.12),
        inset 0 0 50px rgba(0, 0, 0, 0.5),
        0 0 100px -20px color-mix(in oklch, var(--accent, #dc2626) 10%, transparent) !important;
}

/* --- 9. BUTTONS: Premium glow --- */
.album-detail-page .album-play-all-btn,
.album-detail-page .album-controls .btn-primary,
.album-detail-page .album-controls .btn.btn-primary {
    padding: 1.05rem 2.5rem !important;
    border-radius: 16px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    background: linear-gradient(
        135deg,
        var(--accent, #dc2626),
        color-mix(in oklch, var(--accent, #dc2626) 65%, #ff4757)
    ) !important;
    box-shadow:
        0 10px 40px color-mix(in oklch, var(--accent, #dc2626) 38%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -2px 0 rgba(0, 0, 0, 0.15) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.album-detail-page .album-play-all-btn:hover,
.album-detail-page .album-controls .btn-primary:hover {
    transform: translateY(-5px) scale(1.04) !important;
    box-shadow:
        0 24px 64px color-mix(in oklch, var(--accent, #dc2626) 50%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.12) !important;
    filter: brightness(1.18) !important;
}

/* --- 10. TRACK PANEL: Glass + inner light --- */
.album-detail-page .album-tracks-section,
.album-detail-page .album-tracks {
    background: rgba(255, 255, 255, 0.025) !important;
    backdrop-filter: blur(20px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 24px !important;
    padding: 2.5rem !important;
    box-shadow:
        0 10px 40px -10px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* --- 11. SECTION PANELS: Unified glass --- */
.album-detail-page .album-credits,
.album-detail-page .album-share-stream,
.album-detail-page .album-related-articles,
.album-detail-page .album-nav {
    background: rgba(255, 255, 255, 0.025) !important;
    backdrop-filter: blur(18px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 22px !important;
    padding: 2rem !important;
    box-shadow:
        0 6px 32px -8px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* --- 12. GRID REFINEMENT --- */
.album-detail-page .album-header .grid-2,
.album-detail-page .album-header__grid {
    grid-template-columns: minmax(280px, 400px) 1fr !important;
    gap: clamp(2.5rem, 5vw, 5rem) !important;
}

/* --- 13. RESPONSIVE --- */
@media (max-width: 900px) {
    .album-detail-page .album-header .grid-2,
    .album-detail-page .album-header__grid {
        grid-template-columns: minmax(200px, 280px) 1fr !important;
        gap: 2rem !important;
    }
    .album-detail-page .album-header {
        padding: 2rem !important;
        border-radius: 22px !important;
    }
}

@media (max-width: 768px) {
    .album-detail-page .album-header .grid-2,
    .album-detail-page .album-header__grid {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }
    .album-detail-page .album-artwork-large {
        max-width: 300px !important;
        margin: 0 auto !important;
    }
    .album-detail-page .album-info {
        text-align: center !important;
    }
    .album-detail-page .album-actions,
    .album-detail-page .album-controls {
        justify-content: center !important;
    }
    .album-detail-page .album-header {
        padding: 1.5rem !important;
        border-radius: 18px !important;
    }
    .album-detail-page .album-info h1 {
        font-size: 2rem !important;
    }
    .album-detail-page .album-year-hero__year {
        font-size: 4rem !important;
    }
}

@media (max-width: 480px) {
    .album-detail-page .album-header {
        padding: 1.25rem !important;
        border-radius: 14px !important;
    }
    .album-detail-page .album-tracks-section,
    .album-detail-page .album-tracks {
        padding: 1.25rem !important;
        border-radius: 18px !important;
    }
    .album-detail-page .album-credits,
    .album-detail-page .album-share-stream,
    .album-detail-page .album-related-articles {
        padding: 1.25rem !important;
        border-radius: 16px !important;
    }
}

/* --- 14. LIGHT THEME --- */
[data-theme="light"] .album-detail-page .album-header {
    background:
        linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72)) padding-box,
        conic-gradient(
            from var(--border-angle),
            var(--accent, #dc2626),
            rgba(0, 0, 0, 0.08) 10%,
            transparent 20%,
            transparent 50%,
            rgba(0, 0, 0, 0.06) 70%,
            transparent 85%,
            var(--accent, #dc2626)
        ) border-box !important;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.04),
        0 12px 40px -8px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .album-detail-page .album-info h1 {
    background: linear-gradient(180deg, #111 0%, rgba(0, 0, 0, 0.7) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

[data-theme="light"] .album-detail-page .album-artwork-large::after {
    opacity: 0.06 !important;
}

[data-theme="light"] .album-detail-page .album-tracks-section,
[data-theme="light"] .album-detail-page .album-tracks,
[data-theme="light"] .album-detail-page .album-credits,
[data-theme="light"] .album-detail-page .album-share-stream,
[data-theme="light"] .album-detail-page .album-related-articles {
    background: rgba(255, 255, 255, 0.6) !important;
    border-color: rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .album-detail-page .track-title {
    color: rgba(0, 0, 0, 0.85) !important;
}

[data-theme="light"] .album-detail-page .track-number {
    color: rgba(0, 0, 0, 0.3) !important;
}

/* --- 15. REDUCED MOTION --- */
@media (prefers-reduced-motion: reduce) {
    .album-detail-page .album-header { animation: none !important; }
    .album-detail-page .album-info h1 { animation: none !important; }
    .album-detail-page .album-year-hero__year { animation: none !important; }
    .album-backdrop::before { animation: none !important; }
    .vinyl-record::after { animation: none !important; }
    .track-item.track-now-playing .track-eq-bars .eq-bar { animation: none !important; }
    .album-artwork-large.vs-turntable-active .vinyl-record.spinning::before { animation: none !important; }
    .album-detail-page .album-tracks-section,
    .album-detail-page .album-credits,
    .album-detail-page .album-share-stream,
    .album-detail-page .album-related-articles { animation: none !important; opacity: 1 !important; filter: none !important; }
}


/* =============================================
   VINYL STATE OVERRIDES — FINAL WORD
   These must come LAST to beat all !important
   hover effects from the 2026 premium section.
   ============================================= */

/* Playing state: cover stays slid aside, no hover bounce */
.album-detail-page .album-artwork-large.vs-turntable-active picture img,
.album-detail-page .album-artwork-large.vs-turntable-active:hover picture img {
    transform: translateX(-55%) rotate(-4deg) scale(0.85) !important;
    box-shadow: -20px 25px 50px rgba(0,0,0,0.7) !important;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease !important;
}

/* Extracting state: cover stays in place */
.album-detail-page .album-artwork-large.vs-extracting:hover picture img {
    transform: none !important;
}

/* Tonearm: hidden until playback starts — avoids overlapping album info column */
.album-detail-page .album-artwork-large:not(.vs-turntable-active):not(.vs-extracting) .vinyl-tonearm {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Vinyl record: above cover when active */
.album-detail-page .album-artwork-large.vs-turntable-active .vinyl-record,
.album-detail-page .album-artwork-large.vs-turntable-active .turntable-platter {
    z-index: 6 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Disable modern-fixes.css sticky — vinyl needs relative positioning */
.album-detail-page .album-artwork-large {
    position: relative !important;
    overflow: visible !important;
}

/* Album-info must be above turntable-unit (z-index:1) so buttons stay clickable */
.album-detail-page .album-info,
.album-detail-page .album-rating {
    position: relative;
    z-index: 2;
}

/* =============================================
   TURNTABLE UNIT WRAPPER — ULTIMATE ALIGNMENT
   Platter, vinyl, and tonearm live inside a
   single parent div. inset:0 / inset:3% on
   children guarantees mathematical concentricity.
   Tonearm pivot sits at the top-right corner of
   the wrapper, so the needle always touches the
   vinyl surface regardless of screen size.
   ============================================= */

/* The wrapper is a transparent positioning container — vinyl/tonearm handle their own appearance */
.turntable-unit {
    position: absolute;
    top: 50%;
    left: calc(100% + 2%);
    width: 92%;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

/* Platter fills the entire wrapper */
.turntable-unit > .turntable-platter {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at center,
        #1a1a15 0%, #2a2a2a 35%, #1a1a1a 60%, #0a0a0a 100%) !important;
    box-shadow:
        0 30px 80px rgba(0,0,0,0.9),
        inset 0 2px 4px rgba(255,255,255,0.08),
        inset 0 0 30px rgba(0,0,0,0.4) !important;
    border: 8px solid #1a1a1a !important;
    transform: scale(0.7) !important;
    opacity: 0 !important;
    transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
    z-index: 1 !important;
}

.album-artwork-large.vs-turntable-active .turntable-unit > .turntable-platter {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* Vinyl sits 1.5% inside the wrapper — thin platter rim visible */
.turntable-unit > .vinyl-record {
    position: absolute !important;
    top: 1.5% !important;
    right: 1.5% !important;
    bottom: 1.5% !important;
    left: 1.5% !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
    border-radius: 50% !important;
    background: #111 !important;
    transform: translateX(90%) !important;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease !important;
    z-index: 6 !important;
    pointer-events: none !important;
    box-shadow:
        0 4px 40px rgba(0, 0, 0, 0.9),
        0 0 60px -10px rgba(0,0,0,0.5) !important;
    opacity: 0 !important;
}

/* Hover: subtle peek to hint at the turntable */
.album-detail-page .album-artwork-large:not(.vs-turntable-active):not(.vs-extracting):hover .turntable-unit > .vinyl-record {
    opacity: 0.5 !important;
    transform: translateX(28%) !important;
}

/* Extracting: vinyl slides from peek toward center */
.album-artwork-large.vs-extracting .turntable-unit > .vinyl-record {
    transform: translateX(55%) !important;
    z-index: 4 !important;
    opacity: 1 !important;
}

/* Active: centered on platter */
.album-artwork-large.vs-turntable-active .turntable-unit > .vinyl-record {
    transform: translateX(0) !important;
    z-index: 6 !important;
    opacity: 1 !important;
    box-shadow:
        0 4px 40px rgba(0, 0, 0, 0.9),
        0 0 80px -10px rgba(220, 38, 38, 0.06) !important;
}

/* ===========================================
   TONEARM — clean minimal design
   Arm bar = the div itself
   ::before = pivot pin (small circle)
   ::after  = needle tip (small rectangle)
   =========================================== */
.turntable-unit > .vinyl-tonearm {
    position: absolute !important;
    top: 30% !important;
    right: -10% !important;
    left: auto !important;
    width: 62% !important;
    height: 3px !important;
    background: linear-gradient(to left, #d0d0d0 0%, #888 60%, #666 100%) !important;
    border-radius: 2px !important;
    z-index: 20 !important;
    transform-origin: right center !important;
    transform: rotate(32deg);
    transition: transform 0.35s ease-out, opacity 0.4s ease !important;
    pointer-events: none !important;
    opacity: 0.88 !important;
}

/* Pivot bearing */
.turntable-unit > .vinyl-tonearm::before {
    content: '' !important;
    position: absolute !important;
    right: -9px !important;
    top: -7px !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 38% 32%, #e0e0e0, #888 45%, #444) !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.7), inset 0 1px 2px rgba(255,255,255,0.3) !important;
}

/* Stylus cartridge + needle tip */
.turntable-unit > .vinyl-tonearm::after {
    content: '' !important;
    position: absolute !important;
    left: -1px !important;
    top: -4px !important;
    width: 6px !important;
    height: 18px !important;
    background: linear-gradient(to bottom, #aaa 0%, #777 60%, #333 100%) !important;
    border-radius: 1px 1px 50% 50% !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
}

.album-artwork-large.vs-turntable-active .turntable-unit > .vinyl-tonearm {
    opacity: 1 !important;
}

/* Lifted: arm above record — +32deg places tip above the top edge of the turntable unit */
.turntable-unit > .vinyl-tonearm.lifted {
    transform: rotate(32deg) !important;
    transition: transform 0.35s ease-out, opacity 0.4s ease !important;
}

/* Playing: tonearm angle set by JS via --tonearm-angle (20deg outer → -10deg inner) */
.turntable-unit > .vinyl-tonearm.playing {
    transform: rotate(var(--tonearm-angle, 20deg)) !important;
    transition: transform 1.2s linear, opacity 0.4s ease !important;
}

/* Dropping: arm descends from lifted (+32deg) onto outer groove (+20deg) with spring bounce */
.turntable-unit > .vinyl-tonearm.dropping {
    animation: tonearm-drop 0.7s ease forwards !important;
    transition: none !important;
}

/* +32deg (above record) → overshoot → settle at +20deg (outer groove) */
@keyframes tonearm-drop {
    0%   { transform: rotate(32deg); }
    40%  { transform: rotate(16deg); }
    65%  { transform: rotate(22deg); }
    82%  { transform: rotate(19deg); }
    100% { transform: rotate(20deg); }
}

/* Suppress stale tonearm from cinematic-bundle.js (direct child of artwork, not inside wrapper) */
.album-artwork-large > .vinyl-tonearm,
.album-artwork-large > .vinyl-tonearm *,
.vinyl-tonearm__arm,
.vinyl-tonearm__head,
.vinyl-tonearm__pivot {
    display: none !important;
}

/* Turntable unit: hidden by default (opacity:0 on .turntable-unit), shown on hover/active.
   The tonearm inside is hidden via its own opacity rule above. */

.album-detail-page .album-artwork-large.vs-turntable-active .turntable-unit,
.album-detail-page .album-artwork-large.vs-extracting .turntable-unit {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Era-colored vinyl glow inside wrapper */
.album-detail-page.era-70s .turntable-unit > .vinyl-record       { box-shadow: 0 4px 40px rgba(0,0,0,0.9), 0 0 80px -10px rgba(220,165,38,0.1) !important; }
.album-detail-page.era-early-80s .turntable-unit > .vinyl-record  { box-shadow: 0 4px 40px rgba(0,0,0,0.9), 0 0 80px -10px rgba(220,38,38,0.1) !important; }
.album-detail-page.era-late-80s .turntable-unit > .vinyl-record   { box-shadow: 0 4px 40px rgba(0,0,0,0.9), 0 0 80px -10px rgba(168,85,247,0.1) !important; }
.album-detail-page.era-90s .turntable-unit > .vinyl-record        { box-shadow: 0 4px 40px rgba(0,0,0,0.9), 0 0 80px -10px rgba(34,197,94,0.08) !important; }
.album-detail-page.era-2000s .turntable-unit > .vinyl-record      { box-shadow: 0 4px 40px rgba(0,0,0,0.9), 0 0 80px -10px rgba(59,130,246,0.1) !important; }

/* Mobile: hide turntable unit */
@media (max-width: 768px) {
    .turntable-unit { display: none !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .turntable-unit > .vinyl-record,
    .turntable-unit > .vinyl-tonearm {
        transition: none !important;
    }
    .turntable-unit > .vinyl-record.spinning {
        animation: none !important;
    }
}

/* Light theme */
[data-theme="light"] .turntable-unit > .vinyl-record {
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.3),
        inset 0 0 0 2px rgba(0, 0, 0, 0.1) !important;
}

/* =============================================
   2026-2027 UI/UX PREMIUM DESIGN SYSTEM
   Holographic vinyl, ambient depth, glass cards,
   neon accents and premium micro-interactions.
   ============================================= */

/* --- Keyframes --- */

@keyframes vinyl-shimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

@keyframes btn-pulse-glow {
    0%, 100% { box-shadow: 0 0 12px rgba(220, 38, 38, 0.4), 0 4px 12px rgba(0,0,0,0.5); }
    50%       { box-shadow: 0 0 24px rgba(220, 38, 38, 0.7), 0 8px 20px rgba(0,0,0,0.4); }
}

@keyframes ambient-drift {
    0%   { transform: translateX(-50%) translateY(0px) scale(1); opacity: 0.7; }
    50%  { transform: translateX(-50%) translateY(-18px) scale(1.04); opacity: 1; }
    100% { transform: translateX(-50%) translateY(0px) scale(1); opacity: 0.7; }
}

@keyframes border-rotate {
    from { --border-angle: 0deg; }
    to   { --border-angle: 360deg; }
}

@keyframes tonearm-idle-sway {
    0%, 100% { transform: rotate(32deg); }
    50%       { transform: rotate(33.2deg); }
}

@keyframes label-hologram {
    0%   { filter: hue-rotate(0deg) saturate(1.2); }
    100% { filter: hue-rotate(360deg) saturate(1.2); }
}

/* --- Album backdrop: richer ambient depth --- */
.album-backdrop img {
    filter: blur(60px) saturate(2.2) brightness(0.28) !important;
}

.album-backdrop::after {
    background: linear-gradient(
        180deg,
        rgba(var(--bg-body-rgb, 10, 10, 14), 0.15) 0%,
        rgba(var(--bg-body-rgb, 10, 10, 14), 0.5) 45%,
        var(--bg-body, #0a0a0e) 88%
    ) !important;
}

/* Second ambient glow layer drifting upward */
.album-backdrop::before {
    content: '';
    position: absolute;
    bottom: 20%;
    left: 50%;
    width: 60%;
    height: 40%;
    background: radial-gradient(ellipse at center, rgba(var(--era-accent, 220, 38, 38), 0.08) 0%, transparent 70%);
    animation: ambient-drift 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* --- Album artwork: premium holographic border ring --- */
.album-artwork-large {
    position: relative !important;
}

.album-artwork-large picture {
    display: block;
    position: relative;
    z-index: 3;
    border-radius: 14px;
    isolation: isolate;
}

.album-artwork-large picture::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 15px;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.18) 0%,
        rgba(255,255,255,0.04) 30%,
        rgba(var(--era-accent, 220, 38, 38), 0.2) 60%,
        rgba(255,255,255,0.06) 80%,
        rgba(255,255,255,0.18) 100%
    );
    background-size: 300% 300%;
    animation: vinyl-shimmer 6s linear infinite;
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: screen;
}

.album-artwork-large img {
    border-radius: 13px !important;
    box-shadow:
        0 30px 80px rgba(0,0,0,0.7),
        0 8px 20px rgba(0,0,0,0.5),
        0 0 0 1px rgba(255,255,255,0.06) !important;
}

/* --- Vinyl record: iridescent groove shimmer --- */
.vinyl-record::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255,255,255,0.03) 20deg,
        transparent 40deg,
        rgba(255,255,255,0.05) 80deg,
        transparent 120deg,
        rgba(255,255,255,0.02) 180deg,
        rgba(255,255,255,0.06) 240deg,
        transparent 280deg,
        rgba(255,255,255,0.04) 320deg,
        transparent 360deg
    );
    pointer-events: none;
    z-index: 3;
}

/* Spinning vinyl: animate the shimmer layer */
.vinyl-record.spinning::after {
    animation: none;
}

/* Holographic vinyl label shimmer */
.vinyl-label {
    background: radial-gradient(
        circle at 40% 35%,
        #3a2a1e 0%, #1e1208 40%, #0e0a04 70%, #1a0e06 100%
    ) !important;
    box-shadow:
        0 2px 12px rgba(0,0,0,0.8),
        inset 0 1px 3px rgba(255,200,100,0.15),
        inset 0 0 20px rgba(0,0,0,0.6) !important;
}

/* Tonearm idle: gentle sway when parked */
.turntable-unit > .vinyl-tonearm.lifted {
    animation: tonearm-idle-sway 4s ease-in-out infinite !important;
    transition: none !important;
}

/* Stop sway once playing/dropping */
.turntable-unit > .vinyl-tonearm.playing,
.turntable-unit > .vinyl-tonearm.dropping {
    animation: none !important;
}

/* --- Album info: no extra glass (album-header already wraps in glass) --- */
.album-info {
    position: relative !important;
}

/* Glass card top highlight edge */
.album-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    pointer-events: none;
}

/* --- Album title: font sizing only (gradient/animation handled by kinetic rule below) --- */
.album-info h1 {
    font-size: clamp(1.85rem, 4.2vw, 2.8rem);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* --- Play All button: premium glow + shimmer --- */
.album-play-all-btn {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
    border-radius: 10px !important;
    padding: 0.7rem 1.5rem !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 0 14px rgba(220,38,38,0.45), 0 4px 14px rgba(0,0,0,0.5) !important;
    animation: btn-pulse-glow 3s ease-in-out infinite !important;
    transition: transform 150ms, box-shadow 150ms !important;
    position: relative !important;
    overflow: hidden !important;
}

.album-play-all-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 50%;
    height: 200%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.18), transparent);
    transform: skewX(-20deg);
    transition: left 0.5s ease;
}

.album-play-all-btn:hover::after {
    left: 110%;
}

.album-play-all-btn:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 0 28px rgba(220,38,38,0.65), 0 8px 20px rgba(0,0,0,0.5) !important;
    animation: none !important;
}

/* --- Queue button: premium glass --- */
.album-queue-btn {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 10px !important;
    backdrop-filter: blur(6px) !important;
    padding: 0.7rem 1.25rem !important;
    transition: all 200ms !important;
}

.album-queue-btn:hover {
    background: rgba(255,255,255,0.11) !important;
    border-color: rgba(255,255,255,0.25) !important;
    transform: translateY(-1px) !important;
}

/* --- Track list: allow overflow so buttons stay clickable at edges --- */
.album-tracks-section {
    overflow: visible !important;
    position: relative !important;
}

/* Section highlight */
.album-tracks-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5%;
    width: 90%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    pointer-events: none;
}

/* --- Track rows: micro-interaction refinement --- */
.track-item {
    border-radius: 10px !important;
    padding: 0.65rem 0.85rem !important;
    transition: background-color 180ms, transform 150ms !important;
    position: relative !important;
}

.track-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 2px;
    background: var(--era-accent-hex, #dc2626);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 180ms;
    pointer-events: none;
}

.track-item:hover {
    background: rgba(255,255,255,0.055) !important;
}

.track-item:hover::before {
    opacity: 0.8;
}

.track-item.is-playing {
    background: rgba(var(--era-accent, 220,38,38), 0.07) !important;
}

.track-item.is-playing::before {
    opacity: 1;
}

.track-play-btn {
    box-shadow: 0 2px 8px rgba(220,38,38,0.3) !important;
    transition: background 150ms, transform 150ms, box-shadow 150ms !important;
}

.track-play-btn:hover {
    box-shadow: 0 4px 14px rgba(220,38,38,0.5) !important;
}

/* --- Year/era badge: polished pill --- */
.album-year-hero__era {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 0.28rem 0.65rem !important;
    border-radius: 20px !important;
}

/* --- Album info: above turntable so vinyl shows through the glass card --- */
.album-info {
    position: relative !important;
    z-index: 5 !important;
}

/* --- Tonearm: metallic sheen --- */
.turntable-unit > .vinyl-tonearm {
    background: linear-gradient(
        to left,
        #e0e0e0 0%, #aaa 25%, #888 55%, #666 80%, #444 100%
    ) !important;
    height: 3.5px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.6), 0 0 4px rgba(255,255,255,0.1) !important;
}

/* --- Related articles section: glass cards --- */
.album-related-articles .article-card,
.related-articles-grid .article-card {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(6px) !important;
    transition: transform 200ms, box-shadow 200ms, border-color 200ms !important;
}

.album-related-articles .article-card:hover,
.related-articles-grid .article-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.4) !important;
    border-color: rgba(255,255,255,0.13) !important;
}

/* --- Reduced motion overrides --- */
@media (prefers-reduced-motion: reduce) {
    .album-artwork-large picture::after,
    .album-backdrop::before,
    .album-play-all-btn,
    .album-play-all-btn::after,
    .turntable-unit > .vinyl-tonearm.lifted {
        animation: none !important;
    }
}

/* ================================================================
   2027 ULTRA 3D — PHYSICAL MATERIAL DESIGN SYSTEM
   Spatial depth · Material surfaces · Precision light simulation
   Every surface is a physical object with weight and presence.
   ================================================================ */

/* ─── KEYFRAMES ────────────────────────────────────────────────── */

@keyframes cover-shine {
    0%   { transform: translateX(-200%) skewX(-20deg); opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateX(350%) skewX(-20deg); opacity: 0; }
}

@keyframes track-section-glow {
    0%,100% { box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 8px 32px rgba(0,0,0,0.45),
        0 24px 60px rgba(0,0,0,0.25),
        0 0 0 rgba(var(--era-accent,220,38,38), 0); }
    50% { box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 8px 32px rgba(0,0,0,0.45),
        0 24px 60px rgba(0,0,0,0.25),
        0 0 80px -20px rgba(var(--era-accent,220,38,38), 0.08); }
}

/* ─── ALBUM HEADER — ELEVATED DEEP GLASS CARD ─────────────────── */

.album-detail-page .album-header {
    box-shadow:
        /* Inner edge specular highlights — simulate thickness */
        inset 0 1px 0 rgba(255,255,255,0.16),
        inset 1px 0 0 rgba(255,255,255,0.07),
        inset -1px 0 0 rgba(0,0,0,0.22),
        inset 0 -1px 0 rgba(0,0,0,0.48),
        /* Layered exterior depth */
        0 2px 6px rgba(0,0,0,0.62),
        0 12px 32px rgba(0,0,0,0.55),
        0 32px 72px rgba(0,0,0,0.38),
        0 64px 120px rgba(0,0,0,0.2),
        /* Era-colored underlit halo */
        0 0 100px -12px rgba(var(--era-accent,220,38,38), 0.22) !important;
}

/* ─── ALBUM COVER — PHYSICAL 3D OBJECT ────────────────────────── */

/* Deep multi-layer shadow stack */
.album-detail-page .album-artwork-large img,
.album-detail-page .album-artwork-large picture img {
    box-shadow:
        0 1px 2px rgba(0,0,0,0.6),
        0 4px 8px rgba(0,0,0,0.58),
        0 10px 22px rgba(0,0,0,0.5),
        0 22px 50px rgba(0,0,0,0.4),
        0 48px 90px rgba(0,0,0,0.25),
        /* Edge specular — physical thickness illusion */
        inset 0 0 0 1px rgba(255,255,255,0.12),
        inset -1px 0 0 rgba(0,0,0,0.3),
        /* Era-colored underlit glow */
        0 0 70px -6px rgba(var(--era-accent,220,38,38), 0.5) !important;
    transition:
        transform 0.5s cubic-bezier(0.16,1,0.3,1),
        box-shadow 0.5s ease !important;
}

/* Clip shine pass inside cover boundary */
.album-detail-page .album-artwork-large picture {
    overflow: hidden !important;
}

/* Shine sweep — fires once on hover */
.album-detail-page .album-artwork-large picture::after {
    content: '' !important;
    position: absolute !important;
    top: -5% !important;
    left: 0 !important;
    width: 45% !important;
    height: 110% !important;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255,255,255,0.13) 50%,
        transparent 100%
    ) !important;
    transform: translateX(-200%) skewX(-20deg) !important;
    pointer-events: none !important;
    z-index: 5 !important;
    mix-blend-mode: screen !important;
    opacity: 0 !important;
    animation: none !important;
    transition: none !important;
}

.album-detail-page .album-artwork-large:hover picture::after {
    animation: cover-shine 0.75s cubic-bezier(0.4,0,0.2,1) forwards !important;
}

/* ─── ALBUM TITLE — CINEMATIC 3D TYPOGRAPHY ───────────────────── */

.album-detail-page .album-info h1 {
    filter:
        drop-shadow(0 1px 0 rgba(0,0,0,1))
        drop-shadow(0 3px 8px rgba(0,0,0,0.65))
        drop-shadow(0 0 50px rgba(var(--era-accent,220,38,38), 0.3)) !important;
    letter-spacing: -0.045em !important;
}

/* Year number: maximum 3D pop with colored bloom */
.album-detail-page .album-year-hero__year {
    filter:
        drop-shadow(0 3px 0 rgba(0,0,0,0.75))
        drop-shadow(0 6px 16px rgba(0,0,0,0.55))
        drop-shadow(0 0 70px rgba(var(--era-accent,220,38,38), 0.6)) !important;
}

/* ─── TRACK LIST SECTION — ELEVATED FROSTED PANEL ─────────────── */

.album-detail-page .album-tracks-section {
    background: rgba(7,7,12,0.55) !important;
    border: 1px solid rgba(255,255,255,0.068) !important;
    border-bottom-color: rgba(255,255,255,0.025) !important;
    backdrop-filter: blur(28px) saturate(1.65) brightness(1.04) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.65) brightness(1.04) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        inset 0 -1px 0 rgba(0,0,0,0.32),
        0 8px 32px rgba(0,0,0,0.48),
        0 24px 60px rgba(0,0,0,0.26) !important;
}

/* ─── TRACK ROWS — Z-AXIS PHYSICS ─────────────────────────────── */

.album-detail-page .track-item {
    will-change: transform, box-shadow !important;
    transition:
        background-color 160ms,
        transform 220ms cubic-bezier(0.16,1,0.3,1),
        box-shadow 220ms ease !important;
}

.album-detail-page .track-item:hover {
    background: rgba(255,255,255,0.062) !important;
    transform: perspective(700px) translateZ(10px) !important;
    box-shadow:
        0 2px 8px rgba(0,0,0,0.42),
        0 6px 20px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

/* ─── TRACK PLAY BUTTON — PHYSICAL PRESS ──────────────────────── */

.album-detail-page .track-play-btn {
    transition:
        transform 140ms cubic-bezier(0.16,1,0.3,1),
        box-shadow 140ms,
        background 140ms !important;
}

.album-detail-page .track-item:hover .track-play-btn {
    transform: scale(1.15) !important;
    box-shadow:
        0 0 0 1px rgba(220,38,38,0.28),
        0 4px 14px rgba(220,38,38,0.58),
        0 8px 26px rgba(220,38,38,0.26) !important;
}

.album-detail-page .track-play-btn:active {
    transform: scale(0.9) !important;
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.4),
        0 0 0 1px rgba(220,38,38,0.25) !important;
    transition-duration: 60ms !important;
}

/* ─── NOW-PLAYING ROW — GLOWING ACCENT ────────────────────────── */

.album-detail-page .track-item.track-now-playing {
    box-shadow:
        inset 3px 0 0 rgba(var(--era-accent,220,38,38), 0.95),
        inset 0 1px 0 rgba(255,255,255,0.065),
        0 4px 24px rgba(var(--era-accent,220,38,38), 0.18),
        0 8px 36px rgba(0,0,0,0.3) !important;
}

/* ─── PRIMARY PLAY BUTTON — DEEP PHYSICAL MATERIAL ────────────── */

.album-detail-page .album-play-all-btn,
.album-detail-page .album-controls .btn-primary,
.album-detail-page .album-controls .btn.btn-primary {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.24),
        inset 0 -2px 0 rgba(0,0,0,0.38),
        0 4px 12px rgba(var(--era-accent,220,38,38), 0.44),
        0 10px 28px rgba(var(--era-accent,220,38,38), 0.3),
        0 20px 44px rgba(0,0,0,0.36) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
    animation: none !important;
    transition: all 0.2s cubic-bezier(0.16,1,0.3,1) !important;
}

.album-detail-page .album-play-all-btn:hover,
.album-detail-page .album-controls .btn-primary:hover {
    transform: translateY(-3px) scale(1.025) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 -2px 0 rgba(0,0,0,0.32),
        0 6px 16px rgba(var(--era-accent,220,38,38), 0.6),
        0 14px 36px rgba(var(--era-accent,220,38,38), 0.4),
        0 28px 56px rgba(0,0,0,0.4) !important;
    filter: brightness(1.09) !important;
    animation: none !important;
}

.album-detail-page .album-play-all-btn:active {
    transform: translateY(1px) scale(0.98) !important;
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.3),
        inset 0 -1px 0 rgba(0,0,0,0.18),
        0 2px 6px rgba(var(--era-accent,220,38,38), 0.28) !important;
    filter: brightness(0.92) !important;
    transition-duration: 60ms !important;
}

/* ─── SECONDARY BUTTONS — GLASS MATERIAL ──────────────────────── */

.album-detail-page .album-queue-btn,
.album-detail-page .album-controls .btn-secondary {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        inset 0 -1px 0 rgba(0,0,0,0.2),
        0 2px 8px rgba(0,0,0,0.3),
        0 6px 20px rgba(0,0,0,0.18) !important;
    transition: all 0.2s cubic-bezier(0.16,1,0.3,1) !important;
}

.album-detail-page .album-queue-btn:hover,
.album-detail-page .album-controls .btn-secondary:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.15),
        0 4px 14px rgba(0,0,0,0.38),
        0 10px 28px rgba(0,0,0,0.22) !important;
}

/* ─── TONEARM — BRUSHED PRECISION METAL ───────────────────────── */

.turntable-unit > .vinyl-tonearm {
    background: linear-gradient(
        to left,
        #f8f8f8 0%,
        #e2e2e2 6%,
        #c0c0c0 18%,
        #969696 38%,
        #6a6a6a 60%,
        #3e3e3e 80%,
        #1e1e1e 100%
    ) !important;
    height: 3px !important;
    box-shadow:
        0 0.5px 0 rgba(255,255,255,0.6),
        0 -0.5px 0 rgba(0,0,0,0.95),
        0 2px 12px rgba(0,0,0,0.8),
        0 0 6px rgba(255,255,255,0.04) !important;
}

/* ─── VINYL LABEL — WARM LACQUER ───────────────────────────────── */

.vinyl-label {
    background: radial-gradient(
        circle at 38% 32%,
        #4e3322 0%,
        #2e1b10 32%,
        #180d07 62%,
        #0f0905 100%
    ) !important;
    box-shadow:
        0 2px 16px rgba(0,0,0,0.95),
        inset 0 1px 3px rgba(255,200,100,0.22),
        inset 0 -1px 2px rgba(0,0,0,0.85),
        inset 0 0 30px rgba(0,0,0,0.7) !important;
}

/* ─── META BADGES — FROSTED DEPTH ─────────────────────────────── */

.album-detail-page .album-meta-item,
.album-detail-page .album-meta-detail span,
.album-detail-page .album-meta-detail .album-meta-sep {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 0 rgba(0,0,0,0.22),
        0 2px 8px rgba(0,0,0,0.32) !important;
}

/* ─── SHARE / STREAM SECTION ───────────────────────────────────── */

.album-detail-page .album-share-stream {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 4px 20px rgba(0,0,0,0.38),
        0 14px 40px rgba(0,0,0,0.2) !important;
}

/* ─── RELATED ARTICLE CARDS ────────────────────────────────────── */

.album-related-articles .article-card,
.related-articles-grid .article-card {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.07),
        0 4px 16px rgba(0,0,0,0.42),
        0 12px 32px rgba(0,0,0,0.22) !important;
    transition: transform 220ms cubic-bezier(0.16,1,0.3,1), box-shadow 220ms !important;
}

.album-related-articles .article-card:hover,
.related-articles-grid .article-card:hover {
    transform: perspective(600px) translateZ(14px) translateY(-2px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 8px 24px rgba(0,0,0,0.5),
        0 22px 52px rgba(0,0,0,0.28) !important;
    border-color: rgba(255,255,255,0.11) !important;
}

/* ─── REDUCED MOTION OVERRIDES ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .album-detail-page .track-item:hover,
    .album-detail-page .album-play-all-btn:hover,
    .album-detail-page .album-artwork-large:hover picture::after,
    .album-related-articles .article-card:hover,
    .related-articles-grid .article-card:hover {
        transform: none !important;
        animation: none !important;
    }
}


/* =============================================================
   2027 STEP-BY-STEP UI/UX POLISH
   Systematic quality pass — typography, depth, spacing rhythm
   ============================================================= */

/* ─── 1. TRACK LIST HEADER ──────────────────────────────────── */

.album-detail-page .album-tracks-header {
    position: relative !important;
    border-bottom: none !important;
    padding-bottom: 0.85rem !important;
    margin-bottom: 1.1rem !important;
}

.album-detail-page .album-tracks-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(var(--era-accent, 220,38,38), 0.55) 0%,
        rgba(255,255,255,0.08) 40%,
        transparent 100%
    );
}

.album-detail-page .album-tracks-title {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: rgba(255,255,255,0.38) !important;
}

/* ─── 2. STREAMING LINKS ────────────────────────────────────── */

.album-detail-page .streaming-link {
    padding: 0.5rem 1rem !important;
    font-size: 0.82rem !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    background: rgba(255,255,255,0.05) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.07),
        0 2px 8px rgba(0,0,0,0.28) !important;
    transition: background 180ms, border-color 180ms, box-shadow 180ms, transform 140ms cubic-bezier(0.16,1,0.3,1) !important;
    letter-spacing: 0.02em;
}

.album-detail-page .streaming-link:hover {
    transform: translateY(-2px) !important;
}

.album-detail-page .streaming-link:active {
    transform: translateY(0) scale(0.97) !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3) !important;
}

.album-detail-page .streaming-link--youtube:hover {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 4px 16px rgba(255,0,0,0.22),
        0 2px 6px rgba(0,0,0,0.3) !important;
}

.album-detail-page .streaming-link--yandex:hover {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 4px 16px rgba(255,204,0,0.18),
        0 2px 6px rgba(0,0,0,0.3) !important;
}

.album-detail-page .streaming-link--vk:hover {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 4px 16px rgba(39,135,245,0.22),
        0 2px 6px rgba(0,0,0,0.3) !important;
}

.album-detail-page .streaming-link--apple:hover {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 4px 16px rgba(252,60,68,0.22),
        0 2px 6px rgba(0,0,0,0.3) !important;
}

/* ─── 3. SHARE / STREAM SECTION ─────────────────────────────── */

.album-detail-page .album-share-stream {
    border-radius: 14px !important;
    padding: 1.1rem 1.25rem !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
}

/* ─── 4. CREDITS SECTION ────────────────────────────────────── */

.album-detail-page .album-credits {
    padding-top: 1.75rem !important;
}

.album-detail-page .album-credits__title {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: rgba(255,255,255,0.35) !important;
    margin-bottom: 0.1rem !important;
}

.album-detail-page .album-credit-card {
    padding: 0.7rem 0.9rem !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.035) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 2px 10px rgba(0,0,0,0.32) !important;
    transition: background 200ms, border-color 200ms, box-shadow 200ms, transform 200ms cubic-bezier(0.16,1,0.3,1) !important;
}

.album-detail-page .album-credit-card:hover {
    transform: perspective(700px) translateZ(8px) translateY(-2px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.09),
        0 6px 22px rgba(0,0,0,0.45),
        0 0 0 1px rgba(var(--era-accent, 220,38,38), 0.15) !important;
}

.album-detail-page .album-credit-card__avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.08) !important;
    transition: box-shadow 200ms !important;
}

.album-detail-page .album-credit-card:hover .album-credit-card__avatar {
    box-shadow: 0 0 0 2px rgba(var(--era-accent, 220,38,38), 0.5) !important;
}

.album-detail-page .album-credit-card--deceased .album-credit-card__avatar {
    box-shadow: 0 0 0 2px rgba(251,191,36,0.35) !important;
}

.album-detail-page .album-credit-card--deceased:hover .album-credit-card__avatar {
    box-shadow:
        0 0 0 2px rgba(251,191,36,0.7),
        0 0 10px rgba(251,191,36,0.2) !important;
}

.album-detail-page .album-credit-card--deceased .album-credit-card__name {
    color: rgba(251,191,36,0.85) !important;
}

.album-detail-page .album-credit-card--deceased:hover .album-credit-card__name {
    color: rgba(251,191,36,1) !important;
}

/* ─── 5. ALBUM NAV ──────────────────────────────────────────── */

.album-detail-page .album-nav {
    padding-top: 1.75rem !important;
    margin-top: 2rem !important;
}

.album-detail-page .album-nav__link {
    border-radius: 12px !important;
    padding: 0.85rem 1.1rem !important;
    background: rgba(255,255,255,0.03) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 3px 14px rgba(0,0,0,0.35) !important;
    transition: background 200ms, border-color 200ms, box-shadow 200ms, transform 220ms cubic-bezier(0.16,1,0.3,1) !important;
}

.album-detail-page .album-nav__link:hover {
    transform: perspective(700px) translateZ(10px) translateY(-2px) !important;
    background: rgba(255,255,255,0.055) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 8px 28px rgba(0,0,0,0.45),
        0 0 0 1px rgba(var(--era-accent, 220,38,38), 0.12) !important;
    border-color: rgba(var(--era-accent, 220,38,38), 0.2) !important;
}

.album-detail-page .album-nav__thumb {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08) !important;
    flex-shrink: 0;
}

.album-detail-page .album-nav__link:hover .album-nav__thumb {
    box-shadow: 0 0 0 1px rgba(var(--era-accent, 220,38,38), 0.35) !important;
}

/* ─── 6. INLINE LYRICS PANEL ────────────────────────────────── */

.album-detail-page .lyrics-verse--chorus {
    padding: 0.5rem 1rem !important;
    border-left: 3px solid rgba(var(--era-accent, 220,38,38), 0.55) !important;
    border-radius: 0 6px 6px 0 !important;
    background: rgba(var(--era-accent, 220,38,38), 0.04) !important;
    font-style: italic !important;
    margin-bottom: 1.1em !important;
}

.album-detail-page .lyrics-verse--bridge {
    padding: 0.4rem 0.9rem !important;
    border-left: 2px dashed rgba(255,255,255,0.2) !important;
    border-radius: 0 4px 4px 0 !important;
    background: rgba(255,255,255,0.025) !important;
    opacity: 0.75 !important;
}

.album-detail-page .lyrics-verse {
    margin-bottom: 1.2em !important;
}

.album-detail-page .track-lyrics-label {
    font-size: 0.68rem !important;
    letter-spacing: 0.1em !important;
}

.album-detail-page .track-lyrics-copy-btn {
    padding: 0.32rem 0.7rem !important;
    border-radius: 7px !important;
    font-size: 0.72rem !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

.album-detail-page .track-lyrics-copy-btn:hover {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.09),
        0 2px 8px rgba(0,0,0,0.25) !important;
}

/* ─── 7. RATING WIDGET ──────────────────────────────────────── */

.album-detail-page .star-btn {
    color: rgba(255,255,255,0.18) !important;
    font-size: 1.6rem !important;
    transition: color 120ms, transform 120ms cubic-bezier(0.16,1,0.3,1), filter 120ms !important;
}

.album-detail-page .star-btn.hovered,
.album-detail-page .star-btn.active,
.album-detail-page .star-btn.filled {
    color: rgba(var(--era-accent, 220,38,38), 1) !important;
    filter: drop-shadow(0 0 5px rgba(var(--era-accent, 220,38,38), 0.5)) !important;
}

.album-detail-page .star-btn.hovered {
    transform: scale(1.28) !important;
}

.album-detail-page .star-btn.partial {
    color: rgba(var(--era-accent, 220,38,38), 0.45) !important;
}

.album-detail-page .rating-label {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.09em !important;
    color: rgba(255,255,255,0.32) !important;
}

/* ─── 8. RELATED ARTICLES SECTION HEADER ───────────────────── */

.album-detail-page .album-related-articles > h2,
.album-detail-page .album-related-articles > .section-title {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: rgba(255,255,255,0.35) !important;
    position: relative;
    padding-bottom: 0.6rem !important;
    margin-bottom: 1rem !important;
}

.album-detail-page .album-related-articles > h2::after,
.album-detail-page .album-related-articles > .section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 2.5rem;
    height: 2px;
    border-radius: 1px;
    background: rgba(var(--era-accent, 220,38,38), 0.7);
}

/* ─── 9. SECTION SPACING RHYTHM ─────────────────────────────── */

.album-detail-page .album-tracks-section {
    margin-top: 1.5rem !important;
}

.album-detail-page .album-credits {
    margin-top: 2rem !important;
}

.album-detail-page .album-share-stream {
    margin-top: 1.5rem !important;
}

.album-detail-page .album-related-articles {
    margin-top: 2.5rem !important;
}

.album-detail-page .album-rating {
    margin-top: 0 !important;
    padding-top: 1.1rem !important;
}

/* ─── REDUCED MOTION (POLISH OVERRIDES) ─────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .album-detail-page .album-credit-card:hover,
    .album-detail-page .album-nav__link:hover,
    .album-detail-page .star-btn.hovered {
        transform: none !important;
        filter: none !important;
    }
}


/* =============================================================
   BUTTON DISPLAY FIXES
   Resolve width/height conflicts left by earlier overrides,
   restore visual distinction between play / queue / lyrics.
   ============================================================= */

/* ─── Track action buttons: release fixed dimensions ───────── */

/* The base CSS sets width:30px/height:30px on these buttons.
   When the 2026 section adds padding without clearing those
   dimensions, the content area collapses (border-box) or the
   button grows to double size (content-box). Reset to auto
   so padding drives the size consistently. */
.album-detail-page .track-play-btn,
.album-detail-page .track-add-to-queue-btn,
.album-detail-page .lyrics-btn {
    width: auto !important;
    height: auto !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* ─── Play button: restore visual priority ──────────────────── */

/* Make the play button stand out as the primary per-track CTA */
.album-detail-page .track-play-btn {
    background: rgba(var(--era-accent, 220,38,38), 0.12) !important;
    border-color: rgba(var(--era-accent, 220,38,38), 0.25) !important;
    color: rgba(var(--era-accent, 220,38,38), 1) !important;
    padding: 0.38rem 0.55rem !important;
    border-radius: 8px !important;
}

.album-detail-page .track-item:hover .track-play-btn {
    background: rgba(var(--era-accent, 220,38,38), 0.22) !important;
    border-color: rgba(var(--era-accent, 220,38,38), 0.45) !important;
    color: #fff !important;
    box-shadow: 0 0 14px rgba(var(--era-accent, 220,38,38), 0.3) !important;
}

.album-detail-page .track-play-btn:hover {
    background: rgba(var(--era-accent, 220,38,38), 0.35) !important;
    border-color: rgba(var(--era-accent, 220,38,38), 0.6) !important;
    color: #fff !important;
    transform: scale(1.08) !important;
    box-shadow: 0 0 18px rgba(var(--era-accent, 220,38,38), 0.4) !important;
}

.album-detail-page .track-play-btn:active {
    transform: scale(0.95) !important;
}

/* ─── Queue button: neutral, clearly a secondary action ─────── */

.album-detail-page .track-add-to-queue-btn {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.45) !important;
    padding: 0.38rem 0.5rem !important;
    border-radius: 8px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

.album-detail-page .track-item:hover .track-add-to-queue-btn {
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.14) !important;
    color: rgba(255,255,255,0.7) !important;
}

.album-detail-page .track-add-to-queue-btn:hover {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: #fff !important;
    transform: scale(1.06) !important;
}

/* ─── Lyrics button: tertiary, feather icon ─────────────────── */

.album-detail-page .lyrics-btn {
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(255,255,255,0.06) !important;
    color: rgba(255,255,255,0.38) !important;
    padding: 0.38rem 0.5rem !important;
    border-radius: 8px !important;
    opacity: 1 !important;
}

.album-detail-page .track-item:hover .lyrics-btn {
    border-color: rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.6) !important;
}

.album-detail-page .lyrics-btn:hover {
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.18) !important;
    color: #fff !important;
    transform: scale(1.05) !important;
}

.album-detail-page .lyrics-btn.active {
    background: rgba(var(--era-accent, 220,38,38), 0.1) !important;
    border-color: rgba(var(--era-accent, 220,38,38), 0.3) !important;
    color: rgba(var(--era-accent, 220,38,38), 1) !important;
}

/* ─── Main album action buttons: consistent sizing ──────────── */

/* Play All + Queue + Share — ensure they have proper height */
.album-detail-page .album-actions .btn {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
}

/* ─── Social share buttons: ensure consistent sizing ────────── */

.album-detail-page .album-share-btn-social {
    min-width: 2.2rem !important;
    height: 2.2rem !important;
    padding: 0 0.55rem !important;
    border-radius: 7px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* ─── Streaming links: mobile size guard ────────────────────── */

@media (max-width: 480px) {
    .album-detail-page .streaming-link {
        padding: 0.38rem 0.75rem !important;
        font-size: 0.78rem !important;
    }
}

/* ─── Reduced motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .album-detail-page .track-play-btn:hover,
    .album-detail-page .track-add-to-queue-btn:hover,
    .album-detail-page .lyrics-btn:hover {
        transform: none !important;
    }
}


/* =============================================================
   2027 STRUCTURAL & CONSISTENCY FIXES
   Resolves layout bugs and visual inconsistencies identified
   in the full UX audit pass.
   ============================================================= */

/* ─── 1. ALBUM RATING — now inside album-info ───────────────── */

/* Rating is now correctly inside .album-info. Reset the z-index
   override that was a workaround for the misplaced grid child. */
.album-detail-page .album-rating {
    position: static !important;
    z-index: auto !important;
    margin-top: 1.25rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
}

/* ─── 2. ALBUM DESCRIPTION — remove clipping max-width ─────── */

/* The 65ch limit clips inside the narrower info column.
   Let the parent column determine width. */
.album-detail-page .album-description {
    max-width: none !important;
    margin-bottom: 0 !important;
    font-size: 0.92rem !important;
    line-height: 1.65 !important;
    color: rgba(255,255,255,0.58) !important;
    font-style: italic !important;
    border-left: 2px solid rgba(var(--era-accent, 220,38,38), 0.35) !important;
    padding-left: 0.85rem !important;
}

/* ─── 3. ALBUM ACTIONS — tighten gap after desc removed margin  */

.album-detail-page .album-actions {
    margin-top: 1.25rem !important;
    gap: 0.65rem !important;
}

/* ─── 4. NOW-PLAYING TRACK INDICATOR — more prominent ──────── */

@keyframes np-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

.album-detail-page .track-item.track-now-playing {
    background: rgba(var(--era-accent, 220,38,38), 0.07) !important;
    border-left: 3px solid rgba(var(--era-accent, 220,38,38), 0.8) !important;
    border-radius: 10px !important;
}

.album-detail-page .track-item.track-now-playing .track-number {
    color: rgba(var(--era-accent, 220,38,38), 0.9) !important;
    animation: np-pulse 2s ease-in-out infinite !important;
}

.album-detail-page .track-item.track-now-playing.track-is-paused .track-number {
    animation: none !important;
    opacity: 0.6;
}

.album-detail-page .track-item.track-now-playing .track-title span {
    color: rgba(255,255,255,0.95) !important;
    font-weight: 600 !important;
}

/* ─── 5. SECTION HEADER CONSISTENCY ────────────────────────── */

/* All section headings inside album-container get the same
   uppercase micro-label treatment with an era-accent underline. */
.album-detail-page .album-credits__title,
.album-detail-page .album-related-articles > h2 {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: rgba(255,255,255,0.35) !important;
    margin-bottom: 1rem !important;
    position: relative !important;
    padding-bottom: 0.6rem !important;
}

.album-detail-page .album-credits__title::after,
.album-detail-page .album-related-articles > h2::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 2rem !important;
    height: 2px !important;
    border-radius: 1px !important;
    background: rgba(var(--era-accent, 220,38,38), 0.7) !important;
}

/* Related articles subtitle — hide the redundant subtitle in credits */
.album-detail-page .album-credits__subtitle {
    display: none !important;
}

/* ─── 6. ALBUM NAV YEAR — era-accent tinted ─────────────────── */

.album-detail-page .album-nav__year {
    font-size: 0.68rem !important;
    color: rgba(var(--era-accent, 220,38,38), 0.7) !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
    margin-top: 0.1rem !important;
}

/* ─── 7. SHARE/STREAM ROW — responsive stack ────────────────── */

.album-detail-page .album-share-stream__row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1.25rem !important;
    align-items: flex-start !important;
}

.album-detail-page .album-stream-links,
.album-detail-page .album-share-buttons {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.album-detail-page .album-share-buttons {
    flex: 0 0 auto !important;
}

/* ─── 8. TRACK ITEM — fix mobile column collapse ────────────── */

/* On narrow screens the `auto auto` for duration+actions squeezes
   both into minimal width. Give duration a fixed min-width. */
@media (max-width: 600px) {
    .album-detail-page .track-item {
        grid-template-columns: 1.75rem 1fr auto !important;
    }

    /* Duration moves inside track-title area on tiny screens */
    .album-detail-page .track-duration {
        display: none !important;
    }
}

/* ─── 9. ALBUM-INFO H1 — tighten spacing with era badge ─────── */

.album-detail-page .album-info h1 {
    margin-bottom: 0.5rem !important;
    letter-spacing: -0.01em !important;
}

.album-detail-page .album-year-hero {
    margin-bottom: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
}

/* ─── 10. TRACK TOTAL DURATION IN HEADER — dimmer/smaller ───── */

.album-detail-page .album-tracks-total-duration {
    font-size: 0.72rem !important;
    color: rgba(255,255,255,0.3) !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: 0.02em !important;
}

/* ─── REDUCED MOTION ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .album-detail-page .track-item.track-now-playing .track-number {
        animation: none !important;
    }
}

/* ─── MOBILE CENTERING — rating + description align left ─────── */

@media (max-width: 768px) {
    .album-detail-page .album-rating {
        justify-content: center !important;
    }
    .album-detail-page .album-description {
        text-align: left !important;
        border-left-width: 1px !important;
    }
}


/* ██████████████████████████████████████████████████████████████
   2027 CINEMATIC 3D — Full UX / Animation Overhaul
   Spatial design · Kinetic typography · Physical micro-interactions
   ██████████████████████████████████████████████████████████████ */

/* ════════════════════════════════════════════════════════════════
   KEYFRAMES
   ════════════════════════════════════════════════════════════════ */

/* Album title: slow gradient sweep */
@keyframes title-wave {
    0%   { background-position: 0% 50%;   }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%;   }
}

/* Section entrance from below */
@keyframes section-rise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Track row entrance from left */
@keyframes track-enter {
    from { opacity: 0; transform: translateX(-14px); }
    to   { opacity: 1; transform: translateX(0);     }
}

/* Now-playing shimmer sweep across row */
@keyframes row-shimmer {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(220%);  }
}

/* Ambient orb drift */
@keyframes orb-drift-a {
    0%, 100% { transform: translate(0, 0)   scale(1);    opacity: 0.6; }
    33%      { transform: translate(40px, -24px) scale(1.12); opacity: 0.9; }
    66%      { transform: translate(-20px, 18px) scale(0.92); opacity: 0.5; }
}
@keyframes orb-drift-b {
    0%, 100% { transform: translate(0, 0)   scale(1);    opacity: 0.4; }
    40%      { transform: translate(-35px, 22px) scale(1.08); opacity: 0.7; }
    70%      { transform: translate(28px, -14px) scale(0.95); opacity: 0.5; }
}

/* Cover art reveal shine on load */
@keyframes cover-load-shine {
    0%   { left: -80%; }
    100% { left: 130%; }
}

/* Rating star wave */
@keyframes star-pop {
    0%   { transform: scale(1);    }
    40%  { transform: scale(1.45); }
    70%  { transform: scale(0.88); }
    100% { transform: scale(1);    }
}

/* Play-all button heartbeat */
@keyframes play-btn-beat {
    0%, 100% { box-shadow: 0 10px 40px rgba(var(--era-accent,220,38,38), 0.38), inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -2px 0 rgba(0,0,0,0.15); }
    50%       { box-shadow: 0 14px 56px rgba(var(--era-accent,220,38,38), 0.60), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 0 rgba(0,0,0,0.20); }
}

/* Click ripple */
@keyframes ripple-out {
    0%   { transform: scale(0); opacity: 0.45; }
    100% { transform: scale(3.5); opacity: 0;  }
}

/* Nav card edge glow pulse */
@keyframes nav-edge-glow {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 3px 14px rgba(0,0,0,0.35); }
    50%       { box-shadow: inset 0 1px 0 rgba(255,255,255,0.1),  0 6px 24px rgba(0,0,0,0.45), 0 0 0 1px rgba(var(--era-accent,220,38,38),0.1); }
}

/* EQ bars — individual natural rhythms */
@keyframes eq-a { 0%,100%{height:20%} 25%{height:90%} 75%{height:50%} }
@keyframes eq-b { 0%,100%{height:80%} 40%{height:25%} 70%{height:95%} }
@keyframes eq-c { 0%,100%{height:40%} 30%{height:100%} 60%{height:15%} }


/* ════════════════════════════════════════════════════════════════
   1. KINETIC ALBUM TITLE
   ════════════════════════════════════════════════════════════════ */

.album-detail-page .album-info h1 {
    background: linear-gradient(
        110deg,
        rgba(255,255,255,0.95) 0%,
        rgba(var(--era-accent,220,38,38), 0.85) 25%,
        rgba(255,255,255,1) 50%,
        rgba(var(--era-accent,220,38,38), 0.7) 75%,
        rgba(255,255,255,0.95) 100%
    ) !important;
    background-size: 300% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: title-wave 8s ease-in-out infinite !important;
    text-shadow: none !important;
    filter: none !important;
}


/* ════════════════════════════════════════════════════════════════
   2. ALBUM HEADER — AMBIENT FLOATING ORBS
   ════════════════════════════════════════════════════════════════ */

.album-detail-page .album-header {
    isolation: isolate !important;
}

/* Orb A — top-left corner */
.album-detail-page .album-header::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    width: 340px !important;
    height: 340px !important;
    top: -60px !important;
    left: -40px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle,
        rgba(var(--era-accent,220,38,38), 0.14) 0%,
        transparent 70%
    ) !important;
    filter: blur(50px) !important;
    animation: orb-drift-a 9s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Orb B — bottom-right */
.album-detail-page .album-header::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    width: 280px !important;
    height: 280px !important;
    bottom: -40px !important;
    right: 10% !important;
    border-radius: 50% !important;
    background: radial-gradient(circle,
        rgba(var(--era-accent,220,38,38), 0.10) 0%,
        transparent 70%
    ) !important;
    filter: blur(45px) !important;
    animation: orb-drift-b 12s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
}


/* ════════════════════════════════════════════════════════════════
   3. COVER ART — CINEMATIC DEPTH
   ════════════════════════════════════════════════════════════════ */

/* One-shot shine sweep when the cover first loads */
.album-detail-page .album-artwork-large picture {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    display: block !important;
}

.album-detail-page .album-artwork-large picture::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -80% !important;
    width: 55% !important;
    height: 100% !important;
    background: linear-gradient(
        to right,
        transparent,
        rgba(255,255,255,0.2),
        transparent
    ) !important;
    transform: skewX(-18deg) !important;
    animation: cover-load-shine 1.2s 0.4s cubic-bezier(0.4,0,0.2,1) forwards !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* Chromatic glow rings on the cover container */
.album-detail-page .album-artwork-large:not(.vs-turntable-active):not(.vs-extracting) picture img {
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.07),
        0 12px 48px rgba(0,0,0,0.65),
        0 0 80px -12px rgba(var(--era-accent,220,38,38), 0.35) !important;
    transition: transform 0.55s cubic-bezier(0.16,1,0.3,1), box-shadow 0.55s ease !important;
}

.album-detail-page .album-artwork-large:not(.vs-turntable-active):not(.vs-extracting):hover picture img {
    transform: scale(1.04) translateY(-4px) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.1),
        0 24px 64px rgba(0,0,0,0.72),
        0 0 120px -12px rgba(var(--era-accent,220,38,38), 0.55),
        -6px 0 20px rgba(var(--era-accent,220,38,38), 0.08),
         6px 0 20px rgba(40,120,255, 0.06) !important;
}


/* ════════════════════════════════════════════════════════════════
   4. TRACK ENTRANCE — STAGGERED SLIDE-IN
   ════════════════════════════════════════════════════════════════ */

.album-detail-page .track-item {
    animation: track-enter 0.55s cubic-bezier(0.16,1,0.3,1) both !important;
    animation-delay: calc(var(--track-index, 0) * 52ms) !important;
    will-change: transform, opacity !important;
}


/* ════════════════════════════════════════════════════════════════
   5. NOW-PLAYING ROW — SHIMMER + DEPTH
   ════════════════════════════════════════════════════════════════ */

.album-detail-page .track-item.track-now-playing {
    overflow: hidden !important;
}

/* Sweep shimmer across the playing row */
.album-detail-page .track-item.track-now-playing::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(var(--era-accent,220,38,38), 0.07) 40%,
        rgba(255,255,255,0.04) 50%,
        rgba(var(--era-accent,220,38,38), 0.04) 60%,
        transparent 100%
    ) !important;
    animation: row-shimmer 3s linear infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: inherit !important;
}

/* EQ bars: richer individual animations */
.album-detail-page .track-item.track-now-playing .eq-bar:nth-child(1) {
    animation: eq-a 0.62s ease-in-out infinite !important;
    background: linear-gradient(to top, rgba(var(--era-accent,220,38,38),1), rgba(var(--era-accent,220,38,38),0.4)) !important;
    width: 3px !important;
}
.album-detail-page .track-item.track-now-playing .eq-bar:nth-child(2) {
    animation: eq-b 0.80s ease-in-out infinite !important;
    background: linear-gradient(to top, rgba(var(--era-accent,220,38,38),1), rgba(var(--era-accent,220,38,38),0.3)) !important;
    width: 3px !important;
}
.album-detail-page .track-item.track-now-playing .eq-bar:nth-child(3) {
    animation: eq-c 0.50s ease-in-out infinite !important;
    background: linear-gradient(to top, rgba(var(--era-accent,220,38,38),1), rgba(var(--era-accent,220,38,38),0.5)) !important;
    width: 3px !important;
}

.album-detail-page .track-item.track-now-playing.track-is-paused .eq-bar {
    animation-play-state: paused !important;
}


/* ════════════════════════════════════════════════════════════════
   6. TRACK ROWS — 3D PRESS + RIPPLE CONTAINER
   ════════════════════════════════════════════════════════════════ */

.album-detail-page .track-item {
    position: relative !important;
    overflow: hidden !important;
}

/* Physical 3D press on active */
.album-detail-page .track-item:active {
    transform: perspective(600px) translateZ(-4px) scale(0.985) !important;
    transition: transform 80ms !important;
}

/* Ripple element injected by JS */
.album-detail-page .track-ripple {
    position: absolute !important;
    border-radius: 50% !important;
    width: 80px !important;
    height: 80px !important;
    background: rgba(var(--era-accent,220,38,38), 0.18) !important;
    margin-top: -40px !important;
    margin-left: -40px !important;
    pointer-events: none !important;
    animation: ripple-out 0.65s ease-out forwards !important;
    z-index: 1 !important;
}


/* ════════════════════════════════════════════════════════════════
   7. PLAY-ALL BUTTON — HEARTBEAT GLOW
   ════════════════════════════════════════════════════════════════ */

.album-detail-page .album-play-all-btn {
    animation: play-btn-beat 2.8s ease-in-out infinite !important;
}

.album-detail-page .album-play-all-btn:hover,
.album-detail-page .album-play-all-btn:focus-visible {
    animation: none !important;
}


/* ════════════════════════════════════════════════════════════════
   8. CREDIT CARDS — 3D TILT (JS sets transform)
   ════════════════════════════════════════════════════════════════ */

.album-detail-page .album-credit-card {
    transform-style: preserve-3d !important;
    will-change: transform !important;
    transition: transform 180ms cubic-bezier(0.16,1,0.3,1), box-shadow 180ms ease !important;
    cursor: pointer !important;
}

/* Inner content floats forward in 3D space */
.album-detail-page .album-credit-card__avatar {
    transform: translateZ(6px) !important;
    transition: transform 180ms !important;
}
.album-detail-page .album-credit-card__name {
    transform: translateZ(4px) !important;
    display: block !important;
}


/* ════════════════════════════════════════════════════════════════
   9. ALBUM NAV LINKS — 3D TILT + EDGE GLOW
   ════════════════════════════════════════════════════════════════ */

.album-detail-page .album-nav__link {
    transform-style: preserve-3d !important;
    will-change: transform !important;
    animation: nav-edge-glow 4s ease-in-out infinite !important;
    transition: transform 200ms cubic-bezier(0.16,1,0.3,1), box-shadow 200ms ease !important;
}

.album-detail-page .album-nav__link:nth-child(2) {
    animation-delay: 2s !important;
}

/* Thumbnail floats forward */
.album-detail-page .album-nav__thumb {
    transform: translateZ(8px) !important;
    border-radius: 7px !important;
    transition: transform 200ms, box-shadow 200ms !important;
}

.album-detail-page .album-nav__link:hover .album-nav__thumb {
    transform: translateZ(14px) !important;
    box-shadow:
        0 0 0 2px rgba(var(--era-accent,220,38,38), 0.5),
        0 6px 18px rgba(0,0,0,0.5) !important;
}


/* ════════════════════════════════════════════════════════════════
   10. STREAMING LINKS — ICON BOUNCE + BRAND DEPTH
   ════════════════════════════════════════════════════════════════ */

.album-detail-page .streaming-link svg {
    transition: transform 220ms cubic-bezier(0.16,1,0.3,1) !important;
}

.album-detail-page .streaming-link:hover svg {
    transform: scale(1.28) rotate(-4deg) !important;
}

.album-detail-page .streaming-link:active svg {
    transform: scale(0.9) !important;
}


/* ════════════════════════════════════════════════════════════════
   11. RATING STARS — CASCADE WAVE HOVER
   ════════════════════════════════════════════════════════════════ */

.album-detail-page .stars-widget:hover .star-btn {
    animation: star-pop 0.45s cubic-bezier(0.16,1,0.3,1) both !important;
}

.album-detail-page .stars-widget:hover .star-btn:nth-child(1) { animation-delay: 0ms !important; }
.album-detail-page .stars-widget:hover .star-btn:nth-child(2) { animation-delay: 45ms !important; }
.album-detail-page .stars-widget:hover .star-btn:nth-child(3) { animation-delay: 90ms !important; }
.album-detail-page .stars-widget:hover .star-btn:nth-child(4) { animation-delay: 135ms !important; }
.album-detail-page .stars-widget:hover .star-btn:nth-child(5) { animation-delay: 180ms !important; }


/* ════════════════════════════════════════════════════════════════
   12. SECTION SCROLL REVEAL (.is-revealed added by JS)
   ════════════════════════════════════════════════════════════════ */

.album-detail-page .album-tracks-section,
.album-detail-page .album-credits,
.album-detail-page .album-share-stream,
.album-detail-page .album-related-articles,
.album-detail-page .album-nav {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1) !important;
    will-change: opacity, transform !important;
}

.album-detail-page .album-tracks-section.is-revealed,
.album-detail-page .album-credits.is-revealed,
.album-detail-page .album-share-stream.is-revealed,
.album-detail-page .album-related-articles.is-revealed,
.album-detail-page .album-nav.is-revealed {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Cascade delays so sections reveal one after another */
.album-detail-page .album-credits.is-revealed     { transition-delay: 0.05s !important; }
.album-detail-page .album-share-stream.is-revealed { transition-delay: 0.1s !important; }
.album-detail-page .album-related-articles.is-revealed { transition-delay: 0.15s !important; }
.album-detail-page .album-nav.is-revealed          { transition-delay: 0.2s !important; }


/* ════════════════════════════════════════════════════════════════
   13. RELATED ARTICLES — DEPTH HOVER TILT (3D)
   ════════════════════════════════════════════════════════════════ */

.album-detail-page .related-article-card {
    transform-style: preserve-3d !important;
    will-change: transform !important;
    transition: transform 220ms cubic-bezier(0.16,1,0.3,1), box-shadow 220ms ease !important;
    display: block !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}

/* JS will set --rx / --ry custom properties for mouse-tracking tilt */
.album-detail-page .related-article-card {
    transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(var(--tz, 0px)) !important;
}


/* ════════════════════════════════════════════════════════════════
   14. WAVEFORM — ERA COLOR + PLAYING STATE ENHANCEMENT
   ════════════════════════════════════════════════════════════════ */

.album-detail-page .waveform-bar {
    fill: rgba(var(--era-accent, 220,38,38), 0.12) !important;
}

/* Bars become more vivid when any track is playing */
.album-detail-page.album-is-playing .waveform-bar {
    fill: rgba(var(--era-accent, 220,38,38), 0.25) !important;
    transition: fill 0.8s ease !important;
}


/* ════════════════════════════════════════════════════════════════
   15. SOCIAL SHARE BUTTONS — 3D PRESS
   ════════════════════════════════════════════════════════════════ */

.album-detail-page .album-share-btn-social {
    transition: transform 150ms cubic-bezier(0.16,1,0.3,1), background 180ms, box-shadow 180ms !important;
}

.album-detail-page .album-share-btn-social:hover {
    transform: translateY(-3px) scale(1.08) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.35) !important;
}

.album-detail-page .album-share-btn-social:active {
    transform: translateY(0) scale(0.94) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3) !important;
}


/* ════════════════════════════════════════════════════════════════
   REDUCED MOTION — KILL ALL ANIMATIONS CLEANLY
   ════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .album-detail-page .album-info h1 {
        animation: none !important;
        -webkit-text-fill-color: var(--text-primary, #e0e0f0) !important;
        background: none !important;
    }
    .album-detail-page .album-header::before,
    .album-detail-page .album-header::after,
    .album-detail-page .album-artwork-large picture::before,
    .album-detail-page .album-play-all-btn,
    .album-detail-page .album-nav__link,
    .album-detail-page .track-item,
    .album-detail-page .track-item.track-now-playing::after,
    .album-detail-page .stars-widget:hover .star-btn {
        animation: none !important;
        transition: none !important;
    }
    .album-detail-page .album-tracks-section,
    .album-detail-page .album-credits,
    .album-detail-page .album-share-stream,
    .album-detail-page .album-related-articles,
    .album-detail-page .album-nav {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   TIER 2 — HOLOGRAPHIC, SPECULAR & DEEP 3D  (v55)
   ════════════════════════════════════════════════════════════════ */

/* ── Holographic cover overlay (JS-injected .holo-overlay) ──── */
.album-detail-page .holo-overlay {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: conic-gradient(
        from var(--holo-angle, 0deg)
        at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(255,0,128,0)        0deg,
        rgba(255,0,128,0.09)     30deg,
        rgba(0,255,230,0.08)     60deg,
        rgba(140,0,255,0.09)     90deg,
        rgba(255,240,0,0.06)     120deg,
        rgba(0,255,140,0.08)     150deg,
        rgba(255,140,0,0.06)     180deg,
        rgba(0,140,255,0.09)     210deg,
        rgba(220,0,80,0.05)      270deg,
        rgba(255,0,128,0)        360deg
    );
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 6;
    will-change: opacity;
}

.album-detail-page .album-artwork-large:hover .holo-overlay {
    opacity: 1;
}

/* ── Era year badge iridescent shimmer ───────────────────────── */
@keyframes iridescent-shift {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}

.album-detail-page .album-year-hero__era {
    position: relative;
    overflow: hidden;
}

.album-detail-page .album-year-hero__era::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        rgba(255,200,0,0.28)   0%,
        rgba(255,0,180,0.18)   20%,
        rgba(0,220,255,0.2)    40%,
        rgba(100,255,100,0.14) 60%,
        rgba(255,100,0,0.18)   80%,
        rgba(255,200,0,0.28)   100%
    );
    background-size: 300% 100%;
    animation: iridescent-shift 3.5s ease-in-out infinite;
    mix-blend-mode: screen;
    pointer-events: none;
    border-radius: inherit;
}

/* ── Glass panel specular inner light (--panel-x/y set by JS) ─ */
.album-detail-page .album-tracks-section::after,
.album-detail-page .album-credits::after,
.album-detail-page .album-share-stream::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        210px circle at calc(var(--panel-x, 50) * 1%) calc(var(--panel-y, 8) * 1%),
        rgba(255,255,255,0.056) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
    transition: background 0.1s linear;
}

.album-detail-page .album-credits,
.album-detail-page .album-share-stream {
    position: relative;
    overflow: hidden;
}

/* ── Play-All particle burst ─────────────────────────────────── */
@keyframes particle-fly {
    0%   { transform: translate(0, 0) scale(1);   opacity: 0.95; }
    70%  { opacity: 0.5; }
    100% { transform: translate(var(--px, 0px), var(--py, -60px)) scale(0.1);
           opacity: 0; }
}

.play-particle {
    position: fixed;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgb(var(--era-accent, 220, 38, 38));
    pointer-events: none;
    z-index: 9999;
    animation: particle-fly 0.72s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    box-shadow: 0 0 8px 2px rgba(var(--era-accent, 220, 38, 38), 0.45);
    transform-origin: center;
    margin-left: -3px;
    margin-top: -3px;
}

/* ── Cursor ambient glow ─────────────────────────────────────── */
.album-cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(var(--era-accent, 220, 38, 38), 0.09) 0%,
        rgba(var(--era-accent, 220, 38, 38), 0.03) 45%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
    transform: translate(-170px, -170px);
    opacity: 0;
    transition: opacity 0.5s ease;
    will-change: transform;
}

.album-cursor-glow.glow-active {
    opacity: 1;
}

/* ── Lyrics panel 3D fold-in entrance ───────────────────────── */
.album-detail-page .track-lyrics-inner {
    transform-origin: top center;
    transform: translateY(-6px) scale(0.99);
    opacity: 0;
    transition:
        transform 0.48s cubic-bezier(0.16, 1, 0.3, 1),
        opacity   0.32s ease;
}

.album-detail-page .track-lyrics-wrapper.is-open .track-lyrics-inner {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
}

/* ── Credit card entrance stagger (--card-index set by JS) ─── */
@keyframes credit-card-enter {
    from { opacity: 0; transform: translateY(18px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.album-detail-page .album-credit-card {
    animation: credit-card-enter 0.52s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--card-index, 0) * 55ms);
}

/* ── Track section panel tilt (--ts-rx/ry set by JS) ────────── */
.album-detail-page .album-tracks-section.is-revealed {
    transform:
        perspective(1600px)
        rotateX(var(--ts-rx, 0deg))
        rotateY(var(--ts-ry, 0deg)) !important;
    transition:
        transform 0.14s linear,
        opacity   0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ── Reduced motion: tier 2 overrides ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .album-detail-page .album-year-hero__era::after,
    .album-cursor-glow,
    .play-particle,
    .album-detail-page .holo-overlay {
        animation: none !important;
        opacity: 0 !important;
    }
    .album-detail-page .track-lyrics-inner {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }
    .album-detail-page .album-tracks-section.is-revealed {
        transform: translateY(0) !important;
    }
    .album-detail-page .album-credit-card {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   TIER 3 — FUNCTIONAL UX: COLOR ADAPT, DURATION BARS, TOAST (v56)
   ════════════════════════════════════════════════════════════════ */

/* ── Track duration proportion bar ───────────────────────────── */
.album-detail-page .track-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: var(--track-pct, 0%);
    background: linear-gradient(
        to right,
        rgba(var(--era-accent, 220,38,38), 0.35),
        rgba(var(--era-accent, 220,38,38), 0.12)
    );
    border-radius: 0 1px 1px 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease, width 0.4s cubic-bezier(0.16,1,0.3,1);
    z-index: 0;
}

.album-detail-page .track-item:hover::after {
    opacity: 1;
}

.album-detail-page .track-item.track-now-playing::after {
    /* shimmer overrides the bar on the active track — already defined above */
}

/* Fade-in the bars once the section is revealed */
.album-detail-page .album-tracks-section.is-revealed .track-item::after {
    opacity: 0.35;
}

.album-detail-page .album-tracks-section.is-revealed .track-item:hover::after {
    opacity: 0.85;
}

/* ── Scroll-to-now-playing flash ─────────────────────────────── */
@keyframes scroll-flash {
    0%   { box-shadow: 0 0 0 0 rgba(var(--era-accent, 220,38,38), 0.4); }
    40%  { box-shadow: 0 0 0 6px rgba(var(--era-accent, 220,38,38), 0.15); }
    100% { box-shadow: 0 0 0 0 rgba(var(--era-accent, 220,38,38), 0); }
}

.album-detail-page .track-item.scroll-flashed {
    animation: scroll-flash 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ── Keyboard focus ring — themed ────────────────────────────── */
.album-detail-page .track-item:focus-visible {
    outline: 2px solid rgba(var(--era-accent, 220,38,38), 0.7) !important;
    outline-offset: -2px !important;
    box-shadow: 0 0 0 4px rgba(var(--era-accent, 220,38,38), 0.12) !important;
}

/* ── Toast notification ───────────────────────────────────────── */
@keyframes toast-in-out {
    0%   { transform: translateX(-50%) translateY(14px); opacity: 0; }
    12%  { transform: translateX(-50%) translateY(0);    opacity: 1; }
    75%  { transform: translateX(-50%) translateY(0);    opacity: 1; }
    100% { transform: translateX(-50%) translateY(-8px); opacity: 0; }
}

.album-toast {
    position: fixed;
    bottom: 96px;
    left: 50%;
    transform: translateX(-50%) translateY(14px);
    background: rgba(16, 16, 24, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    color: #e4e4f0;
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 0.5rem 1.15rem;
    border-radius: 32px;
    box-shadow:
        0 4px 24px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.07);
    pointer-events: none;
    z-index: 10000;
    white-space: nowrap;
    animation: toast-in-out 2.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.album-toast .toast-icon {
    display: inline-block;
    margin-right: 0.4em;
    font-style: normal;
    opacity: 0.8;
}

/* ── Keyboard shortcuts hint badge ─────────────────────────────
   Shown on track rows when the user is navigating via keyboard  */
.album-detail-page .track-item:focus-visible .track-number::after {
    content: '↵';
    position: absolute;
    right: -1.6em;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.65em;
    opacity: 0.45;
    pointer-events: none;
}

.album-detail-page .track-number-wrap {
    position: relative;
}

/* ── Copy-link button active state ───────────────────────────── */
.album-detail-page .album-share-btn-social--copy.link-copied {
    background: rgba(var(--era-accent, 220,38,38), 0.18) !important;
    border-color: rgba(var(--era-accent, 220,38,38), 0.45) !important;
    color: rgba(var(--era-accent, 220,38,38), 1) !important;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

/* ── Dominant-color orb: uses --album-dominant-rgb when set ─── */
.album-detail-page.has-dominant-color .album-cursor-glow {
    background: radial-gradient(
        circle,
        rgba(var(--album-dominant-rgb, var(--era-accent, 220,38,38)), 0.09) 0%,
        rgba(var(--album-dominant-rgb, var(--era-accent, 220,38,38)), 0.03) 45%,
        transparent 70%
    );
}

/* ── Tier 3 reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .album-detail-page .track-item::after,
    .album-detail-page .track-item.scroll-flashed {
        animation: none !important;
        transition: none !important;
    }
    .album-toast {
        animation: none !important;
        opacity: 1;
        transform: translateX(-50%);
    }
}

/* ════════════════════════════════════════════════════════════════
   TIER 4 — LIVE PROGRESS, ALBUM BAR, AGE BADGE, LOADING (v57)
   ════════════════════════════════════════════════════════════════ */

/* ── Per-track live sweep bar (JS-injected .track-row-progress) ─ */
.album-detail-page .track-row-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: var(--track-row-pct, 0%);
    background: linear-gradient(
        to right,
        rgba(var(--era-accent, 220,38,38), 0.9),
        rgba(var(--era-accent, 220,38,38), 0.55)
    );
    border-radius: 0 2px 2px 0;
    pointer-events: none;
    z-index: 3;
    box-shadow: 0 0 6px rgba(var(--era-accent, 220,38,38), 0.5);
    transition: width 0.55s linear;
}

/* Bright tip glow at the leading edge */
.album-detail-page .track-row-progress::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(var(--era-accent, 220,38,38), 1);
    box-shadow: 0 0 8px 3px rgba(var(--era-accent, 220,38,38), 0.7);
}

/* ── Album-wide progress bar (JS-injected .album-progress-wrap) ─ */
.album-detail-page .album-progress-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255,255,255,0.04);
    border-radius: 3px 3px 0 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

.album-detail-page .album-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--album-pct, 0%);
    background: linear-gradient(
        to right,
        rgba(var(--era-accent, 220,38,38), 0.7) 0%,
        rgba(var(--era-accent, 220,38,38), 0.45) 100%
    );
    transition: width 0.55s linear;
    border-radius: inherit;
}

/* ── "Released X years ago" badge ────────────────────────────── */
.album-detail-page .album-age-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 0.45em;
    padding: 0.1em 0.5em;
    border-radius: 6px;
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(var(--era-accent, 220,38,38), 0.85);
    background: rgba(var(--era-accent, 220,38,38), 0.1);
    border: 1px solid rgba(var(--era-accent, 220,38,38), 0.22);
    vertical-align: middle;
    line-height: 1.4;
    cursor: default;
}

/* ── Audio loading state on play button ──────────────────────── */
@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

.album-detail-page .track-play-btn.track-btn-loading {
    pointer-events: none;
    opacity: 0.65;
}

.album-detail-page .track-play-btn.track-btn-loading svg,
.album-detail-page .track-play-btn.track-btn-loading .icon {
    animation: btn-spin 0.75s linear infinite;
}

/* ── Tier 4 reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .album-detail-page .track-row-progress {
        transition: none !important;
    }
    .album-detail-page .album-progress-fill {
        transition: none !important;
    }
    .album-detail-page .track-play-btn.track-btn-loading svg,
    .album-detail-page .track-play-btn.track-btn-loading .icon {
        animation: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   TIER 5 — PARALLAX, FILTER, UP-NEXT, STAGGER FIXES  (v58)
   ════════════════════════════════════════════════════════════════ */

/* ── Backdrop parallax prep ──────────────────────────────────── */
.album-detail-page .album-backdrop {
    will-change: transform;
    transition: transform 0.06s linear;
}

/* ── Credit-card stagger: fire only when section is revealed ─── */
/* Override the v55 rule which fires immediately */
.album-detail-page .album-credit-card {
    animation: none !important;  /* cancel unconditional animation */
    opacity: 0;
    transform: translateY(16px) scale(0.96);
    transition: none;
}

.album-detail-page .album-credits.is-revealed .album-credit-card {
    animation: credit-card-enter 0.52s cubic-bezier(0.16,1,0.3,1) both !important;
    animation-delay: calc(var(--card-index, 0) * 60ms) !important;
}

/* ── Related article card stagger ────────────────────────────── */
@keyframes article-card-enter {
    from { opacity: 0; transform: translateY(22px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.album-detail-page .related-article-card {
    opacity: 0;
    transform: translateY(22px) scale(0.97);
}

.album-detail-page .album-related-articles.is-revealed .related-article-card {
    animation: article-card-enter 0.55s cubic-bezier(0.16,1,0.3,1) both;
    animation-delay: calc(var(--card-index, 0) * 75ms);
}

/* ── Streaming links stagger ─────────────────────────────────── */
@keyframes link-enter {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}

.album-detail-page .streaming-link {
    opacity: 0;
}

.album-detail-page .album-share-stream.is-revealed .streaming-link {
    animation: link-enter 0.45s cubic-bezier(0.16,1,0.3,1) both;
    animation-delay: calc(var(--card-index, 0) * 65ms);
}

/* ── Track search / filter ───────────────────────────────────── */
.album-detail-page .track-filter-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem 0.7rem;
    position: relative;
}

.album-detail-page .track-filter-input {
    flex: 1;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: var(--text-primary, #e0e0f0);
    font-size: 0.85rem;
    padding: 0.42rem 0.85rem 0.42rem 2rem;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.35)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.6rem center;
    -webkit-appearance: none;
    appearance: none;
}

/* Remove browser default search-cancel button */
.album-detail-page .track-filter-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.album-detail-page .track-filter-input:focus {
    border-color: rgba(var(--era-accent, 220,38,38), 0.5);
    background-color: rgba(255,255,255,0.08);
}

.album-detail-page .track-filter-input::placeholder {
    color: rgba(255,255,255,0.3);
}

.album-detail-page .track-filter-clear {
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    line-height: 1;
    transition: color 0.15s;
    flex-shrink: 0;
}

.album-detail-page .track-filter-clear:hover {
    color: rgba(255,255,255,0.85);
}

.album-detail-page .track-filter-no-results {
    text-align: center;
    padding: 1.5rem;
    color: rgba(255,255,255,0.35);
    font-size: 0.88rem;
    font-style: italic;
}

/* ── "Up next" banner ────────────────────────────────────────── */
@keyframes up-next-in {
    from { transform: translateX(-50%) translateY(8px); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0);   opacity: 1; }
}

.up-next-banner {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: rgba(12, 12, 20, 0.9);
    border: 1px solid rgba(var(--era-accent, 220,38,38), 0.3);
    border-radius: 28px;
    color: rgba(255,255,255,0.82);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 0.45rem 1.1rem;
    white-space: nowrap;
    pointer-events: none;
    z-index: 9998;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        0 4px 20px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.06);
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1);
}

.up-next-banner.up-next-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Coloured left accent line */
.up-next-banner::before {
    content: '';
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 55%;
    background: rgba(var(--era-accent, 220,38,38), 0.85);
    border-radius: 2px;
}

/* ── Tier 5 reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .album-detail-page .album-credit-card,
    .album-detail-page .related-article-card,
    .album-detail-page .streaming-link {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .album-detail-page .album-credits.is-revealed .album-credit-card,
    .album-detail-page .album-related-articles.is-revealed .related-article-card,
    .album-detail-page .album-share-stream.is-revealed .streaming-link {
        animation: none !important;
    }
    .album-detail-page .album-backdrop {
        will-change: auto;
        transition: none !important;
    }
    .up-next-banner {
        transition: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   TIER 6 — STICKY BAR, AUDIO VIZ, HASH DEEP-LINK, TIME-LEFT (v59)
   ════════════════════════════════════════════════════════════════ */

/* ── Sticky album mini-bar ────────────────────────────────────── */
.album-sticky-bar {
    position: fixed;
    top: var(--header-height, 80px);
    left: 0;
    right: 0;
    height: 52px;
    z-index: 89;
    background: rgba(6, 6, 14, 0.94);
    backdrop-filter: blur(24px) saturate(1.8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    gap: 0.9rem;
    transform: translateY(-108%);
    transition: transform 0.38s cubic-bezier(0.16,1,0.3,1);
    box-shadow: 0 4px 24px rgba(0,0,0,0.55);
    pointer-events: none;
    color: var(--text-primary, #e0e0f0);
    will-change: transform;
}

.album-sticky-bar.is-visible {
    transform: translateY(0);
    pointer-events: auto;
}

.album-sticky-bar__cover {
    width: 36px;
    height: 36px;
    border-radius: 5px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.55);
    display: block;
}

.album-sticky-bar__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.06rem;
    overflow: hidden;
}

.album-sticky-bar__album {
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.38;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.album-sticky-bar__track {
    font-size: 0.87rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    opacity: 0.38;
    transition: opacity 0.3s ease;
}

.album-sticky-bar.is-playing .album-sticky-bar__track {
    opacity: 1;
    color: rgba(var(--era-accent, 220,38,38), 0.92);
}

.album-sticky-bar__play {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(var(--era-accent, 220,38,38), 0.13);
    border: 1px solid rgba(var(--era-accent, 220,38,38), 0.32);
    color: rgba(var(--era-accent, 220,38,38), 1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s, transform 0.14s;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
}

.album-sticky-bar__play:hover {
    background: rgba(var(--era-accent, 220,38,38), 0.26);
    transform: scale(1.1);
}

/* ── Web Audio frequency visualizer canvas ───────────────────── */
.album-detail-page .track-viz-canvas {
    position: absolute;
    right: calc(var(--track-actions-width, 88px) + 12px);
    top: 50%;
    transform: translateY(-50%);
    width: 76px;
    height: 22px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 3px;
    z-index: 1;
}

.album-detail-page .track-item.track-now-playing .track-viz-canvas {
    opacity: 0.75;
}

/* ── Track time-remaining label ──────────────────────────────── */
.album-detail-page .track-time-remaining {
    display: inline-block;
    font-size: 0.73rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: rgba(var(--era-accent, 220,38,38), 0.8);
    margin-left: 0.4em;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

.album-detail-page .track-item.track-now-playing .track-time-remaining {
    opacity: 1;
}

/* ── Hash-targeted track highlight pulse ─────────────────────── */
@keyframes hash-pulse {
    0%  { outline-color: rgba(var(--era-accent, 220,38,38), 0.8); outline-offset: 0; }
    50% { outline-color: rgba(var(--era-accent, 220,38,38), 0.35); outline-offset: 4px; }
    100%{ outline-color: rgba(var(--era-accent, 220,38,38), 0); outline-offset: 6px; }
}

.album-detail-page .track-item.hash-targeted {
    animation: hash-pulse 1.6s ease-out forwards;
    outline: 2px solid rgba(var(--era-accent, 220,38,38), 0.8);
    outline-offset: 0;
}

/* ── Track number deep-link cursor ──────────────────────────────
   JS sets cursor:pointer + title on .track-number when clicked   */
.album-detail-page .track-number-wrap:has(.track-number[data-hash-link]) {
    cursor: pointer;
}

/* ── Tier 6 reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .album-sticky-bar {
        transition: none !important;
    }
    .album-detail-page .track-viz-canvas,
    .album-detail-page .track-time-remaining {
        transition: none !important;
    }
    .album-detail-page .track-item.hash-targeted {
        animation: none !important;
        outline: 2px solid rgba(var(--era-accent, 220,38,38), 0.6) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALBUM PAGE – TIER 7 ENHANCEMENTS  (v60)
   30. Per-track static waveform bars (seeded decorative heights)
   31. Favorite / heart toggle per track (localStorage persistence)
   32. Touch swipe on artwork — directional flash + swipe hints
   33. Keyboard seek ±5s toast
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 30. Static waveform bars ──────────────────────────────────── */
.album-detail-page .track-waveform {
    position: absolute;
    right: calc(var(--track-actions-width, 88px) + 12px);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 22px;
    pointer-events: none;
    opacity: 0.16;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.album-detail-page .track-item:hover .track-waveform {
    opacity: 0.42;
}

/* Hidden when real audio-viz canvas is present on the now-playing row */
.album-detail-page .track-item.track-now-playing .track-waveform {
    opacity: 0;
    pointer-events: none;
}

.album-detail-page .track-waveform span {
    display: block;
    width: 3px;
    flex-shrink: 0;
    border-radius: 2px 2px 1px 1px;
    height: calc(3px + var(--wh, 0.5) * 16px);
    background: rgba(var(--era-accent, 220,38,38), 0.55);
    transform-origin: bottom center;
}

@keyframes wf-dance {
    0%, 100% { transform: scaleY(0.35); }
    50%       { transform: scaleY(1.1); }
}

.album-detail-page .track-item:hover .track-waveform span {
    animation: wf-dance calc(0.72s + var(--bi, 0) * 0.03s) ease-in-out infinite;
    animation-delay: calc(var(--bi, 0) * 52ms);
}

/* ── 31. Favorite/heart button ─────────────────────────────────── */
.album-detail-page .track-fav-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: rgba(255, 255, 255, 0.2);
    transition: color 0.22s ease, transform 0.22s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    margin: 0 1px;
}

.album-detail-page .track-fav-btn svg {
    width: 15px;
    height: 15px;
    pointer-events: none;
    transition: fill 0.22s ease;
}

.album-detail-page .track-fav-btn:hover {
    color: rgba(var(--era-accent, 220,38,38), 0.75);
    transform: scale(1.18);
}

.album-detail-page .track-fav-btn.is-fav {
    color: rgba(var(--era-accent, 220,38,38), 0.95);
}

.album-detail-page .track-fav-btn.is-fav svg {
    fill: rgba(var(--era-accent, 220,38,38), 0.92);
}

@keyframes fav-pop {
    0%   { transform: scale(1) rotate(0deg); }
    35%  { transform: scale(1.55) rotate(-10deg); }
    65%  { transform: scale(0.88) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.album-detail-page .track-fav-btn.fav-popping {
    animation: fav-pop 0.44s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── 32. Touch swipe hints + artwork flash ─────────────────────── */
.album-detail-page .swipe-hint {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(0.7);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(var(--era-accent, 220,38,38), 0.3);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    pointer-events: none;
    opacity: 0;
    z-index: 12;
    transition: opacity 0.15s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.album-detail-page .swipe-hint.swipe-hint-next { right: 14px; }
.album-detail-page .swipe-hint.swipe-hint-prev { left: 14px; }

.album-detail-page .swipe-hint.swipe-active {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

@keyframes artwork-swipe-left {
    0%   { transform: translateX(0); }
    28%  { transform: translateX(-11px); }
    100% { transform: translateX(0); }
}

@keyframes artwork-swipe-right {
    0%   { transform: translateX(0); }
    28%  { transform: translateX(11px); }
    100% { transform: translateX(0); }
}

.album-detail-page .album-artwork-large.swiped-left  { animation: artwork-swipe-left  0.38s ease-out; }
.album-detail-page .album-artwork-large.swiped-right { animation: artwork-swipe-right 0.38s ease-out; }

/* ── 33. Keyboard seek toast ───────────────────────────────────── */
.album-seek-toast {
    position: fixed;
    bottom: 152px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 10, 10, 0.9);
    color: rgba(var(--era-accent, 220,38,38), 0.96);
    backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid rgba(var(--era-accent, 220,38,38), 0.24);
    border-radius: 22px;
    padding: 5px 18px;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: 0.04em;
    pointer-events: none;
    z-index: 9100;
    animation: toast-in-out 1.3s ease forwards;
    white-space: nowrap;
}

/* ── Tier 7 reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .album-detail-page .track-item:hover .track-waveform span { animation: none !important; }
    .album-detail-page .track-fav-btn.fav-popping             { animation: none !important; }
    .album-detail-page .album-artwork-large.swiped-left,
    .album-detail-page .album-artwork-large.swiped-right      { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALBUM PAGE – TIER 8 ENHANCEMENTS  (v61)
   34. Listened/played track indicator (dot on track number)
   35. Ambient / immersive fullscreen cover mode (double-click)
   36. Track row right-click context menu
   37. Keyboard shortcuts help overlay
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 34. Listened-dot on track number ─────────────────────────── */
.album-detail-page .track-listened-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(var(--era-accent, 220,38,38), 0.65);
    vertical-align: middle;
    margin-left: 4px;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
}

@keyframes dot-appear {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.album-detail-page .track-listened-dot.dot-new {
    animation: dot-appear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── 35. Ambient / immersive cover overlay ─────────────────────── */
.ambient-overlay {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.48s cubic-bezier(0.16, 1, 0.3, 1);
}

.ambient-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.ambient-overlay__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(44px) saturate(1.6) brightness(0.28);
    transform: scale(1.1);
}

.ambient-overlay__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    z-index: 1;
    padding: 20px;
    text-align: center;
}

.ambient-overlay__cover {
    width: min(72vmin, 440px);
    height: min(72vmin, 440px);
    object-fit: cover;
    border-radius: 8px;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.75),
        0 0 0 1px rgba(255, 255, 255, 0.07);
    transform: scale(0.9);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.ambient-overlay.is-open .ambient-overlay__cover {
    transform: scale(1);
}

.ambient-overlay__title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

.ambient-overlay__track {
    font-size: 0.88rem;
    color: rgba(var(--era-accent, 220,38,38), 0.9);
    min-height: 1.3em;
    transition: opacity 0.25s;
}

.ambient-overlay__hint {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 4px;
}

.ambient-overlay__close {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.65);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, transform 0.2s;
    z-index: 2;
}

.ambient-overlay__close:hover {
    background: rgba(var(--era-accent, 220,38,38), 0.22);
    color: #fff;
    transform: scale(1.1) rotate(90deg);
}

/* Double-click hint on artwork — injected span */
.album-detail-page .ambient-hint {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.38);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    white-space: nowrap;
    z-index: 5;
}

.album-detail-page .album-artwork-large:hover .ambient-hint {
    opacity: 1;
}

/* ── 36. Track context menu ────────────────────────────────────── */
.track-ctx-menu {
    position: fixed;
    z-index: 1400;
    min-width: 172px;
    background: rgba(14, 14, 14, 0.94);
    backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 6px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.94) translateY(-4px);
    transform-origin: top left;
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.track-ctx-menu.ctx-open {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0);
}

.ctx-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.83rem;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.ctx-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.7;
}

.ctx-item:hover {
    background: rgba(var(--era-accent, 220,38,38), 0.14);
    color: rgba(var(--era-accent, 220,38,38), 0.95);
}

.ctx-item:hover svg { opacity: 1; }

.ctx-separator {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 4px 0;
}

/* ── 37. Keyboard shortcuts overlay ───────────────────────────── */
.shortcuts-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.shortcuts-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.shortcuts-panel {
    background: rgba(16, 16, 16, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 28px 32px;
    max-width: 420px;
    width: calc(100vw - 40px);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65);
    transform: scale(0.94) translateY(8px);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.shortcuts-overlay.is-open .shortcuts-panel {
    transform: scale(1) translateY(0);
}

.shortcuts-panel__title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(var(--era-accent, 220,38,38), 0.85);
    margin-bottom: 20px;
}

.shortcuts-list {
    display: grid;
    gap: 10px;
}

.shortcut-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.7);
}

.shortcut-keys {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.shortcut-keys kbd {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 5px;
    padding: 2px 7px;
    font-size: 0.76rem;
    font-family: inherit;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}

.shortcuts-panel__close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.15s;
}

.shortcuts-panel__close:hover { color: rgba(255, 255, 255, 0.85); }

.shortcuts-panel { position: relative; }

/* ── Tier 8 reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ambient-overlay { transition: opacity 0.2s ease !important; }
    .ambient-overlay__cover { transition: none !important; transform: none !important; }
    .ambient-overlay.is-open .ambient-overlay__cover { transform: scale(1) !important; }
    .track-ctx-menu { transition: opacity 0.15s ease !important; transform: none !important; }
    .shortcuts-panel { transition: none !important; transform: none !important; }
    .album-detail-page .track-listened-dot.dot-new { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALBUM PAGE – TIER 9 ENHANCEMENTS  (v62)
   38. Album completion badge (all tracks listened)
   39. Live album stats footer (listened count, favorites, total time)
   40. Auto-collapse open lyrics when a different track starts playing
   41. Dynamic browser tab title while playing (♫ Track — Artist | Album)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 38. Album completion badge ───────────────────────────────── */
@keyframes badge-drop {
    from { transform: translateY(-20px) scale(0.8); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes badge-shimmer {
    0%, 100% { background-position: -200% center; }
    50%       { background-position:  200% center; }
}

.album-complete-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 8px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    background: linear-gradient(
        110deg,
        rgba(var(--era-accent, 220,38,38), 0.85) 0%,
        rgba(var(--era-accent, 220,38,38), 0.5) 40%,
        rgba(255, 200, 80, 0.65) 60%,
        rgba(var(--era-accent, 220,38,38), 0.85) 100%
    );
    background-size: 300% 100%;
    animation:
        badge-drop    0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards,
        badge-shimmer 3.5s ease-in-out 0.5s infinite;
    box-shadow: 0 2px 12px rgba(var(--era-accent, 220,38,38), 0.4);
    margin-left: 10px;
    vertical-align: middle;
    white-space: nowrap;
}

.album-complete-badge__icon {
    font-style: normal;
    font-size: 1em;
}

/* ── 39. Live album stats footer ──────────────────────────────── */
.album-stats-footer {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 8px;
    padding: 0 2px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.38);
    user-select: none;
}

.album-stats-footer__item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    transition: color 0.25s ease;
}

.album-stats-footer__item:first-child { padding-left: 0; }
.album-stats-footer__item:last-child  { border-right: none; }

.album-stats-footer__item svg {
    width: 12px;
    height: 12px;
    opacity: 0.55;
    flex-shrink: 0;
}

.album-stats-footer__val {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.25s ease;
}

.album-stats-footer__item.has-value .album-stats-footer__val {
    color: rgba(var(--era-accent, 220,38,38), 0.85);
}

/* ── 40. Lyrics auto-collapse — no new CSS needed (uses existing rules) ── */

/* ── 41. Dynamic tab title — no CSS needed (JS only) ─────────── */

/* ── Tier 9 reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .album-complete-badge {
        animation: badge-drop 0.2s ease forwards !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALBUM PAGE – TIER 10 ENHANCEMENTS  (v63)
   42. Track duration mini bar chart (click-to-play)
   43. Sticky bar: prev/next buttons + circular progress ring
   44. Playback position memory + resume banner
   45. Now-playing track left-edge pulse
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 42. Track duration chart ──────────────────────────────────── */
.album-detail-page .track-dur-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 6px 2px 2px;
    margin-bottom: 8px;
    border-radius: 6px;
    overflow: hidden;
}

.album-detail-page .track-dur-bar {
    height: var(--bar-h, 12px);
    min-height: 4px;
    min-width: 4px;
    max-height: 26px;
    flex: var(--bar-flex, 1);
    border-radius: 2px 2px 1px 1px;
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: background 0.18s, transform 0.14s;
    position: relative;
}

.album-detail-page .track-dur-bar:hover {
    background: rgba(var(--era-accent, 220,38,38), 0.45);
    transform: scaleY(1.2);
    transform-origin: bottom;
}

.album-detail-page .track-dur-bar.is-active {
    background: rgba(var(--era-accent, 220,38,38), 0.72);
}

.album-detail-page .track-dur-bar[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 10, 10, 0.9);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.68rem;
    padding: 3px 7px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 50;
}

/* ── 43. Sticky bar: prev/next + ring ─────────────────────────── */
.album-sticky-bar__prev,
.album-sticky-bar__next {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.18s, transform 0.14s;
    flex-shrink: 0;
    padding: 0;
}

.album-sticky-bar__prev:hover,
.album-sticky-bar__next:hover {
    color: rgba(var(--era-accent, 220,38,38), 0.9);
    transform: scale(1.15);
}

.album-sticky-bar__prev svg,
.album-sticky-bar__next svg { width: 14px; height: 14px; }

/* Ring SVG overlay on the play button */
.album-sticky-bar__play {
    position: relative; /* needed for ring overlay */
}

.sbar-ring {
    position: absolute;
    inset: -5px;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    pointer-events: none;
    overflow: visible;
}

.sbar-ring circle {
    fill: none;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.55s linear;
}

/* ── 44. Resume banner ─────────────────────────────────────────── */
.resume-banner {
    position: fixed;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 10px 16px;
    background: rgba(12, 12, 12, 0.92);
    backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid rgba(var(--era-accent, 220,38,38), 0.22);
    border-radius: 28px;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.5);
    z-index: 8900;
    transition: bottom 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    max-width: calc(100vw - 32px);
}

.resume-banner.is-visible { bottom: 108px; }

.resume-banner .resume-msg {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.8);
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.resume-banner .resume-play-btn {
    background: rgba(var(--era-accent, 220,38,38), 0.18);
    border: 1px solid rgba(var(--era-accent, 220,38,38), 0.38);
    color: rgba(var(--era-accent, 220,38,38), 0.95);
    border-radius: 14px;
    padding: 4px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s, transform 0.14s;
    flex-shrink: 0;
}

.resume-banner .resume-play-btn:hover {
    background: rgba(var(--era-accent, 220,38,38), 0.32);
    transform: scale(1.05);
}

.resume-banner .resume-dismiss-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.35);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s;
    flex-shrink: 0;
}

.resume-banner .resume-dismiss-btn:hover { color: rgba(255, 255, 255, 0.75); }

/* ── 45. Now-playing track row left-edge pulse ─────────────────── */
@keyframes np-edge-pulse {
    0%, 100% { box-shadow: inset 3px 0 0 rgba(var(--era-accent, 220,38,38), 0.72); }
    50%       { box-shadow: inset 3px 0 0 rgba(var(--era-accent, 220,38,38), 0.22); }
}

.album-detail-page .track-item.track-now-playing {
    animation: np-edge-pulse 2.4s ease-in-out infinite;
}

/* ── Tier 10 reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .album-detail-page .track-item.track-now-playing {
        animation: none !important;
        box-shadow: inset 3px 0 0 rgba(var(--era-accent, 220,38,38), 0.6) !important;
    }
    .resume-banner { transition: none !important; bottom: 108px; }
    .sbar-ring circle { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALBUM PAGE – TIER 11 ENHANCEMENTS  (v64)
   46. Full-screen lyrics reading mode (expand button in lyrics toolbar)
   47. Per-track personal notes (localStorage, floating editor popup)
   48. Album title letter stagger entrance animation
   49. Track row hover spotlight + keyboard focus spotlight
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 46. Full-screen lyrics overlay ───────────────────────────── */
.track-lyrics-expand-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 3px;
    color: inherit;
    opacity: 0.55;
    display: flex;
    align-items: center;
    transition: opacity 0.18s, transform 0.18s;
    border-radius: 3px;
}

.track-lyrics-expand-btn:hover { opacity: 1; transform: scale(1.15); }

.track-lyrics-expand-btn svg { width: 14px; height: 14px; }

.lyrics-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1600;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.38s ease;
}

.lyrics-fullscreen.is-open {
    opacity: 1;
    pointer-events: auto;
}

.lyrics-fs-bg {
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 5, 0.94);
    backdrop-filter: blur(12px);
}

.lyrics-fs-panel.album-detail-page .album-nav {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-top: 4rem;
    gap: 1rem;
    position: relative;
    z-index: 10;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.lyrics-fs-panel {
    position: relative;
    z-index: 1;
    width: min(680px, calc(100vw - 40px));
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    background: rgba(14, 14, 14, 0.97);
    border: 1px solid rgba(var(--era-accent, 220,38,38), 0.15);
    border-radius: 16px;
    box-shadow: 0 32px 100px rgba(0, 0, 0, 0.7);
    transform: translateY(16px) scale(0.97);
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.lyrics-fullscreen.is-open .lyrics-fs-panel {
    transform: translateY(0) scale(1);
}

.lyrics-fs-header {
    padding: 18px 22px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}

.lyrics-fs-track {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}

.lyrics-fs-album {
    display: block;
    font-size: 0.78rem;
    color: rgba(var(--era-accent, 220,38,38), 0.8);
    margin-top: 2px;
    letter-spacing: 0.04em;
}

.lyrics-fs-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px 28px;
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--era-accent, 220,38,38), 0.3) transparent;
}

.lyrics-fs-body::-webkit-scrollbar { width: 4px; }
.lyrics-fs-body::-webkit-scrollbar-track { background: transparent; }
.lyrics-fs-body::-webkit-scrollbar-thumb {
    background: rgba(var(--era-accent, 220,38,38), 0.3);
    border-radius: 4px;
}

.lyrics-fs-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s, transform 0.18s;
    line-height: 1;
}

.lyrics-fs-close:hover {
    background: rgba(var(--era-accent, 220,38,38), 0.2);
    color: #fff;
    transform: rotate(90deg);
}

/* ── 47. Track notes ──────────────────────────────────────────── */
.track-note-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: color 0.18s, transform 0.18s;
}

.track-note-btn svg { width: 13px; height: 13px; }

.track-note-btn:hover { color: rgba(255, 255, 255, 0.65); transform: scale(1.15); }

.track-note-btn.has-note { color: rgba(var(--era-accent, 220,38,38), 0.75); }

.track-note-popup {
    position: fixed;
    z-index: 1700;
    width: 280px;
    background: rgba(14, 14, 14, 0.96);
    backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(var(--era-accent, 220,38,38), 0.22);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.93) translateY(4px);
    transform-origin: top left;
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.track-note-popup.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0);
}

.track-note-popup label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(var(--era-accent, 220,38,38), 0.8);
    margin-bottom: 8px;
}

.track-note-ta {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 80px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.82rem;
    line-height: 1.5;
    padding: 8px 10px;
    resize: vertical;
    outline: none;
    transition: border-color 0.18s;
    font-family: inherit;
}

.track-note-ta:focus {
    border-color: rgba(var(--era-accent, 220,38,38), 0.45);
}

.track-note-popup-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.3);
}

/* ── 48. Album title letter stagger entrance ───────────────────── */
/* -- 48. Album title fade-in entrance (pure CSS, no JS needed) -- */
@keyframes h1-title-enter {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── 49. Track row hover + focus spotlight ─────────────────────── */
.album-detail-page .track-item {
    transition:
        opacity 0.18s ease,
        box-shadow 0.2s ease; /* allow the edge-pulse box-shadow to transition */
}

.album-detail-page .track-item.dimmed {
    opacity: 0.42;
}

/* Keyboard focus spotlight via CSS */
.album-detail-page .album-tracks-list:focus-within .track-item:not(:focus-within) {
    opacity: 0.48;
}

.album-detail-page .album-tracks-list:focus-within .track-item:focus-within {
    opacity: 1;
}

/* ── Tier 11 reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .lyrics-fullscreen,
    .lyrics-fs-panel        { transition: opacity 0.15s ease !important; transform: none !important; }
    .track-note-popup       { transition: opacity 0.15s ease !important; transform: none !important; }
    .album-detail-page .album-info h1 {
        animation: title-wave 8s ease-in-out infinite !important;
    }
    .album-detail-page .track-item.dimmed { opacity: 0.48 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALBUM PAGE – TIER 12 ENHANCEMENTS  (v65)
   50. Playback speed control (0.75 / 1 / 1.25 / 1.5×)
   51. Sleep timer (off / 15 / 30 / 60 min / end of album)
   52. Sticky bar track-name crossfade on track change
   53. Scroll-to-top floating button
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 50 & 51. Player utility controls bar ─────────────────────── */
.album-player-utils {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.album-util-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.76rem;
    font-weight: 600;
    padding: 5px 12px;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.14s;
    white-space: nowrap;
}

.album-util-btn svg { width: 12px; height: 12px; flex-shrink: 0; }

.album-util-btn:hover {
    background: rgba(var(--era-accent, 220,38,38), 0.12);
    border-color: rgba(var(--era-accent, 220,38,38), 0.35);
    color: rgba(var(--era-accent, 220,38,38), 0.95);
    transform: scale(1.04);
}

.album-util-btn.is-active {
    background: rgba(var(--era-accent, 220,38,38), 0.15);
    border-color: rgba(var(--era-accent, 220,38,38), 0.45);
    color: rgba(var(--era-accent, 220,38,38), 1);
}

/* ── 52. Sticky bar track-name crossfade ──────────────────────── */
@keyframes track-name-out {
    0%   { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-7px); }
}

@keyframes track-name-in {
    0%   { opacity: 0; transform: translateY(7px); }
    100% { opacity: 1; transform: translateY(0); }
}

.album-sticky-bar__track.track-swap-out {
    animation: track-name-out 0.2s ease forwards;
}

.album-sticky-bar__track.track-swap-in {
    animation: track-name-in 0.2s ease forwards;
}

/* ── 53. Scroll-to-top button ─────────────────────────────────── */
.album-scroll-top {
    position: fixed;
    bottom: 108px;
    right: 20px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(12, 12, 12, 0.88);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--era-accent, 220,38,38), 0.2);
    color: rgba(var(--era-accent, 220,38,38), 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 800;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px) scale(0.85);
    transition:
        opacity 0.3s ease,
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.album-scroll-top svg { width: 16px; height: 16px; }

.album-scroll-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.album-scroll-top:hover {
    background: rgba(var(--era-accent, 220,38,38), 0.18);
    border-color: rgba(var(--era-accent, 220,38,38), 0.5);
    color: rgba(var(--era-accent, 220,38,38), 1);
}

/* ── Tier 12 reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .album-sticky-bar__track.track-swap-out,
    .album-sticky-bar__track.track-swap-in  { animation: none !important; opacity: 1 !important; }
    .album-scroll-top                       { transition: opacity 0.15s ease !important; transform: none !important; }
    .album-scroll-top.is-visible            { transform: none !important; }
    .album-util-btn                         { transition: background 0.15s, color 0.15s !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALBUM PAGE – TIER 13 ENHANCEMENTS  (v66)
   54. Long-press context menu on mobile touch
   55. Lyric progress indicator line (moves through open lyrics as track plays)
   56. Print-ready styles (@media print)
   57. Volume wheel on album cover + visual indicator
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 54. Long-press — no additional CSS (reuses .track-ctx-menu) ── */

/* ── 55. Lyric progress indicator line ───────────────────────── */
.album-detail-page .lyric-pos-line {
    position: absolute;
    left: -14px;
    right: -14px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(var(--era-accent, 220,38,38), 0.55) 15%,
        rgba(var(--era-accent, 220,38,38), 0.55) 85%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 3;
    transition: top 0.55s linear;
    box-shadow: 0 0 6px rgba(var(--era-accent, 220,38,38), 0.3);
}

/* Make lyrics-content position:relative for the absolute line */
.album-detail-page .lyrics-content {
    position: relative;
}

/* ── 56. Print-ready styles ───────────────────────────────────── */
@media print {
    /* Hide all non-essential UI */
    .site-header,
    .site-footer,
    .album-sticky-bar,
    .ambient-overlay,
    .resume-banner,
    .album-scroll-top,
    .track-ctx-menu,
    .shortcuts-overlay,
    .lyrics-fullscreen,
    .track-note-popup,
    .album-player-utils,
    .up-next-banner,
    .track-viz-canvas,
    .track-waveform,
    .track-fav-btn,
    .track-note-btn,
    .track-listened-dot,
    .track-dur-chart,
    .album-stats-footer,
    .album-complete-badge,
    .album-age-badge,
    .track-lyrics-toolbar-actions,
    .track-filter-wrap,
    .track-time-remaining,
    .track-row-progress,
    .scroll-progress-wrap,
    .lyric-pos-line,
    .vinyl-tonearm,
    .turntable-platter,
    .swipe-hint { display: none !important; }

    /* Album header — clean two-column */
    .album-detail-page { background: #fff !important; color: #000 !important; }
    .album-header__grid {
        display: grid;
        grid-template-columns: 140px 1fr;
        gap: 20px;
        margin-bottom: 20px;
    }
    .album-artwork-large { width: 140px !important; }
    .album-artwork-large::after { display: none !important; }
    #album-main-cover { width: 140px; height: 140px; object-fit: cover; }
    .album-info h1 { color: #000 !important; font-size: 1.3rem; }
    .album-year-hero__year,
    .album-year-hero__era { color: #444 !important; }

    /* Track list — clean rows */
    .track-item {
        display: flex !important;
        align-items: center;
        padding: 6px 0;
        border-bottom: 1px solid #eee;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .track-number { color: #666 !important; min-width: 2em; }
    .track-title  { color: #000 !important; }
    .track-duration { color: #666 !important; margin-left: auto; }

    /* Lyrics — show if open */
    .track-lyrics-wrapper { display: block !important; height: auto !important; }
    .lyrics-content { color: #222 !important; font-size: 0.85rem; line-height: 1.6; }

    /* Credits */
    .album-credits { break-before: page; }
    .album-credit-card { color: #000 !important; }
}

/* ── 57. Volume wheel indicator ───────────────────────────────── */
.vol-indicator {
    position: fixed;
    bottom: 60px;
    right: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 8000;
}

.vol-indicator.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.vol-indicator__bar {
    width: 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    height: 80px;
}

.vol-indicator__fill {
    width: 100%;
    border-radius: 3px;
    background: rgba(var(--era-accent, 220,38,38), 0.8);
    transition: height 0.15s ease;
    position: absolute;
    bottom: 0;
}

.vol-indicator__bar { position: relative; }

.vol-indicator__pct {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    font-variant-numeric: tabular-nums;
}

/* ── Tier 13 reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .album-detail-page .lyric-pos-line { transition: none !important; }
    .vol-indicator { transition: opacity 0.15s ease !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALBUM PAGE – TIER 14 ENHANCEMENTS  (v67)
   58. Konami code easter egg — rainbow hue-rotate mode
   59. Sparkle particle burst on album completion
   60. Stats footer number pop animation on update
   61. Copy tooltip near cursor on track-number click
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 58. Konami rainbow mode ──────────────────────────────────── */
@keyframes rainbow-hue {
    from { filter: hue-rotate(0deg) saturate(1.4); }
    to   { filter: hue-rotate(360deg) saturate(1.4); }
}

.album-detail-page.konami-active {
    animation: rainbow-hue 2.8s linear infinite;
}

/* Konami activated banner */
@keyframes konami-banner-flash {
    0%, 100% { opacity: 0; transform: translateX(-50%) scale(0.8); }
    15%, 85% { opacity: 1; transform: translateX(-50%) scale(1); }
}

.konami-banner {
    position: fixed;
    top: 96px;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    background: rgba(0, 0, 0, 0.85);
    border: 2px solid rgba(255, 200, 50, 0.7);
    border-radius: 12px;
    padding: 8px 20px;
    font-size: 0.88rem;
    font-weight: 700;
    color: rgba(255, 200, 50, 0.95);
    letter-spacing: 0.06em;
    pointer-events: none;
    z-index: 9900;
    animation: konami-banner-flash 3s ease forwards;
}

/* ── 59. Sparkle particles ────────────────────────────────────── */
@keyframes sparkle-fly {
    0%   { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--sx, 0px), var(--sy, -60px)) scale(0); opacity: 0; }
}

.sparkle-particle {
    position: fixed;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9500;
    animation: sparkle-fly 0.85s ease-out forwards;
}

/* ── 60. Stats number pop animation ──────────────────────────── */
@keyframes stat-num-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.45) rotate(-4deg); }
    70%  { transform: scale(0.9) rotate(2deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.album-stats-footer__val.stat-popping {
    animation: stat-num-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    display: inline-block;
}

/* ── 61. Copy cursor tooltip ─────────────────────────────────── */
@keyframes copy-tip-float {
    0%   { opacity: 0; transform: translateY(0) translateX(-50%); }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-24px) translateX(-50%); }
}

.copy-tip {
    position: fixed;
    background: rgba(12, 12, 12, 0.9);
    border: 1px solid rgba(var(--era-accent, 220,38,38), 0.3);
    color: rgba(var(--era-accent, 220,38,38), 0.95);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    pointer-events: none;
    z-index: 9200;
    white-space: nowrap;
    animation: copy-tip-float 1.1s ease forwards;
}

/* ── Tier 14 reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .album-detail-page.konami-active { animation: none !important; filter: hue-rotate(180deg) saturate(1.4); }
    .sparkle-particle               { animation: none !important; display: none; }
    .album-stats-footer__val.stat-popping { animation: none !important; }
    .copy-tip                       { animation: none !important; opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALBUM PAGE – TIER 16 ENHANCEMENTS  (v69)
   66. Album cover 5-color palette ambient background
   67. "Queued!" confirmation toast when Q key queues a track
   68. Track number stagger entrance animation on page load
   69. Favorite button gentle pulse hint on now-playing track
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 66. Palette ambient background layer ─────────────────────── */
.album-palette-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.5s ease;
    /* gradient and animation set by JS via inline style */
}

.album-palette-bg.is-active { opacity: 0.65; }

/* ── 67. Queue toast (reuses .album-toast keyframe) ────────────── */
.album-queue-toast {
    position: fixed;
    bottom: 152px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 10, 10, 0.92);
    color: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    padding: 7px 16px 7px 12px;
    font-size: 0.81rem;
    font-weight: 600;
    pointer-events: none;
    z-index: 9150;
    animation: toast-in-out 1.5s ease forwards;
    white-space: nowrap;
    max-width: calc(100vw - 40px);
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 7px;
}

.album-queue-toast__icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(var(--era-accent, 220,38,38), 0.2);
    border: 1px solid rgba(var(--era-accent, 220,38,38), 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.65rem;
    color: rgba(var(--era-accent, 220,38,38), 0.9);
}

/* ── 68. Track number stagger entrance ─────────────────────────── */
@keyframes track-num-enter {
    from { opacity: 0; transform: translateX(-5px) scale(0.85); }
    to   { opacity: 1; transform: translateX(0)    scale(1); }
}

/* Exclude playing rows — they already have np-pulse; the entrance
   animation would override it (lower specificity but same property). */
.album-detail-page .track-item:not(.track-now-playing) .track-number {
    animation: track-num-enter 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── 69. Favorite hint pulse on now-playing ─────────────────────── */
@keyframes fav-hint-pulse {
    0%, 100% { transform: scale(1);    color: rgba(255, 255, 255, 0.2); }
    40%      { transform: scale(1.35); color: rgba(var(--era-accent, 220,38,38), 0.55); }
}

.album-detail-page .track-fav-btn.fav-hint-pulsing {
    animation: fav-hint-pulse 0.9s ease-in-out;
}

/* ── Tier 16 reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .album-palette-bg                                               { transition: none !important; }
    .album-detail-page .track-item:not(.track-now-playing) .track-number { animation: none !important; }
    .album-detail-page .track-fav-btn.fav-hint-pulsing              { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALBUM PAGE – TIER 15 ENHANCEMENTS  (v68)
   62. Number key shortcuts 1–9 to play track N
   63. Now-playing social card generator (canvas → PNG download / Web Share)
   64. Swipe-to-dismiss for resume banner and up-next banner
   65. Track row "boing" entrance animation on track change
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 62. Number key shortcut flash ───────────────────────────── */
@keyframes track-key-flash {
    0%   { background: rgba(var(--era-accent, 220,38,38), 0.22); }
    100% { background: transparent; }
}
.album-detail-page .track-item.key-flashing {
    animation: track-key-flash 0.55s ease-out forwards;
}

/* ── 63. Share card button ────────────────────────────────────── */
.album-share-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.76rem;
    font-weight: 600;
    padding: 5px 12px;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    white-space: nowrap;
}

.album-share-card-btn svg { width: 12px; height: 12px; }

.album-share-card-btn:hover {
    background: rgba(var(--era-accent, 220,38,38), 0.12);
    border-color: rgba(var(--era-accent, 220,38,38), 0.35);
    color: rgba(var(--era-accent, 220,38,38), 0.95);
}

/* Share card generating overlay */
.card-generating {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.card-generating.is-open {
    opacity: 1;
    pointer-events: auto;
}

.card-preview-panel {
    background: rgba(14, 14, 14, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
    max-width: 380px;
    width: calc(100vw - 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65);
    position: relative;
}

.card-preview-canvas {
    border-radius: 10px;
    max-width: 100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.card-preview-actions {
    display: flex;
    gap: 10px;
    width: 100%;
}

.card-action-btn {
    flex: 1;
    padding: 9px 0;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: transform 0.14s, opacity 0.14s;
}

.card-action-btn:hover { transform: scale(1.03); }

.card-btn-download {
    background: rgba(var(--era-accent, 220,38,38), 0.85);
    color: #fff;
}

.card-btn-close {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
}

/* ── 64. Swipe-to-dismiss ─────────────────────────────────────── */
.resume-banner,
.up-next-banner {
    touch-action: pan-y;
    user-select: none;
}

/* ── 65. Track boing animation on track change ─────────────────── */
@keyframes track-boing {
    0%   { transform: scaleX(1)    scaleY(1); }
    22%  { transform: scaleX(1.02) scaleY(0.96); }
    50%  { transform: scaleX(0.98) scaleY(1.04); }
    78%  { transform: scaleX(1.01) scaleY(0.98); }
    100% { transform: scaleX(1)    scaleY(1); }
}

.album-detail-page .track-item.track-boinging {
    animation: track-boing 0.44s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
    transform-origin: left center;
}

/* ── Tier 15 reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .album-detail-page .track-item.key-flashing   { animation: none !important; }
    .album-detail-page .track-item.track-boinging { animation: none !important; }
    .card-generating { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALBUM PAGE – TIER 17 ENHANCEMENTS  (v70)
   70. Arrow-key track navigation — keyboard cursor through track rows
   71. EQ bars pause sync — delegated to existing .track-now-playing system
   72. Listened-progress ring — SVG donut in album header showing % heard
   73. Auto-scroll to active track on smp:trackchange
   74. Alt+click track title copies "Artist – Track – Album" to clipboard
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 70. Keyboard navigation cursor ─────────────────────────────── */
.album-detail-page .track-item.kb-focused {
    outline: 2px solid rgba(var(--era-accent, 220,38,38), 0.55);
    outline-offset: -2px;
    background: rgba(var(--era-accent, 220,38,38), 0.06);
    border-radius: 4px;
}

/* ── 71. EQ bars — handled by existing system (.track-now-playing + .eq-bar) ── */

/* ── 72. Listened-progress ring ──────────────────────────────────── */
.album-listened-ring {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    cursor: default;
}

.album-listened-ring svg {
    transform: rotate(-90deg);
}

.album-listened-ring__arc {
    transition: stroke-dashoffset 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.album-listened-ring__text {
    position: absolute;
    font-size: 9px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* ── 74. Alt-click copy toast ────────────────────────────────────── */
@keyframes track-copy-fade {
    0%   { opacity: 0; transform: translateX(-50%) translateY(8px);  }
    15%  { opacity: 1; transform: translateX(-50%) translateY(0);    }
    75%  { opacity: 1; transform: translateX(-50%) translateY(0);    }
    100% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
}

.track-copy-toast {
    position: fixed;
    bottom: 108px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 10, 10, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 20px;
    pointer-events: none;
    white-space: nowrap;
    max-width: calc(100vw - 48px);
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 9300;
    animation: track-copy-fade 1.7s ease forwards;
}

/* ── 74. Alt-click cursor hint ───────────────────────────────────── */
.album-detail-page .track-title {
    cursor: default;
}

/* ── Tier 17 reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .album-listened-ring__arc { transition: none !important; }
    .track-copy-toast         { animation: none !important; opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALBUM PAGE – TIER 18 ENHANCEMENTS  (v72)
   75. Per-track seeded mini waveform — 20-bar fingerprint, lights up on play
   76. Album time-remaining label in sticky bar counting down
   77. Cover art heartbeat pulse on each track change
   78. Warm gold glow on track row when it finishes (album:trackListened)
   79. Playback speed badge on sticky bar — clickable, cycles 1×/1.25×/1.5×/0.75×
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 75. Per-track mini waveform ─────────────────────────────────── */
.track-waveform-mini {
    display: flex;
    align-items: flex-end;
    gap: 1.5px;
    height: 18px;
    width: 52px;
    flex-shrink: 0;
    opacity: 0.22;
    transition: opacity 0.25s ease;
    margin-left: 6px;
}

.album-detail-page .track-item:hover .track-waveform-mini {
    opacity: 0.55;
}

.album-detail-page .track-item.track-now-playing .track-waveform-mini {
    opacity: 1;
}

.track-waveform-mini__bar {
    flex: 1;
    border-radius: 1px 1px 0 0;
    background: rgba(255, 255, 255, 0.2);
    transition: background 0.1s ease;
    min-height: 2px;
}

.track-waveform-mini__bar.wv-played {
    background: rgba(var(--era-accent, 220,38,38), 0.75);
}

.track-waveform-mini__bar.wv-head {
    background: rgba(var(--era-accent, 220,38,38), 1);
    box-shadow: 0 0 5px rgba(var(--era-accent, 220,38,38), 0.65);
}

/* ── 76. Album time remaining in sticky bar ──────────────────────── */
.album-sticky-time-left {
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.0);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 0.5s ease;
    min-width: 3.8ch;
    text-align: right;
}

.album-sticky-time-left.is-visible {
    color: rgba(255, 255, 255, 0.38);
}

/* ── 77. Cover heartbeat on track change ─────────────────────────── */
@keyframes cover-heartbeat {
    0%   { transform: scale(1); }
    28%  { transform: scale(1.03); }
    58%  { transform: scale(0.998); }
    100% { transform: scale(1); }
}

.album-detail-page #album-main-cover.cover-beating {
    animation: cover-heartbeat 0.52s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

/* ── 78. Track-finished warm glow ────────────────────────────────── */
@keyframes track-finish-glow {
    0%   { background: transparent; box-shadow: none; }
    25%  { background: rgba(250, 200, 70, 0.09);
           box-shadow: inset 0 0 20px rgba(250, 200, 70, 0.18); }
    100% { background: transparent; box-shadow: none; }
}

.album-detail-page .track-item.track-finish-glowing {
    animation: track-finish-glow 1.4s ease-out forwards;
    border-radius: 8px;
}

/* ── 79. (removed — duplicated Item 50 speed control) ───────────── */

/* .track-waveform-mini is the animated playback indicator (Item 75).
   Item 30's static .track-waveform already decorates non-playing rows.
   Show mini only on the playing row; hide on all others to avoid duplication. */
.album-detail-page .track-item:not(.track-now-playing) .track-waveform-mini {
    display: none !important;
}

/* Responsive: also hide on very narrow screens where row space is tight */
@media (max-width: 480px) {
    .track-waveform-mini { display: none !important; }
}

/* ── Tier 18 reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .track-waveform-mini                                   { transition: none !important; }
    .track-waveform-mini__bar                              { transition: none !important; }
    .album-detail-page #album-main-cover.cover-beating     { animation: none !important; }
    .album-detail-page .track-item.track-finish-glowing    { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALBUM PAGE – TIER 19 ENHANCEMENTS  (v73)
   80. L key shortcut to toggle lyrics for the current playing track
   81. Copy-tracklist button — formats all tracks and copies to clipboard
   82. Track play-count badge — ×N shown after 2+ plays (localStorage)
   83. Skip detection — amber flash when a track is skipped before 15%
   84. Lyrics font-size A−/A+ controls injected into every lyrics toolbar
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 81. Copy-tracklist button ───────────────────────────────────── */
.album-copy-list-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 11px;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    margin-bottom: 10px;
}

.album-copy-list-btn svg { flex-shrink: 0; }

.album-copy-list-btn:hover {
    background: rgba(var(--era-accent, 220,38,38), 0.09);
    border-color: rgba(var(--era-accent, 220,38,38), 0.25);
    color: rgba(var(--era-accent, 220,38,38), 0.85);
}

.album-copy-list-btn.copied {
    background: rgba(var(--era-accent, 220,38,38), 0.14);
    border-color: rgba(var(--era-accent, 220,38,38), 0.4);
    color: rgba(var(--era-accent, 220,38,38), 1);
}

/* ── 82. Track play-count badge ──────────────────────────────────── */
.track-play-count {
    font-size: 0.58rem;
    font-weight: 700;
    color: rgba(var(--era-accent, 220,38,38), 0.6);
    background: rgba(var(--era-accent, 220,38,38), 0.1);
    border-radius: 8px;
    padding: 1px 4px;
    margin-left: 5px;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── 83. Skip-detection amber flash ─────────────────────────────── */
@keyframes skip-flash {
    0%   { background: transparent; }
    18%  { background: rgba(255, 195, 50, 0.1); }
    100% { background: transparent; }
}

.album-detail-page .track-item.track-was-skipped {
    animation: skip-flash 0.85s ease-out forwards;
}

/* Persistent subtle marker after being skipped */
.album-detail-page .track-item.has-been-skipped .track-number::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 1px;
    background: rgba(255, 195, 50, 0.45);
    border-radius: 1px;
}

/* ── 84. Lyrics font-size controls ──────────────────────────────── */
.lyrics-font-controls {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.lyrics-font-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.68rem;
    font-weight: 700;
    width: 22px;
    height: 22px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    padding: 0;
    line-height: 1;
    user-select: none;
}

.lyrics-font-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
}

/* ── Tier 19 reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .album-detail-page .track-item.track-was-skipped { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALBUM PAGE – TIER 20 ENHANCEMENTS  (v77)
   85. Dynamic page title while playing
   86. Track row playback fill (background sweeps left → right)
   87. Album completion celebration (confetti burst + badge)
   88. Track star ratings (hover widget, localStorage)
   89. Cover art lightbox (full-screen zoom viewer)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 86. Track row playback fill ────────────────────────────────── */
.album-detail-page .track-item.track-now-playing::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        to right,
        rgba(var(--era-accent, 220,38,38), 0.18) var(--np-fill, 0%),
        transparent var(--np-fill, 0%)
    ) !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: inherit !important;
    transition: background 0.4s linear !important;
}

/* ── 87. Album completion badge ─────────────────────────────────── */
.album-completed-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 7px;
    border-radius: 20px;
    background: linear-gradient(
        135deg,
        rgba(var(--era-accent, 220,38,38), 0.15),
        rgba(var(--era-accent, 220,38,38), 0.05)
    );
    border: 1px solid rgba(var(--era-accent, 220,38,38), 0.3);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(var(--era-accent, 220,38,38), 1);
    margin-top: 8px;
    opacity: 0;
    transform: translateY(6px) scale(0.92);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
    user-select: none;
}
.album-completed-badge.is-visible {
    opacity: 1;
    transform: none;
}

/* Confetti particles */
.album-confetti-particle {
    position: fixed;
    width: 7px;
    height: 9px;
    border-radius: 1px;
    pointer-events: none;
    z-index: 9999;
    animation: confetti-fall var(--cf-dur, 1s) ease-in var(--cf-delay, 0s) both;
}
@keyframes confetti-fall {
    0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
    70%  { opacity: 0.9; }
    100% { transform: translateY(var(--cf-vy, 220px)) rotate(var(--cf-rot, 360deg)) scale(0.2); opacity: 0; }
}

/* ── 88. Track star ratings ─────────────────────────────────────── */
.track-stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    opacity: 0;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}
.track-item:hover .track-stars,
.track-stars.has-rating {
    opacity: 1;
}
.star-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 1px 2px;
    font-size: 11px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.2);
    transition: color 0.12s ease, transform 0.12s ease;
    display: inline-block;
}
.star-btn.filled {
    color: rgba(var(--era-accent, 220,38,38), 0.85);
}
.star-btn.hover-fill {
    color: rgba(var(--era-accent, 220,38,38), 0.9);
    transform: scale(1.3);
}

/* ── 89. Cover art lightbox ─────────────────────────────────────── */
.album-detail-page #album-main-cover:not(.no-lightbox) {
    cursor: zoom-in;
}
.album-detail-page .album-artwork-large.vs-turntable-active #album-main-cover,
.album-detail-page .album-artwork-large.vs-extracting #album-main-cover {
    cursor: default;
}

.cover-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: rgba(0, 0, 0, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.cover-lightbox.is-open {
    opacity: 1;
    pointer-events: all;
}
.cover-lightbox__img {
    max-width: min(90vw, 90vh);
    max-height: 90vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.06),
        0 24px 80px rgba(0,0,0,0.7);
    transform: scale(0.88);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: zoom-in;
    user-select: none;
}
.cover-lightbox.is-open .cover-lightbox__img {
    transform: scale(1);
}
.cover-lightbox__img.is-zoomed {
    transform: scale(2.2) !important;
    cursor: zoom-out;
    transition: transform 0.25s ease !important;
}
.cover-lightbox__close {
    position: absolute;
    top: 18px;
    right: 22px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.65);
    font-size: 18px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
    line-height: 1;
}
.cover-lightbox__close:hover {
    background: rgba(255,255,255,0.16);
    color: white;
}
.cover-lightbox__hint {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.71rem;
    color: rgba(255,255,255,0.3);
    pointer-events: none;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* ── Tier 20 reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .album-confetti-particle { animation: none !important; opacity: 0 !important; }
    .album-completed-badge   { transition: none !important; }
    .cover-lightbox          { transition: none !important; }
    .cover-lightbox__img     { transition: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ALBUM TITLE VISIBILITY FALLBACK
   Must be LAST in the file so it overrides all gradient-clip-text rules above.
   On browsers that don't support -webkit-background-clip:text the title
   would otherwise be invisible (transparent fill + no background showing).
   ─────────────────────────────────────────────────────────────────────────── */
@supports not (-webkit-background-clip: text) {
    .album-detail-page .album-info h1,
    .album-info h1 {
        background: none !important;
        -webkit-text-fill-color: unset !important;
        color: rgba(255, 255, 255, 0.95) !important;
        animation: none !important;
        filter: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   TRACK ROW PLAY/PAUSE TOGGLE  (v82)
   90. Play button shows pause icon when this track is now-playing.
   91. Time-remaining fits inside the duration cell (no grid overflow).
   ─────────────────────────────────────────────────────────────────────────── */

/* ── 90. Pause icon in play button ──────────────────────────────── */
.album-detail-page .track-item.track-now-playing:not(.track-is-paused) .track-play-btn .icon-play {
    display: none !important;
}
.album-detail-page .track-item.track-now-playing:not(.track-is-paused) .track-play-btn::after {
    content: '';
    display: block;
    width: 9px;
    height: 11px;
    background:
        linear-gradient(white, white) left/3px 100%,
        linear-gradient(white, white) right/3px 100%;
    background-repeat: no-repeat;
}

/* ── 91. Track duration cell — flex so time-remaining sits inline ─ */
.album-detail-page .track-duration {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25em !important;
    white-space: nowrap !important;
}

/* ── 92. Play All button — pause state when this album is active ── */
.album-detail-page #play-album-btn.is-album-playing {
    background: rgba(var(--era-accent, 220,38,38), 0.18) !important;
    border-color: rgba(var(--era-accent, 220,38,38), 0.55) !important;
}
.album-detail-page #play-album-btn.is-album-playing .icon-play {
    display: none !important;
}
.album-detail-page #play-album-btn.is-album-playing::before {
    content: '';
    display: inline-block;
    width: 11px;
    height: 13px;
    background:
        linear-gradient(white, white) left/3px 100%,
        linear-gradient(white, white) right/3px 100%;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/* ── 93. Album cover "now playing" ring ─────────────────────────── */
@keyframes album-ring-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--era-accent, 220,38,38), 0.55),
                            0 0 0 4px rgba(var(--era-accent, 220,38,38), 0.15); }
    50%       { box-shadow: 0 0 0 5px rgba(var(--era-accent, 220,38,38), 0.3),
                            0 0 0 10px rgba(var(--era-accent, 220,38,38), 0.06); }
}
.album-detail-page .album-artwork-large.album-now-playing img {
    animation: album-ring-pulse 2.4s ease-in-out infinite;
    border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
    .album-detail-page .album-artwork-large.album-now-playing img {
        animation: none !important;
        box-shadow: 0 0 0 3px rgba(var(--era-accent, 220,38,38), 0.5) !important;
    }
}

/* ── 94. Auto-hide track action buttons (reveal on hover/focus) ── */
.album-detail-page .track-item .track-actions {
    opacity: 0;
    transform: translateX(6px);
    transition: opacity 0.16s ease, transform 0.16s ease;
    pointer-events: none;
}
.album-detail-page .track-item:hover .track-actions,
.album-detail-page .track-item:focus-within .track-actions,
.album-detail-page .track-item.track-now-playing .track-actions {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
    .album-detail-page .track-item .track-actions { transition: none !important; }
}
/* Touch devices: always show track actions (no hover available) */
@media (hover: none) {
    .album-detail-page .track-item .track-actions {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
}

/* ── 95. "Play Next" context menu toast ─────────────────────────── */
.ctx-toast {
    position: fixed;
    bottom: 88px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: rgba(20, 20, 30, 0.96);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    padding: 7px 16px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
    z-index: 9100;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.ctx-toast.ctx-toast--in {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── 96. Auto-advance to next album toast ─────────────────────── */
.np-advance-toast {
    position: fixed;
    bottom: 88px;
    right: 20px;
    width: 280px;
    background: rgba(14, 14, 22, 0.97);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 9200;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transform: translateY(16px);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.np-advance-toast.np-advance--in {
    opacity: 1;
    transform: none;
}
.np-advance-toast__cover {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.np-advance-toast__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.np-advance-toast__label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgba(var(--era-accent, 220,38,38), 0.85);
}
.np-advance-toast__title {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.np-advance-toast__actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}
.np-advance-toast__go {
    background: rgba(var(--era-accent, 220,38,38), 0.85);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    cursor: pointer;
    transition: background 0.15s;
}
.np-advance-toast__go:hover { background: rgba(var(--era-accent, 220,38,38), 1); }
.np-advance-toast__cancel {
    background: none;
    color: rgba(255,255,255,0.4);
    border: none;
    font-size: 0.68rem;
    cursor: pointer;
    padding: 2px 4px;
    transition: color 0.15s;
}
.np-advance-toast__cancel:hover { color: rgba(255,255,255,0.75); }
.np-advance-toast__bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 0 0 14px 14px;
    background: rgba(var(--era-accent, 220,38,38), 0.7);
    width: 100%;
    transform-origin: left;
    animation: np-advance-countdown 5s linear forwards;
}
@keyframes np-advance-countdown {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}
.np-advance-toast.np-advance--in .np-advance-toast__bar {
    animation-play-state: running;
}

/* ── 97. ARIA live region (visually hidden) ─────────────────────── */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ── 98. Scroll-to-now-playing button in track header ──────────── */
.album-detail-page .scroll-to-np-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 3px 9px 3px 6px;
    background: rgba(var(--era-accent, 220,38,38), 0.1);
    border: 1px solid rgba(var(--era-accent, 220,38,38), 0.25);
    border-radius: 20px;
    color: rgba(var(--era-accent, 220,38,38), 0.8);
    font-size: 0.67rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
    line-height: 1;
}
.album-detail-page .scroll-to-np-btn svg {
    flex-shrink: 0;
    animation: stnp-bounce 1.5s ease-in-out infinite;
}
.album-detail-page .scroll-to-np-btn:hover {
    background: rgba(var(--era-accent, 220,38,38), 0.2);
    border-color: rgba(var(--era-accent, 220,38,38), 0.45);
    color: rgba(var(--era-accent, 220,38,38), 1);
    transform: translateY(1px);
}
@keyframes stnp-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(2px); }
}

/* ── 99. Mini EQ bars in album header ──────────────────────────── */
.album-detail-page .album-header-eq {
    display: none;
    align-items: flex-end;
    gap: 3px;
    height: 14px;
    margin-top: 8px;
}
.album-detail-page .album-header-eq span {
    display: block;
    width: 4px;
    border-radius: 2px;
    background: rgba(var(--era-accent, 220,38,38), 0.7);
    transform-origin: bottom;
}
.album-detail-page .album-header-eq span:nth-child(1) { height: 65%; }
.album-detail-page .album-header-eq span:nth-child(2) { height: 100%; }
.album-detail-page .album-header-eq span:nth-child(3) { height: 50%; }

/* Visible when this album is playing OR paused */
.album-detail-page .album-artwork-large.album-now-playing ~ .album-info .album-header-eq,
.album-detail-page .album-artwork-large.album-is-paused  ~ .album-info .album-header-eq {
    display: inline-flex;
}

@keyframes album-hdr-eq1 { 0%,100%{height:65%}  35%{height:100%} 70%{height:30%}  }
@keyframes album-hdr-eq2 { 0%,100%{height:100%} 25%{height:30%}  60%{height:85%}  }
@keyframes album-hdr-eq3 { 0%,100%{height:50%}  45%{height:95%}  80%{height:20%}  }

.album-detail-page .album-artwork-large.album-now-playing ~ .album-info .album-header-eq span:nth-child(1) {
    animation: album-hdr-eq1 0.85s ease-in-out infinite;
}
.album-detail-page .album-artwork-large.album-now-playing ~ .album-info .album-header-eq span:nth-child(2) {
    animation: album-hdr-eq2 0.65s ease-in-out infinite;
}
.album-detail-page .album-artwork-large.album-now-playing ~ .album-info .album-header-eq span:nth-child(3) {
    animation: album-hdr-eq3 1.05s ease-in-out infinite;
}

/* ── 101. Track position counter X / Y in sticky bar ───────────── */
.album-sticky-bar__pos {
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
    color: rgba(255,255,255,0.38);
    letter-spacing: 0.05em;
    margin-top: 1px;
    line-height: 1;
}

/* ── 102. Track play-frequency heatmap in track header ─────────── */
.album-detail-page .track-heatmap {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 16px;
    cursor: default;
}
.album-detail-page .track-heatmap__dot {
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: rgba(255,255,255,0.12);
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, height 0.3s ease;
    flex-shrink: 0;
}
.album-detail-page .track-heatmap__dot.has-plays {
    background: rgba(var(--era-accent, 220,38,38), var(--dot-alpha, 0.4));
    height: calc(6px + var(--dot-alpha, 0) * 8px);
}
.album-detail-page .track-heatmap__dot:hover {
    transform: scaleY(1.4) scaleX(1.2);
    background: rgba(var(--era-accent, 220,38,38), 0.9) !important;
}

/* ── 107. Track row 2px playback progress strip ─────────────────── */
.album-detail-page .track-item {
    position: relative;
}
.track-row-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg,
        rgba(var(--era-accent, 220,38,38), 0.9),
        rgba(var(--era-accent, 220,38,38), 0.45));
    border-radius: 0 1px 1px 0;
    transition: width 1s linear;
    pointer-events: none;
}

/* ── 108. Remaining album time in sticky bar ────────────────────── */
.album-sticky-bar__rem {
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
    color: rgba(255,255,255,0.32);
    letter-spacing: 0.05em;
    margin-top: 1px;
    line-height: 1;
}

/* ── 109. Playback speed control ────────────────────────────────── */
.speed-control {
    display: flex;
    gap: 2px;
    align-items: center;
    margin-left: 4px;
}
.speed-btn {
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.15);
    background: transparent;
    color: rgba(255,255,255,0.45);
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1.4;
    white-space: nowrap;
}
.speed-btn:hover {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
}
.speed-btn--active {
    background: rgba(var(--era-accent, 220,38,38), 0.2);
    border-color: rgba(var(--era-accent, 220,38,38), 0.6);
    color: #fff;
}

/* ── 110. Session-heard track ticks ─────────────────────────────── */
.track-heard-tick {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(var(--era-accent, 34,197,94), 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}
.track-heard-tick svg {
    width: 7px;
    height: 7px;
    stroke: #fff;
}
.album-detail-page .track-number-wrap {
    position: relative;
}
.album-detail-page .track-item.track-heard .track-number {
    opacity: 0.55;
}

/* ── 111. Album completion card ──────────────────────────────────── */
.album-completion-card {
    position: fixed;
    bottom: calc(var(--player-height, 80px) + 16px);
    right: 20px;
    width: 280px;
    background: rgba(18,18,24,0.97);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.6);
    z-index: 600;
    text-align: center;
    opacity: 0;
    transform: translateY(16px) scale(0.96);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
    pointer-events: none;
}
.album-completion-card--in {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}
.album-completion-card__close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 2px 4px;
    transition: color 0.15s;
}
.album-completion-card__close:hover { color: #fff; }
.album-completion-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(var(--era-accent, 34,197,94), 0.15);
    border: 1.5px solid rgba(var(--era-accent, 34,197,94), 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}
.album-completion-card__icon svg {
    width: 22px;
    height: 22px;
    stroke: rgba(var(--era-accent, 34,197,94), 1);
}
.album-completion-card__title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.45);
    margin-bottom: 4px;
}
.album-completion-card__album {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
    line-height: 1.3;
}
.album-completion-card__stats {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
    margin-bottom: 14px;
}
.album-completion-card__actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.album-completion-card__replay,
.album-completion-card__next {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.15s;
}
.album-completion-card__replay {
    border: 1px solid rgba(255,255,255,0.18);
    background: transparent;
    color: rgba(255,255,255,0.8);
}
.album-completion-card__next {
    background: var(--era-accent-hex, #dc2626);
    border: none;
    color: #fff;
}
.album-completion-card__replay:hover,
.album-completion-card__next:hover { opacity: 0.82; transform: scale(1.03); }

/* Album Navigation */
.album-navigation { display: flex; justify-content: space-between; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1); gap: 1rem; }
.album-nav-link { display: flex; flex-direction: column; text-decoration: none; padding: 1rem; border-radius: 8px; background: rgba(255,255,255,0.03); transition: background 0.2s; flex: 1; min-width: 0; }
.album-nav-link:hover { background: rgba(255,255,255,0.08); }
.album-nav-link--next { text-align: right; }
.album-nav-label { font-size: 0.85rem; color: rgba(255,255,255,0.5); margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.05em; }
.album-nav-title { font-size: 1.1rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.album-nav-placeholder { flex: 1; }
@media (max-width: 600px) { .album-navigation { flex-direction: column; } .album-nav-link--next { text-align: left; } }


/* ── Karaoke / LRC sync mode (lyric-sync.component.js) ─────────── */

/* Karaoke toggle button — inherits .track-lyrics-copy-btn base styles */
.karaoke-toggle-btn.active {
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.08);
}
.karaoke-toggle-btn.active:hover {
    background: rgba(220, 38, 38, 0.14);
}

/* LRC mode container */
.lyrics-content.lrc-mode {
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Individual LRC line */
.lrc-line {
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.25s, background 0.25s, transform 0.2s;
    cursor: default;
    transform-origin: left center;
}

/* Currently active line */
.lrc-line.lrc-active {
    color: #fff;
    background: rgba(220, 38, 38, 0.12);
    transform: scale(1.02);
    font-weight: 500;
}

[data-theme="light"] .lrc-line {
    color: rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .lrc-line.lrc-active {
    color: #1a1a1a;
    background: rgba(220, 38, 38, 0.08);
}

/* ── Fullscreen karaoke mode ─────────────────────────────────────── */
.lyrics-fs-body.lrc-mode {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 12px 24px 28px;
}
.lyrics-fs-body.lrc-mode .lrc-line {
    font-size: 1.1rem;
    line-height: 1.65;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.35);
    transition: color 0.3s, background 0.3s, transform 0.25s;
    transform-origin: left center;
}
.lyrics-fs-body.lrc-mode .lrc-line.lrc-active {
    color: #fff;
    background: rgba(220, 38, 38, 0.15);
    transform: scale(1.025);
    font-weight: 500;
}

/* ── Play count badges (play-count-badges.component.js) ─────────── */
.pc-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 10px;
    border: 1px solid currentColor;
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: default;
    transition: opacity 0.2s;
    vertical-align: middle;
    margin-right: 6px;
    opacity: 0.85;
    flex-shrink: 0;
}
.pc-badge:hover { opacity: 1; }
.pc-badge svg { flex-shrink: 0; }
@media (max-width: 480px) { .pc-badge { display: none; } }

/* ── Related Albums Shelf ──────────────────────────────────────── */
.related-albums-shelf {
    margin: 3rem 0 2rem;
    padding: 2rem 0;
    border-top: 1px solid rgba(255,255,255,0.07);
}
.related-albums-shelf h2 {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.4);
    margin: 0 0 1.25rem;
}
.related-albums-grid {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(220,38,38,0.3) transparent;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}
.related-album-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
    width: 110px;
    scroll-snap-align: start;
    transition: transform 0.15s;
}
.related-album-card:hover { transform: translateY(-3px); }
.related-album-cover {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
}
.related-album-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.related-album-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; opacity: 0.3;
}
.related-album-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: rgba(255,255,255,0.75);
}
.related-album-year {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.35);
}