Init/progression dice

styles/character.less

@@ -13,8 +13,8 @@
     flex: 1;
 
     .character-left {
-      min-width: 220px;
-      max-width: 220px;
+      min-width: 200px;
+      max-width: 200px;
       display: flex;
       flex-direction: column;
 
@@ -32,28 +32,32 @@
       }
       .character-hp {
         display: flex;
-        gap: 2px;
+        gap: 4px;
         align-items: center;
-        .character-hp-value {
-          .form-fields input {
-            flex: none;
-            min-width: 3rem;
-            max-width: 3rem;
-            margin-left: 10px;
-            font-size: calc(var(--font-size-standard) * 1.4);
-          }
+        margin-bottom: 4px;
+        .name {
+          flex: none;
+          min-width: 2.5rem;
+          max-width: 2.5rem;
+        }
+        input {
+          flex: none;
+          min-width: 2.2rem;
+          max-width: 2.2rem;
+          margin-left: 4px;
+          font-size: calc(var(--font-size-standard) * 1.0);
         }
         .character-hp-max {
           clear: both;
           display: flex;
           flex-direction: row;
           flex-wrap: wrap;
-          margin: 3px 0;
+          margin: 4px 0;
           align-items: center;
           input {
-            width: 50px;
+            width: 3.2rem;
             text-align: center;
-            font-size: calc(var(--font-size-standard) * 1.4);
+            font-size: calc(var(--font-size-standard) * 1.0);
           }
         }
       }
@@ -74,18 +78,17 @@
   }
 
   .character-pc-play {
-    min-width: 400px;
+    min-width: 320px;
   }
 
   .character-pc-edit {
-    min-width: 400px;
+    min-width: 320px;
   }
 
   .character-characteristics {
     display: flex;
     flex-direction: column;
     gap: 4px;
-    flex: 1;
 
     .character-characteristic {
       display: flex;
@@ -105,6 +108,7 @@
       }
     }
   }
+  
   .character-challenges {
     display: flex;
     flex-direction: column;
@@ -206,11 +210,11 @@
   }
 
   .character-characteristics-play {
-    min-width: 225px;
+    min-width: 160px;
   }
 
   .character-characteristic-edit {
-    min-width: 400px;
+    min-width: 160px;
   }
 }
 
@@ -386,8 +390,8 @@
       align-items: center;
       gap: 4px;
       .wound-description {
-        min-width: 16rem;
-        max-width: 16rem;
+        min-width: 14rem;
+        max-width: 14rem;
       }
       .wound-duration {
         min-width: 3rem;
@@ -460,6 +464,29 @@
     }
   }
 
+  .spell-details {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 4px;
+    .spell-detail {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      button {
+        min-width: 10rem;
+      }
+      .armor-hp {
+        min-width: 20rem;
+        max-width: 20rem;
+        .input {
+          min-width: 3rem;
+          max-width: 3rem;
+        }
+      }
+    }
+  }
+
+
   .spells {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
@@ -496,6 +523,28 @@
     }
   }
 
+  .miracle-details {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 4px;
+    .miracle-detail {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      button {
+        min-width: 10rem;
+      }
+      .armor-hp {
+        min-width: 20rem;
+        max-width: 20rem;
+        .input {
+          min-width: 3rem;
+          max-width: 3rem;
+        }
+      }
+    }
+  }
+
   .miracles {
     display: grid;
     grid-template-columns: repeat(3, 1fr);