simplify info hovers

web/styles.css

@@ -318,6 +318,8 @@ button.color-select:hover {
   visibility: hidden;
   position: absolute;
   opacity: 0%;
+  inset: 100% auto auto 50%;
+  transform: translateX(-50%);
   transition: visibility 200ms, opacity 200ms ease-out, transform 200ms ease-out;
   font-size: 0.75rem;
 
@@ -332,14 +334,8 @@ button.color-select:hover {
   color: var(--background);
 }
 
-.pkmn-tile .cluster-info {
-  inset: 50% auto auto calc(100% + var(--tile-block-padding));
-  transform: translateY(-50%);
-}
-
-.pkmn-tile .total-info {
-  inset: 100% auto auto 50%;
-  transform: translateX(-50%);
+.pkmn-tile:hover {
+  z-index: 10;
 }
 
 .pkmn-tile button:hover + :is(.cluster-info, .total-info),
@@ -350,29 +346,13 @@ button.color-select:hover {
 
 @media (prefers-reduced-motion: no-preference) {
   .pkmn-tile:hover {
+    /* TODO fix total */
     transform: scale(105%) translateX(-3%) translateY(-5%);
-    z-index: 10;
   }
 
-  .pkmn-tile button:hover + .total-info {
+  .pkmn-tile button:hover + :is(.cluster-info, .total-info) {
     transform: translateX(-50%) translateY(5%);
   }
-
-  .pkmn-tile button:hover + .cluster-info:nth-child(2) {
-    transform: translateX(1ch) translateY(-80%);
-  }
-
-  .pkmn-tile button:hover + .cluster-info:nth-child(4) {
-    transform: translateX(1ch) translateY(-60%);
-  }
-
-  .pkmn-tile button:hover + .cluster-info:nth-child(6) {
-    transform: translateX(1ch) translateY(-40%);
-  }
-
-  .pkmn-tile button:hover + .cluster-info:nth-child(8) {
-    transform: translateX(1ch) translateY(-20%);
-  }
 }
 
 /* Sort Function Controls */