diff --git a/web/src/components/card.rs b/web/src/components/card.rs
index 5dc3f6d..866c364 100644
--- a/web/src/components/card.rs
+++ b/web/src/components/card.rs
@@ -9,13 +9,13 @@ pub fn card_img(code: String, class: &'static str) -> View {
     let src = card_asset(&code);
     let alt = card_label(&code);
     view! {
-        img(src=src, class=format!("card-img {class}"), alt=alt, draggable="false")
+        img(src=src, class=format!("playing-card {class}"), alt=alt, draggable="false")
     }
 }
 
 /// Render the back of a card (used for opponents' hidden hands).
 pub fn card_back(class: &'static str) -> View {
     view! {
-        img(src=CARD_BACK, class=format!("card-img {class}"), alt="card back", draggable="false")
+        img(src=CARD_BACK, class=format!("playing-card {class}"), alt="card back", draggable="false")
     }
 }
diff --git a/web/style.css b/web/style.css
index fea06d5..cae77df 100644
--- a/web/style.css
+++ b/web/style.css
@@ -185,27 +185,27 @@ body {
 
 /* ---------- cards ---------- */
 
-.card-img {
+.playing-card {
     border-radius: 6px;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
     background: #fff;
     user-select: none;
 }
 
-.card-img.mini {
+.playing-card.mini {
     height: 34px;
 }
 
-.card-img.move-card {
+.playing-card.move-card {
     height: 54px;
     vertical-align: middle;
 }
 
-.card-img.table-card {
+.playing-card.table-card {
     height: 84px;
 }
 
-.card-img.hand-card {
+.playing-card.hand-card {
     height: 120px;
 }
 
@@ -355,7 +355,7 @@ body {
     justify-content: center;
 }
 
-.card-img.score-mini {
+.playing-card.score-mini {
     height: 38px;
 }