Style grenade indicators without svg

public/assets/css/soldier_record_block.css

@@ -45,52 +45,45 @@ p {
   display: none;
 }
 
-.grenades svg {
-  width: 14px;
-  height: 14px;
-  vertical-align: bottom;
+.grenades input + label {
+  display: inline-block;
+  width: 0.75em;
+  height: 0.75em;
+  border: 1px solid black;
+  border-radius: 50%;
+  vertical-align: middle;
 }
 
-.grenades svg circle {
-  fill: none;
-  stroke: black;
-  stroke-width: 2px;
+.grenades input:checked + label {
+  background-color: gray;
 }
 
-.grenades input:checked + svg circle {
-  fill: gray;
+.grenades input + label:hover {
+  background-color: lightgray;
+}
+
+.grenades input:checked + label:hover {
+  background-color: darkgray;
 }
 
 [slot="block-number"]:not(:last-of-type) {
   display: inline-block;
   width: 1.3em;
+  margin-bottom: 2px;
 }
 
-damage-block.armor span[slot="block-number"] {
-  border: 1px solid black;
+damage-block span[slot="block-number"] {
+  border: 1px solid transparent;
   padding: 2px;
   border-radius: 50%;
   position: relative;
 }
 
-.physical-status-track damage-block:nth-child(1 of .armor) span[slot="block-number"]:hover {
-  border: 1px solid orangered;
-  cursor: pointer;
+damage-block.preview span[slot="block-number"] {
+  border-color: gray;
+  background-color: silver;
 }
 
-.physical-status-track damage-block:nth-child(1 of .armor) span[slot="block-number"]:hover::before {
-  content: '🡄';  /*<⇽⭠⮈🠈  🠜  🡄*/
-  position: absolute;
-  margin-left: -1.5em;
-}
-
-.physical-status-track damage-block:nth-last-child(1 of .armor) span[slot="block-number"]:hover {
-  border: 1px solid orangered;
-  cursor: pointer;
-}
-
-.physical-status-track damage-block:nth-last-child(1 of .armor) span[slot="block-number"]:hover::after {
-  content: '🡆';  /* 🠊  🡆 */
-  position: absolute;
-  margin-left: 1em;
+damage-block.armor span[slot="block-number"] {
+  border-color: black;
 }