sidebar part 3: death save throws block

style/_sidebar.scss

@@ -202,6 +202,62 @@ aside {
         }
     }
 
+    .death-throws {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .dt-list {
+            display: flex;
+            &.failed {
+                flex-direction: row-reverse;
+            }
+        }
+
+        .dt {
+            width: 20px;
+            height: 20px;
+            border-radius: 10px;
+            margin: 3px;
+            &.dt-fail {
+                background: hsl(0deg, 10%, 50%);
+            }
+            &.dt-success {
+                background: hsl(120deg, 10%, 50%);
+            }
+
+            &:hover {
+                cursor: pointer;
+            }
+        }
+        .dt:has(~ .dt:hover), .dt:hover, .dt.filled {
+            filter: contrast(700%);
+        }
+
+        .dt.filled:hover, .dt.filled:hover ~ .dt.filled {
+            filter: contrast(50%);
+        }
+
+        .reset {
+            margin: 0 10px;
+            button {
+                color: white;
+                background: #29AAB3;
+                width: 22px;
+                height: 22px;
+                text-align: center;
+                border-radius: 11px;
+                margin-top: 2px;
+                padding-left: 2px;
+                padding-top: 3px;
+                &:hover {
+                    transform: rotateY(360deg) scale(1.2);
+                    transition: transform .4s;
+                }
+            }
+        }
+    }
+
     input {
         max-width: 100%;
         width: fit-content;