<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Игра Минер</title>
    <style>
        /* Встроенные стили CSS */

        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f0f8ff;
        }

        h1 {
            text-align: center;
            color: #333;
        }

        /* Изображение в верхней части страницы */
        .banner {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }

        .banner img {
            max-width: 100%;
            height: auto;
        }

        /* Контейнер для профиля и игрового поля */
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 50px;
            margin-top: 30px;
        }

        /* Профиль пользователя */
        .profile {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 300px;
            padding: 20px;
            border: 2px solid #6497b1;
            border-radius: 10px;
            background-color: #fff;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-image: url('https://via.placeholder.com/100');
            background-size: cover;
            background-position: center;
            margin-bottom: 15px;
        }

        .nickname {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #333;
        }

        .info {
            width: 100%;
            margin-bottom: 15px;
            text-align: left;
        }

        .info span {
            display: block;
            font-size: 16px;
            color: #555;
            margin-bottom: 5px;
        }

        .info-value {
            font-size: 18px;
            font-weight: bold;
            color: #000;
        }

        /* Игровое поле */
        #game {
            display: grid;
            grid-template-columns: repeat(5, 80px);
            grid-template-rows: repeat(3, 80px);
            gap: 5px;
            justify-content: center;
        }

        .cell {
            width: 80px;
            height: 80px;
            background-color: #b3cde0;
            border: 2px solid #6497b1;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 24px;
            user-select: none;
            transition: background-color 0.3s, transform 0.1s;
            position: relative; /* Для размещения изображений */
        }

        .cell:hover {
            background-color: #a7bed3;
            transform: scale(1.05);
        }

        .cell.selected {
            background-color: #decbe4;
            cursor: default;
        }

        .cell.mine {
            background-color: #f77f00;
            color: #fff;
            font-weight: bold;
        }

        /* Изображение кристалла и мины */
        .cell .icon {
            width: 60px;
            height: 60px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .crystal {
            background-image: url('https://i.ibb.co/NxXLzhL/1008-00002.png'); /* Изображение кристалла */
        }

        .mine-icon {
            background-image: url('https://i.ibb.co/Q8cfYGp/1008-00003.png'); /* Изображение мины */
        }

        /* Стиль для подсветки текущего столбца */
        .current-column {
            background-color: #d0e1f9;
            border-color: #4a90e2;
        }

        /* Сообщения об окончании игры */
        .end-message {
            margin-top: 20px;
            font-size: 18px;
            color: #d9534f;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Игра Минер</h1>

    <!-- Верхняя картинка -->
    <div class="banner">
        <a href="https://ibb.co/SytNdkB">
            <img src="https://i.ibb.co/Bf9wXh7/1008-00005.png" alt="banner" border="0">
        </a>
    </div>

    <div class="container">
        <!-- Профиль пользователя -->
        <div class="profile">
            <div class="avatar"></div>
            <div class="nickname">Player1</div>
            <div class="info">
                <span>Попытки:</span>
                <div id="attempts" class="info-value">3</div>
            </div>
            <div class="info">
                <span>Баланс (текущая попытка):</span>
                <div id="currentBalance" class="info-value">0</div>
            </div>
            <div class="info">
                <span>Баланс на кошельке:</span>
                <div id="walletBalance" class="info-value">100</div>
            </div>
            <div id="endMessage" class="end-message"></div>
        </div>

        <!-- Игровое поле -->
        <div id="game">
            <!-- Клетки будут сгенерированы с помощью JavaScript -->
        </div>
    </div>

    <script>
        // Встроенный JavaScript

        const ROWS = 3;
        const COLS = 5;
        const MINE_COUNT = 3; // Количество мин на поле
        const MAX_ATTEMPTS = 3;

        let mines = new Set();
        let currentStep = 0;
        let attemptsLeft = MAX_ATTEMPTS;
        let walletBalance = 100;
        let currentBalance = 0;
        let gameActive = false;

        const gameContainer = document.getElementById('game');
        const attemptsDisplay = document.getElementById('attempts');
        const currentBalanceDisplay = document.getElementById('currentBalance');
        const walletBalanceDisplay = document.getElementById('walletBalance');
        const endMessage = document.getElementById('endMessage');

        // Создание игрового поля при загрузке страницы
        window.onload = function() {
            createGameField();
            initGame();
            // Инициализация отображения баланса и попыток
            attemptsDisplay.textContent = attemptsLeft;
            walletBalanceDisplay.textContent = walletBalance;
            currentBalanceDisplay.textContent = currentBalance;
        };

        // Функция для создания игрового поля
        function createGameField() {
            for (let i = 0; i < ROWS * COLS; i++) {
                const cell = document.createElement('div');
                cell.classList.add('cell');
                cell.dataset.index = i;
                cell.dataset.col = i % COLS; // Добавляем информацию о столбце
                cell.addEventListener('click', onCellClick);
                gameContainer.appendChild(cell);
            }
        }

        // Функция для инициализации нового раунда игры
        function initGame() {
            if (attemptsLeft <= 0) {
                endMessage.textContent = 'У вас закончились попытки. Игра окончена.';
                disableAllCells();
                return;
            }

            // Сброс состояния клеток
            resetCells();

            mines.clear();
            currentStep = 0;
            currentBalance = 0;
            currentBalanceDisplay.textContent = currentBalance;
            endMessage.textContent = '';
            gameActive = true;

            // Генерация мин
            while (mines.size < MINE_COUNT) {
                const minePosition = Math.floor(Math.random() * ROWS * COLS);
                mines.add(minePosition);
            }

            highlightCurrentColumn();
        }

        // Функция для сброса состояний клеток
        function resetCells() {
            const cells = document.querySelectorAll('.cell');
            cells.forEach(cell => {
                cell.classList.remove('selected', 'mine', 'current-column');
                cell.style.pointerEvents = 'auto'; // Включаем клики
                cell.style.cursor = 'pointer';
                cell.textContent = ''; // Очистка текста
                // Удаляем иконки, если есть
                const icon = cell.querySelector('.icon');
                if (icon) {
                    cell.removeChild(icon);
                }
            });
        }

        // Функция для подсветки текущего столбца
        function highlightCurrentColumn() {
            // Удаляем подсветку со всех столбцов
            const allCells = document.querySelectorAll('.cell');
            allCells.forEach(cell => {
                cell.classList.remove('current-column');
            });

            // Подсвечиваем клетки текущего столбца
            const cells = document.querySelectorAll(`.cell[data-col='${currentStep}']`);
            cells.forEach(cell => {
                if (!cell.classList.contains('selected') && !cell.classList.contains('mine')) {
                    cell.classList.add('current-column');
                }
            });
        }

        // Обработчик клика по клетке
        function onCellClick(e) {
            if (!gameActive) return;

            const index = parseInt(e.target.dataset.index, 10);
            const col = parseInt(e.target.dataset.col, 10);

            // Проверяем, что игрок выбирает клетку в правильном порядке
            if (col !== currentStep) {
                return; // Игнорируем выбор клетки, если это не текущий столбец
            }

            // Помечаем клетку как выбранную
            e.target.classList.add('selected');
            e.target.style.pointerEvents = 'none'; // Отключаем возможность клика
            e.target.style.cursor = 'default';
            e.target.classList.remove('current-column'); // Убираем подсветку

            // Создаём элемент для иконки
            const icon = document.createElement('div');
            icon.classList.add('icon');
            e.target.appendChild(icon);

            // Проверяем, есть ли мина
            if (mines.has(index)) {
                icon.classList.add('mine-icon');
                revealMines();
                processFailure();
            } else {
                icon.classList.add('crystal');
                currentBalance += 10; // Добавляем 10 к текущему балансу за безопасную клетку
                currentBalanceDisplay.textContent = currentBalance;
                currentStep++;
                if (currentStep === COLS) {
                    processSuccess();
                } else {
                    highlightCurrentColumn();
                }
            }
        }

        // Функция для отображения всех мин после поражения
        function revealMines() {
            mines.forEach((mineIndex) => {
                const mineCell = document.querySelector(`.cell[data-index='${mineIndex}']`);
                if (mineCell && !mineCell.classList.contains('mine')) {
                    mineCell.classList.add('mine');
                    mineCell.style.pointerEvents = 'none'; // Отключаем клики
                    mineCell.style.cursor = 'default';
                    // Добавляем иконку мины
                    const icon = document.createElement('div');
                    icon.classList.add('icon', 'mine-icon');
                    mineCell.appendChild(icon);
                }
            });
        }

        // Функция для отключения всех клеток (после выигрыша или поражения)
        function disableAllCells() {
            const cells = document.querySelectorAll('.cell');
            cells.forEach((cell) => {
                cell.style.pointerEvents = 'none';
                cell.style.cursor = 'default';
            });
        }

        // Функция обработки успешного прохождения игры
        function processSuccess() {
            currentBalanceDisplay.textContent = currentBalance;
            walletBalance += currentBalance;
            walletBalanceDisplay.textContent = walletBalance;
            disableAllCells();
            gameActive = false;
            endMessage.textContent = 'Поздравляем! Вы прошли поле. Игра начнётся заново через 3 секунды.';

            // Автоматический перезапуск игры через 3 секунды
            setTimeout(initGame, 3000);
        }

        // Функция обработки поражения
        function processFailure() {
            attemptsLeft--;
            attemptsDisplay.textContent = attemptsLeft;
            walletBalance -= 20; // Вычитаем 20 за поражение
            if (walletBalance < 0) walletBalance = 0;
            walletBalanceDisplay.textContent = walletBalance;
            disableAllCells();
            gameActive = false;

            if (attemptsLeft > 0) {
                endMessage.textContent = 'Вы наткнулись на мину! Игра начнётся заново через 3 секунды.';
                // Автоматический перезапуск игры через 3 секунды
                setTimeout(initGame, 3000);
            } else {
                endMessage.textContent = 'У вас закончились попытки. Игра прекращена.';
            }
        }
    </script>
</body>
</html> у меня есть такой код убери из него текст Игра Минер над картинкой так же замения цвет с розового на какой нибудь синий для клеток с кристаллами так же расположи это все компактно что бы было приятно смотреть а то сейчас это что то с чем то