Various CSS Enhancements

styles/creature.less

@@ -8,6 +8,28 @@
   background-color: var(--color-light-1);
 }
 
+.creature-hp {
+  gap: 2px;
+  align-items: center;
+  .form-fields {
+    input {
+      flex: none;
+      min-width: 4rem;
+      max-width: 4rem;
+      margin-left: 4px;
+    }
+  }
+  .damage-bonus {
+    font-size: calc(var(--font-size-standard) * 0.8);
+  }
+  .hp-separator {
+    font-size: calc(var(--font-size-standard) * 1.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
 .creature-main {
   background-color: var(--color-light-1);
   display: flex;
@@ -34,25 +56,6 @@
         }
       }
 
-      .creature-hp {
-        gap: 2px;
-        align-items: center;
-        input {
-          flex: none;
-          width: 2rem;
-          margin-left: 4px;
-        }
-        .damage-bonus {
-          font-size: calc(var(--font-size-standard) * 0.8);
-        }
-        .hp-separator {
-          font-size: calc(var(--font-size-standard) * 1.2);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-      }
-
       .creature-dv,
       .creature-dmax {
         .form-fields {

styles/mixins.less

@@ -2,9 +2,7 @@
   font-family: var(--font-primary);
   font-size: calc(var(--font-size-standard) * 1.05);
   color: var(--color-dark-1);
-  background-image: var(--background-image-base);
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
+  background: var(--color-light-1);
   --input-height: 1.4rem;
 
   .sheet-tabs {

styles/protagonist.less

@@ -39,7 +39,7 @@
         align-items: center;
         input {
           flex: none;
-          width: 2rem;
+          width: 4rem;
           margin-left: 4px;
         }
         .hp-separator {