First PC sheet, WIP

styles/character-subattributes.less

@@ -6,82 +6,62 @@
 
     .subattributes-list {
       display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-      gap: 1rem;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 0.5rem;
     }
 
     .subattribute-item {
       background: rgba(0, 0, 0, 0.1);
       border: 1px solid var(--color-border-dark-secondary);
       border-radius: 4px;
-      padding: 0.75rem;
+      padding: 0.4rem;
       display: flex;
       flex-direction: column;
-      gap: 0.5rem;
+      align-items: center;
+      gap: 0.15rem;
+      text-align: center;
+      cursor: pointer;
+      text-decoration: none;
 
       .subattribute-header {
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        gap: 0.5rem;
+        gap: 0.3rem;
+
+        i.fa-dice-d20 {
+          font-size: 1em;
+          color: var(--color-text-dark-primary);
+          opacity: 0.7;
+        }
+      }
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.2);
+        border-color: var(--color-text-light-primary);
+        transform: translateY(-1px);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+
+        .subattribute-header i.fa-dice-d20 {
+          opacity: 1;
+          color: var(--color-text-dark-primary);
+        }
       }
 
       .subattribute-name {
         font-weight: bold;
-        font-size: 1.1em;
+        font-size: 0.75em;
         color: var(--color-text-dark-primary);
+        line-height: 1.2;
       }
 
       .subattribute-value {
-        input {
-          width: 3em;
-          text-align: center;
-          font-weight: bold;
-          font-size: 1.2em;
-          background: rgba(255, 255, 255, 0.1);
-          border: 1px solid var(--color-border-dark-tertiary);
-          border-radius: 3px;
-          padding: 0.25rem;
-          color: var(--color-text-dark-primary);
-
-          &:disabled {
-            opacity: 0.9;
-            cursor: default;
-          }
-        }
-      }
-
-      .subattribute-details {
-        display: flex;
-        flex-direction: column;
-        gap: 0.25rem;
-        font-size: 0.9em;
-        color: var(--color-text-dark-secondary);
-      }
-
-      .subattribute-parents {
-        font-style: italic;
-
-        .parent-char {
-          display: inline-block;
-          margin-right: 0.5rem;
-
-          .parent-name {
-            font-weight: 600;
-            color: var(--color-text-dark-primary);
-          }
-
-          .parent-value {
-            color: var(--color-text-dark-secondary);
-          }
-        }
-      }
-
-      .subattribute-description {
-        padding-top: 0.25rem;
-        border-top: 1px solid var(--color-border-dark-tertiary);
-        font-size: 0.85em;
-        line-height: 1.3;
+        font-size: 1em;
+        font-weight: bold;
+        color: var(--color-text-dark-primary);
+        min-width: 2em;
+        padding: 0.15rem 0.3rem;
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 3px;
       }
     }
   }
@@ -92,7 +72,7 @@
   .character-subattributes.tab {
     .subattributes-content {
       .subattributes-list {
-        grid-template-columns: 1fr;
+        grid-template-columns: repeat(3, 1fr);
       }
     }
   }