Draw locked covers as artwork instead of a question mark

A reward-gated album showed a bare ❓ over the generated gradient, which reads as
"something is broken" rather than "something is waiting". It is now a proper
placeholder cover, with a separate one for audiobooks and podcasts.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/src/components/Cover.tsx

@@ -26,8 +26,8 @@ interface Props {
   style?: CSSProperties;
   /** Print the title over generated art. Off for thumbnails, where it would not fit. */
   label?: boolean;
-  /** A reward-gated album/track not yet earned - shows a question mark instead of the
+  /** A reward-gated album/track not yet earned - shows a placeholder cover instead of
-   * real art or title, regardless of `has_cover`. */
+   * the real art or title, regardless of `has_cover`. */
   locked?: boolean;
 }
 
@@ -53,20 +53,18 @@ export function Cover({ album, size, fit = "width", radius, className, style, la
       }}
     >
       {locked ? (
-        <div
+        <img
+          src={book ? "/hidden_audiobook_or_podcast.png" : "/hiddenalbum.png"}
+          alt=""
           style={{
             position: "absolute",
             inset: 0,
-            display: "flex",
+            width: "100%",
-            alignItems: "center",
+            height: "100%",
-            justifyContent: "center",
+            objectFit: "cover",
-            fontSize: Math.max(22, Math.round(size / 2.2)),
+            clipPath: book ? "inset(0 5% 0 0)" : undefined,
-            color: "oklch(99% 0 0 / .85)",
-            textShadow: "0 2px 8px oklch(15% 0.05 210 / .6)",
           }}
-        >
+        />
-          ❓
-        </div>
       ) : (
         <>
           {!album.has_cover && label && (