Improve styling

form.js

@@ -281,7 +281,7 @@ const makePokemonTile = (name) => {
     .map((part) => part.charAt(0).toUpperCase() + part.substr(1))
     .join(" ");
 
-  clone.querySelector(".pkmn-score").innerText = currentSortValues[name];
+  clone.querySelector(".pkmn-score").innerText = currentSortValues[name].toFixed(3);
 
   const { total, clusters } = currentScores[name][selectors.colorSpace];
 

styles.css

@@ -24,10 +24,10 @@ select:disabled {
   grid-template-columns: 64px 1fr 14ch;
   grid-template-rows: repeat(4, 1fr);
   grid-template-areas:
-    "img name  cls1"
-    "img score cls2"
-    "... total cls3"
-    "... total cls4";
+    "img name  cls4"
+    "img score cls3"
+    "... total cls2"
+    "... total cls1";
   align-items: center;
   border: 1px solid var(--highlight);
 }
@@ -43,6 +43,8 @@ select:disabled {
 }
 
 .pkmn > .pkmn-total {
+  border: 1px solid var(--highlight);
+  border-radius: 100vmax;
   grid-area: total;
   height: 100%;
   display: inline-flex;
@@ -55,9 +57,12 @@ select:disabled {
 }
 
 .pkmn > .pkmn-cls {
+  border: 1px solid var(--highlight);
+  border-radius: 100vmax;
   font-weight: 600;
   font-size: 0.75rem;
   padding: 0.125rem;
+  padding-right: 0.5rem;
   display: flex;
   justify-content: space-between;
 }
@@ -66,7 +71,9 @@ select:disabled {
   display: inline-block;
   content: "";
   width: 1ch;
-  margin-right: 4px;
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+  margin-bottom: 0.125ch;
 }
 
 .pkmn-total-selected > .pkmn-total::before,