Rename the playing-card CSS class away from Bootstrap's .card-img

Bootstrap 5.3 ships .card-img{width:100%} for images inside cards, which
collided with the similarly named class emitted by the card helpers:
every card image stretched to its container width, so the table cards
wrapped one per flex line and pushed the player's hand below the
viewport. Emit 'playing-card' instead and rename the six selectors in
style.css; callers keep passing only the size modifiers.

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")
     }
 }

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;
 }