/* Weekly recap "stories" (Spotify Wrapped style). Loaded after the old recap styles. */
body #weeklyRecapModal.weekly-recap-modal {
    position: fixed; inset: 0; z-index: 9600; display: flex; align-items: center; justify-content: center;
    padding: 24px; background: rgba(0, 0, 0, 0.82) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
body #weeklyRecapModal.hidden { display: none !important; }
body #weeklyRecapDialog.weekly-recap-dialog {
    position: relative; width: min(980px, 100%); height: min(640px, calc(100vh - 48px)); max-height: none !important;
    padding: 0 !important; overflow: hidden !important; border-radius: 16px !important; border: 0 !important;
    background: #000 !important; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7) !important;
    animation: wrOpen 0.4s cubic-bezier(.2, .8, .2, 1);
}
body #weeklyRecapDialog::before, body #weeklyRecapDialog::after { display: none !important; }
@keyframes wrOpen { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
body #weeklyRecapDialog .weekly-recap-close {
    position: absolute; top: 22px; right: 18px; z-index: 6; width: 36px; height: 36px; border-radius: 50%;
    background: rgba(0, 0, 0, 0.35) !important; border: 0 !important; color: #fff !important; display: grid; place-items: center; cursor: pointer;
}
body #weeklyRecapDialog .weekly-recap-close:hover { background: rgba(255, 255, 255, 0.15) !important; }
body #weeklyRecapContent { height: 100%; }

