i think the character selector screen needs to be redesign, I can not access the footer to accept or save

index.html

@@ -47,23 +47,23 @@
             </button>
         </div>
     </div>
-
     <!-- Character Selection Screen -->
-    <div id="character-selection" class="fixed inset-0 flex items-center justify-center bg-gray-900 z-40 transition-all duration-500 opacity-0 pointer-events-none">
-        <div class="w-full max-w-6xl p-6">
+    <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="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
-                <!-- Character cards will be dynamically inserted here -->
+            <div class="flex-1 overflow-y-auto mb-6">
+                <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">
+            <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>
         </div>
     </div>
-
-    <!-- World Selection Screen -->
+<!-- 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">
             <h2 class="text-3xl font-bold mb-8 text-center">Select 5 Characters for Your World</h2>