<style>
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

        .board-container {
            position: relative;
            width: 906px;
            height: 626px;
            background-image: url('https://forumstatic.ru/files/001c/1b/ec/87144.png');
            background-size: cover;
            margin: 0 auto; /* Центрирование изображения */
            z-index: 0; /* Убедимся, что фон ниже ячеек */
        }

        .cell {
            position: absolute;
            background-color: rgba(140, 156, 124, 0.5); /* Полупрозрачные ячейки */
            border: 1px solid #00000033; /* Легкая рамка */
            transform-style: preserve-3d;
            transition: transform 0.3s ease-in-out; /* Плавный переход */
            z-index: 1; /* Убедимся, что ячейки выше фона */
        }

        .visited {
            background-color: rgba(220, 199, 224, 0.7); /* Закрашивание при посещении */
        }

    #rollDiceButton, #doneButton {
        margin-top: 20px;
        padding: 10px;
        font-size: 16px;
        border: none;
        border-radius: 10px;
        font-family: 'Montserrat', sans-serif;
        cursor: pointer;
        background-color: #8b9d7c;
        color: white;
        display: flex;
        margin: 25px auto;
    }

 #rollDiceButton:hover, #doneButton:hover {
            background-color: #008ecc;
        }

    #message {
    margin: 20px auto;
    font-size: 13px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: 'Montserrat', sans-serif;
    width: 400px;
    text-align: center;
    font-style: italic;
    }
</style>