.wr-stories { position: relative; height: 100%; color: #fff; font-family: Inter, "Segoe UI", system-ui, sans-serif; cursor: pointer; user-select: none; }
.wr-bg { position: absolute; inset: 0; overflow: hidden; }
.wr-bg-img {
    position: absolute; inset: -20%; background: #111 center / cover no-repeat;
    filter: blur(60px) saturate(1.8) brightness(0.55); transform: scale(1.1);
    transition: background-image 0.6s ease; animation: wrDrift 24s ease-in-out infinite alternate;
}
@keyframes wrDrift { to { transform: scale(1.25) rotate(4deg) translate(3%, -2%); } }
.wr-bg-veil { position: absolute; inset: 0; background: radial-gradient(120% 90% at 30% 40%, transparent, rgba(0, 0, 0, 0.55)); }

.wr-bars { position: absolute; top: 14px; left: 18px; right: 66px; z-index: 5; display: flex; gap: 4px; }
.wr-bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.wr-bars i b { display: block; height: 100%; width: 0; background: #fff; }
.wr-bars i.done b { width: 100%; }
.wr-bars i.now b { animation: wrFill 6.5s linear forwards; }
@keyframes wrFill { to { width: 100%; } }

.wr-stage { position: relative; z-index: 2; height: 100%; }
.wr-slide { height: 100%; padding: 64px 72px 48px; display: flex; align-items: center; justify-content: center; animation: wrIn 0.55s cubic-bezier(.2, .8, .2, 1); }
@keyframes wrIn { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }

.wr-nav {
    position: absolute; top: 50%; z-index: 5; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; border: 0;
    background: rgba(0, 0, 0, 0.3); color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity 0.2s, background 0.2s;
}
.wr-stories:hover .wr-nav { opacity: 1; }
.wr-nav:hover { background: rgba(255, 255, 255, 0.16); }
.wr-prev { left: 14px; } .wr-next { right: 14px; }
.wr-nav[hidden] { display: none; }

/* Shared type */
.wr-label { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.wr-h, .wr-name { margin: 10px 0 0; font-weight: 900; letter-spacing: -0.045em; line-height: 0.95; }
.wr-h { font-size: clamp(44px, 6vw, 76px); }
.wr-name { font-size: clamp(56px, 8vw, 104px); }
.wr-name-track { font-size: clamp(40px, 5.5vw, 72px); }
.wr-p { margin: 14px 0 0; font-size: 17px; color: rgba(255, 255, 255, 0.78); }
.wr-w { display: inline-block; opacity: 0; transform: translateY(0.35em); animation: wrWord 0.55s cubic-bezier(.2, .8, .2, 1) calc(0.25s + var(--i) * 0.12s) forwards; }
@keyframes wrWord { to { opacity: 1; transform: none; } }
.wr-cta {
    margin-top: 26px; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 26px; border: 0; border-radius: 500px;
    background: #fff; color: #000; font: 700 15px Inter, "Segoe UI", sans-serif; cursor: pointer; transition: transform 0.15s;
}
.wr-cta:hover { transform: scale(1.05); }

/* 1. Intro: fanned covers */
.wr-slide-intro { display: flex; flex-direction: column; align-items: center; text-align: center; }
.wr-fan { position: relative; width: 300px; height: 170px; margin-bottom: 26px; }
.wr-fan img { position: absolute; left: 50%; top: 10px; width: 140px; height: 140px; margin-left: -70px; border-radius: 8px; object-fit: cover; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); animation: wrFan 0.8s cubic-bezier(.2, .8, .2, 1) both; }
.wr-fan-0 { z-index: 5; --r: 0deg; --x: 0px; }
.wr-fan-1 { z-index: 4; --r: -10deg; --x: -70px; animation-delay: 0.08s !important; }
.wr-fan-2 { z-index: 4; --r: 10deg; --x: 70px; animation-delay: 0.12s !important; }
.wr-fan-3 { z-index: 3; --r: -18deg; --x: -125px; animation-delay: 0.16s !important; opacity: 0.85; }
.wr-fan-4 { z-index: 3; --r: 18deg; --x: 125px; animation-delay: 0.2s !important; opacity: 0.85; }
@keyframes wrFan { from { transform: translateX(0) rotate(0) scale(0.9); opacity: 0; } to { transform: translateX(var(--x)) rotate(var(--r)); } }

/* 2. Big number */
.wr-slide-big { display: flex; flex-direction: column; align-items: center; text-align: center; }
.wr-count { margin-top: 8px; font-size: clamp(96px, 15vw, 190px); font-weight: 900; letter-spacing: -0.06em; line-height: 0.9; font-variant-numeric: tabular-nums; }
.wr-unit { margin-top: 6px; font-size: 22px; font-weight: 700; }
.wr-chips { display: flex; gap: 10px; margin-top: 28px; }
.wr-chips span { padding: 10px 18px; border-radius: 500px; background: rgba(255, 255, 255, 0.12); font-size: 15px; color: rgba(255, 255, 255, 0.85); }
.wr-chips b { color: #fff; }

/* 3. Top artist */
.wr-slide-artist { display: flex; align-items: center; gap: 56px; width: 100%; }
.wr-portrait { position: relative; flex: 0 0 auto; width: min(340px, 34vw); aspect-ratio: 1; animation: wrPop 0.7s cubic-bezier(.3, 1.4, .5, 1) both; }
.wr-portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6); }
.wr-rank-badge { position: absolute; right: 6%; bottom: 6%; padding: 8px 14px; border-radius: 500px; background: #fff; color: #000; font-size: 22px; font-weight: 900; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
@keyframes wrPop { from { transform: scale(0.7); opacity: 0; } to { transform: none; opacity: 1; } }
.wr-artist-copy { min-width: 0; }

/* 4. Top track */
.wr-slide-track { display: flex; flex-direction: column; align-items: center; text-align: center; }
.wr-sleeve-big { width: 230px; height: 230px; margin-bottom: 26px; animation: wrSpinIn 0.8s cubic-bezier(.2, .8, .2, 1) both; }
.wr-sleeve-big img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
@keyframes wrSpinIn { from { transform: rotate(-8deg) scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }

/* 5. Tops */
.wr-slide-tops { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; width: 100%; align-self: center; }
.wr-col h3 { margin: 0 0 14px; font-size: 26px; font-weight: 900; letter-spacing: -0.03em; }
.wr-row {
    width: 100%; display: flex; align-items: center; gap: 14px; padding: 8px 10px; margin: 0 -10px; border: 0; border-radius: 8px;
    background: none; color: #fff; text-align: left; cursor: pointer; opacity: 0; animation: wrWord 0.5s ease calc(0.15s + var(--i) * 0.08s) forwards;
}
.wr-row:hover { background: rgba(255, 255, 255, 0.1); }
.wr-n { width: 22px; font-size: 18px; font-weight: 800; color: rgba(255, 255, 255, 0.6); text-align: right; }
.wr-round, .wr-square { width: 52px; height: 52px; object-fit: cover; flex-shrink: 0; }
.wr-round { border-radius: 50%; } .wr-square { border-radius: 6px; }
.wr-t { display: flex; flex-direction: column; min-width: 0; }
.wr-t b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-t small { font-size: 13px; color: rgba(255, 255, 255, 0.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 760px) {
    .wr-slide { padding: 56px 24px 32px; }
    .wr-slide-artist { flex-direction: column; text-align: center; gap: 24px; }
    .wr-slide-tops { grid-template-columns: 1fr; gap: 20px; overflow-y: auto; max-height: 100%; }
}