Item ehnance, fixes on actor sheet

less/actor-sheet.less

@@ -5,8 +5,6 @@
 .oathhammer {
 
   .actor-img {
-    height: @portrait-height;
-    width: auto;
     border: 2px solid @color-blue;
     border-radius: 4px;
     cursor: pointer;
@@ -18,59 +16,36 @@
     flex-direction: column;
     gap: 4px;
 
+    // Portrait + right column layout
     .character-pc {
       display: flex;
       gap: 10px;
+      align-items: flex-start;
       flex: 1;
     }
 
-    .character-left {
-      min-width: @left-panel-width;
-      max-width: @left-panel-width;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 4px;
-    }
-
+    // Portrait alone on the left, fixed square
     .character-portrait {
-      display: flex;
-      justify-content: center;
-    }
+      flex-shrink: 0;
+      width: @portrait-height;
 
-    .character-resource {
-      display: flex;
-      align-items: center;
-      flex-wrap: nowrap;
-      gap: 4px;
-      margin-bottom: 2px;
-
-      // formInput renders a <div class="form-group"> — flatten it so it doesn't break flex row
-      div.form-group {
-        display: contents;
-      }
-
-      input {
-        min-width: 2.5rem;
-        max-width: 2.5rem;
-        text-align: center;
+      .actor-img {
+        width: @portrait-height;
+        height: @portrait-height;
+        object-fit: cover;
       }
     }
 
-    .resource-label {
-      min-width: 3.5rem;
-      font-family: @font-secondary;
-      font-size: @font-size-xs;
-    }
-
+    // Right column: stacks name, identity bar, stats band
     .character-right {
       flex: 1;
       display: flex;
       flex-direction: column;
-      gap: 6px;
+      gap: 5px;
       min-width: 0;
     }
 
+    // Row 1: character name
     .character-name {
       display: flex;
       align-items: center;
@@ -85,6 +60,7 @@
       }
     }
 
+    // Row 2: identity bar (lineage + class + level/xp)
     .character-identity-bar {
       display: flex;
       flex-direction: row;
@@ -154,23 +130,66 @@
         }
       }
     }
-  }
 
-  // Attributes + Arcane Stress side by side
-  .attributes-stress-row {
-    display: flex;
-    align-items: flex-start;
-    gap: 6px;
+    // Row 3: unified stats band — resources | attributes | arcane stress
+    .character-stats-band {
+      display: flex;
+      align-items: stretch;
+      gap: 6px;
+      flex: 1;
 
-    .character-attributes { flex: 1; }
+      // Vital resources: Grit / Luck / Defense / Movement
+      .character-resources {
+        flex-shrink: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        gap: 2px;
+        padding: 3px 6px;
+        border: 1px solid @color-olive;
+        border-radius: 3px;
+        background: rgba(0,0,0,0.08);
 
-    .character-arcane-stress {
-      flex-shrink: 0;
-      width: auto;
+        .character-resource {
+          display: flex;
+          align-items: center;
+          gap: 3px;
+          white-space: nowrap;
+
+          div.form-group { display: contents; }
+
+          input {
+            width: 2.4rem;
+            text-align: center;
+            font-size: @font-size-sm;
+            padding: 1px 2px;
+          }
+
+          .res-sep { opacity: 0.5; font-size: @font-size-xs; }
+        }
+
+        .resource-label {
+          min-width: 3.8rem;
+          font-family: @font-secondary;
+          font-size: @font-size-xs;
+          color: @color-olive;
+        }
+      }
+
+      // Attributes fieldset
+      .character-attributes {
+        flex: 1;
+        min-width: 0;
+      }
+
+      // Arcane stress compact
+      .character-arcane-stress {
+        flex-shrink: 0;
+      }
     }
   }
 
-  // Attributes grid
+  // Attributes grid (6 columns)
   .attributes-grid {
     display: grid;
     grid-template-columns: repeat(6, 1fr);