Improve mobile touch controls with gesture-based system, remove on-screen buttons

style.css

@@ -498,16 +498,17 @@ input[type=range]::-moz-range-thumb {
 .mobile-mode .game-container {
     flex-direction: column;
     align-items: center;
-    gap: 20px;
-    padding: 15px;
+    gap: 15px;
+    padding: 10px;
     max-width: 100vw;
     box-sizing: border-box;
-    margin-top: 70px;
+    margin-top: 50px; /* Reduced top margin */
 }
 
 .mobile-mode .game-title {
     font-size: 24px;
     top: 10px;
+    text-shadow: 0 0 8px rgba(255, 0, 255, 0.7);
 }
 
 .mobile-mode .game-wrapper {
@@ -518,11 +519,12 @@ input[type=range]::-moz-range-thumb {
 }
 
 .mobile-mode #next-piece-preview {
-    position: relative;
-    top: auto;
-    left: auto;
-    margin: 10px auto;
-    width: 120px;
+    position: absolute;
+    top: -50px; /* Position above the game board */
+    left: 50%;
+    transform: translateX(-50%);
+    margin: 0;
+    background: rgba(0, 0, 0, 0.7);
 }
 
 .mobile-mode .score-container {
@@ -530,10 +532,11 @@ input[type=range]::-moz-range-thumb {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    justify-content: space-between;
+    justify-content: center;
     align-items: center;
-    gap: 10px;
-    padding: 10px;
+    gap: 8px;
+    padding: 8px;
+    background: rgba(0, 0, 0, 0.7);
 }
 
 .mobile-mode .score-container p {
@@ -542,7 +545,7 @@ input[type=range]::-moz-range-thumb {
 }
 
 .mobile-mode .game-btn {
-    margin: 5px;
+    margin: 3px;
     padding: 8px 12px;
     font-size: 10px;
 }
@@ -551,82 +554,70 @@ input[type=range]::-moz-range-thumb {
     display: none;
 }
 
-/* Touch control buttons */
-.touch-controls-container {
+/* Touch instructions */
+.touch-instructions {
     display: none;
     position: fixed;
-    bottom: 20px;
-    left: 0;
-    right: 0;
-    z-index: 100;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: rgba(0, 0, 0, 0.8);
+    border: 2px solid rgba(0, 255, 255, 0.7);
+    border-radius: 10px;
+    padding: 15px;
+    z-index: 1000;
+    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
+    transition: opacity 1s ease;
+    text-align: center;
 }
 
-.mobile-mode .touch-controls-container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 10px;
+.mobile-mode .touch-instructions {
+    display: block;
 }
 
-.touch-btn {
-    width: 60px;
-    height: 60px;
-    border-radius: 50%;
-    background: rgba(51, 51, 51, 0.7);
-    border: 2px solid rgba(0, 255, 255, 0.5);
-    color: #00ffff;
-    font-size: 24px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    -webkit-tap-highlight-color: transparent;
-    user-select: none;
-    touch-action: manipulation;
-    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
+.touch-instructions p {
+    margin: 10px 0;
+    font-size: 14px;
+    color: #fff;
 }
 
-.touch-btn:active {
-    background: rgba(0, 255, 255, 0.3);
-    transform: scale(0.95);
-}
-
-/* Button positioning */
-.left-btn, .right-btn, .down-btn {
-    position: relative;
-}
-
-.rotate-btn, .rotate3d-x-btn, .rotate3d-y-btn, .hard-drop-btn {
-    background: rgba(255, 0, 255, 0.2);
-    border-color: rgba(255, 0, 255, 0.5);
-    color: #ff00ff;
+.touch-instructions.fade-out {
+    opacity: 0;
 }
 
 /* Portrait vs landscape adjustments */
 @media (orientation: portrait) {
     .mobile-mode .game-container {
-        padding-top: 60px;
+        padding-top: 40px;
     }
     
-    .touch-controls-container {
-        padding: 0 10px 10px;
+    .mobile-mode canvas#tetris {
+        width: 90vw;
+        height: auto;
+        object-fit: contain;
     }
 }
 
-@media (orientation: landscape) and (max-width: 900px) {
+@media (orientation: landscape) {
     .mobile-mode .game-container {
         flex-direction: row;
         flex-wrap: wrap;
         justify-content: center;
-        margin-top: 50px;
+        margin-top: 40px;
+        padding: 5px;
     }
     
     .mobile-mode .score-container {
         width: auto;
-        min-width: 200px;
+        min-width: 150px;
+        max-width: 30%;
+        height: 80vh;
+        overflow-y: auto;
     }
     
     .mobile-mode .game-wrapper {
         margin: 0;
+        height: 80vh;
     }
     
     .mobile-mode #next-piece-preview {
@@ -634,17 +625,13 @@ input[type=range]::-moz-range-thumb {
         top: 0;
         left: 100%;
         margin-left: 10px;
+        transform: none;
     }
     
-    .touch-controls-container {
-        flex-direction: row;
-        bottom: 10px;
-    }
-    
-    .touch-btn {
-        width: 50px;
-        height: 50px;
-        font-size: 20px;
+    .mobile-mode canvas#tetris {
+        height: 80vh;
+        width: auto;
+        object-fit: contain;
     }
 }
 
@@ -654,12 +641,6 @@ input[type=range]::-moz-range-thumb {
         font-size: 20px;
     }
     
-    .touch-btn {
-        width: 50px;
-        height: 50px;
-        font-size: 20px;
-    }
-    
     .mobile-mode .score-container p {
         font-size: 10px;
     }
@@ -670,16 +651,10 @@ input[type=range]::-moz-range-thumb {
     .mobile-mode .game-container {
         flex-direction: row;
         flex-wrap: wrap;
-        gap: 30px;
+        gap: 20px;
     }
     
     .mobile-mode .game-title {
         font-size: 28px;
     }
-    
-    .touch-btn {
-        width: 70px;
-        height: 70px;
-        font-size: 28px;
-    }
 }