/* ==========================================================================
   SoulSync Music Discover — Premier App Redesign (Deezer & Spotify Aesthetic)
   Cinematic Hero Billboard, Deezer Flow Moods, Tactile Spotify Cards,
   Ambient Lighting & Glassmorphic Surfaces
   ========================================================================== */

/* ── 1. Discover Canvas & Dynamic Ambient Environment ────────────────────── */
.discover-container {
    --dsc-bg-deep: #0a0d14;
    --dsc-bg-card: rgba(22, 27, 38, 0.62);
    --dsc-bg-card-hover: rgba(28, 34, 48, 0.85);
    --dsc-border-glass: 1px solid rgba(255, 255, 255, 0.08);
    --dsc-border-hover: 1px solid rgba(255, 255, 255, 0.16);
    --dsc-text-primary: #ffffff;
    --dsc-text-secondary: rgba(255, 255, 255, 0.7);
    --dsc-text-muted: rgba(255, 255, 255, 0.45);
    --dsc-accent-spotify: #1db954;
    --dsc-accent-deezer: #a238ff;
    --dsc-shadow-card: 0 12px 32px rgba(0, 0, 0, 0.45);
    --dsc-shadow-glow: 0 16px 40px rgba(var(--accent-rgb, 29, 185, 84), 0.22);
    
    position: relative;
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 16px 28px 96px;
    box-sizing: border-box;
    background: transparent;
}

/* Ambient dynamic background lighting */
.discover-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 600px;
    background: radial-gradient(ellipse at 50% 0%, rgba(var(--discover-glow-rgb, var(--accent-rgb, 29, 185, 84)), 0.22) 0%, rgba(var(--discover-glow-rgb, 162, 56, 255), 0.08) 45%, transparent 75%);
    pointer-events: none;
    z-index: 0;
    filter: blur(60px);
}

/* ── 3. Cinematic Hero Billboard (Full-Width Immersion) ──────────────────── */


.discover-command-hero {
    width: 100% !important;
    flex: 1 1 100% !important;
}

.discover-hero {
    position: relative !important;
    width: 100% !important;
    min-height: 400px !important;
    height: auto !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    background: #0d111a !important;
}

/* Full-bleed background image with right-side placement and cinematic grading */
.discover-hero-background {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: 85% 25% !important;
    transform: scale(1.02);
    transition: transform 6s cubic-bezier(0.16, 1, 0.3, 1), filter 1s ease;
    filter: saturate(1.15) contrast(1.05);
}

.discover-hero:hover .discover-hero-background {
    transform: scale(1.05);
}

/* Scrim vignette — deep obsidian left shield guaranteeing 100% text legibility */
.discover-hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(90deg, #0a0d14 0%, rgba(10, 13, 20, 0.98) 42%, rgba(10, 13, 20, 0.7) 65%, rgba(10, 13, 20, 0.15) 88%, transparent 100%),
        linear-gradient(0deg, #0a0d14 0%, rgba(10, 13, 20, 0.8) 25%, transparent 65%),
        linear-gradient(180deg, rgba(10, 13, 20, 0.45) 0%, transparent 35%) !important;
    pointer-events: none;
    z-index: 1;
}

/* Hide duplicate square image inside the hero */
.discover-hero-image {
    display: none !important;
}

/* Hero Content Area — Strictly Left-Aligned Flagship Layout */
.discover-hero-content,
.discover-command-hero .discover-hero-content {
    position: relative !important;
    z-index: 2 !important;
    height: auto !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding: 28px 60px 14px !important;
    max-width: min(1120px, 78%) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.discover-hero-info,
.discover-command-hero .discover-hero-info {
    max-width: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    margin: 0 !important;
}

/* eyebrow: a quiet accent line, not a neon badge. the count lives here too */
.discover-hero-label {
    display: inline-flex !important;
    align-items: center !important;
    align-self: flex-start !important;
    gap: 8px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    color: rgba(255, 255, 255, 0.82) !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 0 14px 0 !important;
    text-shadow: none !important;
}

.discover-hero-label-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-color, #1db954);
    box-shadow: 0 0 10px rgba(var(--accent-rgb, 29, 185, 84), 0.8);
}

.discover-hero-count {
    margin-left: 2px;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Massive Spotify/Deezer Title */
.discover-hero-title,
.discover-command-hero .discover-hero-title {
    font-size: clamp(30px, 3.8vw, 54px) !important;
    font-weight: 850 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.08 !important;
    color: #ffffff !important;
    text-align: left !important;
    align-self: flex-start !important;
    max-width: 100% !important;
    margin: 0 0 10px 0 !important;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.7) !important;
}

/* Subtitle & Recommendation Reason */
.discover-hero-subtitle,
.discover-command-hero .discover-hero-subtitle {
    font-size: 1.02rem !important;
    line-height: 1.45 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    max-width: 850px !important;
    text-align: left !important;
    align-self: flex-start !important;
    margin: 0 0 14px 0 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
}

/* meta: one quiet line. genres as words, popularity as a meter, ownership as text */
.discover-hero-seed {
    color: #fff;
    font-weight: 700;
}

.discover-hero-meta,
.discover-command-hero .discover-hero-meta {
    width: 100% !important;
    text-align: left !important;
    margin: 0 0 24px 0 !important;
}

.discover-hero-meta-content {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px 0 !important;
    margin: 0 !important;
    text-align: left !important;
}

.hero-meta-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-size: 0.86rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.72) !important;
}

/* a dot between items, never before the first */
.hero-meta-item + .hero-meta-item::before {
    content: '';
    width: 3px;
    height: 3px;
    margin: 0 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
}

.hero-meta-item.hero-popularity {
    background: none !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.72) !important;
}

.hero-popularity .meta-value {
    display: none;
}

.hero-popularity .meta-label {
    font-weight: 500;
}

.hero-pop-meter {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 12px;
}

.hero-pop-meter > span {
    width: 3px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.22);
}

.hero-pop-meter > span:nth-child(1) { height: 40%; }
.hero-pop-meter > span:nth-child(2) { height: 55%; }
.hero-pop-meter > span:nth-child(3) { height: 70%; }
.hero-pop-meter > span:nth-child(4) { height: 85%; }
.hero-pop-meter > span:nth-child(5) { height: 100%; }

.hero-pop-meter > span.on {
    background: var(--accent-color, #1db954);
}

.discover-hero .hero-genres {
    gap: 0 !important;
}

.discover-hero .genre-tag {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-size: 0.86rem !important;
    color: rgba(255, 255, 255, 0.72) !important;
    text-transform: capitalize;
}

.discover-hero .genre-tag + .genre-tag::before {
    content: ', ';
}

.discover-hero .hero-owned {
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    font-size: inherit;
    color: rgba(var(--accent-light-rgb, 30, 215, 96), 0.95);
    font-weight: 600;
}

.discover-hero .hero-owned--none {
    background: none;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 500;
}

/* Primary Action Buttons */
.discover-hero-actions,
.discover-command-hero .discover-hero-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 0 !important;
}

.discover-hero-actions .discover-hero-button,
.discover-hero-actions .watchlist-toggle-btn {
    width: auto !important;
    max-width: fit-content !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

/* Spotify-style Primary Pill / Play Button */
.discover-hero-button.primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--accent-color, #1db954) !important;
    color: #05130a !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    padding: 11px 24px !important;
    border-radius: 9999px !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 8px 24px rgba(var(--accent-rgb, 29, 185, 84), 0.45) !important;
    transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.discover-hero-button.primary:hover {
    transform: scale(1.04) translateY(-1px) !important;
    box-shadow: 0 12px 32px rgba(var(--accent-rgb, 29, 185, 84), 0.6) !important;
    background: #22c55e !important;
    color: #000000 !important;
}

.discover-hero-button.primary:active {
    transform: scale(0.98) !important;
}

/* Secondary Discography Pill */
.discover-hero-button.secondary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    color: #ffffff !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    padding: 11px 22px !important;
    border-radius: 9999px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    cursor: pointer !important;
    transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.discover-hero-button.secondary:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* foot: the rotation as faces on the left, two quiet links on the right */
.discover-hero-controls {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 8px 60px 26px !important;
    box-sizing: border-box !important;
}

.discover-hero-indicators {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    /* flex-start, never center: a centred row that overflows pushes the
       first face off the left edge, where no scroll can reach it */
    justify-content: flex-start !important;
    /* room for the active face's ring, which a scroller would clip */
    padding: 6px !important;
    margin: -6px !important;
    border-radius: 0 !important;
    min-width: 0 !important;
    overflow-x: auto;
    scrollbar-width: none;
}

.discover-hero-indicators::-webkit-scrollbar {
    display: none;
}

.hero-indicator {
    background: transparent !important;
    border: none !important;
    padding: 4px 2px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
}

.hero-indicator-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.35) !important;
    transition: all 240ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hero-indicator.active .hero-indicator-dot {
    width: 22px !important;
    background: var(--accent-color, #1db954) !important;
    box-shadow: 0 0 12px var(--accent-color, #1db954) !important;
}

.hero-indicator:hover .hero-indicator-dot {
    background: rgba(255, 255, 255, 0.65) !important;
}

.hero-indicator--face {
    padding: 3px !important;
    border-radius: 50% !important;
}

.hero-indicator-face {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    opacity: 0.5;
    filter: grayscale(0.4);
    box-shadow: 0 0 0 2px rgba(10, 13, 20, 0.9);
    transition: opacity 180ms ease, filter 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.hero-indicator-face--blank {
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
}

.hero-indicator--face:hover .hero-indicator-face {
    opacity: 0.9;
    filter: none;
}

.hero-indicator--face.active .hero-indicator-face {
    opacity: 1;
    filter: none;
    transform: scale(1.08);
    box-shadow: 0 0 0 2px rgba(10, 13, 20, 0.9), 0 0 0 4px var(--accent-color, #1db954);
}

.hero-indicator:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb, 29, 185, 84), 0.9) !important;
    outline-offset: 2px !important;
}

.discover-hero-bottom-actions {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
}

.discover-hero-bottom-actions button {
    background: none !important;
    backdrop-filter: none !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 9999px !important;
    padding: 8px 12px !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: color 160ms ease, background 160ms ease !important;
}

.discover-hero-bottom-actions button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.discover-hero-bottom-actions button:disabled {
    opacity: 0.55;
    cursor: default !important;
}

.discover-hero-view-all::after {
    content: ' \2192';
}

/* Prev/Next Hero Arrow Chevrons */
.discover-hero-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(10, 13, 20, 0.65) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-size: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 5 !important;
    opacity: 0 !important;
    transition: all 180ms ease !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

.discover-hero:hover .discover-hero-nav {
    opacity: 1 !important;
}

.discover-hero-nav-prev { left: 16px !important; }
.discover-hero-nav-next { right: 16px !important; }

.discover-hero-nav:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-50%) scale(1.08) !important;
}

