.album-detail-page { position: relative; isolation: isolate; max-width: 1120px; margin: 0 auto; padding: clamp(0.5rem, 1.5vw, 1.25rem) 0 2rem; }
.album-back-link { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0 0.9rem; color: var(--color-text-secondary); font-size: 0.8rem; font-weight: 700; transition: color 180ms ease, transform 180ms ease; }
.album-back-link:hover { color: var(--color-text-primary); transform: translateX(-3px); }
.album-back-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }
.album-detail-ambient { position: fixed; inset: calc(var(--header-height) + 1rem) 1rem 1rem calc(var(--sidebar-width) + 1rem); z-index: -1; overflow: hidden; pointer-events: none; opacity: 0.46; }
.album-detail-ambient::before { content: ''; position: absolute; inset: -12%; background: var(--album-art) center / cover no-repeat; filter: blur(62px) saturate(1.15) brightness(0.43); transform: scale(1.08); }
.album-detail-ambient::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--color-background), rgba(10, 10, 10, 0.76) 40%, var(--color-background)); }
.album-detail-header { display: grid; grid-template-columns: minmax(190px, 280px) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; min-height: 320px; padding: clamp(1rem, 3vw, 2.25rem); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; background: rgba(24, 24, 24, 0.68); box-shadow: 0 20px 54px rgba(0, 0, 0, 0.3); backdrop-filter: blur(18px); animation: album-reveal 540ms cubic-bezier(0.2, 0.75, 0.25, 1) both; }
.album-detail-cover-wrapper { overflow: hidden; aspect-ratio: 1; border-radius: 7px; box-shadow: 0 18px 38px rgba(0, 0, 0, 0.5); animation: album-cover-in 680ms cubic-bezier(0.2, 0.8, 0.25, 1) 100ms both; }
.album-detail-cover { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease, filter 500ms ease; }
.album-detail-cover-wrapper:hover .album-detail-cover { transform: scale(1.045); filter: saturate(1.1); }
.album-detail-info { min-width: 0; animation: album-copy-in 570ms ease-out 180ms both; }
.album-detail-breadcrumb, .tracklist-heading p { margin: 0 0 0.45rem; color: var(--color-text-secondary); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.album-detail-title { margin: 0; font-size: clamp(2.1rem, 5vw, 4.75rem); font-weight: 800; line-height: 0.98; letter-spacing: 0; overflow-wrap: anywhere; }
.album-detail-artist { margin: 0.75rem 0 1.65rem; color: var(--color-text-secondary); font-size: clamp(1rem, 1.8vw, 1.2rem); }
.album-detail-scores { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.score-badge { display: inline-flex; align-items: baseline; gap: 0.65rem; padding: 0.46rem 0.65rem 0.46rem 0.75rem; border: 1px solid color-mix(in srgb, var(--badge-color) 50%, transparent); border-left: 3px solid var(--badge-color); border-radius: 5px; color: var(--color-text-secondary); background: rgba(10, 10, 10, 0.44); animation: badge-in 420ms ease-out var(--badge-delay) both; transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.score-badge:hover { transform: translateY(-2px); border-color: var(--badge-color); box-shadow: 0 8px 22px var(--badge-glow); }
.score-badge span { font-size: 0.75rem; font-weight: 600; }.score-badge strong { color: var(--badge-color); font-size: 1rem; font-variant-numeric: tabular-nums; }.album-detail-unrated { color: var(--color-text-secondary); font-size: 0.9rem; }
.tracklist-container { margin-top: clamp(1.5rem, 4vw, 3rem); padding: clamp(1rem, 2.5vw, 1.8rem); border-top: 1px solid rgba(255, 255, 255, 0.13); background: rgba(16, 16, 16, 0.46); }.tracklist-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 0.7rem; }.tracklist-heading p { margin-bottom: 0.25rem; }.card-title { margin: 0; font-size: clamp(1.25rem, 2vw, 1.55rem); letter-spacing: 0; }.track-list { margin: 0; padding: 0; list-style: none; }
.album-track-item { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; min-height: 70px; padding: 0.8rem 0.65rem; border-bottom: 1px solid rgba(255, 255, 255, 0.075); animation: track-in 430ms ease-out var(--track-delay) both; transition: background-color 180ms ease, transform 180ms ease; }.album-track-item:first-child { border-top: 1px solid rgba(255, 255, 255, 0.075); }.album-track-item:hover { transform: translateX(4px); background: rgba(255, 255, 255, 0.045); }.album-track-item .track-number { width: auto; color: var(--color-text-tertiary); font-size: 0.78rem; font-variant-numeric: tabular-nums; text-align: center; }.album-track-item .track-title { min-width: 0; overflow: hidden; color: var(--color-text-primary); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.album-track-item .track-score-visual { display: grid; justify-items: end; gap: 0.38rem; min-width: 96px; margin-left: 0; text-align: right; }.album-track-item .album-card-score { color: var(--score-color); font-size: 0.95rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; text-shadow: 0 0 12px var(--score-glow); }.album-track-item .album-card-score.perfect-score { color: #ffe38a; }
.album-track-item .score-ring-small { width: 92px; height: 5px; margin: 0; overflow: visible; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }.album-track-item .score-ring-small::before { background: var(--score-color); box-shadow: 0 0 12px var(--score-glow); border-radius: inherit; animation: score-fill 800ms cubic-bezier(0.2, 0.75, 0.3, 1) var(--track-delay) both; }.album-track-item .score-ring-small.perfect-score::before { background: linear-gradient(90deg, #ff5733, #ffc300, #c7ff00, #33ff57, #33c3ff, #5733ff, #c733ff); box-shadow: 0 0 13px rgba(255, 210, 80, 0.62); }.track-score-empty { color: var(--color-text-tertiary); font-size: 0.78rem; }
@keyframes album-reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes album-cover-in { from { opacity: 0; transform: scale(0.94) rotate(-1.5deg); } to { opacity: 1; transform: scale(1) rotate(0); } } @keyframes album-copy-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes badge-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } @keyframes track-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes score-fill { from { width: 0; } to { width: var(--score-percent, 0%); } }
@media (max-width: 760px) { .album-detail-page { padding-top: 0; }.album-detail-ambient { inset: var(--header-height) 0 0; }.album-detail-header { grid-template-columns: 128px minmax(0, 1fr); gap: 1rem; min-height: 0; padding: 1rem; }.album-detail-title { font-size: clamp(1.75rem, 9vw, 2.7rem); }.album-detail-artist { margin: 0.5rem 0 1rem; }.score-badge { gap: 0.45rem; padding: 0.38rem 0.5rem 0.38rem 0.6rem; }.tracklist-container { margin-top: 1rem; padding: 1rem 0.45rem; }.album-track-item { grid-template-columns: 1.7rem minmax(0, 1fr) auto; gap: 0.5rem; padding-inline: 0.35rem; }.album-track-item .track-score-visual { min-width: 69px; }.album-track-item .score-ring-small { width: 66px; } }
@media (max-width: 430px) { .album-detail-header { grid-template-columns: 1fr; }.album-detail-cover-wrapper { width: 148px; } }

/* Detail view: keeps the album artwork and the active season present without turning the page into a dark panel. */
.album-detail-page {
    padding-inline: clamp(0.35rem, 1.4vw, 1.1rem);
}

.album-detail-ambient {
    opacity: 0.58;
}

.album-detail-ambient::after {
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-background) 42%, transparent), color-mix(in srgb, var(--color-background) 12%, transparent) 45%, color-mix(in srgb, var(--color-background) 42%, transparent));
}

.album-detail-header {
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--color-primary) 20%, rgba(255, 255, 255, 0.1));
    background: color-mix(in srgb, var(--season-card, var(--color-surface)) 38%, transparent);
    box-shadow: 0 20px 54px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(7px);
}

