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

template.html

@@ -68,17 +68,19 @@
     </div>
 </div>
 
-<!-- Settings Popup Modal -->
-<div id="rpg-settings-popup" class="rpg-settings-popup" style="display: none;">
-    <div class="rpg-settings-popup-overlay"></div>
+<!-- Settings Modal -->
+<div id="rpg-settings-popup" class="rpg-settings-popup" role="dialog" aria-modal="true" aria-labelledby="rpg-settings-title">
     <div class="rpg-settings-popup-content">
-        <div class="rpg-settings-popup-header">
-            <h3><i class="fa-solid fa-gear"></i> RPG Companion Settings</h3>
-            <button id="rpg-close-settings" class="rpg-popup-close">&times;</button>
-        </div>
+        <header class="rpg-settings-popup-header">
+            <h3 id="rpg-settings-title">
+                <i class="fa-solid fa-gear" aria-hidden="true"></i>
+                <span>RPG Companion Settings</span>
+            </h3>
+            <button id="rpg-close-settings" class="rpg-popup-close" type="button" aria-label="Close settings">&times;</button>
+        </header>
         <div class="rpg-settings-popup-body">
             <div class="rpg-settings-group">
-                <h4><i class="fa-solid fa-palette"></i> Theme</h4>
+                <h4><i class="fa-solid fa-palette" aria-hidden="true"></i> Theme</h4>
                 <div class="rpg-setting-row">
                     <label for="rpg-theme-select">Visual Theme:</label>
                     <select id="rpg-theme-select" class="rpg-select">
@@ -124,9 +126,9 @@
             </div>
 
             <div class="rpg-settings-group">
-                <h4><i class="fa-solid fa-toggle-on"></i> Display Options</h4>
+                <h4><i class="fa-solid fa-toggle-on" aria-hidden="true"></i> Display Options</h4>
                 <small class="notes" style="display: block; margin-bottom: 10px;">
-                    <i class="fa-solid fa-info-circle"></i> Use the Extensions tab to enable/disable the RPG Companion extension.
+                    <i class="fa-solid fa-info-circle" aria-hidden="true"></i> Use the Extensions tab to enable/disable the RPG Companion extension.
                 </small>
 
                 <div class="rpg-setting-row">
@@ -183,7 +185,7 @@
             </div>
 
             <div class="rpg-settings-group">
-                <h4><i class="fa-solid fa-sliders"></i> Advanced</h4>
+                <h4><i class="fa-solid fa-sliders" aria-hidden="true"></i> Advanced</h4>
 
                 <div class="rpg-setting-row">
                     <label for="rpg-generation-mode">Generation Mode:</label>
@@ -203,7 +205,7 @@
                 <!-- Clear Cache Button -->
                 <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rpg-border);">
                     <button id="rpg-clear-cache" class="rpg-btn-clear-cache">
-                        <i class="fa-solid fa-trash"></i> Clear Extension Cache
+                        <i class="fa-solid fa-trash" aria-hidden="true"></i> Clear Extension Cache
                     </button>
                 </div>
             </div>