<!--HTML--><style>
        .main_game {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 80vh;
            background-color: transparent;
            position: relative;
        }
        .board {
            display: grid;
            grid-template-columns: repeat(8, 80px);
            grid-template-rows: repeat(8, 80px);
            gap: 2px;
            background: url(https://i.pinimg.com/736x/46/ee/50/46ee50f177f6355e5627830b7364834e.jpg);
            padding: 10px;
            border-radius: 20px;
            position: relative;
        }
        .cell {
            width: 75px;
            height: 75px;
            border: 2px solid #fff;
            border-radius: 50%;
            position: relative;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
            background-color: white;
            margin: 4px;
            z-index: 1;
        }
        .cell:hover .popup {
            display: block;
        }
        .popup {
            display: none;
            position: absolute;
            top: -30px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 5px;
            border-radius: 5px;
            font-size: 12px;
            white-space: nowrap;
        }
        .token {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: red;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            color: white;
            text-align: center;
            overflow: hidden;
            z-index: 4;
        }
        .token img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
        .arrow {
            position: absolute;
            width: 5px;
            height: 30px;
            background-color: black;
            transform: translateX(-50%);
            z-index: 3;
        }
    </style>

<div class="main_game">
    <div class="board" id="board"></div>
    <script>
        const board = document.getElementById("board");
        const cells = [];
        const rows = 8;
        const cols = 8;
        
        for (let row = 0; row < rows; row++) {
            for (let col = 0; col < cols; col++) {
                let index;
                if (row % 2 === 0) {
                    index = (row * cols) + (cols - col - 1);
                } else {
                    index = (row * cols) + col;
                }
                
                const cell = document.createElement("div");
                cell.classList.add("cell");
                cell.dataset.index = index;

                if (index == 0) {cell.innerText = `СТАРТ`;}
            else {
                      if (index==63) {cell.innerText = `ФИНИШ`;}
                      else {cell.innerText = index + 1;}
                      } 
                
                const popup = document.createElement("div");
                popup.classList.add("popup");
                popup.innerText = `Клетка ${index+1}`;
                cell.appendChild(popup);
                
                board.appendChild(cell);
                cells.push(cell);
            }
        }
        
        function setCellInfo(cellIndex, info, styles) {
            const cell = document.querySelector(`.cell[data-index='${cellIndex}']`);
            if (cell) {
                cell.querySelector('.popup').innerText = info;
                cell.style.cssText = styles;
            }
        }
        
        const tokens = [];
        for (let i = 0; i < 4; i++) {
            let token = document.createElement("div");
            token.classList.add("token");
            document.body.appendChild(token);
            tokens.push(token);
        }

        function moveToken(tokenIndex, cellIndex) {
            const targetCell = document.querySelector(`.cell[data-index='${cellIndex}']`);
            if (targetCell) {
                const rect = targetCell.getBoundingClientRect();
                tokens[tokenIndex].style.left = `${rect.left + rect.width / 2 - 20}px`;
                tokens[tokenIndex].style.top = `${rect.top + rect.height / 2 - 20}px`;
            }
        }
        
        function styleToken(tokenIndex, text, imageUrl, bgColor, textColor) {
            const token = tokens[tokenIndex];
            token.innerHTML = text ? `<span>${text}</span>` : '';
            token.style.backgroundColor = bgColor || "red";
            token.style.color = textColor || "white";
            
            if (imageUrl) {
                const img = document.createElement("img");
                img.src = imageUrl;
                token.innerHTML = "";
                token.appendChild(img);
            }
        }
        
        function drawArrow(fromIndex, toIndex, color = "black", width = "5px") {
            const fromCell = document.querySelector(`.cell[data-index='${fromIndex}']`);
            const toCell = document.querySelector(`.cell[data-index='${toIndex}']`);
            
            if (fromCell && toCell) {
                const fromRect = fromCell.getBoundingClientRect();
                const toRect = toCell.getBoundingClientRect();
                
                const arrow = document.createElement("div");
                arrow.classList.add("arrow");
                arrow.style.left = `${fromRect.left + fromRect.width / 2}px`;
                arrow.style.top = `${fromRect.top + fromRect.height}px`;
                arrow.style.backgroundColor = color;
                arrow.style.width = width;
                
                document.body.appendChild(arrow);
            }


        }
        
        moveToken(0, 10);
        moveToken(1, 40);
        moveToken(2, 30);
        moveToken(3, 20);
        
        setCellInfo(0, "Стартовая", "background-color: lightblue; color: black;");
        setCellInfo(62, "Специальная зона", "background: url(https://i.imgur.com/OHNi59Q.png); color: black; border: 2px dashed white;");
        setCellInfo(59, "Специальная зона", "background: url(https://i.imgur.com/awRBaFH.png); color: black; border: 2px dashed white;");   
        setCellInfo(48, "Специальная зона", "background: url(https://i.imgur.com/FMWW8c1.png); color: black; border: 2px dashed white;"); 
        setCellInfo(43, "Специальная зона", "background: url(https://i.imgur.com/iHSQFAX.png); color: black; border: 2px dashed white;"); 
        setCellInfo(32, "Специальная зона", "background: url(https://i.imgur.com/semHvsZ.png); color: black; border: 2px dashed white;"); 
        setCellInfo(28, "Специальная зона", "background: url(https://i.imgur.com/e0o6XgD.png); color: black; border: 2px dashed white;"); 
        setCellInfo(24, "Специальная зона", "background: url(https://i.imgur.com/AYnsPHZ.png); color: black; border: 2px dashed white;"); 
        setCellInfo(20, "Специальная зона", "background: url(https://i.imgur.com/gu4oi8A.png); color: black; border: 2px dashed white;"); 
        setCellInfo(38, "Специальная зона", "background: url(https://i.imgur.com/Z4GHgvh.png); color: black; border: 2px dashed white;"); 
        setCellInfo(12, "Специальная зона", "background: url(https://i.imgur.com/IOYkqtL.png); color: black; border: 2px dashed white;"); 
        setCellInfo(5, "Специальная зона", "background: url(https://i.imgur.com/nx3Ivf6.png); color: black; border: 2px dashed white;"); 
        
        styleToken(0, "A", "", "blue", "white");
        styleToken(1, "B", "", "green", "black");
        styleToken(2, "", "https://i.imgur.com/JXdgjZ2.png", "", "");
        styleToken(3, "D", "https://i.imgur.com/3vJYqPi.png", "purple", "yellow");
        
        drawArrow(5, 16, "red", "7px");
        drawArrow(7, 8, "#efefef", "7px");
        drawArrow(15, 16, "#efefef", "7px");
        drawArrow(23, 24, "#efefef", "7px");
        drawArrow(31, 32, "#efefef", "7px");
        drawArrow(39, 40, "#efefef", "7px");
        drawArrow(47, 48, "#efefef", "7px");
        drawArrow(55, 56, "#efefef", "7px");
        drawArrow(16, 5, "blue", "3px");
    </script>
</div>