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);

style.css

@@ -3685,6 +3685,19 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     }
 }
 
+/* Mobile Enhancement (768px and below) */
+@media (max-width: 768px) {
+    /* Fix viewport height for mobile browsers with dynamic toolbars */
+    .rpg-dice-popup {
+        height: 100dvh; /* Dynamic viewport height accounts for mobile browser chrome */
+        --modal-max-height: 70dvh; /* Use dynamic viewport height */
+    }
+
+    .rpg-dice-popup-content {
+        max-height: var(--modal-max-height);
+    }
+}
+
 /* ============================================
    HTML PROMPT TOGGLE
    ============================================ */