<script>
        document.addEventListener("DOMContentLoaded", function() {
            const totalCells = 30;
            let currentCell = 0;
            let taskInProgress = false;

            const tasks = [
"в течение 5 дней выкладывать по одному фото персонажа в фансеть",
"составить список любимых песен 2024 в теме плейлиста",
"написать небольшую рецензию на любой фильм 2024 года в теме киномании",
"написать 1 пост снс",
"написать 3 поста снс",
"отправить в снс селфи своего персонажа",
"отправить в снс голосовое сообщение",
"отправить в снс кружочек",
"оставь 50 сообщений",
"оставь 100 сообщений",
"поставить 300 плюсов",
"поставить 500 плюсов",
"поставить 50 плюсов с комментарием (с вас пять тыщ за плюс)",
"поставить 50 плюсов с комментарием (что-то срочно надо выдумать такое)",
"поставить 50 плюсов с комментарием (привет, я подсяду?)",
"на 5 дней переодеть профиль в цвет дизайна",
"поучаствовать в любом другом конкурсе",
"написать небольшие рецензии на 5 эпизодов любых игроков",
"порекомендуй фильм, который связан с социальными сетями",
"поставь 25 плюсов к любым постам с комментарием (это мощь)",
"подари любой элемент графики (аватар, гиф, подпись) другому игроку в подарочной теме",
"используй в 20 сообщениях во флуде подходящие эмодзи",
"спросить у 5 людей во флуде (ты зуммер или миллениал?)",
"расскажи всем во флуде, кто твой главный краш",
"расскажи всем, ты чечик, масик, тюбик, штрих или скуф",
"написать 10 мемных фраз 2024 года",
"написать 15 мемных фраз 2024 года",
"будь онлайн 2 часа",
"делай комплименты в 5 сообщениях во флуде любым игрокам",
"выложи любые 3 мема в специальной теме",
"выложи мем, в котором есть любая трендовая фраза из инстаграма/тиктока",
"выложить мем со своей внешностью в специальной теме",
"заказать привет любому игроку через банк",
"сделай 20 реклам",
"сделай 30 реклам",
"сделай 10 реклам",
"написать один пост",
"пользоваться любой техникой в посте",
"использовать в посте фразу (оплата у психолога не прошла)",
"писать сообщение кому-то в посте",
"сделать селфи в посте",
"использовать название крупной корпорации в посте",
"выложить 3 заявки в тему (хочу видеть) с хайповыми внешностями",
"купить стикер в форумную коллекцию",
"тегнуть во флуде 3 разных человека и обменяться с ним минимум 1 соо",
"оставить 10 сообщений во флуде с маской известного ютубера",
"надеть гиф/аву, где персонаж в очках и проходить так 3 дня"

            ];

            const cellPositions = [
                { top: '234px', left: '700px', width: '50px', height: '45px', rotation: '338deg', skewX: '29deg', skewY: '2deg', rotateX: '170deg', rotateY: '5deg' },
                { top: '263px', left: '649px', width: '50px', height: '45px', rotation: '338deg', skewX: '29deg', skewY: '2deg', rotateX: '170deg', rotateY: '5deg' },
                { top: '309px', left: '688px', width: '50px', height: '45px', rotation: '338deg', skewX: '29deg', skewY: '2deg', rotateX: '170deg', rotateY: '5deg' },
                { top: '328px', left: '638px', width: '50px', height: '45px', rotation: '338deg', skewX: '29deg', skewY: '2deg', rotateX: '170deg', rotateY: '5deg' },
                { top: '347px', left: '589px', width: '50px', height: '45px', rotation: '338deg', skewX: '29deg', skewY: '2deg', rotateX: '170deg', rotateY: '5deg' },
                { top: '366px', left: '539px', width: '50px', height: '45px', rotation: '338deg', skewX: '29deg', skewY: '2deg', rotateX: '170deg', rotateY: '5deg' },
                { top: '385px', left: '489px', width: '50px', height: '45px', rotation: '338deg', skewX: '29deg', skewY: '2deg', rotateX: '170deg', rotateY: '5deg' },
                { top: '405px', left: '439px', width: '50px', height: '45px', rotation: '338deg', skewX: '29deg', skewY: '2deg', rotateX: '170deg', rotateY: '5deg' },
                { top: '425px', left: '389px', width: '50px', height: '45px', rotation: '338deg', skewX: '29deg', skewY: '2deg', rotateX: '170deg', rotateY: '5deg' },
                { top: '445px', left: '339px', width: '50px', height: '45px', rotation: '338deg', skewX: '29deg', skewY: '2deg', rotateX: '170deg', rotateY: '5deg' },
                { top: '464px', left: '289px', width: '50px', height: '45px', rotation: '338deg', skewX: '29deg', skewY: '2deg', rotateX: '170deg', rotateY: '5deg' },
                { top: '483px', left: '239px', width: '50px', height: '45px', rotation: '338deg', skewX: '29deg', skewY: '2deg', rotateX: '170deg', rotateY: '5deg' },
                { top: '221px', left: '165px', width: '50px', height: '45px', rotation: '338deg', skewX: '29deg', skewY: '2deg', rotateX: '170deg', rotateY: '5deg' },
                { top: '202px', left: '216px', width: '50px', height: '45px', rotation: '338deg', skewX: '29deg', skewY: '2deg', rotateX: '170deg', rotateY: '5deg' },
                { top: '183px', left: '267px', width: '50px', height: '45px', rotation: '338deg', skewX: '29deg', skewY: '2deg', rotateX: '170deg', rotateY: '5deg' },
                { top: '163px', left: '316px', width: '50px', height: '45px', rotation: '338deg', skewX: '29deg', skewY: '2deg', rotateX: '170deg', rotateY: '5deg' },
                { top: '144px', left: '366px', width: '50px', height: '45px', rotation: '338deg', skewX: '29deg', skewY: '2deg', rotateX: '170deg', rotateY: '5deg' },
                { top: '124px', left: '416px', width: '50px', height: '45px', rotation: '338deg', skewX: '29deg', skewY: '2deg', rotateX: '170deg', rotateY: '5deg' },
                { top: '223px', left: '463px', width: '50px', height: '45px', rotation: '338deg', skewX: '29deg', skewY: '2deg', rotateX: '170deg', rotateY: '5deg' },
                { top: '204px', left: '513px', width: '50px', height: '45px', rotation: '338deg', skewX: '29deg', skewY: '2deg', rotateX: '170deg', rotateY: '5deg' },
                { top: '185px', left: '563px', width: '50px', height: '45px', rotation: '338deg', skewX: '29deg', skewY: '2deg', rotateX: '170deg', rotateY: '5deg' },
                { top: '166px', left: '613px', width: '50px', height: '45px', rotation: '338deg', skewX: '29deg', skewY: '2deg', rotateX: '170deg', rotateY: '5deg' },
                { top: '147px', left: '663px', width: '50px', height: '45px', rotation: '338deg', skewX: '29deg', skewY: '2deg', rotateX: '170deg', rotateY: '5deg' },
                { top: '128px', left: '714px', width: '50px', height: '45px', rotation: '338deg', skewX: '29deg', skewY: '2deg', rotateX: '170deg', rotateY: '5deg' },
                { top: '108px', left: '763px', width: '50px', height: '45px', rotation: '338deg', skewX: '29deg', skewY: '2deg', rotateX: '170deg', rotateY: '5deg' },
                { top: '492px', left: '752px', width: '50px', height: '45px', rotation: '338deg', skewX: '29deg', skewY: '2deg', rotateX: '170deg', rotateY: '5deg' },
                { top: '457px', left: '711px', width: '50px', height: '45px', rotation: '338deg', skewX: '29deg', skewY: '2deg', rotateX: '170deg', rotateY: '5deg' },
                { top: '476px', left: '661px', width: '50px', height: '45px', rotation: '338deg', skewX: '29deg', skewY: '2deg', rotateX: '170deg', rotateY: '5deg' },
                { top: '495px', left: '610px', width: '50px', height: '45px', rotation: '338deg', skewX: '29deg', skewY: '2deg', rotateX: '170deg', rotateY: '5deg' },
                { top: '460px', left: '568px', width: '50px', height: '45px', rotation: '338deg', skewX: '29deg', skewY: '2deg', rotateX: '170deg', rotateY: '5deg' }
            ];

 function loadProgress() {
                const savedCells = localStorage.getItem('visitedCells');
                if (savedCells) {
                    const cells = JSON.parse(savedCells);
                    const allCells = document.querySelectorAll(".cell");
                    cells.forEach(index => {
                        if (index >= 0 && index < allCells.length) {
                            allCells[index].classList.add("visited");
                        }
                    });
                }
                const savedCurrentCell = localStorage.getItem('currentCell');
                if (savedCurrentCell) {
                    currentCell = parseInt(savedCurrentCell, 10);
                }
            }

            function saveProgress() {
                const visitedCells = Array.from(document.querySelectorAll(".cell.visited")).map((cell, index) => Array.from(cell.parentElement.children).indexOf(cell));
                localStorage.setItem('visitedCells', JSON.stringify(visitedCells));
                localStorage.setItem('currentCell', currentCell);
            }

            function createBoard() {
                const board = document.getElementById("board");
                for (let i = 0; i < totalCells; i++) {
                    const cell = document.createElement("div");
                    cell.classList.add("cell");

                    const pos = cellPositions[i % cellPositions.length];
                    cell.style.top = pos.top;
                    cell.style.left = pos.left;
                    cell.style.width = pos.width;
                    cell.style.height = pos.height;
                    cell.style.transform = `
                        rotate(${pos.rotation}) 
                        skew(${pos.skewX}, ${pos.skewY}) 
                        rotateX(${pos.rotateX}) 
                        rotateY(${pos.rotateY})
                    `;

                    board.appendChild(cell);
                }
                loadProgress();
            }

            function getRandomTask() {
                return tasks[Math.floor(Math.random() * tasks.length)];
            }

            function updateBoard() {
                const cells = document.querySelectorAll(".cell");
                if (currentCell < totalCells) {
                    cells[currentCell].classList.add("visited");
                    saveProgress();
                }
            }

            function rollDice() {
                if (taskInProgress) {
                    alert("Завершите текущее задание!");
                    return;
                }
                taskInProgress = true;
                const message = document.getElementById("message");
                if (currentCell < totalCells) {
                    message.textContent = "Задание: " + getRandomTask();
                    document.getElementById("doneButton").style.display = "block";
                } else {
                    message.textContent = "Все задания выполнены!";
                }
            }

            function taskCompleted() {
                if (currentCell < totalCells) {
                    taskInProgress = false;
                    document.getElementById("doneButton").style.display = "none";
                    updateBoard();
                    currentCell++;
                    saveProgress();
                } else {
                    alert("Все задания уже выполнены!");
                }
            }

            document.getElementById("rollDiceButton").addEventListener("click", rollDice);
            document.getElementById("doneButton").addEventListener("click", taskCompleted);
            createBoard();
        });

</script>