/* ── 5. Discovery Zones: a title, one line, then the rows ────────────────── */
.discovery-zone {
    margin: 0 0 56px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    /* the sticky nav sits over the top of a zone it scrolled to */
    scroll-margin-top: 64px;
}

.discovery-zone::before {
    display: none !important;
}

.discovery-zone-head {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: none !important;
}

.discovery-zone-head::before {
    display: none !important;
}

.discovery-zone-head h2 {
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.1 !important;
    color: #ffffff !important;
    margin: 0 !important;
}

.discovery-zone-head p {
    font-size: 0.9rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin: 6px 0 0 !important;
}

/* one row of chips, one per zone on the page. sticky, so it's always a tap away */
.dsc-nav {
    position: sticky;
    top: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 -4px 28px;
    padding: 12px 4px;
    background: linear-gradient(180deg, rgba(10, 11, 13, 0.96) 0%, rgba(10, 11, 13, 0.9) 70%, rgba(10, 11, 13, 0) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.dsc-nav-chips {
    display: flex;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    overflow-x: auto;
    scrollbar-width: none;
}

.dsc-nav-chips::-webkit-scrollbar {
    display: none;
}

.dsc-nav-chip,
.dsc-nav-layout {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.78);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.dsc-nav-chip:hover,
.dsc-nav-layout:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.dsc-nav-chip.active {
    background: #fff;
    border-color: #fff;
    color: #0a0b0d;
}

.dsc-nav-layout {
    padding: 0 14px;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
}

.dsc-nav-chip:focus-visible,
.dsc-nav-layout:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb, 29, 185, 84), 0.9);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .dsc-nav-layout span {
        display: none;
    }
    .dsc-nav-layout {
        width: 34px;
        padding: 0;
        justify-content: center;
    }
}

/* ── 6. Spotify-Style Tactile Music Cards ────────────────────────────────── */
/* Grids & Horizontal Rails */
.discover-mixes-grid,
.discover-carousel,
.discover-grid {
    display: flex !important;
    flex-direction: row !important;
    gap: 18px !important;
    overflow-x: auto !important;
    padding: 6px 2px 18px !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent !important;
}

.discover-mixes-grid::-webkit-scrollbar,
.discover-carousel::-webkit-scrollbar,
.discover-grid::-webkit-scrollbar {
    height: 6px;
}

.discover-mixes-grid::-webkit-scrollbar-thumb,
.discover-carousel::-webkit-scrollbar-thumb,
.discover-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

/* Multi-row library grid exception for Your Albums */
[id="your-albums-section"] .discover-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
    gap: 18px !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
}

[id="your-albums-section"] .discover-grid > .ya-card {
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
}

