please fill much more of the screen add ability to go down pipes of another level

index.html

@@ -17,61 +17,67 @@
 
     <!-- UI Overlay -->
     <div id="hud" class="fixed inset-0 pointer-events-none">
-        <div class="flex justify-between items-start p-4 text-white font-mono select-none">
-            <div class="bg-black/40 rounded px-3 py-2 backdrop-blur">
+        <div class="flex justify-between items-start p-6 text-white font-mono select-none">
+            <div class="bg-black/50 rounded-lg px-4 py-3 backdrop-blur border border-white/10">
                 <div class="text-sm opacity-80">SCORE</div>
-                <div id="score" class="text-2xl font-bold">000000</div>
+                <div id="score" class="text-3xl font-bold">000000</div>
             </div>
             <div class="flex gap-4">
-                <div class="bg-black/40 rounded px-3 py-2 backdrop-blur text-center">
+                <div class="bg-black/50 rounded-lg px-4 py-3 backdrop-blur text-center border border-white/10">
                     <div class="text-sm opacity-80">COINS</div>
-                    <div id="coins" class="text-2xl font-bold">0</div>
+                    <div id="coins" class="text-3xl font-bold">0</div>
                 </div>
-                <div class="bg-black/40 rounded px-3 py-2 backdrop-blur text-center">
+                <div class="bg-black/50 rounded-lg px-4 py-3 backdrop-blur text-center border border-white/10">
                     <div class="text-sm opacity-80">LIVES</div>
-                    <div id="lives" class="text-2xl font-bold">3</div>
+                    <div id="lives" class="text-3xl font-bold">3</div>
+                </div>
+                <div id="levelIndicator" class="bg-black/50 rounded-lg px-4 py-3 backdrop-blur text-center border border-white/10">
+                    <div class="text-sm opacity-80">LEVEL</div>
+                    <div id="level" class="text-3xl font-bold">1</div>
                 </div>
             </div>
         </div>
 
         <!-- Center Messages -->
         <div id="message" class="absolute inset-0 flex items-center justify-center pointer-events-none">
-            <div id="messageBox" class="hidden bg-black/70 text-white px-8 py-6 rounded-xl text-center backdrop-blur">
-                <div id="messageTitle" class="text-4xl font-extrabold mb-2">PAUSED</div>
-                <div id="messageText" class="text-lg opacity-90">Press P to Resume</div>
+            <div id="messageBox" class="hidden bg-black/80 text-white px-10 py-8 rounded-2xl text-center backdrop-blur border border-white/20">
+                <div id="messageTitle" class="text-5xl font-extrabold mb-3">PAUSED</div>
+                <div id="messageText" class="text-xl opacity-90">Press P to Resume</div>
             </div>
         </div>
 
         <!-- Help -->
-        <div class="absolute bottom-3 right-3 text-white/80 text-sm bg-black/40 rounded px-3 py-2 backdrop-blur">
+        <div class="absolute bottom-4 right-4 text-white/90 text-sm bg-black/50 rounded-lg px-4 py-3 backdrop-blur border border-white/10">
             <div class="flex items-center gap-2">
                 <i data-feather="info"></i>
-                Controls: Left/Right or A/D to move • Jump: W/Up/Space • Fire: F • Pause: P • Mute: M • Reset: R
+                Controls: Left/Right or A/D to move • Jump: W/Up/Space • Down/S: Enter Pipes • Fire: F • Pause: P • Mute: M • Reset: R
             </div>
         </div>
     </div>
 
     <!-- Touch Controls -->
     <div id="touchControls" class="fixed inset-0 pointer-events-none">
-        <div class="absolute left-4 bottom-6 flex gap-3 pointer-events-auto">
-            <button id="btnLeft" class="bg-blue-600/80 active:bg-blue-700/80 text-white rounded-full p-4 shadow-lg">
+        <div class="absolute left-6 bottom-8 flex gap-4 pointer-events-auto">
+            <button id="btnLeft" class="bg-blue-600/90 active:bg-blue-700/90 text-white rounded-full p-5 shadow-xl backdrop-blur">
                 <i data-feather="arrow-left"></i>
             </button>
-            <button id="btnRight" class="bg-blue-600/80 active:bg-blue-700/80 text-white rounded-full p-4 shadow-lg">
+            <button id="btnRight" class="bg-blue-600/90 active:bg-blue-700/90 text-white rounded-full p-5 shadow-xl backdrop-blur">
                 <i data-feather="arrow-right"></i>
             </button>
         </div>
-        <div class="absolute right-4 bottom-6 flex gap-3 pointer-events-auto">
-            <button id="btnJump" class="bg-emerald-600/80 active:bg-emerald-700/80 text-white rounded-full p-4 shadow-lg">
+        <div class="absolute right-6 bottom-8 flex gap-4 pointer-events-auto">
+            <button id="btnDown" class="bg-purple-600/90 active:bg-purple-700/90 text-white rounded-full p-5 shadow-xl backdrop-blur">
+                <i data-feather="arrow-down"></i>
+            </button>
+            <button id="btnJump" class="bg-emerald-600/90 active:bg-emerald-700/90 text-white rounded-full p-5 shadow-xl backdrop-blur">
                 <i data-feather="arrow-up"></i>
             </button>
-            <button id="btnFire" class="bg-orange-600/80 active:bg-orange-700/80 text-white rounded-full p-4 shadow-lg">
+            <button id="btnFire" class="bg-orange-600/90 active:bg-orange-700/90 text-white rounded-full p-5 shadow-xl backdrop-blur">
                 <i data-feather="zap"></i>
             </button>
         </div>
     </div>
-
-    <script src="script.js"></script>
+<script src="script.js"></script>
     <script>feather.replace();</script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>