diff --git a/app.js b/app.js
index 5410dec..69e5a0e 100644
--- a/app.js
+++ b/app.js
@@ -103,6 +103,8 @@ function syncViewportHeight() {
     document.documentElement.clientHeight,
   );
 
+  document.documentElement.style.setProperty("--app-visible-height", `${Math.round(visibleHeight)}px`);
+  document.documentElement.style.setProperty("--app-viewport-top", `${Math.round(viewportTopOffset)}px`);
   document.documentElement.style.setProperty("--app-viewport-height", `${Math.round(viewportHeight)}px`);
 }
 
diff --git a/styles.css b/styles.css
index b489231..9f5c2ee 100644
--- a/styles.css
+++ b/styles.css
@@ -487,14 +487,20 @@ textarea:focus {
 }
 
 .phase-body {
-  min-height: 100dvh;
-  overflow: hidden;
+  --app-page-height: calc(
+    var(--app-visible-height, 100dvh) + max(var(--app-viewport-top, 0px), var(--phase-top-offset, 0px)) + 1px
+  );
+  min-height: var(--app-page-height);
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior-y: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 .phase-shell {
   position: relative;
   width: min(1400px, calc(100% - 1.2rem));
-  min-height: 100dvh;
+  min-height: var(--app-page-height, 100dvh);
   margin: 0 auto;
   display: grid;
   grid-template-rows: auto auto minmax(0, 1fr);
@@ -1876,15 +1882,15 @@ textarea:focus {
 .phase-body .phase-shell {
   box-sizing: border-box;
   width: min(1400px, 100%);
-  min-height: 100dvh;
-  height: 100dvh;
-  max-height: 100dvh;
+  min-height: var(--app-page-height, 100dvh);
+  height: auto;
+  max-height: none;
   padding:
     calc(var(--phase-top-offset) + 0.8rem)
     calc(var(--safe-right) + 0.6rem)
     calc(var(--safe-bottom) + 0.9rem)
     calc(var(--safe-left) + 0.6rem);
-  overflow: hidden;
+  overflow: visible;
 }
 
 @media (max-width: 900px) {
@@ -1994,8 +2000,9 @@ textarea:focus {
 
 @media (max-width: 900px) {
   body[data-page="chrono"].phase-body {
-    overflow: hidden;
-    overscroll-behavior: none;
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: auto;
   }
 
   body[data-page="chrono"] .phase-header {
@@ -2016,9 +2023,9 @@ textarea:focus {
   }
 
   body[data-page="chrono"] .phase-shell {
-    min-height: 100svh;
-    height: 100svh;
-    max-height: 100svh;
+    min-height: var(--app-page-height, 100svh);
+    height: auto;
+    max-height: none;
     gap: 0.35rem;
     padding:
       calc(var(--phase-top-offset) + 0.55rem)
@@ -2047,7 +2054,7 @@ textarea:focus {
   }
 
   body[data-page="chrono"] .faceoff-board {
-    height: 100%;
+    height: auto;
     min-height: 0;
     align-self: stretch;
     gap: 0.35rem;
@@ -2111,9 +2118,9 @@ textarea:focus {
 @supports (-webkit-touch-callout: none) {
   @media (max-width: 900px) {
     body[data-page="chrono"] .phase-shell {
-      min-height: -webkit-fill-available;
-      height: -webkit-fill-available;
-      max-height: -webkit-fill-available;
+      min-height: var(--app-page-height, -webkit-fill-available);
+      height: auto;
+      max-height: none;
     }
   }
 }
@@ -2138,7 +2145,7 @@ body[data-page="cube"].phase-body {
   position: static;
   inset: auto;
   width: auto;
-  min-height: var(--app-viewport-height, 100dvh);
+  min-height: var(--app-page-height, 100dvh);
   height: auto;
   max-height: none;
   overflow-x: hidden;
@@ -2154,7 +2161,7 @@ body[data-page="cube"] .cube-shell {
   width: min(1400px, 100%);
   min-width: 0;
   margin: 0 auto;
-  min-height: var(--app-viewport-height, 100dvh);
+  min-height: var(--app-page-height, 100dvh);
   height: auto;
   max-height: none;
   display: grid;