Update style.css

style.css

@@ -1,17 +1,128 @@
+/* --- Base Styles --- */
+body {
+    font-family: sans-serif;
+    background-color: #222;
+    color: #ddd;
+    margin: 0;
+    padding: 15px;
+    line-height: 1.6;
+}
+
+h1, h2, h3 {
+    color: #eee;
+}
+
+h1 {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+a {
+    color: #8af;
+}
+
+p {
+    margin-bottom: 1em;
+}
+
+/* --- Layout --- */
+.game-container {
+    display: flex;
+    flex-wrap: wrap; /* Allow wrapping on smaller screens */
+    gap: 20px;
+}
+
+#scene-container {
+    flex: 2; /* Takes up more space */
+    min-width: 300px; /* Minimum width */
+    min-height: 400px; /* Minimum height */
+    background-color: #111; /* Fallback bg */
+    border: 1px solid #444;
+    position: relative; /* Needed for potential overlays */
+    overflow: hidden; /* Hide anything overflowing canvas */
+}
+
+#scene-container canvas {
+    display: block; /* Remove extra space below canvas */
+}
+
+
+.ui-container {
+    flex: 1; /* Takes up less space */
+    min-width: 300px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.panel {
+    background-color: #333;
+    border: 1px solid #555;
+    padding: 15px;
+    border-radius: 5px;
+}
+
+/* --- Story UI --- */
+#story-ui h2 {
+    margin-top: 0;
+    margin-bottom: 10px;
+    border-bottom: 1px solid #666;
+    padding-bottom: 5px;
+}
+
+#story-content p:last-child {
+    margin-bottom: 0;
+}
+
+#choices {
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.choice-button {
+    background-color: #4a4a4a;
+    border: 1px solid #666;
+    color: #eee;
+    padding: 10px 15px;
+    border-radius: 4px;
+    cursor: pointer;
+    text-align: left;
+    transition: background-color 0.2s, border-color 0.2s;
+    width: 100%; /* Make buttons fill container */
+}
+
+.choice-button:hover:not(:disabled) {
+    background-color: #5a5a5a;
+    border-color: #888;
+}
+
+.choice-button:active:not(:disabled) {
+    background-color: #404040;
+}
+
+.choice-button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    background-color: #404040;
+    border-color: #555;
+    color: #aaa;
+}
+
+
 /* --- Character Sheet Styling --- */
 #character-sheet-container {
     background-color: #3a3a3a;
-    border: 1px solid #555;
+    /* Styles from previous step */
     padding: 15px;
-    margin-top: 20px;
+    border: 1px solid #555;
     border-radius: 5px;
     display: flex;
     flex-direction: column;
     gap: 15px;
     color: #eee;
-    max-width: 450px;
-    margin-left: auto;
-    margin-right: auto;
+    /* max-width: 450px; /* Removed max-width to let flexbox handle it */
 }
 
 #character-sheet-container h2,
@@ -62,7 +173,6 @@
     color: #fff;
 }
 
-
 .char-level-xp {
      display: flex;
      justify-content: space-around;
@@ -76,7 +186,6 @@
     gap: 5px;
 }
 
-
 .char-stats h3 {
     margin-bottom: 5px;
 }
@@ -104,6 +213,7 @@
     color: #aaa;
     display: block;
     text-align: center;
+    margin-top: 5px; /* Added space */
 }
 
 .char-possessions h3 {
@@ -142,21 +252,21 @@
     color: #666;
     font-style: italic;
     font-size: 0.9em;
-    /* Removed ::before content, put [Empty] directly in HTML */
 }
 
-/* --- Updated Button Styling (was .emoji-button) --- */
+/* --- Character Sheet Button Styling --- */
 .sheet-button {
-    background-color: #555; /* Use a background color now */
+    background-color: #555;
     border: 1px solid #777;
     color: #eee;
-    padding: 4px 8px; /* Adjust padding */
+    padding: 4px 8px;
     border-radius: 4px;
     cursor: pointer;
-    font-size: 0.9rem; /* Standard text size */
+    font-size: 0.9rem;
     line-height: 1.2;
     transition: background-color 0.2s, border-color 0.2s;
     text-align: center;
+    white-space: nowrap; /* Prevent wrapping on small buttons */
 }
 
 .sheet-button:hover:not(:disabled) {
@@ -169,18 +279,37 @@
 }
 
 .sheet-button:disabled {
-    opacity: 0.6; /* Slightly more visible when disabled */
+    opacity: 0.6;
     cursor: not-allowed;
     background-color: #484848;
     border-color: #666;
     color: #aaa;
 }
 
-/* Make stat increase buttons (+) smaller and squarish */
+/* Stat increase buttons (+) */
 .stat-increase {
-    font-size: 1rem; /* Make '+' bigger */
+    font-size: 1rem;
     font-weight: bold;
-    padding: 0px 6px; /* Adjust for '+' sign */
+    padding: 0px 6px;
     line-height: 1;
-    min-width: 25px; /* Ensure minimum width */
+    min-width: 25px;
+}
+
+
+/* --- Item Type Styling (Example) --- */
+/* Add specific styles for item types if desired */
+.item-weapon {
+    /* background-color: #733 !important; */
+    /* border: 1px solid #a55; */
+}
+.item-armor {
+     /* background-color: #367 !important; */
+}
+.item-spell {
+     /* background-color: #737 !important; */
+     /* font-style: italic; */
+}
+.item-quest {
+     /* color: #fc5 !important; */
+     /* font-weight: bold; */
 }