Add pawn promotion

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

@@ -33,10 +33,16 @@
     box-sizing: border-box;
 }
 
-.chessSquare.legal {
-    border: 4px dashed red;
+.legalOverlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none; /* Let clicks go through */
     box-sizing: border-box;
-    cursor: pointer;
+    border: 4px dashed red;
+    z-index: 10;
 }
 
 #chessBoard.flipped {
@@ -46,9 +52,58 @@
 .chessSquare.previous-start {
     box-sizing: border-box;
     border: 4px solid #ffd700; /* gold or whatever you like */
+    z-index: 1;
 }
 
 .chessSquare.previous-end {
     box-sizing: border-box;
     border: 4px solid #ff8c00; /* orange */
+    z-index: 1;
+}
+
+#promotionModal {
+    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;
+}
+
+#promotionModal p {
+    margin-bottom: 15px;
+    font-size: 18px;
+    font-weight: bold;
+}
+
+#promotionBtnContainer {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+    justify-content: center;
+}
+
+#promotionBtnContainer button {
+    background-color: #2c2c2c;
+    border: none;
+    padding: 10px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: transform 0.2s ease;
+}
+
+#promotionBtnContainer button:hover {
+    transform: scale(1.1);
+    background-color: #3a3a3a;
+}
+
+#promotionBtnContainer img {
+    width: 50px;
+    height: 50px;
+    pointer-events: none; /* ensures img doesn't steal the click */
 }