fix this with a correct cube wrapping or you can make it the same and instead keep track of last snake direction to decide where it ends up either way I want the snakes navigation on the cube to be consistent: <!DOCTYPE html>
<html>
<head>
    <title>3D Snake Game on a Cube</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #333;
        }

        #cube-container {
            position: absolute;
            width: 80vmin;
            height: 80vmin;
            top: 50%;
            left: 50%;
            margin-top: -40vmin;
            margin-left: -40vmin;
            transform-style: preserve-3d;
            perspective: 800px;
        }

        #cube {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s;
        }

        .face {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.2);
            box-sizing: border-box;
        }

        .front  { transform: translateZ(40vmin); }
        .back   { transform: rotateY(180deg) translateZ(40vmin); }
        .right  { transform: rotateY(90deg) translateZ(40vmin); }
        .left   { transform: rotateY(-90deg) translateZ(40vmin); }
        .top    { transform: rotateX(90deg) translateZ(40vmin); }
        .bottom { transform: rotateX(-90deg) translateZ(40vmin); }

        .cell {
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-sizing: border-box;
            position: relative;
        }

        .cell::after {
            content: '';
            display: block;
            padding-top: 100%; /* Makes cells square */
        }

        /* Styles for snake and apple */
        .snake {
            background-color: green;
        }

        .apple {
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="cube-container">
        <div id="cube">
            <div class="face front"></div>
            <div class="face back"></div>
            <div class="face right"></div>
            <div class="face left"></div>
            <div class="face top"></div>
            <div class="face bottom"></div>
        </div>
    </div>

    <script>
        window.onload = function() {
            const faces = ['front', 'back', 'right', 'left', 'top', 'bottom'];
            const cubeFaces = {};
            faces.forEach(faceName => {
                cubeFaces[faceName] = document.querySelector(`.${faceName}`);
                createGrid(cubeFaces[faceName]);
            });

            function createGrid(faceElement) {
                faceElement.style.display = 'grid';
                faceElement.style.gridTemplateRows = 'repeat(10, 1fr)';
                faceElement.style.gridTemplateColumns = 'repeat(10, 1fr)';
                for (let row = 0; row < 10; row++) {
                    for (let col = 0; col < 10; col++) {
                        let cell = document.createElement('div');
                        cell.classList.add('cell');
                        cell.dataset.row = row;
                        cell.dataset.col = col;
                        faceElement.appendChild(cell);
                    }
                }
            }

            let game = {
                snake: [],
                direction: null,
                apple: null,
                isRunning: false,
                cubeFaces: cubeFaces
            };

            let gameLoop;

            document.addEventListener('keydown', function(e) {
                if (!game.isRunning && e.code === 'Space') {
                    startGame();
                } else if (game.isRunning) {
                    switch(e.key) {
                        case 'w':
                            setDirection('up');
                            break;
                        case 's':
                            setDirection('down');
                            break;
                        case 'a':
                            setDirection('left');
                            break;
                        case 'd':
                            setDirection('right');
                            break;
                    }
                }
            });

            function startGame() {
                game.isRunning = true;
                game.snake = [];
                game.direction = getRandomDirection();
                game.snake.push({face: 'front', row: 5, col: 5}); // Start at center of front face
                placeApple();
                updateView();
                gameLoop = setInterval(updateGame, 300); // Update every 300ms
            }

            function getRandomDirection() {
                const directions = ['up', 'down', 'left', 'right'];
                return directions[Math.floor(Math.random() * directions.length)];
            }

            function setDirection(dir) {
                const oppositeDirections = {
                    'up': 'down',
                    'down': 'up',
                    'left': 'right',
                    'right': 'left'
                };
                // Prevent snake from going back into itself
                if (game.direction !== oppositeDirections[dir]) {
                    game.direction = dir;
                }
            }

            function placeApple() {
                let faceNames = ['front', 'back', 'left', 'right', 'top', 'bottom'];
                let validCell = false;
                while (!validCell) {
                    let randomFace = faceNames[Math.floor(Math.random() * faceNames.length)];
                    let row = Math.floor(Math.random() * 10);
                    let col = Math.floor(Math.random() * 10);
                    let occupied = game.snake.some(segment => segment.face === randomFace && segment.row === row && segment.col === col);
                    if (!occupied) {
                        game.apple = {face: randomFace, row: row, col: col};
                        validCell = true;
                    }
                }
            }

            function updateGame() {
                // Move snake
                let head = game.snake[0];
                let newHead = {...head};
                switch(game.direction) {
                    case 'up':
                        newHead.row -= 1;
                        break;
                    case 'down':
                        newHead.row += 1;
                        break;
                    case 'left':
                        newHead.col -= 1;
                        break;
                    case 'right':
                        newHead.col += 1;
                        break;
                }
                // Handle wrapping around the cube faces
                newHead = wrapPosition(newHead, game.direction);

                // Check for collisions
                if (isCollision(newHead)) {
                    gameOver();
                    return;
                }

                game.snake.unshift(newHead); // Add new head

                // Check for apple
                if (newHead.face === game.apple.face && newHead.row === game.apple.row && newHead.col === game.apple.col) {
                    placeApple(); // Eat apple and place a new one
                } else {
                    game.snake.pop(); // Remove tail
                }

                updateView();
            }

            function wrapPosition(pos, direction) {
                let face = pos.face;
                let row = pos.row;
                let col = pos.col;

                // Handle wrapping to adjacent faces
                if (row < 0) {
                    // Move to adjacent face
                    switch(face) {
                        case 'front':
                            face = 'top';
                            row = 9;
                            break;
                        case 'back':
                            face = 'top';
                            row = 9;
                            break;
                        case 'top':
                            face = 'back';
                            row = 9;
                            break;
                        case 'bottom':
                            face = 'front';
                            row = 0;
                            break;
                        case 'left':
                            face = 'top';
                            row = 9;
                            break;
                        case 'right':
                            face = 'top';
                            row = 9;
                            break;
                    }
                } else if (row > 9) {
                    switch(face) {
                        case 'front':
                            face = 'bottom';
                            row = 0;
                            break;
                        case 'back':
                            face = 'bottom';
                            row = 0;
                            break;
                        case 'top':
                            face = 'front';
                            row = 0;
                            break;
                        case 'bottom':
                            face = 'back';
                            row = 0;
                            break;
                        case 'left':
                            face = 'bottom';
                            row = 0;
                            break;
                        case 'right':
                            face = 'bottom';
                            row = 0;
                            break;
                    }
                } else if (col < 0) {
                    switch(face) {
                        case 'front':
                            face = 'left';
                            col = 9;
                            break;
                        case 'back':
                            face = 'right';
                            col = 9;
                            break;
                        case 'left':
                            face = 'back';
                            col = 9;
                            break;
                        case 'right':
                            face = 'front';
                            col = 9;
                            break;
                        case 'top':
                            face = 'left';
                            col = row;
                            row = 0;
                            break;
                        case 'bottom':
                            face = 'left';
                            col = 9 - row;
                            row = 9;
                            break;
                    }
                } else if (col > 9) {
                    switch(face) {
                        case 'front':
                            face = 'right';
                            col = 0;
                            break;
                        case 'back':
                            face = 'left';
                            col = 0;
                            break;
                        case 'left':
                            face = 'front';
                            col = 0;
                            break;
                        case 'right':
                            face = 'back';
                            col = 0;
                            break;
                        case 'top':
                            face = 'right';
                            col = 9 - row;
                            row = 0;
                            break;
                        case 'bottom':
                            face = 'right';
                            col = row;
                            row = 9;
                            break;
                    }
                }

                return {face: face, row: row, col: col};
            }

            function isCollision(pos) {
                // Check if collides with self
                for (let i = 0; i < game.snake.length; i++) {
                    let segment = game.snake[i];
                    if (pos.face === segment.face && pos.row === segment.row && pos.col === segment.col) {
                        return true;
                    }
                }
                return false;
            }

            function gameOver() {
                clearInterval(gameLoop);
                game.isRunning = false;
                alert('Game Over! Press Space to Restart.');
            }

            function updateView() {
                // Clear all cells
                document.querySelectorAll('.cell').forEach(cell => {
                    cell.classList.remove('snake', 'apple');
                });
                // Draw snake
                game.snake.forEach(segment => {
                    let faceElement = game.cubeFaces[segment.face];
                    let cell = faceElement.querySelector(`.cell[data-row='${segment.row}'][data-col='${segment.col}']`);
                    if (cell) {
                        cell.classList.add('snake');
                    }
                });
                // Draw apple
                let appleFace = game.cubeFaces[game.apple.face];
                let appleCell = appleFace.querySelector(`.cell[data-row='${game.apple.row}'][data-col='${game.apple.col}']`);
                if (appleCell) {
                    appleCell.classList.add('apple');
                }
                // Rotate cube to show the face with the snake's head
                rotateCubeToFace(game.snake[0].face);
            }

            function rotateCubeToFace(faceName) {
                let rotations = {
                    'front': 'rotateX(0deg) rotateY(0deg)',
                    'back': 'rotateX(0deg) rotateY(180deg)',
                    'right': 'rotateX(0deg) rotateY(-90deg)',
                    'left': 'rotateX(0deg) rotateY(90deg)',
                    'top': 'rotateX(90deg) rotateY(0deg)',
                    'bottom': 'rotateX(-90deg) rotateY(0deg)'
                };
                let cube = document.getElementById('cube');
                cube.style.transform = rotations[faceName];
            }
        }
    </script>
</body>
</html>