fixes lol

frontend/src/lib/components/ChessGameOverlay.svelte

@@ -255,7 +255,7 @@
                 const piece = game.get(square);
                 row.push({
                     square,
-                    piece: piece ? getPieceSymbol(piece) : null,
+                    piece: piece ? getPieceImage(piece) : null,
                     color: piece?.color || null,
                     isLight: (files.indexOf(file) + parseInt(rank)) % 2 === 1
                 });
@@ -266,12 +266,11 @@
         boardSquares = board2d;
     }
 
-    function getPieceSymbol(piece) {
-        const symbols = {
-            'wk': '\u2654', 'wq': '\u2655', 'wr': '\u2656', 'wb': '\u2657', 'wn': '\u2658', 'wp': '\u2659',
-            'bk': '\u265A', 'bq': '\u265B', 'br': '\u265C', 'bb': '\u265D', 'bn': '\u265E', 'bp': '\u265F'
-        };
-        return symbols[piece.color + piece.type] || '';
+    function getPieceImage(piece) {
+        // Cburnett piece set: wK, wQ, wR, wB, wN, wP, bK, bQ, bR, bB, bN, bP
+        const color = piece.color; // 'w' or 'b'
+        const type = piece.type.toUpperCase(); // k->K, q->Q, etc.
+        return `/pieces/cburnett/${color}${type}.svg`;
     }
 
     function handleSquareClick(square) {
@@ -580,9 +579,13 @@
                                         on:click={() => handleSquareClick(cell.square)}
                                     >
                                         {#if cell.piece}
-                                            <span class="piece" style="font-size: {cellSize * 0.7}px;" class:white-piece={cell.color === 'w'} class:black-piece={cell.color === 'b'}>
-                                                {cell.piece}
-                                            </span>
+                                            <img
+                                                class="piece"
+                                                src={cell.piece}
+                                                alt="chess piece"
+                                                style="width: {cellSize * 0.85}px; height: {cellSize * 0.85}px;"
+                                                draggable="false"
+                                            />
                                         {/if}
                                     </div>
                                 {/each}
@@ -830,19 +833,8 @@
     }
 
     .piece {
-        font-size: 2rem;
-        line-height: 1;
         user-select: none;
-    }
-
-    .white-piece {
-        color: #fff;
-        text-shadow: 0 0 2px #000;
-    }
-
-    .black-piece {
-        color: #000;
-        text-shadow: 0 0 2px #fff;
+        pointer-events: none;
     }
 
     .overlay-footer {
@@ -952,10 +944,6 @@
             height: 36px;
         }
 
-        .piece {
-            font-size: 1.7rem;
-        }
-
         .resize-handle {
             display: none;
         }