Implements inventory system, wip

styles/character.less

@@ -619,6 +619,79 @@
       min-width: 12rem;
     }
   }
+
+  .inv-section {
+    margin-bottom: 6px;
+    .inv-items {
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+    }
+    .inv-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 2px 4px;
+      border-radius: 3px;
+      background: rgba(255,255,255,0.15);
+      &:hover { background: rgba(255,255,255,0.25); }
+      .item-img {
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+        flex-shrink: 0;
+      }
+      .inv-name {
+        flex: 1;
+        font-size: 12px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .inv-enc, .inv-uses, .inv-capacity {
+        font-size: 11px;
+        color: #555;
+        min-width: 30px;
+        text-align: center;
+        white-space: nowrap;
+      }
+      .controls {
+        display: flex;
+        gap: 4px;
+        a { font-size: 12px; cursor: pointer; }
+      }
+    }
+    .inv-empty {
+      font-style: italic;
+      color: rgba(0,0,0,0.4);
+      text-align: center;
+      font-size: 11px;
+      padding: 4px;
+    }
+  }
+
+  .pack-burden-fieldset {
+    .pack-burden-display {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 0;
+      font-size: 13px;
+
+      .pack-burden-label {
+        font-weight: bold;
+      }
+      .pack-burden-value {
+        font-weight: bold;
+        .pack-burden-used { color: #e6a817; }
+        .pack-burden-sep { color: rgba(0,0,0,0.4); }
+        .pack-burden-max { color: rgba(0,0,0,0.7); }
+      }
+    }
+    .pack-burden-used { color: #e6a817; font-weight: bold; }
+    .pack-burden-sep { color: rgba(0,0,0,0.4); margin: 0 2px; }
+    .pack-burden-max { color: rgba(0,0,0,0.7); font-weight: bold; }
+  }
 }
 
 .tab.character-combat .main-div {
@@ -911,3 +984,32 @@
     min-height: 150px;
   }
 }
+
+// Equipped item visual feedback
+.inv-item {
+  &.is-equipped {
+    background: rgba(100, 180, 100, 0.12);
+    border-left: 2px solid rgba(80, 160, 80, 0.6);
+  }
+  .equipped-icon {
+    color: #5a9e6a;
+  }
+  .unequipped-icon {
+    color: rgba(0, 0, 0, 0.25);
+  }
+}
+
+// Burden overload warning
+.burden-excess {
+  font-size: 0.75em;
+  color: #ff5c5c;
+  margin-left: 4px;
+  white-space: nowrap;
+}
+
+// Depleted consumable button
+.controls a.disabled {
+  opacity: 0.35;
+  pointer-events: none;
+  cursor: default;
+}