Mobile devices and RRPSFD support

static/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Сапер мультиплеер</title>
     <link rel="stylesheet" href="/static/style.css">
+    <link rel="stylesheet" href="/static/small-screens.css">
     <link rel="stylesheet" href="/static/colorpicker.min.css" />
     <script src="/static/socket.io.js"></script>
     <script src="/static/colorpicker.iife.min.js"></script>
@@ -35,8 +36,10 @@
                     </div>
                 </div>
                 <div class="block">
-                    <h3>Новая комната</h3>
                     <div>
+                        <h3>Новая комната</h3>
+                    </div>
+                    <div class="no-wrap">
                         <input id="width" type="number" placeholder="25" min="5" max="25" value="25">
                         <b>X</b>
                         <input id="height" type="number" placeholder="15" min="5" max="15" value="15">

static/small-screens.css

@@ -0,0 +1,25 @@
+@media (max-width: 1200px) {
+    #game-canvas {
+        width: calc(100% - 300px);
+    }
+}
+
+@media (max-width: 768px) {
+    html {
+        zoom: 75%;
+    }
+
+    #game {
+        flex-direction: column;
+    }
+
+    #game-tools {
+        height: 50vh;
+    }
+
+    #game-canvas {
+        width: 100%;
+    }
+}
+
+@media (max-width: 480px) {}

static/style.css

@@ -51,6 +51,7 @@ body {
 
 .block>div {
     display: flex;
+    flex-wrap: wrap;
     flex: 1 1 auto;
     gap: 5px;
 }
@@ -60,6 +61,10 @@ body {
     text-align: center;
 }
 
+.block>div:not(.no-wrap)>* {
+    min-width: 100px;
+}
+
 #game {
     background: #fff;
 
@@ -72,15 +77,14 @@ body {
     overflow: hidden;
 }
 
-#game,
+/* #game,
 #game-canvas {
-    height: 600px;
-}
+} */
 
 #game-canvas {
     border-right: 1px solid var(--bg);
     background-color: var(--bg-2);
-    width: 800px;
+    aspect-ratio: 4/3;
 }
 
 #game-tools {