Adapt book skin to detailed artwork

public/css/style.css

@@ -101,8 +101,7 @@ html, body {
 
 body {
     overflow: hidden;
-    background-image: url('../images/brown-wooden-flooring.jpg');
-    /* background-image: url('../images/table.png'); */
+    background-image: url('../images/mat.png');
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
@@ -113,14 +112,24 @@ body.switched {
 }
 
 :root {
-    --book-width: 2727px;
-    --book-height: 1691px;
+    --book-width: 1421px;
+    --book-height: 799px;
     --book-scale: 1;
     --page-line-count: 25;
-    --story-line-height: calc((var(--book-height) * 0.85) / var(--page-line-count));
+    --book-page-top: 8.15%;
+    --book-page-bottom: 12.1%;
+    --book-page-height: calc(100% - var(--book-page-top) - var(--book-page-bottom));
+    --book-left-page-left: 8.35%;
+    --book-left-page-width: 37.25%;
+    --book-right-page-right: 10.5%;
+    --book-right-page-width: 35.95%;
+    --book-page-perspective: 3200px;
+    --book-left-page-transform: perspective(var(--book-page-perspective)) rotateX(0.65deg) rotateY(0.45deg) rotateZ(-0.1deg) skewY(-0.18deg);
+    --book-right-page-transform: perspective(var(--book-page-perspective)) rotateX(0.65deg) rotateY(-0.55deg) rotateZ(0.1deg) skewY(0.18deg);
+    --story-line-height: calc((var(--book-height) * 0.7975) / var(--page-line-count));
     --story-font-size: calc(var(--story-line-height) / 1.45);
     font-size: calc(var(--book-height)/(34 * 1.5));
-    --img-aspect-ratio: 1.613;
+    --img-aspect-ratio: 1.779;
     --aspect-ratio: min(var(--viewport-aspect-ratio), var(--img-aspect-ratio));  
 }
 
@@ -386,12 +395,11 @@ ol.choice {
     top: 50%;
     width: var(--book-width);
     height: var(--book-height);
-    background-image: url('../images/book-3057904.png');
-    /* background-image: url('../images/book.png'); */
+    background-image: url('../images/book_detailed.png');
     background-size: contain; /* Changed from cover to contain */
     background-position: center;
     background-repeat: no-repeat; /* Prevents repeating the image when aspect ratio doesn't match */
-    perspective: 500px;
+    perspective: var(--book-page-perspective);
     perspective-origin: 50% 50%;
     transform: translate(-50%, -50%) scale(var(--book-scale));
     transform-origin: center center;
@@ -399,15 +407,18 @@ ol.choice {
 
 #page_left, #page_right {
     position: absolute;
-    top: 5%; /* Adjust these values as necessary */
-    bottom: 10%;
-    width: 39%;
+    top: var(--book-page-top);
+    bottom: var(--book-page-bottom);
+    width: var(--book-right-page-width);
     box-sizing: border-box;
     padding: 0 3rem 1rem 1rem;
     /* border: 1px dotted rgba(200,200,200,1); */
     overflow: visible;
     opacity: 0.95;
     mix-blend-mode: darken;
+    transform-style: preserve-3d;
+    backface-visibility: hidden;
+    will-change: transform;
 }
 
 #story {
@@ -486,13 +497,18 @@ ol.choice {
 } */
 
 #page_left {
-    left: 11.5%;
+    left: var(--book-left-page-left);
+    width: var(--book-left-page-width);
     overflow-y: auto;
+    transform: var(--book-left-page-transform);
+    transform-origin: 100% 50%;
+    clip-path: polygon(0.5% 0.4%, 99.7% 0, 100% 99.2%, 0 100%);
 }
 
 #page_right {
     /* background-color: rgba(200,200,200,0.5); */
-    right: 7%;
+    right: var(--book-right-page-right);
+    width: var(--book-right-page-width);
     padding-bottom: 0;
     overflow: hidden !important;
     overflow-x: hidden !important;
@@ -501,7 +517,9 @@ ol.choice {
     overscroll-behavior: none;
     overflow-anchor: none;
     scrollbar-width: none;
-    /* transform: translateX(-1%) translateY(2%) rotateX(0deg) rotateY(-1deg) rotateZ(0deg); */
+    transform: var(--book-right-page-transform);
+    transform-origin: 0 50%;
+    clip-path: polygon(0.2% 0, 99.3% 0.5%, 100% 99.5%, 0 99.1%);
 }
 
 #page_right::-webkit-scrollbar {

public/js/ui-controller-module.js

@@ -178,8 +178,8 @@ class UIControllerModule extends BaseModule {
         const viewportWidth = window.innerWidth;
         const viewportHeight = window.innerHeight;
         const viewportAspectRatio = viewportWidth / viewportHeight;
-        const bookWidth = 2727;
-        const bookHeight = 1691;
+        const bookWidth = 1421;
+        const bookHeight = 799;
         const bookScale = Math.min(viewportWidth / bookWidth, viewportHeight / bookHeight);
         
         document.documentElement.style.setProperty('--book-width', `${bookWidth}px`);

public/js/ui-display-handler-module.js

@@ -52,8 +52,8 @@ class UIDisplayHandlerModule extends BaseModule {
         // Resources to preload
         this.cssPath = '/css/style.css';
         this.imagesToPreload = [
-            '/images/book-3057904.png',
-            '/images/brown-wooden-flooring.jpg'
+            '/images/book_detailed.png',
+            '/images/mat.png'
         ];
                 
         // Bind methods using parent's bindMethods utility