Checkpoint before line-grid scrolling refactor

public/css/style.css

@@ -102,6 +102,7 @@ html, body {
 body {
     overflow: hidden;
     background-image: url('../images/brown-wooden-flooring.jpg');
+    /* background-image: url('../images/table.png'); */
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
@@ -383,6 +384,7 @@ ol.choice {
     width: var(--book-width);
     height: var(--book-height);
     background-image: url('../images/book-3057904.png');
+    /* background-image: url('../images/book.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 */
@@ -407,17 +409,20 @@ ol.choice {
 }
 
 #story {
-    overflow-x: visible;
+    overflow: visible !important;
     box-sizing: border-box;
     overflow-anchor: none;
     text-align: justify;
     text-justify: inter-word;
     margin-bottom: 0;
     line-height: 1.5;
+    will-change: transform;
+    transform: translateY(0);
 }
 
 #paragraphs {
     box-sizing: border-box;
+    overflow: visible !important;
     overflow-anchor: none;
 }
 
@@ -471,7 +476,7 @@ ol.choice {
 .story-image-visible img {
     opacity: 1;
     clip-path: polygon(0 0, 220% 0, 0 220%);
-    transition: opacity 900ms ease, clip-path 900ms ease;
+    transition: opacity 2000ms ease, clip-path 2000ms ease;
 }
 
 /* #story p span {
@@ -486,8 +491,11 @@ ol.choice {
     /* background-color: rgba(200,200,200,0.5); */
     right: 7%;
     padding-bottom: 0;
-    scroll-behavior: smooth;
-    overscroll-behavior: contain;
+    overflow: hidden !important;
+    overflow-x: hidden !important;
+    overflow-y: hidden !important;
+    scroll-behavior: auto;
+    overscroll-behavior: none;
     overflow-anchor: none;
     scrollbar-width: none;
     /* transform: translateX(-1%) translateY(2%) rotateX(0deg) rotateY(-1deg) rotateZ(0deg); */
@@ -497,17 +505,29 @@ ol.choice {
     display: none;
 }
 
+#page_right *,
+#page_right *::-webkit-scrollbar {
+    scrollbar-width: none;
+}
+
+#page_right *::-webkit-scrollbar {
+    display: none;
+}
+
 #story_scrollbar {
-    position: sticky;
-    float: right;
-    top: 0.4rem;
+    position: absolute;
+    top: 0;
+    right: 0.35rem;
+    bottom: 0;
     width: 0.22rem;
-    height: calc(100% - 0.8rem);
-    margin-right: -1.5rem;
+    height: 100%;
+    margin: 0;
     border-radius: 999px;
     background: rgba(0, 0, 0, 0.12);
     z-index: 12;
-    pointer-events: none;
+    pointer-events: auto;
+    touch-action: none;
+    cursor: pointer;
 }
 
 #story_scrollbar_thumb {
@@ -519,6 +539,7 @@ ol.choice {
     border-radius: inherit;
     background: rgba(0, 0, 0, 0.72);
     transition: top 260ms ease, height 260ms ease;
+    pointer-events: auto;
 }
 
 
@@ -742,6 +763,7 @@ body:not([data-game-running="true"]) #command_history {
     width: 100%;
     margin: 0 0 1rem 0;
     opacity: 0;
+    visibility: hidden;
     transition: opacity 0.45s ease;
     pointer-events: none;
 }
@@ -750,6 +772,8 @@ body:not([data-game-running="true"]) #command_history {
     display: none;
 }
 
+html[data-history-restoring="true"] .story-choices,
+body:not([data-game-running="true"]) .story-choices,
 html[data-process-state="waiting-generating"] .story-choices,
 html[data-process-state="playing-generating"] .story-choices,
 html[data-process-state="playing-ready"] .story-choices,
@@ -760,6 +784,7 @@ html[data-process-state="command-waiting"] .story-choices {
 
 html[data-process-state="ready"] .story-choices[data-choice-ready="true"] {
     opacity: 1;
+    visibility: visible;
     pointer-events: auto;
 }