same for next screen

index.html

@@ -51,34 +51,39 @@
     <div id="character-selection" class="fixed inset-0 bg-gray-900 z-40 transition-all duration-500 opacity-0 pointer-events-none">
         <div class="container mx-auto px-4 py-8 h-full flex flex-col">
             <h2 class="text-3xl font-bold mb-8 text-center">Choose Your Character</h2>
-            <div class="flex-1 overflow-y-auto mb-6">
+            <div class="flex-1 overflow-y-auto pb-24">
                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                     <!-- Character cards will be dynamically inserted here -->
                 </div>
             </div>
-            <div class="text-center py-4 border-t border-gray-700 bg-gray-900 sticky bottom-0">
-                <button id="confirm-character" class="px-8 py-3 bg-green-600 rounded-full text-white font-bold text-lg hover:bg-green-700 transition-all transform hover:scale-105 shadow-lg opacity-0">
-                    Confirm Selection
-                </button>
+            <div class="fixed bottom-0 left-0 right-0 bg-gray-900 border-t border-gray-700 py-4 px-4 z-50">
+                <div class="container mx-auto text-center">
+                    <button id="confirm-character" class="px-8 py-3 bg-green-600 rounded-full text-white font-bold text-lg hover:bg-green-700 transition-all transform hover:scale-105 shadow-lg opacity-0">
+                        Confirm Selection
+                    </button>
+                </div>
             </div>
         </div>
     </div>
-<!-- World Selection Screen -->
-    <div id="world-selection" class="fixed inset-0 flex items-center justify-center bg-gray-900 z-30 transition-all duration-500 opacity-0 pointer-events-none">
-        <div class="w-full max-w-6xl p-6">
+    <!-- World Selection Screen -->
+    <div id="world-selection" class="fixed inset-0 bg-gray-900 z-30 transition-all duration-500 opacity-0 pointer-events-none">
+        <div class="container mx-auto px-4 py-8 h-full flex flex-col">
             <h2 class="text-3xl font-bold mb-8 text-center">Select 5 Characters for Your World</h2>
-            <div class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-8">
-                <!-- World character cards will be dynamically inserted here -->
+            <div class="flex-1 overflow-y-auto pb-24">
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6">
+                    <!-- World character cards will be dynamically inserted here -->
+                </div>
             </div>
-            <div class="text-center">
-                <button id="start-world" class="px-8 py-3 bg-green-600 rounded-full text-white font-bold text-lg hover:bg-green-700 transition-all transform hover:scale-105 shadow-lg opacity-0">
-                    Generate World
-                </button>
+            <div class="fixed bottom-0 left-0 right-0 bg-gray-900 border-t border-gray-700 py-4 px-4 z-50">
+                <div class="container mx-auto text-center">
+                    <button id="start-world" class="px-8 py-3 bg-green-600 rounded-full text-white font-bold text-lg hover:bg-green-700 transition-all transform hover:scale-105 shadow-lg opacity-0">
+                        Generate World
+                    </button>
+                </div>
             </div>
         </div>
     </div>
-
-    <!-- Game UI -->
+<!-- Game UI -->
     <div id="game-ui" class="fixed inset-0 pointer-events-none z-20 opacity-0 transition-all">
         <div class="absolute bottom-4 left-4 bg-gray-800 bg-opacity-70 p-4 rounded-lg">
             <div class="flex items-center space-x-2">