sidebar part 2: hit dice block

style/_sidebar.scss

@@ -89,6 +89,8 @@ aside {
     > h6 {
         font-size: 0.7em;
         text-align: right;
+        margin-top: 10px;
+        margin-bottom: 6px;
         padding: 5px;
         color: #666;
         font-family: "Galderglynn Titling";
@@ -142,6 +144,64 @@ aside {
         }
     }
 
+    .hit-dice {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-evenly;
+        margin: 5px 8px;
+
+        .die-selector {
+            width: 100%;
+            display: flex;
+            justify-content: flex-end;
+            margin-right: 6px;
+            align-items: center;
+            margin-bottom: 10px;
+
+            select {
+                color: white;
+                background: crimson;
+                padding: 3px 12px;
+                border-left: solid 3px red;
+            }
+
+        }
+
+        .die {
+            width: 30px;
+            height: 30px;
+            margin: 3px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 0.75em;
+
+            &.spent {
+                filter: contrast(20%);
+            }
+
+            &:hover {
+                cursor: cell;
+            }
+
+            @for $i from 1 through 20 {
+                &.die-#{$i} {
+                    background: hsl((60 + ($i * 87)) * 1deg, 100%, 40%);
+                }
+            }
+            @include mixins.heading;
+        }
+
+        .die:has(~ .die:hover), .die:hover {
+            filter: contrast(20%);
+        }
+
+        .die.spent:hover, .die.spent:hover ~ .die.spent {
+            filter: contrast(70%);
+        }
+    }
+
     input {
         max-width: 100%;
         width: fit-content;