Загрузить файлы в «css»

css/style.css

@@ -17,7 +17,6 @@ body {
     justify-content: center;
     align-items: center;
     min-height: 100vh;
-    overflow: hidden;
 }
 
 /* Главный контейнер, который держит поле и боковую панель */
@@ -156,3 +155,100 @@ body {
 .hidden {
     display: none !important;
 }
+
+#game-area-container {
+    position: relative; /* Контекст для позиционирования джойстика */
+}
+
+#joystick-controls {
+    display: none; /* Скрыт по умолчанию на десктопе */
+    position: absolute;
+    bottom: 15px;
+    left: 0;
+    width: 100%;
+    padding: 0 10px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
+}
+
+.joystick-btn {
+    flex-grow: 1; /* Кнопки занимают равное пространство */
+    background-color: rgba(255, 255, 255, 0.25);
+    border: 2px solid rgba(255, 255, 255, 0.4);
+    color: #1c1c1c;
+    font-size: 2.8em;
+    font-family: sans-serif; /* Для лучшего отображения стрелок */
+    padding: 10px 0;
+    border-radius: 10px;
+    -webkit-tap-highlight-color: transparent; /* Убираем подсветку при тапе на iOS */
+}
+
+.joystick-btn:active {
+    background-color: rgba(255, 255, 255, 0.5);
+}
+
+/* --- СТИЛИ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ --- */
+@media (max-width: 620px) {
+    body {
+        align-items: flex-start;
+    }
+
+    .tetris-wrapper {
+        flex-direction: column;
+        align-items: center;
+        gap: 15px;
+        width: 100%;
+        padding: 0;
+        border: none;
+        background: none;
+        box-shadow: none;
+    }
+
+    .side-panel {
+        order: 1;
+        width: 100%;
+        max-width: 309px;
+        flex-direction: row;
+        flex-wrap: wrap; /* Разрешаем перенос */
+        gap: 5px;
+    }
+    
+    #game-area-container {
+        order: 2; /* Контейнер с игрой и джойстиком идет вторым */
+    }
+
+    /* Отображаем джойстик на мобильных */
+    #joystick-controls {
+        display: flex;
+    }
+
+    /* Скрываем ненужные элементы */
+    .side-panel h1,
+    .next-piece-container {
+        display: none;
+    }
+
+    .info-box {
+        flex: 1 1 80px;
+        margin-bottom: 5px;
+        padding: 8px;
+    }
+
+    .info-title {
+        font-size: 0.7em;
+        margin-bottom: 5px;
+    }
+
+    .info-box p {
+        font-size: 1.2em;
+    }
+
+    /* Кнопка "Старт" возвращается наверх и занимает всю ширину */
+    #start-button {
+        flex-basis: 100%;
+        margin-top: 5px;
+    }
+}