Improve layout for mobile screens

index.html

@@ -21,7 +21,9 @@
     <div id="time">00:00</div>
     <div id="score" data-prefix="Score: ">0</div>
     <canvas id="tetris" width="240" height="400"></canvas>
-    <div id="controls"></div>
+    <div id="controls">
+        <div id="control-text"></div>
+    </div>
 </div>
 <div id="container">
     <h1 id="game-title">Tetris.js</h1>

language.js

@@ -58,7 +58,7 @@ function switchLang(lang) {
     currentLang = lang;
     const l = new Language(currentLang);
     document.getElementById("score").setAttribute("data-prefix", l.getStr("score"));
-    document.getElementById("controls").innerHTML = l.getStr("controls");
+    document.getElementById("control-text").innerHTML = l.getStr("controls");
     if(firstRun) {
         document.getElementById("game-title").innerHTML = l.getStr("title");
         document.getElementById("game-play").innerHTML = l.getStr("play");

menu.js

@@ -87,10 +87,9 @@ function fadeBlurOut() {
     }
 }
 
+const scoreEl = document.getElementById("score");
+const nativeTransform = getComputedStyle(scoreEl).transform;
 function scoreUpdateAni() {
-    const scoreEl = document.getElementById("score");
-    const nativeTransform = "translate(-50%, -50%)";
-
     const scale = 1.5;
     const finalScale = 1;
     let currentScale = 1;

style.css

@@ -10,8 +10,8 @@ body {
 
 #language-selector {
     position: absolute;
-    right: 10px;
-    top: 10px;
+    right: 15px;
+    top: 20px;
     font-size: 14px;
     font-weight: 300;
     z-index: 1;
@@ -152,4 +152,34 @@ body {
 #time {
     margin-top: 5px;
     margin-left: 10px;
+}
+
+@media (max-width: 1400px) {
+    #tetris {
+        height: 75%;
+    }
+
+    #score {
+        top: 10px;
+        left: 50%;
+        right: initial;
+        transform: translateX(-50%);
+    }
+
+    #controls {
+        top: initial;
+        bottom: 10px;
+        left: 50%;
+        transform: translateX(-50%);
+        height: 10%;
+        overflow: auto;
+    }
+
+    #control-text {
+        height: 100%;
+    }
+
+    #language-selector {
+        font-size: 20px;
+    }
 }