Fixes #5: Refactor code quality - Part 1

- Split index.js from 1,567 lines to 456 lines (73% reduction)
  - Extracted settings event listeners to src/systems/ui/settingsListeners.js
  - Extracted settings panel to src/core/settingsPanel.js
  - Simplified initUI() and main initialization block

- Modularized style.css into 28 logical CSS modules in src/styles/
  - Added build script (npm run build:css) to concatenate modules
  - Modules: panel, components, user-stats, info-box, thoughts, settings,
    themes, modals, mobile, inventory, quests, equipment, encounters,
    weather, music-player, FAB widgets, strip widgets, etc.

- Updated package.json with build:css script and type: module

No functional changes - pure refactoring for maintainability.

src/styles/_24_feature-toggles.css

@@ -0,0 +1,93 @@
+/* ============================================
+   THREE-COLUMN FEATURE TOGGLES LAYOUT
+   ============================================ */
+
+/* Features row container */
+.rpg-features-row {
+    display: grid;
+    grid-template-rows: repeat(2, 1fr);
+    grid-auto-flow: column;
+    grid-auto-columns: min-content;
+    gap: 8px;
+    margin-bottom: 12px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    flex-wrap: nowrap;
+    padding: 0 4px; /* Prevent first/last items from being cut off */
+    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
+}
+
+/* Center items when they fit, allow scrolling when they don't */
+/*.rpg-features-row::before,*/
+/*.rpg-features-row::after {*/
+/*    content: '';*/
+/*    margin: auto;*/
+/*}*/
+
+/* Hide scrollbar for cleaner look while maintaining functionality */
+.rpg-features-row::-webkit-scrollbar {
+    height: 4px;
+}
+
+.rpg-features-row::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.rpg-features-row::-webkit-scrollbar-thumb {
+    background: rgba(128, 128, 128, 0.3);
+    border-radius: 2px;
+}
+
+.rpg-features-row::-webkit-scrollbar-thumb:hover {
+    background: rgba(128, 128, 128, 0.5);
+}
+
+/* Each feature column */
+.rpg-feature-col {
+    flex: 0 0 auto;
+    min-width: 60px;
+}
+
+.rpg-feature-col .rpg-toggle-label {
+    justify-content: center;
+    align-items: center;
+}
+
+/* Always hide text, show only checkbox + icon */
+.rpg-feature-col .rpg-toggle-text {
+    display: none;
+}
+
+.rpg-feature-col .rpg-toggle-label i {
+    font-size: 0.95rem;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Tablet and below: Hide text, show only checkbox + icon */
+@media (max-width: 768px) {
+    .rpg-feature-col .rpg-toggle-text {
+        display: none;
+    }
+
+    .rpg-feature-col .rpg-toggle-label i {
+        font-size: 1rem;
+    }
+}
+
+/* Very small screens: Remove column layout since we have horizontal scroll */
+@media (max-width: 400px) {
+    .rpg-feature-col .rpg-toggle-label i {
+        font-size: 1rem;
+    }
+}
+
+
+
+/* Ensure send_form has relative positioning for music widget placement */
+#send_form {
+    position: relative !important;
+}
+