/* Custom styles for the game */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f0f2f5;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
            box-sizing: border-box;
        }

        .game-container {
            background-color: #ffffff;
            border-radius: 1rem; /* rounded-xl */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-xl */
            padding: 1.5rem; /* p-6 */
            max-width: 100%;
            width: fit-content; /* Adjust width to content */
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.5rem; /* gap-6 */
        }

        .difficulty-buttons button {
            transition: all 0.2s ease-in-out;
        }

        .difficulty-buttons button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .game-board {
            display: grid;
            border: 2px solid #cbd5e0; /* border-slate-300 */
            border-radius: 0.5rem; /* rounded-lg */
            overflow: hidden;
            width: fit-content; /* Ensure grid container fits its content */
            height: fit-content;
        }

        .cell {
            width: 32px; /* Fixed size for cells */
            height: 32px; /* Fixed size for cells */
            background-color: #e2e8f0; /* bg-slate-200 */
            border: 1px solid #cbd5e0; /* border-slate-300 */
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            font-size: 1.1rem;
            cursor: pointer;
            user-select: none;
            transition: background-color 0.1s ease-in-out;
            border-radius: 0.25rem; /* rounded-md */
        }

        .cell.revealed {
            background-color: #f8fafc; /* bg-slate-50 */
            cursor: default;
            border-color: #e2e8f0; /* border-slate-200 */
        }

        .cell.mine {
            background-color: #ef4444; /* bg-red-500 */
            color: white;
        }

        .cell.flagged {
            background-color: #3b82f6; /* bg-blue-500 */
            color: white;
        }

        /* Colors for numbers based on common Minesweeper patterns */
        .cell.num-1 { color: #1e40af; } /* blue-700 */
        .cell.num-2 { color: #16a34a; } /* green-600 */
        .cell.num-3 { color: #dc2626; } /* red-600 */
        .cell.num-4 { color: #6d28d9; } /* violet-700 */
        .cell.num-5 { color: #ea580c; } /* orange-600 */
        .cell.num-6 { color: #0f766e; } /* teal-700 */
        .cell.num-7 { color: #0c4a6e; } /* sky-800 */
        .cell.num-8 { color: #1a2e05; } /* neutral-900 */

        .message-box {
            min-height: 2.5rem; /* Ensure space for messages */
            text-align: center;
            font-weight: bold;
            color: #ef4444; /* text-red-500 */
        }

        .win-message {
            color: #22c55e; /* text-green-500 */
        }

        .game-info {
            display: flex;
            justify-content: space-between;
            width: 100%; /* Take full width of parent */
            padding: 0 1rem;
            box-sizing: border-box;
        }

        @media (max-width: 600px) {
            .cell {
                width: 28px;
                height: 28px;
                font-size: 1rem;
            }
            .game-container {
                padding: 1rem;
            }
            .difficulty-buttons {
                flex-direction: column;
            }
        }