WIP: very rough armor

public/assets/css/soldier_record_block.css

@@ -5,6 +5,9 @@ span {
 }
 
 .physical-status-track {
+  display: flex;
+  justify-content: space-between;
+  align-items: end;
   text-align: center;
 }
 
@@ -57,3 +60,37 @@ p {
 .grenades input:checked + svg circle {
   fill: gray;
 }
+
+[slot="block-number"]:not(:last-of-type) {
+  display: inline-block;
+  width: 1.3em;
+}
+
+damage-block.armor span[slot="block-number"] {
+  border: 1px solid black;
+  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;
+}
+
+.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;
+}

public/assets/css/style.css

@@ -134,6 +134,9 @@ button.set-firing-arc img {
   white-space: nowrap;
   background-color: white;
   transition: transform 0.25s;
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: default;
 }
 
 .soldier-record span[slot] {