diff --git a/data/ancients.js b/data/ancients.js
index e19926c1..491ff2b8 100644
--- a/data/ancients.js
+++ b/data/ancients.js
@@ -1,10 +1,11 @@
-import Ancients from '../assets/Ancients/index'
+//import Ancients from '../assets/Ancients/index.js'
 
 const ancientsData = [
   {
     id: 'azathoth',
     name: 'azathoth',
-    cardFace: Ancients.azathoth,
+    //cardFace: Ancients.azathoth,
+    cardFace: "../assets/Ancients/Azathoth.png",
     firstStage: {
       greenCards: 1,
       blueCards: 1,
@@ -24,7 +25,8 @@ const ancientsData = [
   {
     id: 'cthulhu',
     name: 'cthulhu',
-    cardFace: Ancients.cthulhu,
+    //cardFace: Ancients.cthulhu,
+    cardFace: "../assets/Ancients/Cthulthu.png",
     firstStage: {
       greenCards: 0,
       blueCards: 2,
@@ -44,7 +46,8 @@ const ancientsData = [
   {
     id: 'iogSothoth',
     name: 'iogSothoth',
-    cardFace: Ancients.iogSothoth,
+    //cardFace: Ancients.iogSothoth,
+    cardFace: "../assets/Ancients/IogSothoth.png",
     firstStage: {
       greenCards: 0,
       blueCards: 1,
@@ -64,7 +67,8 @@ const ancientsData = [
   {
     id: 'shubNiggurath',
     name: 'shubNiggurath',
-    cardFace: Ancients.shubNiggurath,
+    //cardFace: Ancients.shubNiggurath,
+    cardFace: "../assets/Ancients/ShubNiggurath.png",
     firstStage: {
       greenCards: 1,
       blueCards: 1,
@@ -83,4 +87,5 @@ const ancientsData = [
   },
 ]
 
-export default ancientsData
\ No newline at end of file
+//export default ancientsData
+export {ancientsData}
\ No newline at end of file
diff --git a/data/mythicCards/blue/index.js b/data/mythicCards/blue/index.js
index 6439ca19..006c76a5 100644
--- a/data/mythicCards/blue/index.js
+++ b/data/mythicCards/blue/index.js
@@ -1,78 +1,91 @@
-import blueCardsAssets from '../../../assets/MythicCards/blue';
+//import blueCardsAssets from '../../../assets/MythicCards/blue';
 
 const cardsData = [
   {
     id: 'blue1',
-    cardFace: blueCardsAssets.blue1,
+    //cardFace: blueCardsAssets.blue1,
+    cardFace: "../../../assets/MythicCards/blue/blue1.png",
     difficulty: 'hard',
     color:'blue'
   },
   {
     id: 'blue2',
-    cardFace: blueCardsAssets.blue2,
+    //cardFace: blueCardsAssets.blue2,
+    cardFace: "../../../assets/MythicCards/blue/blue2.png",
     difficulty: 'hard',
     color:'blue'
   },
   {
     id: 'blue3',
-    cardFace: blueCardsAssets.blue3,
+    //cardFace: blueCardsAssets.blue3,
+    cardFace: "../../../assets/MythicCards/blue/blue3.png",
     difficulty: 'easy',
     color:'blue'
   },
   {
     id: 'blue4',
-    cardFace: blueCardsAssets.blue4,
+    //cardFace: blueCardsAssets.blue4,
+    cardFace: "../../../assets/MythicCards/blue/blue4.png",
     difficulty: 'easy',
     color:'blue'
   },
   {
     id: 'blue5',
-    cardFace: blueCardsAssets.blue5,
+    //cardFace: blueCardsAssets.blue5,
+    cardFace: "../../../assets/MythicCards/blue/blue5.png",
     difficulty: 'easy',
     color:'blue'
   },
   {
     id: 'blue6',
-    cardFace: blueCardsAssets.blue6,
+    //cardFace: blueCardsAssets.blue6,
+    cardFace: "../../../assets/MythicCards/blue/blue6.png",
     difficulty: 'hard',
     color:'blue'
   },
   {
     id: 'blue7',
-    cardFace: blueCardsAssets.blue7,
+    //cardFace: blueCardsAssets.blue7,
+    cardFace: "../../../assets/MythicCards/blue/blue7.png",
     difficulty: 'normal',
     color:'blue'
   },
   {
     id: 'blue8',
-    cardFace: blueCardsAssets.blue8,
+    //cardFace: blueCardsAssets.blue8,
+    cardFace: "../../../assets/MythicCards/blue/blue8.png",
     difficulty: 'hard',
     color:'blue'
   },
   {
     id: 'blue9',
-    cardFace: blueCardsAssets.blue9,
+    //cardFace: blueCardsAssets.blue9,
+    cardFace: "../../../assets/MythicCards/blue/blue9.png",
     difficulty: 'normal',
     color:'blue'
   },
   {
     id: 'blue10',
-    cardFace: blueCardsAssets.blue10,
+    //cardFace: blueCardsAssets.blue10,
+    cardFace: "../../../assets/MythicCards/blue/blue10.png",
     difficulty: 'easy',
     color:'blue'
   },
   {
     id: 'blue11',
-    cardFace: blueCardsAssets.blue11,
+    //cardFace: blueCardsAssets.blue11,
+    cardFace: "../../../assets/MythicCards/blue/blue11.png",
     difficulty: 'normal',
     color:'blue'
   },
   {
     id: 'blue12',
-    cardFace: blueCardsAssets.blue12,
+    //cardFace: blueCardsAssets.blue12,
+    cardFace: "../../../assets/MythicCards/blue/blue12.png",
     difficulty: 'normal',
     color:'blue'
   },
 ]
 
-export default cardsData
\ No newline at end of file
+//export default cardsData
+export {cardsData}
\ No newline at end of file
diff --git a/data/mythicCards/brown/index.js b/data/mythicCards/brown/index.js
index 0bce7522..b6c823a5 100644
--- a/data/mythicCards/brown/index.js
+++ b/data/mythicCards/brown/index.js
@@ -1,132 +1,154 @@
-import brownCardsAssets from '../../../assets/MythicCards/brown';
+//import brownCardsAssets from '../../../assets/MythicCards/brown';
 
 const cardsData = [
   {
     id: 'brown1',
-    cardFace: brownCardsAssets.brown1,
+    //cardFace: brownCardsAssets.brown1,
+    cardFace: "../../../assets/MythicCards/brown/brown1.png",
     difficulty: 'normal',
     color:'brown'
   },
   {
     id: 'brown2',
-    cardFace: brownCardsAssets.brown2,
+    //cardFace: brownCardsAssets.brown2,
+    cardFace: "../../../assets/MythicCards/brown/brown2.png",
     difficulty: 'normal',
     color:'brown'
   },
   {
     id: 'brown3',
-    cardFace: brownCardsAssets.brown3,
+    //cardFace: brownCardsAssets.brown3,
+    cardFace: "../../../assets/MythicCards/brown/brown3.png",
     difficulty: 'normal',
     color:'brown'
   },
   {
     id: 'brown4',
-    cardFace: brownCardsAssets.brown4,
+    //cardFace: brownCardsAssets.brown4,
+    cardFace: "../../../assets/MythicCards/brown/brown4.png",
     difficulty: 'normal',
     color:'brown'
   },
   {
     id: 'brown5',
-    cardFace: brownCardsAssets.brown5,
+    //cardFace: brownCardsAssets.brown5,
+    cardFace: "../../../assets/MythicCards/brown/brown5.png",
     difficulty: 'normal',
     color:'brown'
   },
   {
     id: 'brown6',
-    cardFace: brownCardsAssets.brown6,
+    //cardFace: brownCardsAssets.brown6,
+    cardFace: "../../../assets/MythicCards/brown/brown6.png",
     difficulty: 'hard',
     color:'brown'
   },
   {
     id: 'brown7',
-    cardFace: brownCardsAssets.brown7,
+    //cardFace: brownCardsAssets.brown7,
+    cardFace: "../../../assets/MythicCards/brown/brown7.png",
     difficulty: 'hard',
     color:'brown'
   },
   {
     id: 'brown8',
-    cardFace: brownCardsAssets.brown8,
+    //cardFace: brownCardsAssets.brown8,
+    cardFace: "../../../assets/MythicCards/brown/brown8.png",
     difficulty: 'hard',
     color:'brown'
   },
   {
     id: 'brown9',
-    cardFace: brownCardsAssets.brown9,
+    //cardFace: brownCardsAssets.brown9,
+    cardFace: "../../../assets/MythicCards/brown/brown9.png",
     difficulty: 'hard',
     color:'brown'
   },
   {
     id: 'brown10',
-    cardFace: brownCardsAssets.brown10,
+    //cardFace: brownCardsAssets.brown10,
+    cardFace: "../../../assets/MythicCards/brown/brown10.png",
     difficulty: 'hard',
     color:'brown'
   },
   {
     id: 'brown11',
-    cardFace: brownCardsAssets.brown11,
+    //cardFace: brownCardsAssets.brown11,
+    cardFace: "../../../assets/MythicCards/brown/brown11.png",
     difficulty: 'easy',
     color:'brown'
   },
   {
     id: 'brown12',
-    cardFace: brownCardsAssets.brown12,
+    //cardFace: brownCardsAssets.brown12,
+    cardFace: "../../../assets/MythicCards/brown/brown12.png",
     difficulty: 'easy',
     color:'brown'
   },
   {
     id: 'brown13',
-    cardFace: brownCardsAssets.brown13,
+    //cardFace: brownCardsAssets.brown13,
+    cardFace: "../../../assets/MythicCards/brown/brown13.png",
     difficulty: 'easy',
     color:'brown'
   },
   {
     id: 'brown14',
-    cardFace: brownCardsAssets.brown14,
+    //cardFace: brownCardsAssets.brown14,
+    cardFace: "../../../assets/MythicCards/brown/brown14.png",
     difficulty: 'easy',
     color:'brown'
   },
   {
     id: 'brown15',
-    cardFace: brownCardsAssets.brown15,
+    //cardFace: brownCardsAssets.brown15,
+    cardFace: "../../../assets/MythicCards/brown/brown15.png",
     difficulty: 'normal',
     color:'brown'
   },
   {
     id: 'brown16',
-    cardFace: brownCardsAssets.brown16,
+    //cardFace: brownCardsAssets.brown16,
+    cardFace: "../../../assets/MythicCards/brown/brown16.png",
     difficulty: 'normal',
     color:'brown'
   },
   {
     id: 'brown17',
-    cardFace: brownCardsAssets.brown17,
+    //cardFace: brownCardsAssets.brown17,
+    cardFace: "../../../assets/MythicCards/brown/brown17.png",
     difficulty: 'normal',
     color:'brown'
   },
   {
     id: 'brown18',
-    cardFace: brownCardsAssets.brown18,
+    //cardFace: brownCardsAssets.brown18,
+    cardFace: "../../../assets/MythicCards/brown/brown18.png",
     difficulty: 'normal',
     color:'brown'
   },
   {
     id: 'brown19',
-    cardFace: brownCardsAssets.brown19,
+    //cardFace: brownCardsAssets.brown19,
+    cardFace: "../../../assets/MythicCards/brown/brown19.png",
     difficulty: 'normal',
     color:'brown'
   },
   {
     id: 'brown20',
-    cardFace: brownCardsAssets.brown20,
+    //cardFace: brownCardsAssets.brown20,
+    cardFace: "../../../assets/MythicCards/brown/brown20.png",
     difficulty: 'normal',
     color:'brown'
   },
   {
     id: 'brown21',
-    cardFace: brownCardsAssets.brown21,
+    //cardFace: brownCardsAssets.brown21,
+    cardFace: "../../../assets/MythicCards/brown/brown21.png",
     difficulty: 'easy',
     color:'brown'
   },
 ]
 
-export default cardsData
\ No newline at end of file
+//export default cardsData
+export {cardsData}
\ No newline at end of file
diff --git a/data/mythicCards/green/index.js b/data/mythicCards/green/index.js
index cca6e9df..bb0a5d45 100644
--- a/data/mythicCards/green/index.js
+++ b/data/mythicCards/green/index.js
@@ -1,114 +1,133 @@
-import greenCardsAssets from '../../../assets/MythicCards/green';
+//import greenCardsAssets from '../../../assets/MythicCards/green';
 
 const cardsData = [
   {
     id: 'green1',
-    cardFace: greenCardsAssets.green1,
+    //cardFace: greenCardsAssets.green1,
+    cardFace: "../../../assets/MythicCards/green/green1.png",
     difficulty: 'easy',
     color:'green'
   },
   {
     id: 'green2',
-    cardFace: greenCardsAssets.green2,
+    //cardFace: greenCardsAssets.green2,
+    cardFace: "../../../assets/MythicCards/green/green2.png",
     difficulty: 'hard',
     color:'green'
   },
   {
     id: 'green3',
-    cardFace: greenCardsAssets.green3,
+    //cardFace: greenCardsAssets.green3,
+    cardFace: "../../../assets/MythicCards/green/green3.png",
     difficulty: 'hard',
     color:'green'
   },
   {
     id: 'green4',
-    cardFace: greenCardsAssets.green4,
+    //cardFace: greenCardsAssets.green4,
+    cardFace: "../../../assets/MythicCards/green/green4.png",
     difficulty: 'hard',
     color:'green'
   },
   {
     id: 'green5',
-    cardFace: greenCardsAssets.green5,
+    //cardFace: greenCardsAssets.green5,
+    cardFace: "../../../assets/MythicCards/green/green5.png",
     difficulty: 'hard',
     color:'green'
   },
   {
     id: 'green6',
-    cardFace: greenCardsAssets.green6,
+    //cardFace: greenCardsAssets.green6,
+    cardFace: "../../../assets/MythicCards/green/green6.png",
     difficulty: 'hard',
     color:'green'
   },
   {
     id: 'green7',
-    cardFace: greenCardsAssets.green7,
+    //cardFace: greenCardsAssets.green7,
+    cardFace: "../../../assets/MythicCards/green/green7.png",
     difficulty: 'normal',
     color:'green'
   },
   {
     id: 'green8',
-    cardFace: greenCardsAssets.green8,
+    //cardFace: greenCardsAssets.green8,
+    cardFace: "../../../assets/MythicCards/green/green8.png",
     difficulty: 'normal',
     color:'green'
   },
   {
     id: 'green9',
-    cardFace: greenCardsAssets.green9,
+    //cardFace: greenCardsAssets.green9,
+    cardFace: "../../../assets/MythicCards/green/green9.png",
     difficulty: 'normal',
     color:'green'
   },
   {
     id: 'green10',
-    cardFace: greenCardsAssets.green10,
+    //cardFace: greenCardsAssets.green10,
+    cardFace: "../../../assets/MythicCards/green/green10.png",
     difficulty: 'normal',
     color:'green'
   },
   {
     id: 'green11',
-    cardFace: greenCardsAssets.green11,
+    //cardFace: greenCardsAssets.green11,
+    cardFace: "../../../assets/MythicCards/green/green11.png",
     difficulty: 'normal',
     color:'green'
   },
   {
     id: 'green12',
-    cardFace: greenCardsAssets.green12,
+    //cardFace: greenCardsAssets.green12,
+    cardFace: "../../../assets/MythicCards/green/green12.png",
     difficulty: 'easy',
     color:'green'
   },
   {
     id: 'green13',
-    cardFace: greenCardsAssets.green13,
+    //cardFace: greenCardsAssets.green13,
+    cardFace: "../../../assets/MythicCards/green/green13.png",
     difficulty: 'normal',
     color:'green'
   },
   {
     id: 'green14',
-    cardFace: greenCardsAssets.green14,
+    //cardFace: greenCardsAssets.green14,
+    cardFace: "../../../assets/MythicCards/green/green14.png",
     difficulty: 'normal',
     color:'green'
   },
   {
     id: 'green15',
-    cardFace: greenCardsAssets.green15,
+    //cardFace: greenCardsAssets.green15,
+    cardFace: "../../../assets/MythicCards/green/green15.png",
     difficulty: 'normal',
     color:'green'
   },
   {
     id: 'green16',
-    cardFace: greenCardsAssets.green16,
+    //cardFace: greenCardsAssets.green16,
+    cardFace: "../../../assets/MythicCards/green/green16.png",
     difficulty: 'easy',
     color:'green'
   },
   {
     id: 'green17',
-    cardFace: greenCardsAssets.green17,
+    //cardFace: greenCardsAssets.green17,
+    cardFace: "../../../assets/MythicCards/green/green17.png",
     difficulty: 'easy',
     color:'green'
   },
   {
     id: 'green18',
-    cardFace: greenCardsAssets.green18,
+    //cardFace: greenCardsAssets.green18,
+    cardFace: "../../../assets/MythicCards/green/green18.png",
     difficulty: 'easy',
     color:'green'
   },
 ]
 
-export default cardsData
\ No newline at end of file
+//export default cardsData
+export {cardsData}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..625bf76b
--- /dev/null
+++ b/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>Codejam</title>
+  <link href="/style.css" rel="stylesheet">
+</head>
+
+<body>
+  <div id="root">
+    <div class="App">
+      <div class="ancients-container">
+        <div id="aza" class="aza" style="background-image: url(/assets/Ancients/Azathoth.png);"></div>
+        <div id="cthul" class="cthul" style="background-image: url(/assets/Ancients/Cthulthu.png);"></div>
+        <div id="iog" class="iog" style="background-image: url(/assets/Ancients/IogSothoth.png);"></div>
+        <div id="shub" class="shub" style="background-image: url(/assets/Ancients/ShubNiggurath.png);"></div>
+        <div class="new-game">New Game</div>
+      </div>
+      <div class="difficulty-container">
+        <div class="just-chill">Just Chill</div>
+        <div class="easy">Easy</div>
+        <div class="normal">Normal</div>
+        <div class="hard">Hard</div>
+        <div class="hell">Hell</div>
+        <span class="shuffle-button">Shuffle deck</span>
+      </div>
+      <div class="deck-container">
+        <div class="current-state">
+          <div class="stage-container"><span id="s1" class="stage-text ">Первая стадия</span>
+            <div class="dots-container">
+              <div class="dot green s1g"></div>
+              <div class="dot brown s1br"></div>
+              <div class="dot blue s1b"></div>
+            </div>
+          </div>
+          <div class="stage-container"><span id="s2" class="stage-text ">Вторая стадия</span>
+            <div class="dots-container">
+              <div class="dot green s2g"></div>
+              <div class="dot brown s2br"></div>
+              <div class="dot blue s2b"></div>
+            </div>
+          </div>
+          <div class="stage-container"><span id="s3" class="stage-text ">Третья стадия</span>
+            <div class="dots-container">
+              <div class="dot green s3g"></div>
+              <div class="dot brown s3br"></div>
+              <div class="dot blue s3b"></div>
+            </div>
+          </div>
+        </div>
+        <div class="deck"
+          style="background-image: url(/assets/mythicCardBackground.png);">
+        </div>
+        <div class="last-card"></div>
+      </div>
+    </div>
+  </div>
+  <script type="module" src="/main.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 00000000..55c39e54
--- /dev/null
+++ b/main.js
@@ -0,0 +1,483 @@
+import * as Ancients from "./data/ancients.js";
+import * as Green from "./data/mythicCards/green/index.js";
+import * as Brown from "./data/mythicCards/brown/index.js";
+import * as Blue from "./data/mythicCards/blue/index.js";
+
+
+const targetAncient = document.querySelector('.ancient-card');
+//const difficulty = document.querySelector('.difficulty');
+const difficultyContainer = document.querySelector('.difficulty-container');
+const shuffleBtn = document.querySelector('.shuffle-button');
+const currentState = document.querySelector('.current-state');
+const deck = document.querySelector('.deck');
+const lastCard = document.querySelector('.last-card');
+const newgame = document.querySelector('.new-game');
+const s1g = document.querySelector('.s1g');
+const s1br = document.querySelector('.s1br');
+const s1b = document.querySelector('.s1b');
+const s2g = document.querySelector('.s2g');
+const s2br = document.querySelector('.s2br');
+const s2b = document.querySelector('.s2b');
+const s3g = document.querySelector('.s3g');
+const s3br = document.querySelector('.s3br');
+const s3b = document.querySelector('.s3b');
+const s1 = document.querySelector('#s1');
+const s2 = document.querySelector('#s2');
+const s3 = document.querySelector('#s3');
+const normalGame = document.querySelector('.normal');
+const chillGame = document.querySelector('.just-chill');
+const easyGame = document.querySelector('.easy');
+const hardGame = document.querySelector('.hard');
+const hellGame = document.querySelector('.hell');
+const aza = document.querySelector('.aza');
+const cthul = document.querySelector('.cthul');
+const iog = document.querySelector('.iog');
+const shub = document.querySelector('.shub');
+
+let difficultyGame;
+
+let deckStack = [];
+/*
+let deckStackGreen = [];
+let deckStackBrown = [];
+let deckStackBlue = [];
+*/
+
+//количество карт по стадиям
+let colGreenCardS1;
+let colGreenCardS2;
+let colGreenCardS3;
+
+let colBrownCardS1;
+let colBrownCardS2;
+let colBrownCardS3;
+
+let colBlueCardS1;
+let colBlueCardS2;
+let colBlueCardS3;
+
+
+
+/*
+function addActiveAncient() {
+  targetAncient.classList.add('active');
+  targetAncient.style.width = '80%';
+  targetAncient.style.height = '55%';
+  //difficulty.style.visibility = "visible";
+  difficultyContainer.style.visibility = "visible";
+}*/
+
+
+//выделение древнего, скрыть лишних, видимый блок сложности,
+//увеличение древнего, подготовка трекера
+aza.addEventListener('click', function() {
+  aza.classList.add('active');
+  aza.style.width = '80%';
+  aza.style.height = '55%';
+  cthul.style.display = 'none';
+  iog.style.display = 'none';
+  shub.style.display = 'none';
+  difficultyContainer.style.visibility = "visible";
+
+  colGreenCardS1 = Ancients.ancientsData[0].firstStage.greenCards;
+  colGreenCardS2 = Ancients.ancientsData[0].secondStage.greenCards;
+  colGreenCardS3 = Ancients.ancientsData[0].thirdStage.greenCards;
+
+  colBrownCardS1 = Ancients.ancientsData[0].firstStage.brownCards;
+  colBrownCardS2 = Ancients.ancientsData[0].secondStage.brownCards;
+  colBrownCardS3 = Ancients.ancientsData[0].thirdStage.brownCards;
+
+  colBlueCardS1 = Ancients.ancientsData[0].firstStage.blueCards;
+  colBlueCardS2 = Ancients.ancientsData[0].secondStage.blueCards;
+  colBlueCardS3 = Ancients.ancientsData[0].thirdStage.blueCards;
+});
+cthul.addEventListener('click', function() {
+  cthul.classList.add('active');
+  cthul.style.width = '80%';
+  cthul.style.height = '55%';
+  aza.style.display = 'none';
+  iog.style.display = 'none';
+  shub.style.display = 'none';
+  difficultyContainer.style.visibility = "visible";
+
+  colGreenCardS1 = Ancients.ancientsData[1].firstStage.greenCards;
+  colGreenCardS2 = Ancients.ancientsData[1].secondStage.greenCards;
+  colGreenCardS3 = Ancients.ancientsData[1].thirdStage.greenCards;
+
+  colBrownCardS1 = Ancients.ancientsData[1].firstStage.brownCards;
+  colBrownCardS2 = Ancients.ancientsData[1].secondStage.brownCards;
+  colBrownCardS3 = Ancients.ancientsData[1].thirdStage.brownCards;
+
+  colBlueCardS1 = Ancients.ancientsData[1].firstStage.blueCards;
+  colBlueCardS2 = Ancients.ancientsData[1].secondStage.blueCards;
+  colBlueCardS3 = Ancients.ancientsData[1].thirdStage.blueCards;
+});
+iog.addEventListener('click', function() {
+  iog.classList.add('active');
+  iog.style.width = '80%';
+  iog.style.height = '55%';
+  aza.style.display = 'none';
+  cthul.style.display = 'none';
+  shub.style.display = 'none';
+  difficultyContainer.style.visibility = "visible";
+
+  colGreenCardS1 = Ancients.ancientsData[2].firstStage.greenCards;
+  colGreenCardS2 = Ancients.ancientsData[2].secondStage.greenCards;
+  colGreenCardS3 = Ancients.ancientsData[2].thirdStage.greenCards;
+
+  colBrownCardS1 = Ancients.ancientsData[2].firstStage.brownCards;
+  colBrownCardS2 = Ancients.ancientsData[2].secondStage.brownCards;
+  colBrownCardS3 = Ancients.ancientsData[2].thirdStage.brownCards;
+
+  colBlueCardS1 = Ancients.ancientsData[2].firstStage.blueCards;
+  colBlueCardS2 = Ancients.ancientsData[2].secondStage.blueCards;
+  colBlueCardS3 = Ancients.ancientsData[2].thirdStage.blueCards;
+});
+shub.addEventListener('click', function() {
+  shub.classList.add('active');
+  shub.style.width = '80%';
+  shub.style.height = '55%';
+  aza.style.display = 'none';
+  cthul.style.display = 'none';
+  iog.style.display = 'none';
+  difficultyContainer.style.visibility = "visible";
+
+  colGreenCardS1 = Ancients.ancientsData[3].firstStage.greenCards;
+  colGreenCardS2 = Ancients.ancientsData[3].secondStage.greenCards;
+  colGreenCardS3 = Ancients.ancientsData[3].thirdStage.greenCards;
+
+  colBrownCardS1 = Ancients.ancientsData[3].firstStage.brownCards;
+  colBrownCardS2 = Ancients.ancientsData[3].secondStage.brownCards;
+  colBrownCardS3 = Ancients.ancientsData[3].thirdStage.brownCards;
+
+  colBlueCardS1 = Ancients.ancientsData[3].firstStage.blueCards;
+  colBlueCardS2 = Ancients.ancientsData[3].secondStage.blueCards;
+  colBlueCardS3 = Ancients.ancientsData[3].thirdStage.blueCards;
+});
+
+
+//клик по кнопке сложн и создание замеса колоды,
+//задать уровень сложности, скрыть лишние уровни, выделить текущий
+document.addEventListener('click', function(e) {
+  if(e.target.className === 'just-chill') {
+    e.target.classList.add('active');
+    easyGame.style.visibility = 'hidden';
+    normalGame.style.visibility = 'hidden';
+    hardGame.style.visibility = 'hidden';
+    hellGame.style.visibility = 'hidden';
+    difficultyGame = 'just-chill';
+    shuffleBtn.style.visibility = "visible";
+  }
+  if(e.target.className === 'easy') {
+    e.target.classList.add('active');
+    chillGame.style.visibility = 'hidden';
+    normalGame.style.visibility = 'hidden';
+    hardGame.style.visibility = 'hidden';
+    hellGame.style.visibility = 'hidden';
+    difficultyGame = 'easy';
+    shuffleBtn.style.visibility = "visible";
+  }
+  else if(e.target.className === 'normal') {
+    e.target.classList.add('active');
+    chillGame.style.visibility = 'hidden';
+    easyGame.style.visibility = 'hidden';
+    hardGame.style.visibility = 'hidden';
+    hellGame.style.visibility = 'hidden';
+    difficultyGame = 'normal';
+    shuffleBtn.style.visibility = "visible";
+  }
+  else if(e.target.className === 'hard') {
+    e.target.classList.add('active');
+    chillGame.style.visibility = 'hidden';
+    normalGame.style.visibility = 'hidden';
+    easyGame.style.visibility = 'hidden';
+    hellGame.style.visibility = 'hidden';
+    difficultyGame = 'hard';
+    shuffleBtn.style.visibility = "visible";
+  }
+  else if(e.target.className === 'hell') {
+    e.target.classList.add('active');
+    chillGame.style.visibility = 'hidden';
+    hardGame.style.visibility = 'hidden';
+    normalGame.style.visibility = 'hidden';
+    easyGame.style.visibility = 'hidden';
+    difficultyGame = 'hell';
+    shuffleBtn.style.visibility = "visible";
+  }
+});
+
+
+//количество карт для стадий, подготовка к игре
+function colStage() {
+  s1g.textContent = colGreenCardS1;
+  s1br.textContent = colBrownCardS1;
+  s1b.textContent = colBlueCardS1;
+  s2g.textContent = colGreenCardS2;
+  s2br.textContent = colBrownCardS2;
+  s2b.textContent = colBlueCardS2;
+  s3g.textContent = colGreenCardS3;
+  s3br.textContent = colBrownCardS3;
+  s3b.textContent = colBlueCardS3;
+  countGreenCardS1 = colGreenCardS1;
+  countBrownCardS1 = colBrownCardS1;
+  countBlueCardS1 = colBlueCardS1;
+  countGreenCardS2 = colGreenCardS2;
+  countBrownCardS2 = colBrownCardS2;
+  countBlueCardS2 = colBlueCardS2;
+  countGreenCardS3 = colGreenCardS3;
+  countBrownCardS3 = colBrownCardS3;
+  countBlueCardS3 = colBlueCardS3;
+}
+
+//клик по замесу колоды, сброс кнопки, видимые карты и трекер
+//создание и рандомный замес карт
+document.addEventListener('click', function(e) {
+  if(e.target.className === 'shuffle-button') {
+    shuffleBtn.style.visibility = "hidden";
+    currentState.style.visibility = "visible";
+    deck.style.visibility = "visible";
+    lastCard.style.visibility = "visible";
+    newgame.style.visibility = "visible";
+    colStage();
+    deckStack = shuffle(createDeckStack(Green, Brown, Blue));
+    /*
+    deckStackGreen = shuffle(createDeckStack(Green));
+    deckStackBrown = shuffle(createDeckStack(Brown));
+    deckStackBlue = shuffle(createDeckStack(Blue));
+    */
+  }
+});
+
+//создание колоды
+function createDeckStack() {
+  let allCards = [...Green.cardsData, ...Brown.cardsData, ...Blue.cardsData];
+  /*
+  let allCardsGreen = [...Green.cardsData];
+  let allCardsBrown = [...Brown.cardsData];
+  let allCardsBlue = [...Blue.cardsData];
+  */
+  //console.log(allCardsGreen)
+  let nomralCards = [];
+  /*
+  let nomralCardsGreen = [];
+  let nomralCardsBrown = [];
+  let nomralCardsBlue = [];
+*/
+  if(difficultyGame  === 'just-chill') {
+    allCards.forEach(e => {
+      if(e.difficulty === 'easy' || e.difficulty === 'normal') {
+        nomralCards.push(e);
+      }
+    });
+  }
+  if(difficultyGame  === 'easy') {
+    allCards.forEach(e => {
+      if(e.difficulty === 'easy' || e.difficulty === 'normal') {
+        nomralCards.push(e);
+      }
+    });
+  }
+  if(difficultyGame  === 'normal') {
+    allCards.forEach(e => {
+      if(e.difficulty === 'normal' || e.difficulty === 'hard') {
+        nomralCards.push(e);
+      }
+    });
+  }
+  if(difficultyGame  === 'hard') {
+    allCards.forEach(e => {
+      if(e.difficulty === 'hard' || e.difficulty === 'normal') {
+        nomralCards.push(e);
+      }
+    });
+  }
+  if(difficultyGame  === 'hell') {
+    allCards.forEach(e => {
+      if(e.difficulty === 'hard' || e.difficulty === 'normal') {
+        nomralCards.push(e);
+      }
+    });
+  }
+  return nomralCards;
+  //return nomralCardsGreen, nomralCardsBrown, nomralCardsBlue;
+}
+
+//рандомайзер тосовки
+function shuffle(array) {
+  for(let i = array.length - 1; i > 0; i--) {
+    let rand = Math.floor(Math.random() * (i + 1));
+    [array[i], array[rand]] = [array[rand], array[i]];
+  }
+  return array;
+}
+
+//трекер стадий
+let countGreenCardS1;
+let countBrownCardS1;
+let countBlueCardS1;
+let countGreenCardS2;
+let countBrownCardS2;
+let countBlueCardS2;
+let countGreenCardS3;
+let countBrownCardS3;
+let countBlueCardS3;
+
+
+//условия стадий и конца игры
+let stageGame = 1;
+function trackStage() {
+  if(stageGame === 1 && countGreenCardS1 === 0 && countBrownCardS1 === 0 && countBlueCardS1 === 0) {
+    stageGame = 2;
+    s1.classList.add('done');
+    console.log(`stage ${stageGame}`);
+  }
+  else if(stageGame === 2 && countGreenCardS2 === 0 && countBrownCardS2 === 0 && countBlueCardS2 === 0) {
+    stageGame = 3;
+    s2.classList.add('done');
+    console.log(`stage ${stageGame}`);
+  }
+  else if(stageGame === 3 && countGreenCardS3 === 0 && countBrownCardS3 === 0 && countBlueCardS3 === 0) {
+    lastCard.style.background = 'none';
+    lastCard.textContent = 'The end of the game. Click "New Game" to try again';
+    lastCard.style.color = 'white';
+    lastCard.style.fontSize = '25px';
+    s3.classList.add('done');
+  }
+}
+console.log(`stage ${stageGame}`);
+
+
+//клик по закрытой колоде и открытие карты через проверку условий и смена стадий
+function takeCard() {
+  trackStage();
+  trackCard();
+}
+
+deck.addEventListener('click', takeCard);
+
+//проверка карты в руке: цвет, счетчикигры, если подходит - забор с колоды
+//если нет - тосую карты и достаю снова
+function trackCard() {
+  if(stageGame === 1 && deckStack[deckStack.length - 1].color === 'green') {
+    if(countGreenCardS1 > 0) {
+      let currentCard = deckStack[deckStack.length - 1].cardFace;
+      deckStack.pop();
+      countGreenCardS1--;
+      s1g.textContent = countGreenCardS1;
+      lastCard.style.background = `url(${currentCard})`;
+      lastCard.style.backgroundSize = 'contain';
+    } else if(countGreenCardS1 === 0) {
+      shuffle(deckStack);
+      takeCard();
+    }
+  }
+  else if(stageGame === 1 && deckStack[deckStack.length - 1].color === 'brown') {
+    if(countBrownCardS1 > 0) {
+      let currentCard = deckStack[deckStack.length - 1].cardFace;
+      deckStack.pop();
+      countBrownCardS1--;
+      s1br.textContent = countBrownCardS1;
+      lastCard.style.background = `url(${currentCard})`;
+      lastCard.style.backgroundSize = 'contain';
+    } else if(countBrownCardS1 === 0) {
+      shuffle(deckStack);
+      takeCard();
+    }
+  }
+  else if(stageGame === 1 && deckStack[deckStack.length - 1].color === 'blue') {
+    if(countBlueCardS1 > 0) {
+      let currentCard = deckStack[deckStack.length - 1].cardFace;
+      deckStack.pop();
+      countBlueCardS1--;
+      s1b.textContent = countBlueCardS1;
+      lastCard.style.background = `url(${currentCard})`;
+      lastCard.style.backgroundSize = 'contain';
+    } else if(countBlueCardS1 === 0) {
+      shuffle(deckStack);
+      takeCard();
+    }
+  }
+  else if(stageGame === 2 && deckStack[deckStack.length - 1].color === 'green') {
+    if(countGreenCardS2 > 0) {
+      let currentCard = deckStack[deckStack.length - 1].cardFace;
+      deckStack.pop();
+      countGreenCardS2--;
+      s2g.textContent = countGreenCardS2;
+      lastCard.style.background = `url(${currentCard})`;
+      lastCard.style.backgroundSize = 'contain';
+    } else if(countGreenCardS2 === 0) {
+      shuffle(deckStack);
+      takeCard();
+    }
+  }
+  else if(stageGame === 2 && deckStack[deckStack.length - 1].color === 'brown') {
+    if(countBrownCardS2 > 0) {
+      let currentCard = deckStack[deckStack.length - 1].cardFace;
+      deckStack.pop();
+      countBrownCardS2--;
+      s2br.textContent = countBrownCardS2;
+      lastCard.style.background = `url(${currentCard})`;
+      lastCard.style.backgroundSize = 'contain';
+    } else if(countBrownCardS2 === 0) {
+      shuffle(deckStack);
+      takeCard();
+    }
+  }
+  else if(stageGame === 2 && deckStack[deckStack.length - 1].color === 'blue') {
+    if(countBlueCardS2 > 0) {
+      let currentCard = deckStack[deckStack.length - 1].cardFace;
+      deckStack.pop();
+      countBlueCardS2--;
+      s2b.textContent = countBlueCardS2;
+      lastCard.style.background = `url(${currentCard})`;
+      lastCard.style.backgroundSize = 'contain';
+    } else if(countBlueCardS2 === 0) {
+      shuffle(deckStack);
+      takeCard();
+    }
+  }
+  else if(stageGame === 3 && deckStack[deckStack.length - 1].color === 'green') {
+    if(countGreenCardS3 > 0) {
+      let currentCard = deckStack[deckStack.length - 1].cardFace;
+      deckStack.pop();
+      countGreenCardS3--;
+      s3g.textContent = countGreenCardS3;
+      lastCard.style.background = `url(${currentCard})`;
+      lastCard.style.backgroundSize = 'contain';
+    } else if(countGreenCardS3 === 0) {
+      shuffle(deckStack);
+      takeCard();
+    }
+  }
+  else if(stageGame === 3 && deckStack[deckStack.length - 1].color === 'brown') {
+    if(countBrownCardS3 > 0) {
+      let currentCard = deckStack[deckStack.length - 1].cardFace;
+      deckStack.pop();
+      countBrownCardS3--;
+      s3br.textContent = countBrownCardS3
+      lastCard.style.background = `url(${currentCard})`;
+      lastCard.style.backgroundSize = 'contain';
+    } else if(countBrownCardS3 === 0) {
+      shuffle(deckStack);
+      takeCard();
+    }
+  }
+  else if(stageGame === 3 && deckStack[deckStack.length - 1].color === 'blue') {
+    if(countBlueCardS3 > 0) {
+      let currentCard = deckStack[deckStack.length - 1].cardFace;
+      deckStack.pop();
+      countBlueCardS3--;
+      s3b.textContent = countBlueCardS3;
+      lastCard.style.background = `url(${currentCard})`;
+      lastCard.style.backgroundSize = 'contain';
+    } else if(countBlueCardS3 === 0) {
+      shuffle(deckStack);
+      takeCard();
+    }
+  }
+}
+
+
+//костыль - новая игра
+newgame.addEventListener('click', () => window.location.reload())
+
diff --git a/style.css b/style.css
new file mode 100644
index 00000000..059aa4df
--- /dev/null
+++ b/style.css
@@ -0,0 +1,252 @@
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
+  margin: 0
+}
+
+code {
+  font-family: source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace
+}
+
+.ancients-container {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: 10px;
+  min-width: 40%;
+  padding: 20px
+}
+/*
+.ancients-container .ancient-card {
+  background-position: 50%;
+  background-repeat: no-repeat;
+  background-size: contain;
+  box-sizing: border-box;
+  cursor: pointer;
+  height: 260px;
+  width: 200px
+}*/
+.ancients-container .aza,
+.ancients-container .cthul,
+.ancients-container .iog,
+.ancients-container .shub {
+  background-position: 50%;
+  background-repeat: no-repeat;
+  background-size: contain;
+  box-sizing: border-box;
+  cursor: pointer;
+  height: 260px;
+  width: 200px
+}
+
+.new-game {
+  width: max-content;
+  padding: 10px;
+  border: solid 1px white;
+  color: white;
+  cursor: pointer;
+  visibility: hidden;
+}
+
+/*
+.ancients-container .ancient-card.active {
+  border: 2px solid white
+}*/
+.ancients-container .aza.active,
+.ancients-container .cthul.active,
+.ancients-container .iog.active,
+.ancients-container .shub.active {
+  border: 2px solid white
+}
+
+.difficulty-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  height: 100vh;
+  justify-content: center;
+  visibility: hidden;
+}
+/*
+.difficulty-container .difficulty {
+  border: 2px solid white;
+  box-sizing: border-box;
+  color: white;
+  cursor: pointer;
+  padding: 5px;
+  text-align: center;
+  /*visibility: hidden;
+}*/
+.difficulty-container .just-chill {
+  border: 2px solid white;
+  box-sizing: border-box;
+  color: white;
+  cursor: pointer;
+  padding: 5px;
+  text-align: center;
+  background-color: rgba(238, 180, 235, 0.644);
+  /*visibility: hidden;*/
+}
+.difficulty-container .easy {
+  border: 2px solid white;
+  box-sizing: border-box;
+  color: white;
+  cursor: pointer;
+  padding: 5px;
+  text-align: center;
+  background-color: rgba(0, 128, 0, 0.6);
+  /*visibility: hidden;*/
+}
+.difficulty-container .normal {
+  border: 2px solid white;
+  box-sizing: border-box;
+  color: white;
+  cursor: pointer;
+  padding: 5px;
+  text-align: center;
+  background-color: rgba(255, 166, 0, 0.6);
+  /*visibility: hidden;*/
+}
+.difficulty-container .hard {
+  border: 2px solid white;
+  box-sizing: border-box;
+  color: white;
+  cursor: pointer;
+  padding: 5px;
+  text-align: center;
+  background-color: rgba(255, 0, 0, 0.6);
+  /*visibility: hidden;*/
+}
+.difficulty-container .hell {
+  border: 2px solid white;
+  box-sizing: border-box;
+  color: white;
+  cursor: pointer;
+  padding: 5px;
+  text-align: center;
+  background-color: rgba(20, 19, 19, 0.9);
+  /*visibility: hidden;*/
+}
+
+/*
+#easy {
+  background-color: rgba(0, 128, 0, 0.493);
+  opacity: 0.8;
+}
+#normal {
+  background-color: rgba(255, 166, 0, 0.418);
+  opacity: 0.8;
+}
+#hard {
+  background-color: rgba(255, 0, 0, 0.425);
+  opacity: 0.8;
+}
+*/
+/*
+.difficulty-container .difficulty.active {
+  /*background-color: red
+  border: 5px solid white;
+}*/
+.difficulty-container .just-chill.active,
+.difficulty-container .easy.active,
+.difficulty-container .normal.active,
+.difficulty-container .hard.active,
+.difficulty-container .hell.active {
+  border: 5px solid white;
+}
+
+.deck-container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  justify-content: center;
+  min-width: 30%;
+}
+
+.difficulty-container .shuffle-button {
+  background-color: gray;
+  border: 2px solid white;
+  color: white;
+  cursor: pointer;
+  padding: 5px;
+  visibility: hidden;
+}
+
+.deck-container .current-state {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 20%;
+  visibility: hidden;
+}
+
+.deck-container .current-state .stage-container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 5px
+}
+
+.deck-container .current-state .stage-container .stage-text {
+  color: white
+}
+
+.deck-container .current-state .stage-container .stage-text.done {
+  color: red;
+  text-decoration: line-through;
+}
+
+.deck-container .current-state .stage-container .dots-container {
+  align-items: center;
+  display: flex;
+  gap: 20px;
+  justify-content: center
+}
+
+.deck-container .current-state .stage-container .dot {
+  align-items: center;
+  border-radius: 50%;
+  display: flex;
+  height: 30px;
+  justify-content: center;
+  width: 30px;
+  color: white;
+}
+
+.deck-container .current-state .stage-container .dot.green {
+  background-color: green
+}
+
+.deck-container .current-state .stage-container .dot.brown {
+  background-color: rgb(128, 121, 24)
+}
+
+.deck-container .current-state .stage-container .dot.blue {
+  background-color: blue
+}
+
+.deck-container .deck {
+  cursor: pointer;
+  visibility: hidden;
+}
+
+.deck-container .deck,.deck-container .last-card {
+  background-size: cover;
+  height: 290px;
+  width: 190px;
+  visibility: hidden;
+}
+
+.App {
+  background-position: 50%;
+  background-repeat: no-repeat;
+  background-size: cover;
+  display: flex;
+  gap: 20px;
+  height: 100vh;
+  justify-content: space-between;
+  width: 100vw;
+  background-image: url(/assets/home.png);
+}
\ No newline at end of file