Implements inventory system, wip

styles/character.less

@@ -668,6 +668,77 @@
       font-size: 11px;
       padding: 4px;
     }
+
+    // Container drag-drop highlight
+    .inv-container[data-container-id] {
+      border: 1px dashed transparent;
+      transition: border-color 0.15s, background 0.15s;
+      &.drag-over {
+        border-color: rgba(100, 150, 255, 0.7);
+        background: rgba(100, 150, 255, 0.12);
+      }
+    }
+
+    // Items nested inside a container
+    .inv-container-items {
+      margin: 2px 0 6px 28px;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      border-left: 2px solid rgba(0,0,0,0.15);
+      padding-left: 8px;
+    }
+
+    .inv-container-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 2px 4px;
+      border-radius: 3px;
+      background: rgba(0,0,0,0.06);
+      &:hover { background: rgba(0,0,0,0.12); }
+      .item-img {
+        width: 20px;
+        height: 20px;
+        cursor: pointer;
+        flex-shrink: 0;
+      }
+      .inv-name {
+        flex: 1;
+        font-size: 11px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .inv-enc {
+        font-size: 10px;
+        color: #555;
+        min-width: 24px;
+        text-align: center;
+      }
+      .inv-container-type-badge {
+        font-size: 9px;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: rgba(0,0,0,0.45);
+        background: rgba(0,0,0,0.07);
+        border-radius: 3px;
+        padding: 1px 4px;
+        flex-shrink: 0;
+      }
+      .controls {
+        display: flex;
+        gap: 4px;
+        a { font-size: 11px; cursor: pointer; }
+      }
+    }
+
+    .inv-container-empty {
+      margin: 2px 0 4px 36px;
+      font-size: 10px;
+      font-style: italic;
+      color: rgba(0,0,0,0.35);
+    }
   }
 
   .pack-burden-fieldset {