Update style.css

style.css

@@ -1,16 +1,16 @@
 /* --- Character Sheet Styling --- */
 #character-sheet-container {
-    background-color: #3a3a3a; /* Slightly lighter than main background */
+    background-color: #3a3a3a;
     border: 1px solid #555;
     padding: 15px;
     margin-top: 20px;
     border-radius: 5px;
     display: flex;
     flex-direction: column;
-    gap: 15px; /* Spacing between sections */
+    gap: 15px;
     color: #eee;
-    max-width: 450px; /* Adjust width as needed */
-    margin-left: auto; /* Example positioning */
+    max-width: 450px;
+    margin-left: auto;
     margin-right: auto;
 }
 
@@ -32,7 +32,7 @@
     display: flex;
     align-items: center;
     gap: 10px;
-    flex-wrap: wrap; /* Allow wrapping */
+    flex-wrap: wrap;
 }
 
 .char-header label {
@@ -40,7 +40,7 @@
 }
 
 #char-name {
-    flex-grow: 1; /* Take remaining space */
+    flex-grow: 1;
     background-color: #555;
     border: 1px solid #777;
     color: #fff;
@@ -51,7 +51,7 @@
 
 .char-details {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Responsive columns */
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
     gap: 8px;
 }
 .char-details label, .char-level-xp label {
@@ -83,8 +83,8 @@
 
 .stats-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); /* Responsive grid */
-    gap: 5px 10px; /* Row and column gap */
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    gap: 5px 10px;
     margin-bottom: 10px;
 }
 
@@ -93,29 +93,28 @@
     padding: 3px 6px;
     border-radius: 3px;
     display: flex;
-    justify-content: space-between; /* Align items nicely */
+    justify-content: space-between;
     align-items: center;
 }
 .stats-grid span {
-    margin-right: 5px; /* Space before button */
+    margin-right: 5px;
 }
 
 .char-stats small {
     color: #aaa;
-    display: block; /* Make it take its own line */
+    display: block;
     text-align: center;
 }
 
-
 .char-possessions h3 {
      margin-bottom: 5px;
 }
 
 #char-inventory-list {
-    list-style: decimal; /* Use numbers */
+    list-style: decimal;
     margin: 0;
-    padding-left: 25px; /* Space for numbers */
-    max-height: 180px; /* Limit height and make scrollable */
+    padding-left: 25px;
+    max-height: 180px;
     overflow-y: auto;
     background-color: #333;
     border-radius: 3px;
@@ -127,70 +126,61 @@
     margin-bottom: 3px;
     color: #ccc;
     padding: 2px 5px;
-    min-height: 1.2em; /* Ensure empty slots have height */
+    min-height: 1.2em;
 }
-/* Style for actual items in the list */
+
 #char-inventory-list li span:not(.item-slot) {
     background-color: #5a5a5a;
     padding: 1px 4px;
     border-radius: 2px;
     color: #fff;
     font-size: 0.9em;
-    cursor: default; /* Indicate it's not interactive (unless you add features) */
+    cursor: default;
 }
-/* Style for empty slots */
+
 .item-slot {
     color: #666;
     font-style: italic;
     font-size: 0.9em;
-}
-.item-slot::before {
-    content: '[Empty]';
+    /* Removed ::before content, put [Empty] directly in HTML */
 }
 
-/* --- Emoji Button Styling --- */
-.emoji-button {
-    background: none;
-    border: 1px solid #666;
-    color: #ddd;
-    padding: 3px 5px;
+/* --- Updated Button Styling (was .emoji-button) --- */
+.sheet-button {
+    background-color: #555; /* Use a background color now */
+    border: 1px solid #777;
+    color: #eee;
+    padding: 4px 8px; /* Adjust padding */
     border-radius: 4px;
     cursor: pointer;
-    font-size: 1.1em; /* Adjust emoji size */
-    line-height: 1; /* Prevent extra spacing */
+    font-size: 0.9rem; /* Standard text size */
+    line-height: 1.2;
     transition: background-color 0.2s, border-color 0.2s;
-    display: inline-flex; /* Align emoji and label */
-    align-items: center;
-    gap: 4px; /* Space between emoji and label */
+    text-align: center;
 }
 
-.emoji-button:hover:not(:disabled) {
-    background-color: #555;
-    border-color: #888;
+.sheet-button:hover:not(:disabled) {
+    background-color: #666;
+    border-color: #999;
 }
 
-.emoji-button:active:not(:disabled) {
+.sheet-button:active:not(:disabled) {
      background-color: #444;
 }
 
-.emoji-button:disabled {
-    opacity: 0.5;
+.sheet-button:disabled {
+    opacity: 0.6; /* Slightly more visible when disabled */
     cursor: not-allowed;
-    border-color: #444;
-}
-
-.emoji-button .btn-label {
-    font-size: 0.7rem; /* Smaller text label */
-    line-height: 1;
-    display: inline-block; /* Or none if you prefer only icons */
-    color: #ccc;
+    background-color: #484848;
+    border-color: #666;
+    color: #aaa;
 }
 
-/* Make stat increase buttons smaller */
+/* Make stat increase buttons (+) smaller and squarish */
 .stat-increase {
-    font-size: 0.9em;
-    padding: 1px 3px;
-}
-.stat-increase .btn-label {
-    display: none; /* Hide label for stat buttons */
+    font-size: 1rem; /* Make '+' bigger */
+    font-weight: bold;
+    padding: 0px 6px; /* Adjust for '+' sign */
+    line-height: 1;
+    min-width: 25px; /* Ensure minimum width */
 }