/* Mix Cards */
.discover-mix-card {
    flex: 0 0 190px !important;
    width: 190px !important;
    max-width: 190px !important;
    scroll-snap-align: start !important;
    background: rgba(22, 27, 38, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 16px !important;
    padding: 14px !important;
    box-sizing: border-box !important;
    transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    cursor: pointer !important;
}

.discover-mix-card:hover {
    background: rgba(30, 36, 50, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5) !important;
}

/* Mix Cover Container */
.mix-card-cover {
    width: 100% !important;
    aspect-ratio: 1 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}

/* Floating Circular Spotify Play Button */
.mix-card-play {
    position: absolute !important;
    bottom: 10px !important;
    right: 10px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: var(--accent-color, #1db954) !important;
    color: #000000 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: bold !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5) !important;
    cursor: pointer !important;
    z-index: 5 !important;
    opacity: 0 !important;
    transform: translateY(8px) scale(0.9) !important;
    transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.discover-mix-card:hover .mix-card-play {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

.mix-card-play:hover {
    transform: translateY(-2px) scale(1.08) !important;
    box-shadow: 0 10px 24px rgba(var(--accent-rgb, 29, 185, 84), 0.55) !important;
    background: #22c55e !important;
}

.mix-card-play:active {
    transform: translateY(0) scale(0.96) !important;
}

/* fewer than four real covers: one full-bleed cover, not a mosaic with holes */
.mix-card-cover.mix-card-cover--single {
    display: block !important;
}

.mix-card-tile--full {
    width: 100%;
    height: 100%;
}

/* Mix Title & Meta */
.mix-card-name {
    font-size: 0.94rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-top: 12px !important;
    line-height: 1.3 !important;
}

.mix-card-blurb {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 4px;
    font-size: 0.8rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.62);
}

.mix-card-meta {
    font-size: 0.78rem !important;
    color: var(--dsc-text-muted) !important;
    margin-top: 4px !important;
}

/* ── Base Music Cards (.ya-card) ─────────────────────────────────────────── */
.discover-grid > .ya-card,
.discover-carousel > .ya-card,
.ya-card.discover-album-card,
.ya-card.recommended-artist-card {
    flex: 0 0 180px !important;
    width: 180px !important;
    max-width: 180px !important;
    scroll-snap-align: start !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: rgba(22, 27, 38, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
    transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
}

.discover-grid > .ya-card:hover,
.discover-carousel > .ya-card:hover,
.ya-card.discover-album-card:hover,
.ya-card.recommended-artist-card:hover {
    transform: translateY(-6px) !important;
    background: rgba(30, 36, 50, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55) !important;
}

/* Album Cards & Deezer Picks (Square Artwork & Tactile Spotify/Deezer Shape) */
.ya-card.discover-album-card {
    padding: 12px 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    text-align: left !important;
    cursor: pointer !important;
}

.ya-card.discover-album-card .ya-card-img {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    aspect-ratio: 1 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}

.ya-card.discover-album-card .ya-card-gradient {
    display: none !important;
}

.ya-card.discover-album-card .ya-card-info {
    position: static !important;
    padding: 0 !important;
    width: 100% !important;
    text-align: left !important;
}

.ya-card.discover-album-card .ya-card-name {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 4px !important;
}

.ya-card.discover-album-card .ya-card-sub {
    font-size: 0.78rem !important;
    color: rgba(255, 255, 255, 0.65) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.35 !important;
}

.ya-card-img img {
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ya-card:hover .ya-card-img img {
    transform: scale(1.04) !important;
}

.ya-card-name {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
}

.ya-card-sub {
    font-size: 0.78rem !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Recommended Artist Cards & Your Artists (Spotify Artist Avatar Aesthetic) */
.ya-card.recommended-artist-card,
[id="your-artists-carousel"] .ya-card {
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    cursor: pointer !important;
}

.ya-card.recommended-artist-card .recommended-card-image,
.ya-card.recommended-artist-card .ya-card-img,
[id="your-artists-carousel"] .ya-card .ya-card-img {
    width: 100% !important;
    aspect-ratio: 1 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    margin: 0 auto 12px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45) !important;
    border: 2px solid rgba(255, 255, 255, 0.08) !important;
    position: relative !important;
}

.ya-card.recommended-artist-card .recommended-card-image img,
.ya-card.recommended-artist-card .ya-card-img img,
[id="your-artists-carousel"] .ya-card .ya-card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ya-card.recommended-artist-card:hover .recommended-card-image img,
.ya-card.recommended-artist-card:hover .ya-card-img img,
[id="your-artists-carousel"] .ya-card:hover .ya-card-img img {
    transform: scale(1.06) !important;
}

.recommended-card-image-fallback {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 38px !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

.ya-card.recommended-artist-card .ya-card-info,
[id="your-artists-carousel"] .ya-card .ya-card-info {
    text-align: center !important;
    padding: 0 !important;
    width: 100% !important;
}

.ya-card.recommended-artist-card .ya-card-name,
[id="your-artists-carousel"] .ya-card .ya-card-name {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 4px !important;
}

.ya-card.recommended-artist-card .ya-card-sub,
[id="your-artists-carousel"] .ya-card .ya-card-sub {
    font-size: 0.76rem !important;
    color: var(--dsc-text-muted) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 6px !important;
}

/* the reason names your artists; cutting it at one line cut the names off */
.ya-card.recommended-artist-card .ya-card-sub {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal !important;
    line-height: 1.35 !important;
    color: rgba(255, 255, 255, 0.62) !important;
}

.ya-card.recommended-artist-card .ya-card-why {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-bottom: 6px !important;
}

.ya-why-chip {
    font-size: 0.68rem !important;
    padding: 2px 7px !important;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-weight: 500 !important;
}

/* Eye Symbol Watchlist Button (Top-Right on Artist Cards — matches Your Artists) */
.ya-watchlist-btn,
.recommended-artist-card .recommended-card-watchlist-btn,
.recommended-card-watchlist-btn {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 4 !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 8px !important;
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.65) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
    transition: opacity 180ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
                background 180ms ease,
                border-color 180ms ease,
                color 180ms ease !important;
}

.ya-card:hover .ya-watchlist-btn,
.ya-card:hover .recommended-card-watchlist-btn,
.recommended-artist-card:hover .recommended-card-watchlist-btn,
.recommended-artist-card:focus-within .recommended-card-watchlist-btn,
.ya-watchlist-btn.active,
.ya-watchlist-btn.watching,
.recommended-card-watchlist-btn.watching,
.recommended-card-watchlist-btn.active {
    opacity: 1 !important;
}

.ya-watchlist-btn:hover:not(:disabled),
.recommended-card-watchlist-btn:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
}

.ya-watchlist-btn.active,
.ya-watchlist-btn.watching,
.recommended-card-watchlist-btn.watching,
.recommended-card-watchlist-btn.active {
    opacity: 1 !important;
    color: var(--accent, #1db954) !important;
    border-color: rgba(var(--accent-rgb, 29, 185, 84), 0.4) !important;
    background: rgba(var(--accent-rgb, 29, 185, 84), 0.18) !important;
    box-shadow: 0 0 12px rgba(var(--accent-rgb, 29, 185, 84), 0.3) !important;
}

.recommended-card-watchlist-btn .sr-only,
.recommended-card-watchlist-btn span {
    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;
}

@media (hover: none), (max-width: 768px) {
    .ya-watchlist-btn,
    .recommended-artist-card .recommended-card-watchlist-btn {
        opacity: 0.92 !important;
        transform: none !important;
    }
}

/* ── 7. Stations: a face with a play button, and a name that opens it ───── */
.discover-stations-row {
    grid-auto-columns: 176px !important;
    gap: 16px !important;
    padding: 4px 2px 14px !important;
}

.discover-station-card {
    align-items: stretch !important;
    gap: 12px !important;
    padding: 16px 16px 14px !important;
    border-radius: 18px !important;
    background: rgba(22, 27, 38, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    transition: background 200ms ease, border-color 200ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.discover-station-card:hover {
    background: rgba(30, 36, 50, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    transform: translateY(-4px) !important;
}

/* library radio leads the row, so it wears the accent */
.discover-station-card.discover-station-card--library {
    background: linear-gradient(160deg, rgba(var(--accent-rgb, 29, 185, 84), 0.16), rgba(22, 27, 38, 0.6) 70%) !important;
}

.discover-station-art-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
}

.discover-station-art {
    width: 100% !important;
    height: 100% !important;
    font-size: 2.4rem !important;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45) !important;
}

.discover-station-art--library {
    color: #fff;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.28), transparent 55%),
        linear-gradient(145deg, var(--accent-color, #1db954), #0c5a2b) !important;
}

.discover-station-play {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--accent-color, #1db954);
    color: #05130a;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 180ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.discover-station-card:hover .discover-station-play,
.discover-station-card:focus-within .discover-station-play,
.discover-station-play[aria-busy='true'] {
    opacity: 1;
    transform: translateY(0);
}

.discover-station-play:hover:not(:disabled) {
    transform: scale(1.06);
}

.discover-station-play:focus-visible,
.discover-station-open:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb, 29, 185, 84), 0.9);
    outline-offset: 2px;
}

.discover-station-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(5, 19, 10, 0.3);
    border-top-color: #05130a;
    animation: dsc-spin 0.8s linear infinite;
}

@keyframes dsc-spin {
    to { transform: rotate(360deg); }
}

.discover-station-open {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.discover-station-open:disabled {
    cursor: progress;
}

.discover-station-open:hover .discover-station-name {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (hover: none) {
    .discover-station-play {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .discover-station-spinner {
        animation: none;
    }
}

/* ── 8. Taste Dial (Adventurousness Wave) ─────────────────────────────────── */
/* min-height auto on purpose. style.css still carried min-height: 100% from
   the old two-column rows, which stretched the dial ~100px past its content
   and, with the margins here, pushed it 20px into the shelf below. */
.adv-wave,
.discovery-zone .adv-wave {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    min-height: auto !important;
    background: linear-gradient(135deg, rgba(20, 26, 38, 0.75) 0%, rgba(12, 16, 24, 0.85) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 18px !important;
    padding: 18px 22px 16px !important;
    margin: 8px 0 32px !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35) !important;
    overflow: hidden !important;
}

.adv-wave-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.adv-wave-label {
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: rgba(255, 255, 255, 0.65) !important;
    margin: 0 !important;
}

.adv-wave-state {
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    padding: 4px 14px !important;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

.adv-wave-track,
.discovery-zone .adv-wave-track {
    position: relative !important;
    height: 72px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: rgba(10, 13, 20, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.6) !important;
    margin: 0 !important;
}

.adv-wave-ends {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    padding: 0 2px !important;
    margin: 0 !important;
}

.adv-wave-help {
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.55) !important;
    margin: 0 !important;
}

/* ── 9. Deezer Editorial Curated Shelf ────────────────────────────────────── */
[id="deezer-editorial"] {
    position: relative !important;
    border-radius: 20px !important;
    padding: 24px 28px !important;
    background: linear-gradient(135deg, rgba(162, 56, 255, 0.07) 0%, rgba(18, 22, 32, 0.7) 100%) !important;
    border: 1px solid rgba(162, 56, 255, 0.22) !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.4) !important;
    margin-bottom: 40px !important;
}

[id="deezer-editorial"] .discovery-zone-title {
    background: linear-gradient(135deg, #ffffff 40%, #c084fc 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.dz-ed-controls {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.dz-ed-search {
    width: 100% !important;
    max-width: 380px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 9999px !important;
    padding: 10px 18px !important;
    font-size: 0.86rem !important;
    color: #ffffff !important;
    outline: none !important;
    transition: all 180ms ease !important;
}

.dz-ed-search:focus {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(162, 56, 255, 0.6) !important;
    box-shadow: 0 0 16px rgba(162, 56, 255, 0.25) !important;
}

.dz-ed-genres {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    padding: 2px 0 6px !important;
}

.dz-ed-genres::-webkit-scrollbar {
    display: none !important;
}

.dz-ed-genre {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 14px !important;
    border-radius: 9999px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 160ms ease !important;
}

.dz-ed-genre:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

.dz-ed-genre.is-active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #a238ff, #7928ca) !important;
    border-color: #a238ff !important;
    box-shadow: 0 4px 14px rgba(162, 56, 255, 0.4) !important;
}

.dz-ed-progress {
    width: 100% !important;
    height: 4px !important;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    overflow: hidden !important;
    margin-top: 6px !important;
}

.dz-ed-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #a238ff, #06b6d4) !important;
    border-radius: 9999px !important;
    transition: width 200ms ease !important;
}

/* Hero Help & Blacklist frosted glass buttons */
.tool-help-button.discover-page-help-button,
.discover-blacklist-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    cursor: pointer !important;
    transition: all 180ms ease !important;
}

.tool-help-button.discover-page-help-button:hover,
.discover-blacklist-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.06) !important;
}

/* ── 10. Premier Artist Map & Artist Web Hubs (Explore & Build) ──────────── */
.discover-hub-row--tools {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
    align-items: stretch !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
}

@media (max-width: 1100px) {
    .discover-hub-row--tools {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

.discover-hub-row--tools .artmap-hub {
    position: relative !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: linear-gradient(145deg, rgba(17, 23, 37, 0.75) 0%, rgba(10, 14, 24, 0.88) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.28s ease,
                box-shadow 0.28s ease !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.discover-hub-row--tools .artmap-hub:hover {
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Background atmosphere with subtle glowing color clouds */
.discover-hub-row--tools .artmap-hub-bg {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    background: radial-gradient(circle at 18% 18%, rgba(162, 56, 255, 0.14) 0%, transparent 55%),
                radial-gradient(circle at 82% 82%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
                linear-gradient(145deg, #0f1422 0%, #090c14 100%) !important;
    opacity: 0.95 !important;
}

/* Give the second card (Artist Web) an electric blue / indigo glow accent */
.discover-hub-row--tools .artmap-hub:nth-child(2) .artmap-hub-bg {
    background: radial-gradient(circle at 18% 18%, rgba(56, 189, 248, 0.14) 0%, transparent 55%),
                radial-gradient(circle at 82% 82%, rgba(162, 56, 255, 0.1) 0%, transparent 50%),
                linear-gradient(145deg, #0b1526 0%, #080c14 100%) !important;
}

.discover-hub-row--tools .artmap-hub-bg::after {
    display: none !important;
}

.discover-hub-row--tools .artmap-hub-bg::before {
    opacity: 0.18 !important;
}

/* Hub Content & Header */
.discover-hub-row--tools .artmap-hub-content {
    position: relative !important;
    z-index: 2 !important;
    padding: 24px 26px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}

.discover-hub-row--tools .artmap-hub-header {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
}

.discover-hub-row--tools .artmap-hub-icon {
    width: 32px !important;
    height: 32px !important;
    color: #c084fc !important;
    filter: drop-shadow(0 2px 10px rgba(192, 132, 252, 0.4)) !important;
    flex-shrink: 0 !important;
}

.discover-hub-row--tools .artmap-hub:nth-child(2) .artmap-hub-icon {
    color: #38bdf8 !important;
    filter: drop-shadow(0 2px 10px rgba(56, 189, 248, 0.4)) !important;
}

.discover-hub-row--tools .artmap-hub-title {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.discover-hub-row--tools .artmap-hub-subtitle {
    font-size: 0.86rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin: 4px 0 0 !important;
    line-height: 1.35 !important;
}

/* Grid of 3 action cards */
.discover-hub-row--tools .artmap-hub-cards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
    flex: 1 1 auto !important;
}

/* Each action card button — redesigned from cramped row to generous structured card */
.discover-hub-row--tools .artmap-hub-card {
    display: grid !important;
    grid-template-areas:
        "icon arrow"
        "text text" !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto 1fr !important;
    row-gap: 14px !important;
    column-gap: 10px !important;
    align-items: start !important;
    text-align: left !important;
    padding: 18px 16px 18px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 148px !important;
    box-sizing: border-box !important;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.22s ease,
                border-color 0.22s ease,
                box-shadow 0.22s ease !important;
}

.discover-hub-row--tools .artmap-hub-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(circle at 50% 0%, rgba(162, 56, 255, 0.16) 0%, transparent 72%) !important;
    opacity: 0 !important;
    transition: opacity 0.22s ease !important;
    pointer-events: none !important;
}

.discover-hub-row--tools .artmap-hub:nth-child(2) .artmap-hub-card::before {
    background: radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.16) 0%, transparent 72%) !important;
}

.discover-hub-row--tools .artmap-hub-card:hover {
    transform: translateY(-3px) !important;
    background: rgba(255, 255, 255, 0.075) !important;
    border-color: rgba(162, 56, 255, 0.4) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38), 0 0 24px rgba(162, 56, 255, 0.16) !important;
}

.discover-hub-row--tools .artmap-hub:nth-child(2) .artmap-hub-card:hover {
    border-color: rgba(56, 189, 248, 0.42) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38), 0 0 24px rgba(56, 189, 248, 0.16) !important;
}

.discover-hub-row--tools .artmap-hub-card:hover::before {
    opacity: 1 !important;
}

.discover-hub-row--tools .artmap-hub-card:active {
    transform: translateY(-1px) scale(0.99) !important;
}

/* Icon Squircle */
.discover-hub-row--tools .artmap-hub-card-icon {
    grid-area: icon !important;
    justify-self: start !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    background: rgba(162, 56, 255, 0.12) !important;
    border: 1px solid rgba(162, 56, 255, 0.24) !important;
    color: #d8b4fe !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 0.22s ease !important;
}

.discover-hub-row--tools .artmap-hub:nth-child(2) .artmap-hub-card-icon {
    background: rgba(56, 189, 248, 0.12) !important;
    border-color: rgba(56, 189, 248, 0.24) !important;
    color: #7dd3fc !important;
}

.discover-hub-row--tools .artmap-hub-card-icon svg {
    width: 22px !important;
    height: 22px !important;
}

.discover-hub-row--tools .artmap-hub-card:hover .artmap-hub-card-icon {
    background: rgba(162, 56, 255, 0.24) !important;
    border-color: rgba(162, 56, 255, 0.48) !important;
    color: #ffffff !important;
    transform: scale(1.06) !important;
    box-shadow: 0 4px 14px rgba(162, 56, 255, 0.35) !important;
}

.discover-hub-row--tools .artmap-hub:nth-child(2) .artmap-hub-card:hover .artmap-hub-card-icon {
    background: rgba(56, 189, 248, 0.24) !important;
    border-color: rgba(56, 189, 248, 0.48) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(56, 189, 248, 0.35) !important;
}

/* Arrow indicator on top-right */
.discover-hub-row--tools .artmap-hub-card-arrow {
    grid-area: arrow !important;
    justify-self: end !important;
    align-self: center !important;
    width: 18px !important;
    height: 18px !important;
    color: rgba(255, 255, 255, 0.28) !important;
    transition: all 0.22s ease !important;
}

.discover-hub-row--tools .artmap-hub-card:hover .artmap-hub-card-arrow {
    color: #c084fc !important;
    transform: translateX(3px) !important;
}

.discover-hub-row--tools .artmap-hub:nth-child(2) .artmap-hub-card:hover .artmap-hub-card-arrow {
    color: #38bdf8 !important;
}

/* Text block spanning full width below icon */
.discover-hub-row--tools .artmap-hub-card-text {
    grid-area: text !important;
    width: 100% !important;
    min-width: 0 !important;
}

.discover-hub-row--tools .artmap-hub-card-text h3 {
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: #ffffff !important;
    margin: 0 0 6px !important;
    line-height: 1.25 !important;
    transition: color 0.2s ease !important;
}

.discover-hub-row--tools .artmap-hub-card-text p {
    font-size: 0.81rem !important;
    line-height: 1.44 !important;
    color: rgba(255, 255, 255, 0.65) !important;
    margin: 0 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    transition: color 0.2s ease !important;
}

.discover-hub-row--tools .artmap-hub-card:hover .artmap-hub-card-text p {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ── 11. Responsive Mobile Adjustments (< 768px) ─────────────────────────── */
@media (max-width: 768px) {
    .discover-container {
        padding: 12px 14px 72px !important;
    }

    /* never a fixed height: 290px with overflow hidden clipped the title off
       the top and stacked the actions on the faces the moment a name wrapped */
    .discover-hero {
        height: auto !important;
        min-height: 0 !important;
        border-radius: 18px !important;
    }

    /* on a phone the text sits over the photo, so the scrim darkens top to bottom */
    .discover-hero-overlay {
        background: linear-gradient(180deg, rgba(10, 13, 20, 0.55) 0%, rgba(10, 13, 20, 0.85) 45%, #0a0d14 100%) !important;
    }

    .discover-hero-content,
    .discover-command-hero .discover-hero-content {
        max-width: 100% !important;
        padding: 22px 20px 6px !important;
    }

    .discover-hero-title {
        font-size: 26px !important;
        margin-bottom: 6px !important;
    }

    .discover-hero-subtitle {
        font-size: 0.85rem !important;
        margin-bottom: 10px !important;
    }

    .discover-hero-button.primary {
        padding: 10px 20px !important;
        font-size: 0.84rem !important;
    }

    .discover-hero-button.secondary {
        padding: 9px 16px !important;
        font-size: 0.82rem !important;
    }

    /* mobile.css stacks these headers into a column; flex-end in a column
       means "hug the right edge", which is where their titles ended up */
    .discovery-zone-head,
    .discover-section-header {
        align-items: flex-start !important;
    }

    .discover-hero-controls {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 10px 20px 16px !important;
    }

    .discover-hero-indicators {
        max-width: 100% !important;
        flex-wrap: nowrap !important;
    }

    .hero-indicator-face {
        width: 30px;
        height: 30px;
    }

    .discover-hero-bottom-actions {
        margin-left: -12px !important;
    }

    .discover-hero-nav {
        display: none !important;
    }

    /* On mobile, collapse the command analytics panel to prioritize music discovery shelves */
    .discover-command-panel {
        display: none !important;
    }

    .discover-mix-card {
        flex: 0 0 152px !important;
        width: 152px !important;
        padding: 10px !important;
        border-radius: 14px !important;
    }

    /* On mobile touch devices, keep Play button accessible */
    .mix-card-play {
        opacity: 0.92 !important;
        transform: none !important;
        width: 38px !important;
        height: 38px !important;
        font-size: 13px !important;
    }

    .discover-grid > .ya-card,
    .discover-carousel > .ya-card,
    .ya-card.discover-album-card,
    .ya-card.recommended-artist-card,
    [id="your-artists-carousel"] .ya-card {
        flex: 0 0 148px !important;
        width: 148px !important;
        max-width: 148px !important;
        padding: 10px !important;
        border-radius: 14px !important;
    }

    [id="deezer-editorial"] {
        padding: 18px 16px !important;
    }

    .dz-ed-search {
        max-width: 100% !important;
    }

    .discover-hub-row--tools {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .discover-hub-row--tools .artmap-hub-cards {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .discover-hub-row--tools .artmap-hub-card {
        grid-template-areas: "icon text arrow" !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-rows: auto !important;
        column-gap: 14px !important;
        row-gap: 0 !important;
        align-items: center !important;
        min-height: auto !important;
        padding: 14px 16px !important;
    }
}

/* ── Discovery feedback ⋯ (more / less like this, not now, block) ──────────
   The same chip as the watchlist eye, in the opposite corner: hidden until the
   card is hovered or focused, always shown where there is no hover. */
.discover-feedback-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: opacity 180ms ease, background 180ms ease, color 180ms ease;
}

.discover-feedback-trigger:hover:not(:disabled),
.discover-feedback-trigger[aria-expanded="true"] {
    background: rgba(var(--accent-rgb), 0.85);
    color: #fff;
}

.discover-feedback-trigger:focus-visible {
    outline: 2px solid rgb(var(--accent-rgb));
    outline-offset: 2px;
}

.discover-feedback-trigger:disabled {
    opacity: 0.5;
    cursor: default;
}

.ya-card-feedback-btn,
.recommended-card-feedback-btn,
.discover-station-feedback-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 4;
    opacity: 0;
}

.ya-card:hover .ya-card-feedback-btn,
.ya-card:focus-within .ya-card-feedback-btn,
.recommended-artist-card:hover .recommended-card-feedback-btn,
.recommended-artist-card:focus-within .recommended-card-feedback-btn,
.discover-station-card:hover .discover-station-feedback-btn,
.discover-station-card:focus-within .discover-station-feedback-btn,
.discover-feedback-trigger[aria-expanded="true"] {
    opacity: 1;
}

.bylt-track-feedback-btn {
    width: 30px;
    height: 30px;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.15);
}

.discover-feedback-menu {
    min-width: 190px;
}

@media (hover: none) {
    .ya-card-feedback-btn,
    .recommended-card-feedback-btn,
    .discover-station-feedback-btn {
        opacity: 1;
    }
}

/* reset taste, beside Close in the blocked artists modal: left, quiet until armed */
.discover-reset-taste-btn {
    margin-right: auto;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.75);
}

.discover-reset-taste-btn.armed {
    border-color: rgba(255, 107, 107, 0.6);
    color: #ff9a9a;
}

/* the hero's ⋯ sits in its action row, sized to the pills beside it */
.discover-hero-feedback-btn {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    font-size: 20px;
    align-self: center;
}

/* ── Discovery inbox (releases, what's coming, saved, concerts) ──────────── */
.discover-inbox {
    margin: 0 0 36px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.025);
}

.discover-inbox-header {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.discover-inbox-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.discover-inbox-count {
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgb(var(--accent-rgb));
    color: #000;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}

.discover-inbox-tabs {
    display: flex;
    gap: 4px;
}

.discover-inbox-tab {
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    cursor: pointer;
}

.discover-inbox-tab.active {
    background: rgba(var(--accent-rgb), 0.18);
    border-color: rgba(var(--accent-rgb), 0.5);
    color: #fff;
}

.discover-inbox-clear {
    margin-left: auto;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    cursor: pointer;
}

.discover-inbox-clear:hover {
    color: #fff;
}

.discover-inbox-note,
.discover-inbox-empty {
    margin: 10px 0 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
}

.discover-inbox-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 8px;
}

.discover-inbox-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    min-width: 0;
}

.discover-inbox-art {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    font-size: 22px;
}

.discover-inbox-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.discover-inbox-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 0;
}

.discover-inbox-kind {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--accent-rgb));
}

.discover-inbox-name,
.discover-inbox-sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.discover-inbox-name {
    font-weight: 600;
}

.discover-inbox-sub {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.discover-inbox-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.discover-inbox-actions a.btn {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    text-decoration: none;
}

/* save and dismiss: quiet icons, brighter when the row is hovered */
.discover-inbox-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease;
}

.discover-inbox-item:hover .discover-inbox-icon {
    color: rgba(255, 255, 255, 0.7);
}

.discover-inbox-icon:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08);
}

