feat(home): Because you listened recommendation rail (#489)

* feat(home): "Because you listened" recommendation rail New Home rail (under Recently Added, default on, toggleable in Settings → Personalisation → Home Page) that surfaces 3 albums from artists similar to one of your top-played artists. Anchor rotates per Home mount so a different top-artist seeds the recommendations each visit; within each anchor, both the similar-artist subset and the chosen album per artist are randomised, so the same anchor returns different picks on subsequent visits. Card layout matches the regular Album cards' surface (--bg-card with accent-tinted border + 1px inset top highlight) and gets the same Play / Enqueue hover overlay buttons. Cover and meta scale via CSS only — no infinite animations, no filter/blur/transform, no compositing layers. Grid wraps below 3-up at <400px card width instead of shrinking. API budget: one getArtistInfo2 + 6 parallel getArtist calls per Home mount, both reusing the existing mostPlayed payload to derive the anchor pool (no extra API call to find top artists). All 8 locales seeded. * fix(home): ru plurals + per-server anchor + narrower card grid - ru: add _few / _many for becauseYouLikeTracks (CLDR Russian needs 4 forms — 3 треков was wrong, now 3 трека). - Anchor rotation memory is now per-server. The localStorage key becomes psysonic_because_anchor:<serverId>; switching servers no longer aliases server A's rotation onto server B's pool. - because-card grid minmax(400px, 1fr) -> minmax(340px, 1fr) so two cards fit side by side at typical sidebar-expanded widths instead of collapsing to a single card per row. * docs: CHANGELOG + Contributors entry for Because-you-listened rail (PR #489) * style(home): blurred cover backdrop + centred layout for Because-cards - Each Because-card renders the album cover as a blurred, low-opacity full-bleed background layer behind the existing cover thumb and text. Resolved through useCachedUrl so the cache layer feeds it (same key as the thumbnail) instead of a fresh salted URL on every render. - Card content (cover thumb + text block) now centred horizontally and vertically within the card; the meta line lives in a small pill that sits centred under the artist row. - Text contrast halo and meta-pill background are theme-aware via color-mix on var(--bg-card) / var(--text-primary), so the same rules read on dark and light themes (was hard-coded rgba black before and smudged the type on Latte / Nord Snowstorm).
2026-07-21 14:55:43 +00:00 · 2026-05-07 02:28:58 +02:00
parent 5b37ab70f1
commit d1ff2fab51
14 changed files with 492 additions and 8 deletions
@@ -66,6 +66,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 * **Composers are a first-class share entity.** `psysonic2-` links with `k=composer` paste to `/composer/:id`; the Share button on the detail page and the right-click menu both copy a `composer` link.
 * Sidebar entry is **off by default** (classical-music use case is a niche) — toggle in Settings → Sidebar.

+### Home — "Because you listened" recommendation rail
+
+**By [@Psychotoxical](https://github.com/Psychotoxical), PR [#489](https://github.com/Psychotoxical/psysonic/pull/489)**
+
+* New Home rail that surfaces albums **similar to one of your most-played artists** — Spotify-style "Because you listened to …" recommendations.
+* Anchor artist is rotated **round-robin** between Home opens through the top **8** entries in Most Played (so the rail does not get stuck on the same name). `getArtistInfo` returns up to **12** similar artists; the rail randomly samples **6** of them and surfaces **3** albums (one random per matching artist) that exist on your server.
+* Anchor rotation is **per-server**: switching servers keeps independent rotation state instead of aliasing one server's anchor id onto the next server's pool.
+* Toggleable in the Home customizer like every other rail; respects the existing performance flags ("Disable rail artwork", "Disable Home album rows").
+
 ## Changed

 ### Dependencies — npm / Cargo refresh and rodio 0.22
@@ -0,0 +1,260 @@
+import React, { memo, useEffect, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Play, ListPlus } from 'lucide-react';
+import {
+  SubsonicAlbum,
+  buildCoverArtUrl,
+  coverArtCacheKey,
+  getAlbum,
+  getArtist,
+  getArtistInfo,
+} from '../api/subsonic';
+import CachedImage, { useCachedUrl } from './CachedImage';
+import { usePlayerStore, songToTrack } from '../store/playerStore';
+import { useAuthStore } from '../store/authStore';
+import { playAlbum } from '../utils/playAlbum';
+
+const ANCHOR_KEY_PREFIX = 'psysonic_because_anchor:';
+const TOP_ARTIST_POOL = 8;
+const SIMILAR_FETCH = 12;
+const SIMILAR_PICK = 6;
+const SHOW_COUNT = 3;
+const COVER_SIZE = 300;
+
+function shuffle<T>(arr: T[]): T[] {
+  const out = arr.slice();
+  for (let i = out.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [out[i], out[j]] = [out[j], out[i]];
+  }
+  return out;
+}
+
+interface Anchor {
+  id: string;
+  name: string;
+}
+
+interface Props {
+  mostPlayed: SubsonicAlbum[];
+  disableArtwork?: boolean;
+}
+
+function buildAnchorPool(albums: SubsonicAlbum[], limit: number): Anchor[] {
+  const seen = new Set<string>();
+  const out: Anchor[] = [];
+  for (const a of albums) {
+    if (!a.artistId || seen.has(a.artistId)) continue;
+    seen.add(a.artistId);
+    out.push({ id: a.artistId, name: a.artist });
+    if (out.length >= limit) break;
+  }
+  return out;
+}
+
+function formatAlbumDuration(seconds: number, t: (key: string, opts?: Record<string, unknown>) => string): string {
+  const totalMin = Math.max(0, Math.round(seconds / 60));
+  const hours = Math.floor(totalMin / 60);
+  const minutes = totalMin % 60;
+  if (hours > 0) return t('common.durationHoursMinutes', { hours, minutes });
+  return t('common.durationMinutesOnly', { minutes: totalMin });
+}
+
+/** Anchor rotation memory is **per-server** — server A and server B keep
+ *  independent rotation state, so switching servers doesn't snap the anchor
+ *  back to the first artist of the new pool just because the previous server's
+ *  anchor id was unknown there. */
+function anchorKey(serverId: string | null): string | null {
+  return serverId ? `${ANCHOR_KEY_PREFIX}${serverId}` : null;
+}
+
+function rotateAnchor(pool: Anchor[], serverId: string | null): Anchor | null {
+  if (pool.length === 0) return null;
+  const key = anchorKey(serverId);
+  let lastId: string | null = null;
+  if (key) {
+    try { lastId = localStorage.getItem(key); } catch { /* ignore */ }
+  }
+  if (!lastId) return pool[0];
+  const idx = pool.findIndex(a => a.id === lastId);
+  if (idx < 0) return pool[0];
+  return pool[(idx + 1) % pool.length];
+}
+
+export default function BecauseYouLikeRail({ mostPlayed, disableArtwork = false }: Props) {
+  const { t } = useTranslation();
+  const activeServerId = useAuthStore(s => s.activeServerId);
+  const pool = useMemo(() => buildAnchorPool(mostPlayed, TOP_ARTIST_POOL), [mostPlayed]);
+  const [anchor, setAnchor] = useState<Anchor | null>(null);
+  const [recs, setRecs] = useState<SubsonicAlbum[]>([]);
+
+  useEffect(() => {
+    let cancelled = false;
+    const next = rotateAnchor(pool, activeServerId);
+    setAnchor(next);
+    setRecs([]);
+    if (!next) return;
+    const key = anchorKey(activeServerId);
+    if (key) {
+      try { localStorage.setItem(key, next.id); } catch { /* ignore */ }
+    }
+
+    (async () => {
+      try {
+        const info = await getArtistInfo(next.id, { similarArtistCount: SIMILAR_FETCH });
+        const similar = (info.similarArtist ?? []).filter(s => s.id);
+        if (similar.length === 0) return;
+
+        const candidates = shuffle(similar).slice(0, SIMILAR_PICK);
+        const results = await Promise.all(
+          candidates.map(s => getArtist(s.id).catch(() => null))
+        );
+
+        const picks: SubsonicAlbum[] = [];
+        for (const r of results) {
+          if (!r || r.albums.length === 0) continue;
+          const album = r.albums[Math.floor(Math.random() * r.albums.length)];
+          picks.push(album);
+          if (picks.length >= SHOW_COUNT) break;
+        }
+        if (!cancelled) setRecs(picks);
+      } catch {
+        /* ignore */
+      }
+    })();
+
+    return () => { cancelled = true; };
+  }, [pool, activeServerId]);
+
+  if (!anchor || recs.length === 0) return null;
+
+  return (
+    <section className="album-row-section because-you-like-rail">
+      <div className="album-row-header">
+        <h2 className="section-title" style={{ marginBottom: 0 }}>
+          {t('home.becauseYouLikeFor', { artist: anchor.name })}
+        </h2>
+      </div>
+      <div className="because-card-grid">
+        {recs.map(album => (
+          <BecauseCard
+            key={album.id}
+            album={album}
+            anchor={anchor.name}
+            disableArtwork={disableArtwork}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+interface CardProps {
+  album: SubsonicAlbum;
+  anchor: string;
+  disableArtwork: boolean;
+}
+
+const BecauseCard = memo(function BecauseCard({ album, anchor, disableArtwork }: CardProps) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const enqueue = usePlayerStore(s => s.enqueue);
+  const coverUrl = useMemo(
+    () => (album.coverArt ? buildCoverArtUrl(album.coverArt, COVER_SIZE) : ''),
+    [album.coverArt],
+  );
+  const coverKey = useMemo(
+    () => (album.coverArt ? coverArtCacheKey(album.coverArt, COVER_SIZE) : ''),
+    [album.coverArt],
+  );
+  const bgResolved = useCachedUrl(coverUrl, coverKey);
+
+  const handleOpen = () => navigate(`/album/${album.id}`);
+  const handlePlay = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    playAlbum(album.id);
+  };
+  const handleEnqueue = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    try {
+      const data = await getAlbum(album.id);
+      enqueue(data.songs.map(songToTrack));
+    } catch {
+      /* silent — toast would be too noisy for a hover action */
+    }
+  };
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      className="because-card"
+      onClick={handleOpen}
+      onKeyDown={e => { if (e.key === 'Enter') handleOpen(); }}
+      aria-label={`${album.name} – ${album.artist}`}
+    >
+      {!disableArtwork && bgResolved && (
+        <div
+          className="because-card-bg"
+          style={{ backgroundImage: `url(${bgResolved})` }}
+          aria-hidden="true"
+        />
+      )}
+      <div className="because-card-cover-wrap">
+        {!disableArtwork && coverUrl ? (
+          <CachedImage
+            src={coverUrl}
+            cacheKey={coverKey}
+            alt={album.name}
+            className="because-card-cover"
+            loading="lazy"
+          />
+        ) : (
+          <div className="because-card-cover because-card-cover-placeholder" aria-hidden="true" />
+        )}
+        <div className="album-card-play-overlay">
+          <button
+            type="button"
+            className="album-card-details-btn"
+            onClick={handlePlay}
+            aria-label={t('hero.playAlbum')}
+            data-tooltip={t('hero.playAlbum')}
+            data-tooltip-pos="top"
+          >
+            <Play size={15} fill="currentColor" />
+          </button>
+          <button
+            type="button"
+            className="album-card-details-btn"
+            onClick={handleEnqueue}
+            aria-label={t('contextMenu.enqueueAlbum')}
+            data-tooltip={t('contextMenu.enqueueAlbum')}
+            data-tooltip-pos="top"
+          >
+            <ListPlus size={15} />
+          </button>
+        </div>
+      </div>
+      <div className="because-card-text">
+        <div className="because-card-top">
+          <div className="because-card-similar">
+            {t('home.similarTo', { artist: anchor })}
+          </div>
+          <div className="because-card-title">{album.name}</div>
+          <div className="because-card-artist">{album.artist}</div>
+        </div>
+        {album.releaseTypes && album.releaseTypes[0] ? (
+          <div className="because-card-pills">
+            <span className="because-card-pill because-card-pill-type">{album.releaseTypes[0]}</span>
+          </div>
+        ) : null}
+        <div className="because-card-meta">
+          {album.year ? <span>{album.year}</span> : null}
+          {album.songCount ? <span>{t('home.becauseYouLikeTracks', { count: album.songCount })}</span> : null}
+          {album.duration ? <span>{formatAlbumDuration(album.duration, t)}</span> : null}
+        </div>
+      </div>
+    </div>
+  );
+});
@@ -46,7 +46,12 @@ export const deTranslation = {
    loadMore: 'Mehr laden',
    discoverMore: 'Mehr entdecken',
    discoverArtists: 'Künstler entdecken',
-    discoverArtistsMore: 'Alle Künstler'
+    discoverArtistsMore: 'Alle Künstler',
+    becauseYouLike: 'Weil du gehört hast…',
+    becauseYouLikeFor: 'Weil du {{artist}} gehört hast',
+    similarTo: 'Ähnlich wie {{artist}}',
+    becauseYouLikeTracks_one: '{{count}} Titel',
+    becauseYouLikeTracks_other: '{{count}} Titel'
  },
  hero: {
    eyebrow: 'Album des Augenblicks',
@@ -48,7 +48,12 @@ export const enTranslation = {
    loadMore: 'Load More',
    discoverMore: 'Discover More',
    discoverArtists: 'Discover Artists',
-    discoverArtistsMore: 'All Artists'
+    discoverArtistsMore: 'All Artists',
+    becauseYouLike: 'Because you listened…',
+    becauseYouLikeFor: 'Because you listened to {{artist}}',
+    similarTo: 'Similar to {{artist}}',
+    becauseYouLikeTracks_one: '{{count}} track',
+    becauseYouLikeTracks_other: '{{count}} tracks'
  },
  hero: {
    eyebrow: 'Featured Album',
@@ -47,7 +47,12 @@ export const esTranslation = {
    loadMore: 'Cargar Más',
    discoverMore: 'Descubrir Más',
    discoverArtists: 'Descubrir Artistas',
-    discoverArtistsMore: 'Todos los Artistas'
+    discoverArtistsMore: 'Todos los Artistas',
+    becauseYouLike: 'Porque escuchaste…',
+    becauseYouLikeFor: 'Porque escuchaste a {{artist}}',
+    similarTo: 'Similar a {{artist}}',
+    becauseYouLikeTracks_one: '{{count}} canción',
+    becauseYouLikeTracks_other: '{{count}} canciones'
  },
  hero: {
    eyebrow: 'Álbum Destacado',
@@ -46,7 +46,12 @@ export const frTranslation = {
    loadMore: 'Charger plus',
    discoverMore: 'Découvrir plus',
    discoverArtists: 'Découvrir des artistes',
-    discoverArtistsMore: 'Tous les artistes'
+    discoverArtistsMore: 'Tous les artistes',
+    becauseYouLike: 'Parce que tu as écouté…',
+    becauseYouLikeFor: 'Parce que tu as écouté {{artist}}',
+    similarTo: 'Similaire à {{artist}}',
+    becauseYouLikeTracks_one: '{{count}} titre',
+    becauseYouLikeTracks_other: '{{count}} titres'
  },
  hero: {
    eyebrow: 'Album en vedette',
@@ -46,7 +46,12 @@ export const nbTranslation = {
    loadMore: 'Last inn flere',
    discoverMore: 'Oppdag flere',
    discoverArtists: 'Oppdag artister',
-    discoverArtistsMore: 'Alle artister'
+    discoverArtistsMore: 'Alle artister',
+    becauseYouLike: 'Fordi du har hørt…',
+    becauseYouLikeFor: 'Fordi du har hørt på {{artist}}',
+    similarTo: 'Likt {{artist}}',
+    becauseYouLikeTracks_one: '{{count}} spor',
+    becauseYouLikeTracks_other: '{{count}} spor'
  },
  hero: {
    eyebrow: 'Utvalgt album',
@@ -46,7 +46,12 @@ export const nlTranslation = {
    loadMore: 'Meer laden',
    discoverMore: 'Meer ontdekken',
    discoverArtists: 'Artiesten ontdekken',
-    discoverArtistsMore: 'Alle artiesten'
+    discoverArtistsMore: 'Alle artiesten',
+    becauseYouLike: 'Omdat je hebt geluisterd…',
+    becauseYouLikeFor: 'Omdat je naar {{artist}} hebt geluisterd',
+    similarTo: 'Lijkt op {{artist}}',
+    becauseYouLikeTracks_one: '{{count}} nummer',
+    becauseYouLikeTracks_other: '{{count}} nummers'
  },
  hero: {
    eyebrow: 'Uitgelicht album',
@@ -49,6 +49,13 @@ export const ruTranslation = {
    discoverMore: 'Смотреть ещё',
    discoverArtists: 'Исполнители',
    discoverArtistsMore: 'Все исполнители',
+    becauseYouLike: 'Потому что вы слушали…',
+    becauseYouLikeFor: 'Потому что вы слушали {{artist}}',
+    similarTo: 'Похоже на {{artist}}',
+    becauseYouLikeTracks_one: '{{count}} трек',
+    becauseYouLikeTracks_few: '{{count}} трека',
+    becauseYouLikeTracks_many: '{{count}} треков',
+    becauseYouLikeTracks_other: '{{count}} треков',
  },
  hero: {
    eyebrow: 'Альбом дня',
@@ -46,7 +46,12 @@ export const zhTranslation = {
    loadMore: '加载更多',
    discoverMore: '发现更多',
    discoverArtists: '发现艺术家',
-    discoverArtistsMore: '全部艺术家'
+    discoverArtistsMore: '全部艺术家',
+    becauseYouLike: '因为你听过…',
+    becauseYouLikeFor: '因为你听过 {{artist}}',
+    similarTo: '类似 {{artist}}',
+    becauseYouLikeTracks_one: '{{count}} 首',
+    becauseYouLikeTracks_other: '{{count}} 首'
  },
  hero: {
    eyebrow: '精选专辑',
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import Hero from '../components/Hero';
 import AlbumRow from '../components/AlbumRow';
 import SongRail from '../components/SongRail';
+import BecauseYouLikeRail from '../components/BecauseYouLikeRail';
 import { getAlbumList, getArtists, getRandomSongs, SubsonicAlbum, SubsonicArtist, SubsonicSong } from '../api/subsonic';
 import { useTranslation } from 'react-i18next';
 import { NavLink, useNavigate } from 'react-router-dom';
@@ -167,6 +168,12 @@ export default function Home() {
    isVisible('mostPlayed') &&
    mostPlayed.length > 0 &&
    reserveArtworkRow();
+  const becauseYouLikeArtworkEnabled =
+    !homeRailArtworkDisabled &&
+    !homeAlbumRowsDisabled &&
+    isVisible('becauseYouLike') &&
+    mostPlayed.length > 0 &&
+    reserveArtworkRow();

  const homeLiteArtworkFx = perfFlags.disableHomeArtworkFx;
  const homeFlatArtworkClip = perfFlags.disableHomeArtworkClip;
@@ -194,6 +201,12 @@ export default function Home() {
                initialArtworkBudget={HOME_ALBUM_ROW_INITIAL_ARTWORK_BUDGET}
              />
            )}
+            {!homeAlbumRowsDisabled && isVisible('becauseYouLike') && mostPlayed.length > 0 && (
+              <BecauseYouLikeRail
+                mostPlayed={mostPlayed}
+                disableArtwork={!becauseYouLikeArtworkEnabled}
+              />
+            )}
            {!homeAlbumRowsDisabled && isVisible('discover') && (
              <AlbumRow
                title={t('home.discover')}
@@ -369,6 +369,7 @@ const CONTRIBUTORS = [
      'Settings: keep current active server when adding a new one — no more auto-switch interrupting playback or library context (PR #475)',
      'Help page: full rewrite with 45 focused entries across 10 themed sections (Getting Started / Playback & Queue / Audio Tools / Library & Discovery / Lyrics / Sharing & Social / Personalization / Power User / Offline & Sync / Integrations & Troubleshooting), in-page live search with case-insensitive substring matching and auto-expand on hits, translated to all 8 locales (PR #485)',
      'Library: Browse by Composer — native-API role listing for classical libraries, library-scoped queries, composer as a first-class share entity (PR #487)',
+      'Home: "Because you listened" recommendation rail — Last.fm-anchored similar-artist surfacing with round-robin anchor rotation per server (PR #489)',
    ],
  },
 ] as const;
@@ -4616,6 +4617,7 @@ function HomeCustomizer() {
    hero:            t('home.hero'),
    recent:          t('home.recent'),
    discover:        t('home.discover'),
+    becauseYouLike:  t('home.becauseYouLike'),
    discoverSongs:   t('home.discoverSongs'),
    discoverArtists: t('home.discoverArtists'),
    recentlyPlayed:  t('home.recentlyPlayed'),
@@ -1,7 +1,7 @@
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';

-export type HomeSectionId = 'hero' | 'recent' | 'discover' | 'discoverSongs' | 'discoverArtists' | 'recentlyPlayed' | 'starred' | 'mostPlayed';
+export type HomeSectionId = 'hero' | 'recent' | 'discover' | 'becauseYouLike' | 'discoverSongs' | 'discoverArtists' | 'recentlyPlayed' | 'starred' | 'mostPlayed';

 export interface HomeSectionConfig {
  id: HomeSectionId;
@@ -11,6 +11,7 @@ export interface HomeSectionConfig {
 export const DEFAULT_HOME_SECTIONS: HomeSectionConfig[] = [
  { id: 'hero',            visible: true },
  { id: 'recent',          visible: true },
+  { id: 'becauseYouLike',  visible: true },
  { id: 'discover',        visible: true },
  { id: 'discoverSongs',   visible: true },
  { id: 'discoverArtists', visible: true },
@@ -13902,3 +13902,160 @@ html[data-perf-disable-home-artwork-clip="true"] .home-lite-artwork .song-card-c
  color: var(--text-muted, #888);
  letter-spacing: 0.02em;
 }
+
+/* Because-you-like rail — performance-conscious by design.
+   No filter/blur/transform animations (WebKitGTK / software-compositing friendly). */
+.because-card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+  gap: 1rem;
+}
+.because-card {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.25rem;
+  padding: 1rem;
+  background: var(--bg-card);
+  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border-subtle));
+  border-radius: 10px;
+  text-align: left;
+  cursor: pointer;
+  color: inherit;
+  font: inherit;
+  min-height: 220px;
+  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--accent) 25%, transparent) inset;
+  transition: background-color 160ms ease, border-color 160ms ease;
+}
+.because-card-bg {
+  position: absolute;
+  inset: 0;
+  background-size: cover;
+  background-position: center;
+  filter: blur(28px);
+  opacity: 0.22;
+  transform: scale(1.2);
+  z-index: 0;
+  pointer-events: none;
+}
+.because-card > :not(.because-card-bg) {
+  position: relative;
+  z-index: 1;
+}
+.because-card-text {
+  /* Theme-aware contrast halo — dark glow on dark themes, light on light. */
+  text-shadow:
+    0 0 2px color-mix(in srgb, var(--bg-card) 90%, transparent),
+    0 0 4px color-mix(in srgb, var(--bg-card) 70%, transparent),
+    0 1px 4px color-mix(in srgb, var(--bg-card) 55%, transparent);
+}
+.because-card:hover {
+  background: var(--bg-hover, var(--bg-card));
+  border-color: var(--accent, var(--border-subtle));
+}
+.because-card:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+.because-card-cover-wrap {
+  position: relative;
+  flex: 0 0 auto;
+  width: 200px;
+  height: 200px;
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--bg-input, rgba(0, 0, 0, 0.15));
+}
+.because-card-cover {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.because-card-cover-placeholder {
+  display: block;
+}
+.because-card:hover .album-card-play-overlay {
+  opacity: 1;
+}
+.because-card-text {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  gap: 0.5rem;
+  min-width: 0;
+  padding: 0.25rem 0;
+}
+.because-card-top {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 0.35rem;
+  min-width: 0;
+}
+.because-card-similar {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--accent, var(--text-muted, #888));
+  font-weight: 700;
+}
+.because-card-title {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--text-primary, inherit);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.because-card-artist {
+  font-size: 15px;
+  color: var(--text-secondary, inherit);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.because-card-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+.because-card-pill {
+  padding: 2px 10px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 999px;
+  font-size: 11px;
+  color: var(--text-secondary, inherit);
+  white-space: nowrap;
+}
+.because-card-pill-type {
+  border-color: color-mix(in srgb, var(--accent, currentColor) 50%, transparent);
+  color: var(--accent, var(--text-secondary, inherit));
+}
+.because-card-meta {
+  align-self: center;
+  justify-content: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  font-size: 12px;
+  color: var(--text-primary, var(--text-secondary, inherit));
+  background: color-mix(in srgb, var(--text-primary) 14%, transparent);
+  padding: 3px 10px;
+  border-radius: 999px;
+  text-shadow: none;
+}
+.because-card-meta > span:not(:last-child)::after {
+  content: '·';
+  margin-left: 0.75rem;
+  opacity: 0.5;
+}