release beta4

src/Mine/SeekerBundle/Resources/public/css/style.mineseeker.css

@@ -312,7 +312,6 @@ main {
     color: #fdf612;
 }
 
-
 #mine-wrapper .game-wrapper .users .user-container .user-control {
     background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.5) 0%, rgba(125, 185, 232, 0) 100%);
     background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.5) 0%, rgba(125, 185, 232, 0) 100%);
@@ -720,7 +719,7 @@ main {
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
-    width: 642px;
+    width: 643px;
     border: 1px solid #cac3e5;
 
     cursor: none;
@@ -969,8 +968,8 @@ main {
     -ms-transform: scale(1); /* IE 9 */
     -webkit-transform: scale(1); /* Safari */
     transform: scale(1);
-    -webkit-transition: all 250ms cubic-bezier(.17,.67,.83,.67);
-    transition: all 250ms cubic-bezier(.17,.67,.83,.67);
+    -webkit-transition: all 250ms cubic-bezier(.17, .67, .83, .67);
+    transition: all 250ms cubic-bezier(.17, .67, .83, .67);
 }
 
 .back-from-game img {
@@ -981,6 +980,52 @@ main {
     -ms-transform: scale(1.2); /* IE 9 */
     -webkit-transform: scale(1.2); /* Safari */
     transform: scale(1.2);
-    -webkit-transition: all 250ms cubic-bezier(.17,.67,.83,.67);
-    transition: all 250ms cubic-bezier(.17,.67,.83,.67);
-}
+    -webkit-transition: all 250ms cubic-bezier(.17, .67, .83, .67);
+    transition: all 250ms cubic-bezier(.17, .67, .83, .67);
+}
+
+@media screen and (max-width: 900px) {
+    /*#mine-wrapper .game-wrapper .game-overlay {*/
+        /*visibility: hidden;*/
+    /*}*/
+
+    #mine-wrapper .game-wrapper .users {
+        visibility: hidden;
+        display: none;
+    }
+
+    #mine-wrapper {
+        display: block;
+        width: 100%;
+    }
+
+    #mine-wrapper .game-wrapper {
+        width: 100%;
+        flex-direction: column-reverse;
+    }
+
+    #mine-wrapper .grid-container {
+        width: 100%;
+        padding: 0;
+    }
+
+    #mine-wrapper .grid {
+        width: 100%;
+    }
+
+    #mine-wrapper .grid .field-wrapper {
+        width: 6.25%;
+    }
+
+    #mine-wrapper .grid .field-wrapper > img.field-target {
+        width: 105%;
+        top: -2.5%;
+        left: -2.5%;
+    }
+
+    #mine-wrapper .grid .field-wrapper .field {
+        width: 100%;
+        height: auto;
+    }
+}
+