.album-detail-header::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
    opacity: 0.7;
}

.album-detail-cover-wrapper {
    position: relative;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.38), 0 0 0 1px color-mix(in srgb, var(--color-primary) 16%, transparent);
}

.album-detail-info {
    position: relative;
    z-index: 1;
}

.score-badge {
    background: color-mix(in srgb, var(--badge-color) 11%, rgba(10, 10, 10, 0.18));
    backdrop-filter: blur(5px);
}

.tracklist-container {
    border-top-color: color-mix(in srgb, var(--color-primary) 25%, rgba(255, 255, 255, 0.13));
    background: transparent;
}

.album-track-item {
    border-bottom-color: color-mix(in srgb, var(--color-primary) 11%, rgba(255, 255, 255, 0.075));
}

.album-track-item:first-child {
    border-top-color: color-mix(in srgb, var(--color-primary) 11%, rgba(255, 255, 255, 0.075));
}

.album-track-item:hover {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--score-color, var(--color-primary)) 78%, transparent);
}

.album-track-item .track-number {
    color: color-mix(in srgb, var(--color-text-secondary) 72%, var(--color-primary));
}

@media (max-width: 760px) {
    .album-detail-header { backdrop-filter: blur(4px); }
    .album-detail-ambient { opacity: 0.44; }
}