.discover-inbox-icon:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb, 29, 185, 84), 0.9);
    outline-offset: 1px;
}

/* a concert's art is its date */
.discover-inbox-date {
    flex-direction: column;
    gap: 0;
    background: rgba(255, 255, 255, 0.08);
    line-height: 1;
}

.discover-inbox-date-month {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--accent-light-rgb, 30, 215, 96));
}

.discover-inbox-date-day {
    margin-top: 3px;
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.discover-inbox-more {
    margin-top: 10px;
    background: none;
    border: none;
    color: rgb(var(--accent-rgb));
    font-size: 0.85rem;
    cursor: pointer;
}

@media (max-width: 600px) {
    .discover-inbox {
        padding: 12px;
    }

    .discover-inbox-list {
        grid-template-columns: 1fr;
    }

    /* art | text on the first row, the actions under the text */
    .discover-inbox-item {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 8px;
    }

    .discover-inbox-actions {
        grid-column: 2;
    }
}

/* ── Renewable mixes: the Build a mix button and the recipe editor ───────── */
.discover-build-mix-btn {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(var(--accent-rgb), 0.5);
    background: rgba(var(--accent-rgb), 0.12);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.discover-build-mix-btn:hover {
    background: rgba(var(--accent-rgb), 0.25);
}

.recipe-modal {
    position: relative;
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.recipe-modal-header {
    padding: 20px 56px 8px 24px;
}

.recipe-modal-header h2 {
    margin: 0 0 4px;
    font-size: 1.25rem;
}

.recipe-modal-header p {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.recipe-modal-header .watch-all-close {
    position: absolute;
    top: 14px;
    right: 16px;
}

.recipe-modal-body {
    padding: 12px 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.recipe-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 0;
    min-width: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}

.recipe-field input,
.recipe-field select {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 0.9rem;
}

.recipe-row {
    display: flex;
    gap: 12px;
}

.recipe-shares {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.recipe-shares legend {
    padding: 0 6px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.recipe-share {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.85rem;
}

.recipe-share input[type="range"] {
    width: 100%;
    accent-color: rgb(var(--accent-rgb));
}

.recipe-share-label {
    display: flex;
    justify-content: space-between;
}

.recipe-share-value {
    color: rgb(var(--accent-rgb));
    font-variant-numeric: tabular-nums;
}

.recipe-hint {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.recipe-error {
    margin: 0;
    color: #ff9a9a;
    font-size: 0.85rem;
}

.recipe-modal-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px 24px 20px;
}

.recipe-delete {
    margin-right: auto;
    background: transparent;
    border: 1px solid rgba(255, 107, 107, 0.4);
    color: #ff9a9a;
}

.recipe-delete.armed {
    background: rgba(255, 107, 107, 0.15);
}

@media (max-width: 600px) {
    .recipe-modal-header {
        padding-left: 16px;
    }

    .recipe-modal-body,
    .recipe-modal-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .recipe-row {
        flex-direction: column;
    }
}

/* ── 12. Pulse banners: your week, your taste gap, the spotlight ─────────── */
.dsc-pulse-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 20px;
    margin: 0 0 12px;
}

.dsc-pulse-row--single {
    grid-template-columns: minmax(0, 1fr);
}

.dsc-pulse {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(145deg, rgba(24, 29, 40, 0.9), rgba(13, 16, 23, 0.95));
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
    padding: 22px 24px;
    min-width: 0;
}

.dsc-pulse-eyebrow {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.dsc-pulse-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.dsc-pulse-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 160ms ease, transform 160ms ease;
}

.dsc-pulse-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
}

.dsc-pulse-btn.primary {
    border-color: transparent;
    background: #fff;
    color: #0a0b0d;
}

.dsc-pulse-btn.primary:hover:not(:disabled) {
    background: #fff;
    transform: scale(1.03);
}

.dsc-pulse-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.dsc-pulse-btn:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb, 29, 185, 84), 0.9);
    outline-offset: 2px;
}

/* your week: figure | the week's shape | who was on repeat */
.dsc-week {
    display: grid;
    grid-template-columns: minmax(290px, 1.5fr) minmax(140px, 1fr) auto;
    align-items: center;
    gap: 28px;
}

.dsc-week-wash {
    position: absolute;
    inset: -30%;
    left: 40%;
    background-size: cover;
    background-position: center;
    filter: blur(60px) saturate(1.3);
    opacity: 0.22;
    pointer-events: none;
}

.dsc-week-main,
.dsc-week-chart,
.dsc-week-top {
    position: relative;
}

.dsc-week-figure {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.dsc-week-figure strong {
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.dsc-week-figure > span:not(.dsc-week-change) {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
}

.dsc-week-change {
    align-self: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
}

.dsc-week-change.up {
    color: rgb(var(--accent-light-rgb, 30, 215, 96));
    background: rgba(var(--accent-rgb, 29, 185, 84), 0.14);
}

.dsc-week-sub {
    margin: 8px 0 0;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.6);
}

.dsc-week-chart {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 6px;
    height: 110px;
}

.dsc-week-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.dsc-week-bar-slot {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.dsc-week-bar {
    width: min(100%, 18px);
    border-radius: 4px 4px 1px 1px;
    background: var(--accent-color, #1db954);
    opacity: 0.85;
    transition: opacity 160ms ease;
}

.dsc-week-day:hover .dsc-week-bar {
    opacity: 1;
}

.dsc-week-day-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
}

.dsc-week-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    width: 128px;
}

.dsc-week-top-img {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 8px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}

.dsc-week-top-img--blank {
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.1);
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
}

.dsc-week-top-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.dsc-week-top-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
}

