add mobile better mobile support

templates/index.html

@@ -57,15 +57,6 @@
             /* NEW: allow scrolling */
         }
 
-        /* Optional: Adjust height for smaller screens */
-        @media (max-width: 768px) {
-            .prompt {
-                max-height: 25vh;
-                /* even smaller on mobile */
-            }
-        }
-
-
         .button-group {
             display: flex;
             gap: 20px;
@@ -102,6 +93,34 @@
             pointer-events: none;
             opacity: 0.6;
         }
+
+        @media (max-width: 768px) {
+            .image-container {
+                max-width: 100vw;
+                max-height: 50vh;
+            }
+
+            img {
+                max-width: 100%;
+                max-height: 100%;
+            }
+
+            .prompt {
+                max-height: 20vh;
+                font-size: 14px;
+                padding: 10px 15px;
+            }
+
+            .button-group {
+                flex-direction: column;
+                gap: 10px;
+            }
+
+            .button-link {
+                font-size: 14px;
+                padding: 8px 16px;
+            }
+        }
     </style>
     <script>
         setInterval(() => {