Restore WebGL control overlay and page grid

public/js/webgl-book-scene-module.js

@@ -34,7 +34,7 @@ class WebGLBookSceneModule extends BaseModule {
             'installTextureEventBridge',
             'applyMode',
             'adoptPageContent',
-            'moveBookOffscreen',
+            'moveBookToControlOverlay',
             'restoreBookPlacement',
             'refreshModalOverview',
             'triggerTextureRefresh',
@@ -166,7 +166,7 @@ class WebGLBookSceneModule extends BaseModule {
             app.appendChild(canvas);
         }
 
-        this.moveBookOffscreen();
+        this.moveBookToControlOverlay();
 
         const pageCount = this.persistenceManager?.getPreference?.('webgl', 'bookPageCount', DEFAULT_BOOK_PAGE_COUNT) ?? DEFAULT_BOOK_PAGE_COUNT;
         const progress = this.persistenceManager?.getPreference?.('webgl', 'bookProgress', DEFAULT_BOOK_PROGRESS) ?? DEFAULT_BOOK_PROGRESS;
@@ -177,22 +177,29 @@ class WebGLBookSceneModule extends BaseModule {
         };
     }
 
-    moveBookOffscreen() {
+    moveBookToControlOverlay() {
         const book = document.getElementById('book');
         if (!book) return;
         if (this.originalBookInlineStyle === null) {
             this.originalBookInlineStyle = book.getAttribute('style') || '';
         }
         book.style.position = 'fixed';
-        book.style.left = 'calc(100vw + 50%)';
-        book.style.top = '50%';
-        book.style.width = 'var(--book-width)';
-        book.style.height = 'var(--book-height)';
-        book.style.transform = 'translate(-50%, -50%) scale(var(--book-scale))';
-        book.style.transformOrigin = 'center center';
+        book.style.left = '1rem';
+        book.style.top = '1rem';
+        book.style.width = 'min(31rem, calc(100vw - 2rem))';
+        book.style.height = 'min(27rem, calc(100vh - 2rem))';
+        book.style.background = 'rgba(18, 11, 8, 0.62)';
+        book.style.border = '1px solid rgba(240, 205, 142, 0.28)';
+        book.style.boxShadow = '0 1.2rem 3rem rgba(0, 0, 0, 0.42)';
+        book.style.backdropFilter = 'blur(5px)';
+        book.style.transform = 'none';
+        book.style.transformOrigin = 'top left';
         book.style.opacity = '1';
         book.style.visibility = 'visible';
+        book.style.zIndex = '40';
+        book.style.pointerEvents = 'none';
         this.removePagePerspectiveTransforms();
+        this.positionOverlayPages();
     }
 
     restoreBookPlacement() {
@@ -219,6 +226,38 @@ class WebGLBookSceneModule extends BaseModule {
         });
     }
 
+    positionOverlayPages() {
+        const pageLeft = document.getElementById('page_left');
+        if (pageLeft) {
+            Object.assign(pageLeft.style, {
+                position: 'absolute',
+                inset: '0',
+                width: 'auto',
+                height: 'auto',
+                padding: '1rem',
+                overflow: 'auto',
+                opacity: '1',
+                mixBlendMode: 'normal',
+                clipPath: 'none',
+                pointerEvents: 'auto'
+            });
+        }
+
+        const pageRight = document.getElementById('page_right');
+        if (pageRight) {
+            Object.assign(pageRight.style, {
+                position: 'fixed',
+                left: 'calc(100vw + 2rem)',
+                top: '0',
+                width: 'var(--book-right-page-width)',
+                height: 'var(--book-page-height)',
+                opacity: '1',
+                visibility: 'visible',
+                pointerEvents: 'none'
+            });
+        }
+    }
+
     restorePagePerspectiveTransforms() {
         this.originalPageInlineStyles.forEach((style, id) => {
             const page = document.getElementById(id);