.dsc-week-top-plays {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
}

/* the inbox, now the first thing in New & Missing */
.discovery-zone-section--inbox {
    margin-bottom: 28px;
}

/* the taste gap */
.dsc-gap {
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb, 29, 185, 84), 0.16), transparent 55%),
        linear-gradient(145deg, rgba(24, 29, 40, 0.9), rgba(13, 16, 23, 0.95));
}

.dsc-gap-genre {
    margin: 8px 0 0;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #fff;
}

.dsc-gap-line {
    margin: 4px 0 16px;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.65);
}

.dsc-gap-bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dsc-gap-row {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
}

.dsc-gap-row b {
    text-align: right;
    color: #fff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.dsc-gap-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.dsc-gap-fill {
    height: 100%;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
}

.dsc-gap-fill.played {
    background: var(--accent-color, #1db954);
}

.dsc-gap .dsc-pulse-actions {
    margin-top: auto;
    padding-top: 16px;
}

/* the spotlight: one release, full width, between For You and New & Missing */











@media (max-width: 1100px) {
    .dsc-pulse-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .dsc-week {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 18px;
    }
    .dsc-week-chart {
        grid-column: 1 / -1;
        grid-row: 2;
        height: 80px;
    }
    .dsc-week-top {
        width: 96px;
    }
    .dsc-week-top-img {
        width: 56px;
        height: 56px;
    }
    .dsc-week-figure strong {
        font-size: 2.1rem;
    }
    .dsc-pulse {
        padding: 18px;
    }


}

/* ── 13. Not-connected and unreachable states stay one line tall ─────────── */
/* a feature you haven't set up is an invitation, not a 300px dashed box */
.discovery-zone .lb-empty-state {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "icon title button"
        "icon copy button"
        "icon help button";
    align-items: center;
    column-gap: 16px;
    row-gap: 2px;
    text-align: left;
    padding: 16px 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
}

.discovery-zone .lb-empty-state .lb-empty-icon {
    grid-area: icon;
    margin: 0;
    font-size: 28px;
}

.discovery-zone .lb-empty-state h3 {
    grid-area: title;
    margin: 0;
    font-size: 0.95rem;
}

.discovery-zone .lb-empty-state p {
    grid-area: copy;
    margin: 0;
    max-width: none;
    font-size: 0.84rem;
}

.discovery-zone .lb-empty-state .lb-empty-help {
    grid-area: help;
    font-size: 0.76rem;
}

.discovery-zone .lb-empty-state .lb-connect-btn {
    grid-area: button;
    margin: 0;
    white-space: nowrap;
}

/* deezer unreachable / loading / no match: a line, not a panel */
[id="deezer-editorial"] .discover-empty {
    padding: 14px 0 4px;
    min-height: 0;
    text-align: left;
}

[id="deezer-editorial"] .discover-empty p {
    margin: 0;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 640px) {
    .discovery-zone .lb-empty-state {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "icon title"
            "icon copy"
            "icon help"
            "button button";
        row-gap: 6px;
    }
}

/* a phone: the week reads top to bottom, and who was on repeat is one line */
@media (max-width: 520px) {
    .dsc-week {
        grid-template-columns: minmax(0, 1fr);
    }
    .dsc-week-chart {
        grid-row: auto;
    }
    .dsc-week-top {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        grid-template-areas: "img label" "img name" "img plays";
        align-items: center;
        column-gap: 12px;
        row-gap: 0;
        width: auto;
        text-align: left;
    }
    .dsc-week-top-img {
        grid-area: img;
        width: 48px;
        height: 48px;
        margin: 0;
    }
    .dsc-week-top-label { grid-area: label; }
    .dsc-week-top-name { grid-area: name; }
    .dsc-week-top-plays { grid-area: plays; }
}

/* ── 14. Moods: the album mosaic under the mood's own colour ─────────────── */
.discover-mix-card[data-mix-key^="mood_"] .mix-card-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(160deg, rgba(var(--mood-rgb), 0.78) 0%, rgba(var(--mood-rgb), 0.35) 55%, rgba(var(--mood-rgb), 0.1) 100%);
    mix-blend-mode: normal;
}

/* the quick grid's mood tile wears the same colour */
.dsc-quick-tile[data-mix-key^="mood_"] .dsc-quick-art {
    position: relative;
}

.dsc-quick-tile[data-mix-key^="mood_"] .dsc-quick-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(var(--mood-rgb), 0.85), rgba(var(--mood-rgb), 0.35));
}

.discover-mix-card[data-mix-key^="mood_"] .mix-card-play {
    z-index: 5 !important;
}

[data-mix-key="mood_chill"] { --mood-rgb: 45, 170, 220; }
[data-mix-key="mood_focus"] { --mood-rgb: 99, 102, 241; }
[data-mix-key="mood_energy"] { --mood-rgb: 244, 96, 32; }
[data-mix-key="mood_feel_good"] { --mood-rgb: 234, 179, 8; }
[data-mix-key="mood_late_night"] { --mood-rgb: 124, 58, 237; }

/* ── 15. Greeting and the quick grid (spotify's home, with deezer's flow) ── */
.dsc-greeting {
    margin: 4px 0 24px;
}

.dsc-greeting-title {
    margin: 0 0 16px;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: #fff;
}

