Enter to submit.

web/src/styles.css

@@ -1161,10 +1161,11 @@ h3 {
   padding-bottom: 2px;
 }
 
-.card-hat {
-  width: 20px;
-  height: 13px;
-  display: block;
+/* The suit marker: a plain enamel dot (see .suit-dot), sized to sit opposite
+   the tier die in the name row. */
+.card-suit {
+  width: 14px;
+  height: 14px;
 }
 
 .card-die {
@@ -1179,9 +1180,9 @@ h3 {
   width: 15px;
 }
 
-.card-lg .card-hat {
-  width: 23px;
-  height: 15px;
+.card-lg .card-suit {
+  width: 16px;
+  height: 16px;
 }
 
 .card-lg .card-die,
@@ -1190,9 +1191,9 @@ h3 {
   height: 17px;
 }
 
-.card-sm .card-hat {
-  width: 16px;
-  height: 10px;
+.card-sm .card-suit {
+  width: 11px;
+  height: 11px;
 }
 
 .card-sm .card-die,
@@ -1208,9 +1209,9 @@ h3 {
   color: var(--cocoa);
   text-align: center;
   min-width: 0;
-  overflow-wrap: break-word;
-  /* Cap the name at ~two lines; useFitText shrinks longer names to fit. */
-  max-height: 2.1em;
+  /* Keep the name to a single line, like the real cards; useFitText shrinks
+     longer names to fit the row instead of letting them wrap. */
+  white-space: nowrap;
   overflow: hidden;
 }