added card with count mines and emeralds saper, added adaptation

luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css

@@ -377,6 +377,37 @@ input[type="number"]::-webkit-outer-spin-button {
     margin: 13.5% 0 0 10.5%;
 }
 
+.info-crystals__count {
+    position: relative;
+}
+
+.card-style-count {
+    width: 40%;
+    text-align: center;
+    font-family: "Montserrat Alternates";
+    font-size: 18px;
+    font-width: 700;
+    padding: 1% 1%;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    border-radius: 25px;
+}
+
+.emeralds-bg {
+    background: #6BC884;
+    /*top: -54px;*/
+    /*left: 20px;*/
+    top: -22%;
+    left: 12%;
+}
+
+.crystals-bg {
+    background: #EF4444;
+    /*top: -52px;*/
+    /*left: 20px;*/
+    top: -20%;
+    left: 12%;
+}
+
 .card-info {
     border-radius: 15px;
     border: 1px solid #2B4D6C;
@@ -483,6 +514,12 @@ input[type="number"]::-webkit-outer-spin-button {
     .btns-style__steps button {
         padding: 6px 9px;
     }
+    .emeralds-bg {
+        top: -23%;
+    }
+    .crystals-bg {
+        top: -21%;
+    }
     .card-info img {
         width: 100%;
     }
@@ -558,6 +595,12 @@ input[type="number"]::-webkit-outer-spin-button {
     .btns-style__steps button {
         padding: 6px 4px;
     }
+    .emeralds-bg {
+        top: -24%;
+    }
+    .crystals-bg {
+        top: -22%;
+    }
     .card-info img {
         width: 100%;
     }

luckydiamond/src/pages/games-pages/SapergamePage.vue

@@ -132,6 +132,9 @@
                   <h2>Изумруды</h2>
                   <p>Открывай ячейки с изумрудами</p>
                   <img src="@/assets/icons-games/saper-game/icon-emeralds-saper.svg" width="170" height="170">
+                  <div class="info-crystals__count card-style-count emeralds-bg">
+                    <h3>22</h3>
+                  </div>
                 </div>
               </div>
               <div class="info-crystals">
@@ -139,6 +142,9 @@
                   <h2>кристаллы</h2>
                   <p>Остерегайся кристаллов, чтобы не проиграть</p>
                   <img src="@/assets/icons-games/saper-game/icon-crystall-info-saper.svg" width="170" height="170">
+                  <div class="info-crystals__count card-style-count crystals-bg">
+                    <h3>3</h3>
+                  </div>
                 </div>
               </div>
             </div>