.dsc-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.dsc-quick-tile {
    position: relative;
    display: flex;
    align-items: center;
    height: 64px;
    min-width: 0;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
    transition: background 160ms ease;
}

.dsc-quick-tile:hover,
.dsc-quick-tile:focus-within {
    background: rgba(255, 255, 255, 0.13);
}

.dsc-quick-open {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0 52px 0 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.dsc-quick-art {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.06);
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.35);
}

.dsc-quick-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
}

.dsc-quick-play {
    position: absolute;
    right: 12px;
    top: 50%;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--accent-color, #1db954);
    color: #05130a;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%) scale(0.9);
    transition: opacity 160ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dsc-quick-tile:hover .dsc-quick-play,
.dsc-quick-tile:focus-within .dsc-quick-play,
.dsc-quick-play[aria-busy='true'] {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.dsc-quick-open:focus-visible,
.dsc-quick-play:focus-visible,
.dsc-quick-tile--flow:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb, 29, 185, 84), 0.9);
    outline-offset: 2px;
}

/* flow: the one-tap button, two cells wide, alive */
.dsc-quick-tile--flow {
    grid-column: span 2;
    gap: 14px;
    padding: 0 60px 0 14px;
    border: none;
    color: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
    background: linear-gradient(120deg, #0d5c32 0%, #1e3a8a 50%, #5b21b6 100%);
    background-size: 200% 200%;
    animation: dsc-flow-shift 14s ease-in-out infinite;
}

.dsc-quick-tile--flow:hover {
    background: linear-gradient(120deg, #0f7a42 0%, #1d4ed8 50%, #6d28d9 100%);
    background-size: 200% 200%;
}

.dsc-quick-tile--flow .dsc-quick-play {
    opacity: 1;
    transform: translateY(-50%);
    background: #fff;
    color: #0a0b0d;
}

.dsc-quick-tile--flow:disabled {
    cursor: progress;
}

.dsc-flow-orb {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff 0%, rgba(255, 255, 255, 0.55) 35%, rgba(255, 255, 255, 0) 72%);
    box-shadow: 0 0 22px rgba(255, 255, 255, 0.45);
    animation: dsc-flow-breathe 3.2s ease-in-out infinite;
}

.dsc-quick-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dsc-quick-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.75);
}

@keyframes dsc-flow-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes dsc-flow-breathe {
    0%, 100% { transform: scale(0.92); opacity: 0.85; }
    50% { transform: scale(1.05); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .dsc-quick-tile--flow,
    .dsc-flow-orb {
        animation: none;
    }
}

@media (hover: none) {
    .dsc-quick-play {
        opacity: 1;
        transform: translateY(-50%);
    }
}

@media (max-width: 1100px) {
    .dsc-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .dsc-greeting-title {
        font-size: 1.5rem;
    }
    .dsc-quick-tile {
        height: 56px;
    }
    .dsc-quick-art {
        flex-basis: 56px;
        width: 56px;
        height: 56px;
    }
    .dsc-quick-name {
        font-size: 0.82rem;
    }
    /* a phone tile is a tap target: tap opens it. the play button just
       squeezed every name down to three letters */
    .dsc-quick-tile:not(.dsc-quick-tile--flow) .dsc-quick-play {
        display: none;
    }
    .dsc-quick-open {
        padding-right: 8px;
        gap: 10px;
    }
}

/* ── 16. Living banners: one music video at a time, colour-matched glow ─── */
/* the video sits between the photo and the scrim. it's sized like
   background-size: cover against its own box (cq units), and zoomed a touch
   so youtube's letterboxing and corner branding fall outside the frame */
.dsc-backdrop-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    container-type: size;
    opacity: 0;
    transition: opacity 1.4s ease;
}

.dsc-backdrop-video.ready {
    opacity: 0.9;
}

.dsc-backdrop-video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100cqw, 177.78cqh);
    height: max(100cqh, 56.25cqw);
    border: 0;
    transform: translate(-50%, -50%) scale(1.18);
    pointer-events: none;
}

/* the hero glows the colour of the artist on it */
.discover-hero[style*="--hero-rgb"] {
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.55),
        0 0 120px -30px rgba(var(--hero-rgb), 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(var(--hero-rgb), 0.28) !important;
    transition: box-shadow 1.2s ease, border-color 1.2s ease;
}

.discover-hero[style*="--hero-rgb"] .discover-hero-label-dot {
    background: rgb(var(--hero-rgb));
    box-shadow: 0 0 10px rgba(var(--hero-rgb), 0.9);
}

.discover-hero[style*="--hero-rgb"] .hero-indicator--face.active .hero-indicator-face {
    box-shadow: 0 0 0 2px rgba(10, 13, 20, 0.9), 0 0 0 4px rgb(var(--hero-rgb));
}



/* the video switch, beside the block and help buttons */





/* the week's bars grow in, one after another, the first time you see them */
.dsc-week:not(.in-view) .dsc-week-bar {
    transform: scaleY(0);
}

.dsc-week.in-view .dsc-week-bar {
    transform-origin: bottom;
    animation: dsc-bar-grow 700ms cubic-bezier(0.16, 1, 0.3, 1) var(--bar-delay, 0ms) both;
}

@keyframes dsc-bar-grow {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

/* mood cards drift through their colour */
.discover-mix-card[data-mix-key^="mood_"] .mix-card-cover::after {
    background:
        linear-gradient(160deg, rgba(var(--mood-rgb), 0.8) 0%, rgba(var(--mood-rgb), 0.3) 50%, rgba(var(--mood-rgb), 0.75) 100%);
    background-size: 100% 220%;
    animation: dsc-mood-drift 9s ease-in-out infinite alternate;
}

@keyframes dsc-mood-drift {
    from { background-position: 0% 0%; }
    to { background-position: 0% 100%; }
}

/* now playing */
.dsc-now {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: -6px 0 24px;
    padding: 12px 18px 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(18, 22, 31, 0.9);
}

.dsc-now-wash {
    position: absolute;
    inset: -30px;
    background-size: cover;
    background-position: center;
    filter: blur(40px) saturate(1.4);
    opacity: 0.35;
    pointer-events: none;
}

.dsc-now-art {
    position: relative;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

.dsc-now-text {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.dsc-now-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--accent-light-rgb, 30, 215, 96));
}

.dsc-now-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.dsc-now-artist {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
}

a.dsc-now-artist:hover {
    color: #fff;
    text-decoration: underline;
}

.dsc-now .dsc-pulse-btn {
    position: relative;
    flex: 0 0 auto;
}

.dsc-eq {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 12px;
}

.dsc-eq > span {
    width: 3px;
    height: 30%;
    border-radius: 1px;
    background: currentColor;
}

.dsc-now.playing .dsc-eq > span {
    animation: dsc-eq-bounce 900ms ease-in-out infinite;
}

.dsc-now.playing .dsc-eq > span:nth-child(2) { animation-delay: -300ms; }
.dsc-now.playing .dsc-eq > span:nth-child(3) { animation-delay: -600ms; }
.dsc-now.playing .dsc-eq > span:nth-child(4) { animation-delay: -150ms; }

@keyframes dsc-eq-bounce {
    0%, 100% { height: 25%; }
    50% { height: 100%; }
}

.dsc-now:not(.playing) .dsc-now-eyebrow {
    color: rgba(255, 255, 255, 0.55);
}

@media (prefers-reduced-motion: reduce) {
    .dsc-backdrop-video {
        display: none;
    }
    .dsc-week .dsc-week-bar,
    .dsc-week:not(.in-view) .dsc-week-bar {
        animation: none;
        transform: none;
    }
    .discover-mix-card[data-mix-key^="mood_"] .mix-card-cover::after,
    .dsc-now.playing .dsc-eq > span {
        animation: none;
    }
}

@media (max-width: 640px) {

    .dsc-now {
        gap: 12px;
    }
    .dsc-now .dsc-pulse-btn {
        padding: 0 12px;
    }
}

/* ── 17. Promo banners: one thing advertised, big, over a moving background ─ */
.dsc-promo {
    --promo-rgb: var(--accent-rgb, 29, 185, 84);
    position: relative;
    overflow: hidden;
    height: clamp(280px, 26vw, 360px);
    margin: -20px 0 56px;
    border-radius: 24px;
    border: 1px solid rgba(var(--promo-rgb), 0.28);
    background: #0b0d12;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), 0 0 140px -40px rgba(var(--promo-rgb), 0.7);
    isolation: isolate;
}

.dsc-promo-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

/* the artwork drifts: a slow ken burns pan and zoom, forever */
.dsc-promo-drift {
    position: absolute;
    inset: -12%;
    background-size: cover;
    background-position: center;
    filter: saturate(1.25) brightness(0.8);
    animation: dsc-kenburns 26s ease-in-out infinite alternate;
    will-change: transform;
}

.dsc-promo--artist .dsc-promo-drift {
    background-position: 50% 25%;
}

@keyframes dsc-kenburns {
    0% { transform: scale(1.02) translate3d(-2%, 1%, 0); }
    50% { transform: scale(1.14) translate3d(2%, -2%, 0); }
    100% { transform: scale(1.08) translate3d(-1%, 2%, 0); }
}

/* a sheen in the artwork's own colour, moving across it */
.dsc-promo-sheen {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 80% at 20% 30%, rgba(var(--promo-rgb), 0.55), transparent 70%),
        radial-gradient(50% 70% at 85% 75%, rgba(var(--promo-rgb), 0.4), transparent 70%);
    background-size: 160% 160%;
    mix-blend-mode: screen;
    opacity: 0.75;
    animation: dsc-sheen 14s ease-in-out infinite alternate;
}

@keyframes dsc-sheen {
    from { background-position: 0% 0%; }
    to { background-position: 100% 100%; }
}

.dsc-promo .dsc-backdrop-video.ready {
    opacity: 1;
}

/* dark where the words are, clear where the picture is */
.dsc-promo-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 9, 12, 0.94) 0%, rgba(8, 9, 12, 0.72) 36%, rgba(8, 9, 12, 0.18) 68%, rgba(8, 9, 12, 0) 100%),
        linear-gradient(0deg, rgba(8, 9, 12, 0.55) 0%, rgba(8, 9, 12, 0) 45%);
}

.dsc-promo-body {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 32px;
    height: 100%;
    padding: 0 48px;
}

