Enhance responsive UI across components with CSS adjustments and new styles

src/components/Gameboard/Gameboard.module.css

@@ -1,20 +1,82 @@
 .winnerContainer {
     display: flex;
     flex-direction: column;
-    padding: 40px;
-    width: 300px;
-    height: 250px;
+    padding: 30px 20px;
+    width: 90vw;
+    max-width: 320px;
     background: radial-gradient(circle, rgba(0, 138, 255, 1) 5%, rgba(9, 9, 121, 1) 81%);
     color: white;
     border: 1px solid white;
     border-radius: 8px;
-    margin: 20px;
+    margin: 20px auto;
     z-index: 2;
     justify-content: center;
     text-align: center;
     cursor: default;
+    gap: 15px;
 }
+
+.winnerContainer > img {
+    max-width: 80px;
+    height: auto;
+    margin: 0 auto;
+}
+
+.winnerContainer > h1 {
+    font-size: 24px;
+    margin: 10px 0;
+    word-break: break-word;
+}
+
 .winnerContainer > button {
     align-self: center;
-    width: 200px;
+    width: 100%;
+    max-width: 180px;
+    padding: 10px 20px;
+    font-size: 16px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.winnerContainer > button:hover {
+    background-color: #0056b3;
+}
+
+.winnerContainer > button:active {
+    transform: scale(0.98);
+}
+
+/* Tablet */
+@media (max-width: 1024px) {
+    .winnerContainer {
+        padding: 25px 15px;
+        max-width: 280px;
+    }
+
+    .winnerContainer > h1 {
+        font-size: 20px;
+    }
+}
+
+/* Mobile */
+@media (max-width: 767px) {
+    .winnerContainer {
+        width: 85vw;
+        padding: 20px 15px;
+        max-width: 100%;
+    }
+
+    .winnerContainer > h1 {
+        font-size: 18px;
+    }
+
+    .winnerContainer > button {
+        max-width: 150px;
+        font-size: 14px;
+        padding: 8px 16px;
+    }
 }

src/components/Gameboard/Map/Map.jsx

@@ -6,6 +6,7 @@ import positionMapCoords from '../positions';
 import pawnImages from '../../../constants/pawnImages';
 import canPawnMove from './canPawnMove';
 import getPositionAfterMove from './getPositionAfterMove';
+import styles from './Map.module.css';
 
 const Map = ({ pawns, nowMoving, rolledNumber }) => {
     const player = useContext(PlayerDataContext);
@@ -86,14 +87,16 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
     }, [hintPawn, pawns]);
 
     return (
-        <canvas
-            className='canvas-container'
-            width={460}
-            height={460}
-            ref={canvasRef}
-            onClick={handleCanvasClick}
-            onMouseMove={handleMouseMove}
-        />
+        <div className={styles.canvasContainer}>
+            <canvas
+                className={styles.canvas}
+                width={460}
+                height={460}
+                ref={canvasRef}
+                onClick={handleCanvasClick}
+                onMouseMove={handleMouseMove}
+            />
+        </div>
     );
 };
 export default Map;

src/components/Gameboard/Map/Map.module.css

@@ -0,0 +1,4 @@
+.canvasContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;\n    width: 100%;\n    height: 100%;\n    padding: 10px;\n    box-sizing: border-box;\n}\n\ncanvas.canvas {\n    border-radius: 15px;\n    border: 2px solid black;\n    width: 460px;\n    height: 460px;\n    max-width: 100%;\n    height: auto;\n    aspect-ratio: 1 / 1;\n    touch-action: none;\n}\n\n/* Tablet (768px - 1024px) */\n@media (max-width: 1024px) {\n    .canvasContainer {\n        padding: 8px;\n    }\n\n    canvas.canvas {\n        width: 400px;\n        max-width: 90vw;\n    }\n}\n\n/* Mobile (less than 768px) */\n@media (max-width: 767px) {\n    .canvasContainer {\n        padding: 5px;\n    }\n\n    canvas.canvas {\n        width: 90vw;\n        max-width: 460px;\n    }\n}\n\n/* Small Mobile (less than 480px) */\n@media (max-width: 479px) {\n    canvas.canvas {\n        width: 95vw;\n        max-width: 100%;\n    }\n}\n