diff --git a/web/src/app.css b/web/src/app.css
index 93afd080..d44306c1 100644
--- a/web/src/app.css
+++ b/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; }
+}
diff --git a/web/src/lib/components/AlbumCard.svelte b/web/src/lib/components/AlbumCard.svelte
index f4e1138e..ebb2df7e 100644
--- a/web/src/lib/components/AlbumCard.svelte
+++ b/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>
diff --git a/web/src/lib/components/ArtistCard.svelte b/web/src/lib/components/ArtistCard.svelte
index 87dd14b9..8a2a4ff5 100644
--- a/web/src/lib/components/ArtistCard.svelte
+++ b/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>
diff --git a/web/src/lib/components/PlaylistCard.svelte b/web/src/lib/components/PlaylistCard.svelte
index 665124a2..ba67479c 100644
--- a/web/src/lib/components/PlaylistCard.svelte
+++ b/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>