fix: optimize mobile vertical layout and bottom clearance for continue bar

activity.css

@@ -4,7 +4,7 @@
 
 .page-activity .intro {
   text-align: center;
-  margin-bottom: 1.5em;
+  margin-bottom: 1.2em;
 }
 
 .page-activity .intro p {
@@ -14,12 +14,13 @@
 .activity-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 16px;
+  gap: 12px;
 }
 
 @media (min-width: 600px) {
   .activity-grid {
     grid-template-columns: repeat(3, 1fr);
+    gap: 16px;
   }
 }
 
@@ -29,9 +30,9 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 10px;
-  min-height: 140px;
-  padding: 16px 10px;
+  gap: 8px;
+  min-height: 115px;
+  padding: 12px 8px;
   background: var(--color-white);
   border: 2px solid transparent;
   border-radius: var(--radius-md);
@@ -46,14 +47,14 @@
 }
 
 .activity-card .icon {
-  font-size: 2.6rem;
+  font-size: 2.2rem;
   line-height: 1;
 }
 
 .activity-card .label {
   font-family: var(--font-heading);
   font-weight: 700;
-  font-size: 0.95rem;
+  font-size: 0.9rem;
   text-align: center;
   color: var(--color-text);
 }

style.css

@@ -35,6 +35,9 @@ html {
 body {
   margin: 0;
   min-height: 100vh;
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
   font-family: var(--font-body);
   font-size: clamp(1rem, 3.6vw, 1.15rem);
   line-height: 1.5;
@@ -64,7 +67,8 @@ p {
   width: 100%;
   max-width: 480px;
   margin: 0 auto;
-  padding: 24px 20px 40px;
+  padding: 20px 20px 32px;
+  flex: 1;
 }
 
 /* Buttons -------------------------------------------------------------- */
@@ -160,9 +164,8 @@ p {
 
 /* Fixed bottom bar for a primary continue action ------------------------- */
 
-body.has-continue-bar,
-body.has-continue-bar .container {
-  padding-bottom: calc(130px + env(safe-area-inset-bottom));
+body.has-continue-bar main.container {
+  padding-bottom: calc(110px + env(safe-area-inset-bottom));
 }
 
 .continue-bar {
@@ -171,8 +174,8 @@ body.has-continue-bar .container {
   right: 0;
   bottom: 0;
   z-index: 100;
-  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
-  background: linear-gradient(0deg, var(--color-bg) 70%, rgba(255, 245, 247, 0));
+  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
+  background: linear-gradient(180deg, rgba(255, 245, 247, 0) 0%, var(--color-bg) 50%);
   pointer-events: none;
 }