.dsc-promo-cover {
    flex: 0 0 auto;
    width: clamp(150px, 15vw, 210px);
    aspect-ratio: 1;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.dsc-promo-cover.round {
    border-radius: 50%;
}

.dsc-promo-copy {
    min-width: 0;
    max-width: 640px;
}

.dsc-promo-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
}

.dsc-promo-eyebrow::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgb(var(--promo-rgb));
    box-shadow: 0 0 12px rgba(var(--promo-rgb), 0.9);
}

.dsc-promo-title {
    margin: 10px 0 0;
    font-size: clamp(2.2rem, 4.4vw, 3.8rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    color: #fff;
    text-shadow: 0 6px 30px rgba(0, 0, 0, 0.6);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dsc-promo-sub {
    margin: 12px 0 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.78);
}

.dsc-promo-sub strong {
    color: #fff;
}

.dsc-promo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.dsc-promo-video-toggle {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
}

.dsc-promo-video-toggle.on,
.dsc-promo-video-toggle:hover {
    color: #fff;
}

.dsc-promo-video-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}

.dsc-promo-video-toggle:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb, 29, 185, 84), 0.9);
    outline-offset: 2px;
}

@media (max-width: 760px) {
    .dsc-promo {
        height: auto;
    }
    .dsc-promo-body {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding: 28px 22px 26px;
    }
    .dsc-promo-cover {
        width: 120px;
    }
    .dsc-promo-scrim {
        background: linear-gradient(0deg, rgba(8, 9, 12, 0.95) 0%, rgba(8, 9, 12, 0.6) 60%, rgba(8, 9, 12, 0.3) 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dsc-promo-drift,
    .dsc-promo-sheen {
        animation: none;
    }
}

/* ── 18. Bento spotlight and the watch rail: banners in columns ────────── */
/* one big feature tile, two stacked beside it */
.dsc-bento {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(215px, 1fr));
    gap: 18px;
    margin: -20px 0 56px;
}

.dsc-bento > .dsc-promo {
    height: auto;
    margin: 0;
}

.dsc-bento > .dsc-promo--feature {
    grid-row: 1 / span 2;
}

/* a bento with only some of its tiles still fills the width */
.dsc-bento > .dsc-promo:only-child {
    grid-column: 1 / -1;
    grid-row: 1 / span 2;
}

.dsc-bento > .dsc-promo--tile:first-child:nth-last-child(2),
.dsc-bento > .dsc-promo--tile:first-child:nth-last-child(2) ~ .dsc-promo--tile {
    grid-row: 1 / span 2;
}

.dsc-promo--feature .dsc-promo-body {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 22px;
    padding: 34px 38px;
}

.dsc-promo--feature .dsc-promo-cover {
    width: clamp(130px, 12vw, 180px);
}

.dsc-promo--feature .dsc-promo-scrim {
    background:
        linear-gradient(0deg, rgba(8, 9, 12, 0.95) 0%, rgba(8, 9, 12, 0.55) 45%, rgba(8, 9, 12, 0.1) 80%),
        linear-gradient(90deg, rgba(8, 9, 12, 0.55) 0%, rgba(8, 9, 12, 0) 60%);
}

.dsc-promo--tile .dsc-promo-body {
    gap: 20px;
    padding: 0 26px;
}

.dsc-promo--tile .dsc-promo-cover {
    width: clamp(92px, 8vw, 118px);
}

.dsc-promo--tile .dsc-promo-title {
    margin-top: 6px;
    font-size: clamp(1.5rem, 2.1vw, 2.1rem);
}

.dsc-promo--tile .dsc-promo-sub {
    margin-top: 6px;
    font-size: 0.86rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dsc-promo--tile .dsc-promo-actions {
    margin-top: 14px;
}

.dsc-promo--tile .dsc-promo-eyebrow {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.7rem;
}

.dsc-promo--tile .dsc-promo-eyebrow::before {
    display: inline-block;
    margin-right: 8px;
    vertical-align: 1px;
}

/* a tile is ~215px tall: two short lines of title, one of reason, one row
   of buttons, and room on the right for the video switch */
.dsc-promo--tile .dsc-promo-body {
    padding-right: 60px;
}

.dsc-promo--tile .dsc-promo-title {
    -webkit-line-clamp: 2;
    font-size: clamp(1.3rem, 1.7vw, 1.75rem) !important;
    line-height: 1.05;
}

.dsc-promo--tile .dsc-promo-sub {
    -webkit-line-clamp: 1 !important;
}

.dsc-promo--tile .dsc-promo-actions {
    flex-wrap: nowrap;
    gap: 8px;
}

.dsc-promo--tile .dsc-pulse-btn {
    height: 32px;
    padding: 0 13px;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* the watch rail */
.dsc-video-rail {
    margin: -12px 0 56px;
}

.dsc-section-head {
    margin: 0 0 14px;
}

.dsc-section-head h3 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}

.dsc-section-head p {
    margin: 4px 0 0;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.55);
}

.dsc-video-rail-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 214px;
    gap: 16px;
    overflow-x: auto;
    padding: 6px 2px 18px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

/* a tall 9:16 card: the art is the card, the words sit at the bottom */
.dsc-promo--portrait {
    height: auto;
    aspect-ratio: 9 / 16;
    margin: 0;
    border-radius: 18px;
    scroll-snap-align: start;
    transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms ease;
}

.dsc-promo--portrait:hover,
.dsc-promo--portrait:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55), 0 0 90px -20px rgba(var(--promo-rgb), 0.8);
}

.dsc-promo--portrait .dsc-promo-drift {
    inset: -8%;
    background-position: center 25%;
}

.dsc-promo--portrait .dsc-promo-scrim {
    background: linear-gradient(0deg, rgba(8, 9, 12, 0.96) 0%, rgba(8, 9, 12, 0.55) 40%, rgba(8, 9, 12, 0) 72%);
}

.dsc-promo--portrait .dsc-promo-body {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0;
    padding: 18px;
}

.dsc-promo--portrait .dsc-promo-eyebrow {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, 0.82);
}

.dsc-promo--portrait .dsc-promo-eyebrow::before {
    display: none;
}

.dsc-promo--portrait .dsc-promo-title {
    margin-top: 6px;
    font-size: 1.45rem;
}

.dsc-promo--portrait .dsc-promo-actions {
    margin-top: 12px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 200ms ease, transform 200ms ease;
}

.dsc-promo--portrait:hover .dsc-promo-actions,
.dsc-promo--portrait:focus-within .dsc-promo-actions {
    opacity: 1;
    transform: none;
}

/* a card showing its video says so with a small live mark */
.dsc-promo.is-live::after {
    content: '';
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff4d4d;
    box-shadow: 0 0 0 4px rgba(255, 77, 77, 0.25);
    animation: dsc-live 1.6s ease-in-out infinite;
}

