Add stockfish to chess

JoshHeaps.Net/wwwroot/css/chess/game.css

@@ -14,11 +14,11 @@
 }
 
 .chessSquare.light {
-    background-color: #ccc;
+    background: #ccc;
 }
 
 .chessSquare.dark {
-    background-color: #656770;
+    background: #656770;
 }
 
 .chessPiece {
@@ -49,16 +49,20 @@
     transform: rotate(180deg);
 }
 
-.chessSquare.previous-start {
-    box-sizing: border-box;
-    border: 4px solid #ffd700; /* gold or whatever you like */
-    z-index: 1;
+.chessSquare.light.previous-start {
+    background: linear-gradient(rgba(0, 88, 171, 0.3), rgba(0, 88, 171, 0.3)), #ccc;
 }
 
-.chessSquare.previous-end {
-    box-sizing: border-box;
-    border: 4px solid #ff8c00; /* orange */
-    z-index: 1;
+.chessSquare.light.previous-end {
+    background: linear-gradient(rgba(0, 88, 171, 0.3), rgba(0, 88, 171, 0.3)), #ccc;
+}
+
+.chessSquare.dark.previous-start {
+    background: linear-gradient(rgba(0, 88, 171, 0.3), rgba(0, 88, 171, 0.3)), #656770;
+}
+
+.chessSquare.dark.previous-end {
+    background: linear-gradient(rgba(0, 88, 171, 0.3), rgba(0, 88, 171, 0.3)), #656770;
 }
 
 #promotionModal {
@@ -106,4 +110,52 @@
     width: 50px;
     height: 50px;
     pointer-events: none; /* ensures img doesn't steal the click */
+}
+
+#difficultyModal {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #1e1e1e;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 20px rgba(0,0,0,0.6);
+    color: white;
+    z-index: 1000;
+    text-align: center;
+}
+
+#difficultyModal p {
+    margin-bottom: 15px;
+    font-size: 18px;
+    font-weight: bold;
+}
+
+#difficultyButtonContainer {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 10px;
+    justify-content: center;
+}
+
+#difficultyButtonContainer button {
+    background-color: #2c2c2c;
+    border: none;
+    padding: 10px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: transform 0.2s ease;
+    color: white;
+}
+
+#difficultyButtonContainer button:hover {
+    transform: scale(1.1);
+    background-color: #3a3a3a;
+}
+
+#difficultyButtonContainer img {
+    width: 50px;
+    height: 50px;
+    pointer-events: none; /* ensures img doesn't steal the click */
 }