feat: redesign settings popup modal for mobile compatibility

Completely refactored the RPG Companion settings popup with professional
ES6 architecture and mobile-first CSS, matching the dice roller redesign.

**CSS Changes (style.css:2585-2773):**
- Mobile-first responsive design with clamp() and min() functions
- CSS custom properties for fluid scaling across viewports
- min-height: 0 on flex children for proper max-height constraints
- ::before pseudo-element for backdrop (removed overlay div)
- State-based animations with .is-open and .is-closing classes
- 75vh max-height with proper viewport centering
- Touch-friendly 44px minimum tap targets
- Neutral 80% opaque background for visibility

**HTML Changes (template.html:71-214):**
- Added ARIA attributes: role="dialog", aria-modal="true", aria-labelledby
- Semantic <header> element for settings header
- aria-hidden="true" on all decorative icons
- Removed .rpg-settings-popup-overlay div (now CSS ::before)
- Improved accessibility throughout

**JavaScript Changes (index.js:985-1142):**
- Created SettingsModal ES6 class with state management
- open() and close() methods with animation control
- updateTheme() for real-time theme switching
- Private _applyCustomTheme() and _clearCustomTheme() methods
- isAnimating flag prevents double-clicks
- Focus management for accessibility
- Backwards compatible wrapper functions preserve existing API
- Updated event handlers with backdrop click support
- Removed obsolete overlay click handler

**Benefits:**
- Settings modal now fully functional on mobile devices
- Proper scrolling with content overflow
- Smooth open/close animations
- Professional class-based architecture
- Complete accessibility support
- Theme support maintained
- No breaking changes to existing code

style.css

@@ -2583,94 +2583,135 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
 }
 
 /* ============================================
-   SETTINGS POPUP
+   SETTINGS MODAL - MOBILE FIRST
    ============================================ */
+
+/* CSS Custom Properties for Responsive Scaling */
+.rpg-settings-popup {
+    /* Fluid spacing */
+    --modal-padding: clamp(0.5rem, 2vw, 0.75rem);
+    --modal-gap: clamp(0.375rem, 1.5vw, 0.5rem);
+    --modal-border-width: 2px;
+
+    /* Fluid typography */
+    --modal-font-base: clamp(0.8rem, 3vw, 0.9rem);
+    --modal-font-small: clamp(0.7rem, 2.5vw, 0.8rem);
+    --modal-font-heading: clamp(0.9rem, 3.5vw, 1rem);
+
+    /* Content constraints - more height than dice roller */
+    --modal-max-width: min(90vw, 500px);
+    --modal-max-height: 75vh;
+}
+
+/* Modal Container - Hidden by default */
 .rpg-settings-popup {
     position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
     z-index: 10000;
-    display: flex;
+    display: none;
     align-items: center;
     justify-content: center;
+    padding: 0.5rem;
 }
 
-.rpg-settings-popup-overlay {
+/* Open state */
+.rpg-settings-popup.is-open {
+    display: flex;
+    animation: fadeIn 0.2s ease-out;
+}
+
+/* Closing state */
+.rpg-settings-popup.is-closing {
+    display: flex;
+    animation: fadeOut 0.2s ease-in;
+}
+
+/* Backdrop overlay - using ::before pseudo-element */
+.rpg-settings-popup::before {
+    content: '';
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.7);
+    inset: 0;
+    background: rgba(0, 0, 0, 0.85);
     backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
 }
 
+/* Modal Content Box */
 .rpg-settings-popup-content {
     position: relative;
-    background: var(--rpg-bg);
-    border: 3px solid var(--rpg-border);
-    border-radius: 0.938em;
-    max-width: 31.25rem;
-    width: 90%;
-    max-height: 80vh;
-    overflow: hidden;
+    width: 100%;
+    max-width: var(--modal-max-width);
+    height: auto;
+    max-height: var(--modal-max-height);
+    min-height: 0;
+    background: rgba(30, 30, 30, 0.8);
+    border: var(--modal-border-width) solid var(--rpg-border);
+    border-radius: 0.5rem;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9);
+    color: var(--rpg-text);
     display: flex;
     flex-direction: column;
-    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.9);
-    animation: popupSlideIn 0.3s ease-out;
-    color: var(--rpg-text);
+    overflow: hidden;
+    animation: slideInUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    margin: auto 0;
 }
 
+/* Header */
 .rpg-settings-popup-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0.938em 1.25em;
+    padding: var(--modal-padding);
     background: var(--rpg-accent);
-    border-bottom: 1px solid var(--rpg-border);
+    border-bottom: var(--modal-border-width) solid var(--rpg-border);
+    flex-shrink: 0;
 }
 
 .rpg-settings-popup-header h3 {
     margin: 0;
-    font-size: 1.125rem;
+    font-size: var(--modal-font-heading);
     color: var(--rpg-highlight);
     display: flex;
     align-items: center;
-    gap: 0.625em;
+    gap: var(--modal-gap);
 }
 
+/* Close button - touch-friendly */
 .rpg-popup-close {
     background: transparent;
     border: none;
     color: var(--rpg-text);
     font-size: 1.5rem;
     cursor: pointer;
-    padding: 0;
-    width: 1.875rem;
-    height: 1.875rem;
+    padding: 0.5rem;
+    min-width: 44px;
+    min-height: 44px;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 0.25em;
+    border-radius: 0.25rem;
     transition: all 0.2s ease;
 }
 
-.rpg-popup-close:hover {
+.rpg-popup-close:active {
     background: rgba(255, 255, 255, 0.1);
     color: var(--rpg-highlight);
 }
 
+/* Scrollable Body */
 .rpg-settings-popup-body {
-    padding: 1.25em;
+    padding: var(--modal-padding);
     overflow-y: auto;
-    flex: 1;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+    flex: 1 1 auto;
+    min-height: 0;
 }
 
+/* Settings Groups */
 .rpg-settings-group {
-    margin-bottom: 1.25em;
-    padding-bottom: 1.25em;
+    margin-bottom: var(--modal-padding);
+    padding-bottom: var(--modal-padding);
     border-bottom: 1px solid var(--rpg-border);
 }
 
@@ -2679,15 +2720,16 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
 }
 
 .rpg-settings-group h4 {
-    margin: 0 0 0.938em 0;
-    font-size: 0.938rem;
+    margin: 0 0 var(--modal-gap) 0;
+    font-size: var(--modal-font-base);
     color: var(--rpg-highlight);
     display: flex;
     align-items: center;
-    gap: 0.5em;
+    gap: var(--modal-gap);
+    font-weight: 600;
 }
 
-/* Apply theme to settings popup */
+/* Theme Support */
 #rpg-settings-popup[data-theme="sci-fi"] .rpg-settings-popup-content {
     --rpg-bg: #0a0e27;
     --rpg-accent: #1a1f3a;
@@ -2712,6 +2754,24 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     --rpg-border: #ff00ff;
 }
 
+/* Desktop Enhancement (1001px+) */
+@media (min-width: 1001px) {
+    .rpg-settings-popup {
+        --modal-padding: 1rem;
+        --modal-gap: 0.75rem;
+        --modal-font-base: 0.9rem;
+        --modal-font-small: 0.8rem;
+        --modal-font-heading: 1.125rem;
+        --modal-max-width: 600px;
+    }
+
+    /* Hover effects on desktop */
+    .rpg-popup-close:hover {
+        background: rgba(255, 255, 255, 0.1);
+        color: var(--rpg-highlight);
+    }
+}
+
 /* ============================================
    CHAT THOUGHT OVERLAYS
    ============================================ */