fix(mobile): apply same centering and viewport fixes to dice roller modal

Apply the same mobile modal fixes to the dice roller that were applied
to the confirmation dialogs:

1. Move modal to document.body on first open
2. Use dynamic viewport height (dvh) for mobile browsers

Changes:

1. src/systems/ui/modals.js - DiceModal.open():
   - Check if modal parent is not already document.body
   - Move modal to document.body to escape any container constraints
   - Ensures proper viewport-level positioning and z-index stacking

2. style.css - Add mobile media query for dice popup:
   - Set height: 100dvh on .rpg-dice-popup for mobile
   - Update --modal-max-height to 70dvh (from 70vh)
   - Apply dynamic height to .rpg-dice-popup-content
   - Accounts for mobile browser chrome (address bar, toolbars)

Result:
- Dice roller modal now properly centered on mobile viewport
- Handles dynamic mobile browser toolbars correctly
- Consistent behavior with confirmation dialogs

src/systems/ui/modals.js

@@ -46,6 +46,12 @@ export class DiceModal {
     open() {
         if (this.isAnimating) return;
 
+        // CRITICAL: Move modal to document.body on first use to escape any container constraints
+        if (this.modal.parentElement?.tagName !== 'BODY') {
+            document.body.appendChild(this.modal);
+            console.log('[DiceModal] Moved modal to document.body to ensure proper viewport positioning');
+        }
+
         // Apply theme
         const theme = extensionSettings.theme;
         this.modal.setAttribute('data-theme', theme);