@keyframes dsc-live {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (hover: none) {
    .dsc-promo--portrait .dsc-promo-actions {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 1000px) {
    .dsc-bento {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
    }
    .dsc-bento > .dsc-promo--feature,
    .dsc-bento > .dsc-promo:only-child,
    .dsc-bento > .dsc-promo--tile:first-child:nth-last-child(2),
    .dsc-bento > .dsc-promo--tile:first-child:nth-last-child(2) ~ .dsc-promo--tile {
        grid-row: auto;
    }
    .dsc-bento > .dsc-promo--feature {
        min-height: 380px;
    }
    .dsc-bento > .dsc-promo--tile {
        min-height: 200px;
    }
}

@media (max-width: 520px) {
    .dsc-video-rail-track {
        grid-auto-columns: 170px;
    }
    .dsc-promo--tile .dsc-promo-body {
        padding: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dsc-promo--portrait,
    .dsc-promo.is-live::after {
        transition: none;
        animation: none;
    }
}

/* ── 19. Banners you can touch: tilt, glare, sound, the entrance ───────── */
/* under a mouse a banner leans toward the pointer. --px/--py are -1..1 from
   its centre, set by the banner as the pointer moves */
.dsc-promo--feature { --tilt: 2.2deg; }
.dsc-promo--tile { --tilt: 3.5deg; }
.dsc-promo--portrait { --tilt: 7deg; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .dsc-promo--feature,
    .dsc-promo--tile,
    .dsc-promo--portrait {
        transform: perspective(1100px) rotateX(calc(var(--py, 0) * -1 * var(--tilt)))
            rotateY(calc(var(--px, 0) * var(--tilt)));
        transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms ease;
    }
    .dsc-promo--feature:hover,
    .dsc-promo--tile:hover {
        transition: transform 120ms linear, box-shadow 240ms ease;
    }
    .dsc-promo--portrait:hover,
    .dsc-promo--portrait:focus-within {
        transform: perspective(900px) translateY(-6px) rotateX(calc(var(--py, 0) * -1 * var(--tilt)))
            rotateY(calc(var(--px, 0) * var(--tilt)));
        transition: transform 120ms linear, box-shadow 240ms ease;
    }
}

/* a soft light that follows the pointer across the art */
.dsc-promo-glare {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        55% 45% at calc(50% + var(--px, 0) * 50%) calc(50% + var(--py, 0) * 50%),
        rgba(255, 255, 255, 0.22),
        rgba(255, 255, 255, 0) 70%
    );
    mix-blend-mode: soft-light;
    opacity: 0;
    transition: opacity 300ms ease;
    pointer-events: none;
}

.dsc-promo:hover .dsc-promo-glare {
    opacity: 1;
}

/* tap for sound: only on a banner whose video is live */
.dsc-promo-sound {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    animation: dsc-sound-in 500ms 900ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
    transition: background 160ms ease, border-color 160ms ease;
}

.dsc-promo-sound:hover {
    background: rgba(255, 255, 255, 0.2);
}

.dsc-promo-sound.on {
    background: rgb(var(--promo-rgb));
    border-color: transparent;
    color: #0b0d12;
}

.dsc-promo-sound:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* a portrait card's is just the icon, top right */
.dsc-promo--portrait .dsc-promo-sound {
    top: 12px;
    right: 12px;
    bottom: auto;
    width: 34px;
    padding: 0;
    justify-content: center;
}

/* a tile's sits top right, out of the way of its buttons */
.dsc-promo--tile .dsc-promo-sound {
    top: 64px;
    bottom: auto;
    right: 18px;
    width: 36px;
    padding: 0;
    justify-content: center;
}

.dsc-promo--tile .dsc-promo-sound span {
    display: none;
}

@keyframes dsc-sound-in {
    from { opacity: 0; transform: translateY(6px); }
}

/* sections rise in, one tile after another, the first time you reach them */
.dsc-reveal:not(.is-in) > * {
    opacity: 0;
}

.dsc-reveal.is-in > * {
    animation: dsc-rise 800ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.dsc-reveal.is-in > :nth-child(2) { animation-delay: 90ms; }
.dsc-reveal.is-in > :nth-child(3) { animation-delay: 180ms; }
.dsc-reveal.is-in > :nth-child(4) { animation-delay: 270ms; }
.dsc-reveal.is-in > :nth-child(5) { animation-delay: 360ms; }
.dsc-reveal.is-in > :nth-child(n + 6) { animation-delay: 450ms; }

@keyframes dsc-rise {
    from { opacity: 0; transform: translateY(28px) scale(0.97); }
}

@media (prefers-reduced-motion: reduce) {
    .dsc-reveal:not(.is-in) > * {
        opacity: 1;
    }
    .dsc-reveal.is-in > *,
    .dsc-promo-sound {
        animation: none;
    }
}

/* ── 20. Posters: loud flat colour, a gig, a record, your number one ─────── */
.dsc-posters {
    margin: -12px 0 56px;
}

.dsc-posters-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.dsc-posters-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dsc-posters-grid--1 {
    grid-template-columns: minmax(0, 1fr);
}

.dsc-poster {
    --ink: 255, 255, 255;
    position: relative;
    overflow: hidden;
    height: 480px;
    border-radius: 24px;
    background: rgb(var(--poster-rgb));
    color: rgb(var(--ink));
    isolation: isolate;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 320ms ease;
}

.dsc-poster.ink-dark {
    --ink: 12, 12, 14;
}

.dsc-poster:hover {
    transform: translateY(-4px);
    box-shadow: 0 32px 70px rgba(0, 0, 0, 0.5), 0 0 80px -20px rgba(var(--poster-rgb), 0.9);
}

.dsc-poster-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.dsc-poster-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 26px;
}

.dsc-poster-tag {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border: 1.5px solid rgba(var(--ink), 0.85);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dsc-poster-title {
    margin: 12px 0 0;
    max-width: 100%;
    font-size: clamp(1.8rem, 2.4vw, 2.5rem);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 0.95;
    color: inherit;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dsc-poster-sub {
    margin: 8px 0 0;
    max-width: 100%;
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dsc-poster-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
}

.dsc-poster-btn {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: rgb(var(--ink));
    color: rgb(var(--poster-rgb));
    font: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform 160ms ease;
}

.dsc-poster-btn:hover {
    transform: scale(1.05);
    color: rgb(var(--poster-rgb));
}

.dsc-poster-btn:focus-visible {
    outline: 2px solid rgb(var(--ink));
    outline-offset: 3px;
}

.dsc-poster-more {
    font-size: 0.8rem;
    font-weight: 700;
    opacity: 0.75;
}

/* a marquee line: two copies side by side, each sliding one width left */
.dsc-poster-marquee,
.dsc-poster-type-row {
    display: flex;
    white-space: nowrap;
    overflow: hidden;
}

.dsc-poster-marquee > span,
.dsc-poster-type-row > span {
    flex: 0 0 auto;
    padding-right: 0.4em;
    animation: dsc-marquee 24s linear infinite;
}

@keyframes dsc-marquee {
    to { transform: translateX(-100%); }
}

/* the gig poster: a ticker along the top, halftone, stage lights sweeping */
.dsc-poster-marquee {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    height: 30px;
    align-items: center;
    background: rgb(var(--ink));
    color: rgb(var(--poster-rgb));
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.dsc-poster-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(var(--ink), 0.2) 1.3px, transparent 1.7px);
    background-size: 11px 11px;
    -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 60%);
    mask-image: linear-gradient(200deg, #000 0%, transparent 60%);
}

.dsc-poster-photo {
    position: absolute;
    top: 30px;
    right: 0;
    width: 78%;
    height: 58%;
    background-size: cover;
    background-position: center 25%;
    filter: grayscale(1) contrast(1.3) brightness(1.05);
    mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 40%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, #000 45%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 40%);
    mask-composite: intersect;
}

.dsc-poster-beam {
    position: absolute;
    bottom: -8%;
    width: 46%;
    height: 130%;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 85%);
    clip-path: polygon(44% 100%, 56% 100%, 100% 0, 0 0);
    transform-origin: 50% 100%;
    mix-blend-mode: soft-light;
    animation: dsc-beam 7s ease-in-out infinite alternate;
}

.dsc-poster-beam--a {
    left: -6%;
}

.dsc-poster-beam--b {
    right: -6%;
    animation-duration: 9s;
    animation-direction: alternate-reverse;
}

@keyframes dsc-beam {
    from { transform: rotate(-22deg); }
    to { transform: rotate(22deg); }
}

.dsc-poster-date {
    display: flex;
    flex-direction: column;
    margin-top: 14px;
    line-height: 1;
}

.dsc-poster-month {
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.24em;
}

.dsc-poster-day {
    margin-top: -4px;
    font-size: 5.4rem;
    font-weight: 900;
    letter-spacing: -0.06em;
    line-height: 0.9;
}

.dsc-poster--concert .dsc-poster-title {
    margin-top: 6px;
    text-transform: uppercase;
}

/* the record poster: the sleeve with its record sliding out, spinning */
.dsc-poster-blob {
    position: absolute;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(40px);
    animation: dsc-blob 14s ease-in-out infinite alternate;
}

.dsc-poster-blob--a {
    top: -20%;
    right: -25%;
    background: rgba(255, 255, 255, 0.4);
}

.dsc-poster-blob--b {
    bottom: -25%;
    left: -20%;
    background: rgba(0, 0, 0, 0.22);
    animation-duration: 18s;
}

@keyframes dsc-blob {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-12%, 10%, 0) scale(1.15); }
}

.dsc-poster-record {
    position: absolute;
    top: 30px;
    left: 26px;
    z-index: 1;
    width: 52%;
    aspect-ratio: 1;
    transform: rotate(-4deg);
}

.dsc-poster-vinyl,
.dsc-poster-record::before {
    position: absolute;
    top: 3%;
    left: 34%;
    width: 94%;
    aspect-ratio: 1;
    border-radius: 50%;
    transition: left 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dsc-poster-vinyl {
    background: repeating-radial-gradient(circle at center, #0b0b0c 0 1.6px, #1a1a1c 1.6px 3.2px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
    animation: dsc-spin 4.5s linear infinite;
}

/* the light on the grooves stays put while the record turns under it */
.dsc-poster-record::before {
    content: '';
    z-index: 1;
    background: conic-gradient(from 20deg, rgba(255, 255, 255, 0.16), transparent 12%, transparent 45%, rgba(255, 255, 255, 0.12) 52%, transparent 64%);
    pointer-events: none;
}

.dsc-poster-vinyl-label {
    position: absolute;
    inset: 33%;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 3px #0b0b0c;
}

.dsc-poster-vinyl-label::after {
    content: '';
    position: absolute;
    inset: 44%;
    border-radius: 50%;
    background: #0b0b0c;
}

@keyframes dsc-spin {
    to { transform: rotate(360deg); }
}

.dsc-poster-sleeve {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 26px 50px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.dsc-poster--album:hover .dsc-poster-vinyl,
.dsc-poster--album:hover .dsc-poster-record::before {
    left: 50%;
}

/* your number one: their name in giant type, scrolling, behind their face */
.dsc-poster-type {
    position: absolute;
    inset: -10% -20%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    transform: rotate(-8deg);
}

.dsc-poster-type-row {
    font-size: 4.6rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(var(--ink), 0.3);
}

.dsc-poster-type-row:nth-child(even) {
    color: rgba(var(--ink), 0.1);
    -webkit-text-stroke: 0;
}

.dsc-poster-type-row:nth-child(even) > span {
    animation-direction: reverse;
    animation-duration: 30s;
}

.dsc-poster-face {
    position: absolute;
    top: 30px;
    left: 50%;
    z-index: 1;
    width: 44%;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: rgba(var(--ink), 0.15);
    background-size: cover;
    background-position: center 25%;
    transform: translateX(-50%);
    box-shadow: 0 0 0 6px rgb(var(--poster-rgb)), 0 28px 60px rgba(0, 0, 0, 0.35);
}

.dsc-poster-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(var(--ink), 0.55);
    animation: dsc-ring 2.6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.dsc-poster-ring--late {
    animation-delay: 1.3s;
}

@keyframes dsc-ring {
    from { transform: scale(1); opacity: 0.9; }
    to { transform: scale(1.45); opacity: 0; }
}

.dsc-poster-figure {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 10px;
    line-height: 1;
}

.dsc-poster-figure strong {
    font-size: 3.2rem;
    font-weight: 900;
    letter-spacing: -0.05em;
}

.dsc-poster-figure span {
    font-size: 0.95rem;
    font-weight: 800;
    opacity: 0.8;
}

.dsc-poster--artist .dsc-poster-title {
    margin-top: 6px;
    font-size: clamp(1.6rem, 2vw, 2.1rem);
    text-transform: uppercase;
}

/* off screen, nothing moves */
.dsc-posters.is-paused *,
.dsc-posters.is-paused *::before,
.dsc-posters.is-paused *::after {
    animation-play-state: paused !important;
}

@media (max-width: 1000px) {
    .dsc-posters-grid,
    .dsc-posters-grid--2 {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(280px, 78vw);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 12px;
    }
    .dsc-poster {
        scroll-snap-align: start;
        height: 460px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dsc-poster,
    .dsc-poster-marquee > span,
    .dsc-poster-type-row > span,
    .dsc-poster-beam,
    .dsc-poster-blob,
    .dsc-poster-vinyl,
    .dsc-poster-ring {
        animation: none;
        transition: none;
    }
    .dsc-poster-ring {
        display: none;
    }
}

/* a show with no photo: the date is the picture */
.dsc-poster--typeset .dsc-poster-day {
    font-size: 9rem;
    letter-spacing: -0.07em;
}

.dsc-poster--typeset .dsc-poster-month {
    font-size: 1.2rem;
}