feat: add mobile keyboard handling to prevent layout squashing

Implemented Visual Viewport API integration to detect and handle mobile
keyboard appearance, preventing contenteditable fields from squashing
the panel layout when the keyboard appears.

**JavaScript Changes (index.js:1886-1948, 522-523):**
- Created setupMobileKeyboardHandling() function:
  * Uses Visual Viewport API to monitor viewport height changes
  * Detects keyboard appearance (viewport < 75% of window height)
  * Adds .rpg-keyboard-visible class when keyboard shows
  * Removes class when keyboard dismisses
  * Gracefully falls back if API not supported
- Created setupContentEditableScrolling() function:
  * Uses event delegation for all contenteditable fields
  * Automatically scrolls focused field into view with 300ms delay
  * Centers field in viewport using scrollIntoView with 'center' block
  * Smooth scrolling animation for better UX
- Added both function calls to initUI() for automatic setup

**CSS Changes (style.css:3232-3252):**
- Added .rpg-keyboard-visible state styling:
  * 20px bottom padding to prevent content being pushed too far up
  * Compact section padding (8px 12px) for stats/info/thoughts
  * Reduced stat bar gap (4px) to maintain layout integrity
- Scoped to mobile viewport only (@media max-width: 1000px)

**Benefits:**
- No layout squashing when keyboard appears on mobile
- Stat bars and charts remain intact and visible
- Focused fields automatically scroll into view
- Smooth animations for professional UX
- Works with all contenteditable fields:
  * Stats (health, energy, hygiene, sustenance, arousal)
  * Inventory and mood/conditions
  * Info box widgets (date, weather, time, location, temperature)
  * Character traits and relationship badges
  * Character thoughts
- Backward compatible (graceful fallback)
- Desktop users completely unaffected

**How It Works:**
1. Visual Viewport API monitors viewport height changes
2. When height drops below 75% threshold, keyboard detected
3. Panel gets .rpg-keyboard-visible class for compact styling
4. Tapped contenteditable field smoothly scrolls to center
5. When keyboard dismisses, layout returns to normal

**Testing Completed:**
- Inventory field editing works without squashing
- Stat values editable with keyboard visible
- Info box widget editing maintains layout
- Character traits and thoughts remain accessible
- No layout breaks or chart distortion
- Smooth scrolling and transitions verified

style.css

@@ -3229,6 +3229,28 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
         }
     }
 
+    /* ========================================
+       MOBILE KEYBOARD HANDLING
+       ======================================== */
+
+    /* When mobile keyboard is visible, adjust panel layout to prevent squashing */
+    .rpg-panel.rpg-keyboard-visible {
+        /* Prevent content from being pushed too far up */
+        padding-bottom: 20px;
+    }
+
+    /* Make sections more compact when keyboard visible */
+    .rpg-panel.rpg-keyboard-visible .rpg-stats-section,
+    .rpg-panel.rpg-keyboard-visible .rpg-info-section,
+    .rpg-panel.rpg-keyboard-visible .rpg-thoughts-section {
+        padding: 8px 12px;
+    }
+
+    /* Reduce spacing in stat bars when keyboard visible */
+    .rpg-panel.rpg-keyboard-visible .rpg-stats-grid {
+        gap: 4px;
+    }
+
     /* Disable collapsed state on mobile */
     .rpg-panel.rpg-collapsed {
         max-width: 100dvw !important;