Add more settings

beango/css/beango.css

@@ -53,9 +53,10 @@ body {
 
 /* Style for permanently marked cells */
 .bingo-cell.marked {
-    background-color: #fde047; /* Tailwind yellow-300 */
+    /* background-color: #fde047; */ /* REMOVED - Handled by JS */
     /* Optional: Add other persistent styles like a stronger border */
     /* border-color: #ca8a04; */ /* Tailwind yellow-600 */
+    /* Styles like background-image, background-size, background-position, background-repeat, and opacity will be added by JS */
 }
 
 /* Style for when a MARKED cell is actively being clicked */
@@ -98,3 +99,56 @@ body {
 /* Basic styling for the board */
 #bingo-board-container {
 }
+
+/* Styling for config pane sections */
+.config-section {
+    border-bottom: 1px solid #e5e7eb; /* Tailwind gray-200 */
+    padding-bottom: 0.75rem; /* pb-3 */
+    margin-bottom: 0.75rem; /* mb-3 */
+}
+
+.config-section:last-of-type {
+    border-bottom: none;
+    padding-bottom: 0;
+    margin-bottom: 0;
+}
+
+.config-summary {
+    cursor: pointer;
+    font-weight: 600; /* semibold */
+    color: #1f2937; /* gray-800 */
+    padding: 0.5rem 0; /* py-2 */
+    list-style: none; /* Remove default marker */
+    position: relative;
+    padding-left: 1.5rem; /* Make space for custom marker */
+}
+
+/* Custom arrow marker */
+.config-summary::before {
+    content: '';
+    border-width: 0 2px 2px 0;
+    border-style: solid;
+    border-color: #6b7280; /* gray-500 */
+    display: inline-block;
+    padding: 3px;
+    transform: rotate(45deg);
+    position: absolute;
+    left: 0.25rem;
+    top: 0.85rem; /* Adjust vertical alignment */
+    transition: transform 0.2s ease-in-out;
+}
+
+/* Rotate arrow when section is open */
+details[open] > .config-summary::before {
+    transform: rotate(-135deg);
+    top: 1rem; /* Adjust vertical alignment for open state */
+}
+
+/* Hide default <details> marker */
+.config-summary::-webkit-details-marker {
+    display: none;
+}
+
+.config-content {
+    padding-left: 1.5rem; /* Indent content */
+}