refactor(web): hoist .play-overlay CSS to app.css; remove triplicated <style> blocks (C2)

web/src/app.css

@@ -17,3 +17,20 @@ body {
 body {
   font-family: var(--fs-font-body);
 }
+
+/* Card play-overlay: positioned absolutely over the card's art square,
+ * fades in on hover (mouse) or stays visible (touch). Used by AlbumCard,
+ * ArtistCard, PlaylistCard. The `.card` class is a marker used as the
+ * :hover anchor; it has no styling of its own. */
+.play-overlay {
+  background: var(--fs-accent);
+  color: var(--fs-parchment);
+  opacity: 0;
+  transition: opacity 150ms ease;
+}
+@media (hover: hover) {
+  .card:hover .play-overlay { opacity: 1; }
+}
+@media (hover: none) {
+  .play-overlay { opacity: 1; }
+}

web/src/lib/components/AlbumCard.svelte

@@ -79,17 +79,3 @@
   </div>
 </div>
 
-<style>
-  .play-overlay {
-    background: var(--fs-accent);
-    color: var(--fs-parchment);
-    opacity: 0;
-    transition: opacity 150ms ease;
-  }
-  @media (hover: hover) {
-    .card:hover .play-overlay { opacity: 1; }
-  }
-  @media (hover: none) {
-    .play-overlay { opacity: 1; }
-  }
-</style>

web/src/lib/components/ArtistCard.svelte

@@ -89,17 +89,3 @@
   </div>
 </div>
 
-<style>
-  .play-overlay {
-    background: var(--fs-accent);
-    color: var(--fs-parchment);
-    opacity: 0;
-    transition: opacity 150ms ease;
-  }
-  @media (hover: hover) {
-    .card:hover .play-overlay { opacity: 1; }
-  }
-  @media (hover: none) {
-    .play-overlay { opacity: 1; }
-  }
-</style>

web/src/lib/components/PlaylistCard.svelte

@@ -168,17 +168,3 @@
   </a>
 </div>
 
-<style>
-  .play-overlay {
-    background: var(--fs-accent);
-    color: var(--fs-parchment);
-    opacity: 0;
-    transition: opacity 150ms ease;
-  }
-  @media (hover: hover) {
-    .card:hover .play-overlay { opacity: 1; }
-  }
-  @media (hover: none) {
-    .play-overlay { opacity: 1; }
-  }
-</style>