Fix card text overflow on taller cards

Shrink the oversized emoji art and let the effect text grow into the
freed middle band, centered with safe fallback to top-aligned so long
effects never clip their leading words.

web/src/styles.css

@@ -436,13 +436,14 @@ h3 {
 }
 
 .card-art {
-  font-size: 2.4rem;
-  line-height: 1.2;
+  font-size: 1.8rem;
+  line-height: 1;
+  flex: 0 0 auto;
   filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.25));
 }
 
 .card-lg .card-art {
-  font-size: 3rem;
+  font-size: 2.5rem;
 }
 
 .card-sm .card-art {
@@ -452,16 +453,27 @@ h3 {
 .card-name {
   font-family: var(--font-display);
   font-size: 0.8rem;
+  line-height: 1.1;
   margin-top: 1px;
+  flex: 0 0 auto;
 }
 
 .card-effect {
-  font-size: 0.56rem;
-  line-height: 1.25;
+  font-size: 0.53rem;
+  line-height: 1.15;
   font-weight: 700;
   color: rgba(51, 35, 15, 0.75);
   text-align: center;
-  padding: 0 2px;
+  padding: 1px 2px 0;
+  /* Grow into the space between the name and the power badge and center the
+     text there, so long effects use the whole middle band instead of being
+     clipped just under the name. */
+  flex: 1 1 auto;
+  display: flex;
+  /* Center short text in the band, but fall back to top-aligned when the text
+     is taller than the band, so the leading words are never the ones clipped. */
+  align-items: safe center;
+  justify-content: center;
   overflow: hidden;
 }