<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Canvas Maze</title>
    <!-- Load Tailwind CSS for utility classes -->
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* Custom styles for the game (overriding Tailwind for canvas/aesthetics) */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

        body {
            font-family: 'Inter', sans-serif;
            background-color: #0d1117;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 1rem;
            color: #c9d1d9;
        }

        #game-container {
            width: 100%;
            max-width: 600px; /* Max width for desktop display */
            aspect-ratio: 1 / 1; /* Keep the container square */
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
            border-radius: 12px;
            overflow: hidden;
            background-color: #161b22;
        }

        #mazeCanvas {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 12px;
        }

        .control-button {
            @apply p-4 m-1 bg-gray-700 text-white font-bold rounded-xl shadow-lg transition duration-200 ease-in-out;
            @apply hover:bg-green-600 active:bg-green-700 active:scale-[.98];
            min-width: 70px;
            min-height: 70px;
            font-size: 1.5rem;
            touch-action: manipulation; /* Prevents default browser actions */
        }

        #mobile-controls {
            /* Hide controls on larger screens (desktop) */
            margin-top: 20px;
            @apply flex flex-col items-center mt-6 lg:hidden;
        }

         #mobile-controls #up-btn{
            margin-left: 75px;
         }

        #info-box {
            min-height: 4rem;
        }

        .win-message {
            @apply text-3xl font-extrabold text-teal-400 animate-pulse;
            text-shadow: 0 0 10px #2dd4bf;
        }
    </style>
</head>
<body>

    <h1 class="text-4xl font-bold mb-6 text-teal-300">Canvas Maze Runner</h1>

    <!-- Game Information and Status -->
    <div id="info-box" class="w-full max-w-sm text-center mb-4 p-2 rounded-lg bg-gray-800 shadow-xl">
        <p id="status-message" class="text-lg">Use arrow keys to start!</p>
    </div>

    <!-- Canvas Container -->
    <div id="game-container">
        <canvas id="mazeCanvas"></canvas>
    </div>

    <!-- Mobile Controls (Hidden on large screens, shown on small screens) -->
    <div id="mobile-controls">
        <button id="up-btn" class="control-button mb-2">▲</button>
        <div class="flex">
            <button id="left-btn" class="control-button mr-2">◀</button>
            <button id="down-btn" class="control-button ml-2">▼</button>
            <button id="right-btn" class="control-button ml-2">▶</button>
        </div>
    </div>

    <!-- Restart Button -->
    <button id="restart-btn" class="mt-6 px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-lg shadow-xl transition duration-200">
        Restart Game
    </button>

    <script>
        // --- Game Configuration ---
        const MAZE_WIDTH = 15;
        const MAZE_HEIGHT = 15;
        const WALL_COLOR = "#00ffff"; // Cyan
        const PATH_COLOR = "#161b22"; // Dark background
        const PLAYER_COLOR = "#f05650"; // Red
        const FINISH_COLOR = "#22c55e"; // Green

        // --- Canvas Setup ---
        const canvas = document.getElementById('mazeCanvas');
        const ctx = canvas.getContext('2d');
        const statusMessage = document.getElementById('status-message');

        // Game State
        let cellWidth, cellHeight;
        let maze = [];
        let playerX, playerY;
        let finishX, finishY;
        let gameRunning = false;

        // --- Maze Data Structure ---
        class Cell {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.visited = false;
                // Walls: [Top, Right, Bottom, Left]
                this.walls = [true, true, true, true];
            }
        }

        // --- Maze Generation Logic (Recursive Backtracker) ---
        function initializeMaze() {
            maze = [];
            for (let y = 0; y < MAZE_HEIGHT; y++) {
                const row = [];
                for (let x = 0; x < MAZE_WIDTH; x++) {
                    row.push(new Cell(x, y));
                }
                maze.push(row);
            }
            playerX = 0;
            playerY = 0;
            finishX = MAZE_WIDTH - 1;
            finishY = MAZE_HEIGHT - 1;
        }

        function generateMaze() {
            // Start at (0, 0)
            const stack = [];
            let current = maze[0][0];
            current.visited = true;
            stack.push(current);

            while (stack.length > 0) {
                const unvisitedNeighbors = getUnvisitedNeighbors(current);

                if (unvisitedNeighbors.length > 0) {
                    // 1. Choose a random unvisited neighbor
                    const next = unvisitedNeighbors[Math.floor(Math.random() * unvisitedNeighbors.length)];

                    // 2. Remove the wall between current and next
                    removeWall(current, next);

                    // 3. Push current to stack and make next the current
                    stack.push(next);
                    current = next;
                    current.visited = true;
                } else {
                    // Backtrack
                    current = stack.pop();
                }
            }
        }

        function getUnvisitedNeighbors(cell) {
            const neighbors = [];
            const { x, y } = cell;

            // Directions: [dx, dy, wallIndex]
            const directions = [
                [0, -1, 0], // Top
                [1, 0, 1],  // Right
                [0, 1, 2],  // Bottom
                [-1, 0, 3]  // Left
            ];

            for (const [dx, dy] of directions) {
                const nx = x + dx;
                const ny = y + dy;

                if (nx >= 0 && nx < MAZE_WIDTH && ny >= 0 && ny < MAZE_HEIGHT) {
                    const neighbor = maze[ny][nx];
                    if (!neighbor.visited) {
                        neighbors.push(neighbor);
                    }
                }
            }
            return neighbors;
        }

        function removeWall(current, next) {
            const dx = current.x - next.x;
            const dy = current.y - next.y;

            if (dx === 1) { // Current is to the right of Next (Move Left)
                current.walls[3] = false; // Current's Left wall
                next.walls[1] = false;    // Next's Right wall
            } else if (dx === -1) { // Current is to the left of Next (Move Right)
                current.walls[1] = false; // Current's Right wall
                next.walls[3] = false;    // Next's Left wall
            } else if (dy === 1) { // Current is below Next (Move Up)
                current.walls[0] = false; // Current's Top wall
                next.walls[2] = false;    // Next's Bottom wall
            } else if (dy === -1) { // Current is above Next (Move Down)
                current.walls[2] = false; // Current's Bottom wall
                next.walls[0] = false;    // Next's Top wall
            }
        }

        // --- Drawing Logic ---
        function draw() {
            if (!gameRunning) return;

            // Clear the canvas
            ctx.fillStyle = PATH_COLOR;
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // Calculate cell dimensions
            const canvasWidth = canvas.width;
            const canvasHeight = canvas.height;
            cellWidth = canvasWidth / MAZE_WIDTH;
            cellHeight = canvasHeight / MAZE_HEIGHT;

            // Wall thickness
            const wallThickness = 2;
            ctx.lineWidth = wallThickness;
            ctx.strokeStyle = WALL_COLOR;

            // 1. Draw the walls
            for (let y = 0; y < MAZE_HEIGHT; y++) {
                for (let x = 0; x < MAZE_WIDTH; x++) {
                    const cell = maze[y][x];
                    const xStart = x * cellWidth;
                    const yStart = y * cellHeight;

                    // Top Wall
                    if (cell.walls[0] && y > 0) {
                        ctx.beginPath();
                        ctx.moveTo(xStart, yStart);
                        ctx.lineTo(xStart + cellWidth, yStart);
                        ctx.stroke();
                    }

                    // Right Wall
                    if (cell.walls[1] && x < MAZE_WIDTH - 1) {
                        ctx.beginPath();
                        ctx.moveTo(xStart + cellWidth, yStart);
                        ctx.lineTo(xStart + cellWidth, yStart + cellHeight);
                        ctx.stroke();
                    }

                    // Bottom Wall
                    if (cell.walls[2] && y < MAZE_HEIGHT - 1) {
                        ctx.beginPath();
                        ctx.moveTo(xStart, yStart + cellHeight);
                        ctx.lineTo(xStart + cellWidth, yStart + cellHeight);
                        ctx.stroke();
                    }

                    // Left Wall
                    if (cell.walls[3] && x > 0) {
                        ctx.beginPath();
                        ctx.moveTo(xStart, yStart);
                        ctx.lineTo(xStart, yStart + cellHeight);
                        ctx.stroke();
                    }
                }
            }

            // Draw the outer boundary (must be done last so it isn't overlapped by inner walls)
            ctx.strokeStyle = WALL_COLOR;
            ctx.lineWidth = 4; // Thicker border
            ctx.strokeRect(0, 0, canvasWidth, canvasHeight);

            // Open the Start (0, 0, top wall) and End (MAZE_WIDTH-1, MAZE_HEIGHT-1, bottom wall)
            // Start: Top wall of cell (0, 0)
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(cellWidth * 0.5, 0); // Leave a small opening
            ctx.strokeStyle = WALL_COLOR; // Ensure it's still the wall color
            ctx.stroke();
            // End: Bottom wall of cell (finishX, finishY)
            ctx.beginPath();
            ctx.moveTo(finishX * cellWidth + cellWidth * 0.5, canvasHeight);
            ctx.lineTo(canvasWidth, canvasHeight);
            ctx.strokeStyle = WALL_COLOR;
            ctx.stroke();


            // 2. Draw Finish Area
            ctx.fillStyle = FINISH_COLOR + "44"; // Translucent green
            ctx.fillRect(finishX * cellWidth, finishY * cellHeight, cellWidth, cellHeight);
            ctx.fillStyle = FINISH_COLOR;
            ctx.font = `${cellWidth * 0.5}px Arial`;
            ctx.textAlign = 'center';
            ctx.fillText('FIN', finishX * cellWidth + cellWidth / 2, finishY * cellHeight + cellHeight / 2 + cellHeight * 0.1);


            // 3. Draw Player
            ctx.fillStyle = PLAYER_COLOR;
            const playerRadius = Math.min(cellWidth, cellHeight) * 0.3;
            const playerCenter = {
                x: playerX * cellWidth + cellWidth / 2,
                y: playerY * cellHeight + cellHeight / 2
            };
            ctx.beginPath();
            ctx.arc(playerCenter.x, playerCenter.y, playerRadius, 0, 2 * Math.PI);
            ctx.fill();

            // Check for win
            if (playerX === finishX && playerY === finishY) {
                winGame();
            }
        }

        // --- Game Flow and Movement ---

        function movePlayer(dx, dy) {
            if (!gameRunning) return;

            const newX = playerX + dx;
            const newY = playerY + dy;

            // Check boundaries
            if (newX < 0 || newX >= MAZE_WIDTH || newY < 0 || newY >= MAZE_HEIGHT) {
                // Special case: check for start and end portals
                if (dx === 0 && dy === -1 && playerX === 0 && playerY === 0) {
                    // Moving out of the start portal
                    playerY = -1; // Move player out
                    gameRunning = false; // Player has won/started
                    setTimeout(() => { // Move back in
                        playerY = 0;
                        gameRunning = true;
                        draw();
                    }, 50);
                    return;
                }
                if (dx === 0 && dy === 1 && playerX === finishX && playerY === finishY) {
                    // Moving into the end portal
                    winGame();
                    return;
                }
                return;
            }

            const currentCell = maze[playerY][playerX];
            let wallIndex = -1;

            if (dx === 1) wallIndex = 1; // Moving Right, check Right wall
            else if (dx === -1) wallIndex = 3; // Moving Left, check Left wall
            else if (dy === 1) wallIndex = 2; // Moving Down, check Bottom wall
            else if (dy === -1) wallIndex = 0; // Moving Up, check Top wall

            // Check for wall collision
            if (currentCell.walls[wallIndex] === false) {
                playerX = newX;
                playerY = newY;
                draw();
            }
        }

        function winGame() {
            gameRunning = false;
            statusMessage.innerHTML = '<span class="win-message">YOU WON!</span>';
        }

        function startGame() {
            if (gameRunning) return;
            gameRunning = true;
            initializeMaze();
            generateMaze();
            statusMessage.textContent = 'Find the green "FIN" box.';
            draw();
        }

        function restartGame() {
            gameRunning = false;
            statusMessage.textContent = 'Use arrow keys to start!';
            startGame();
        }

        // --- Input Handlers ---

        // 1. Keyboard Controls
        document.addEventListener('keydown', (e) => {
            if (!gameRunning && ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
                startGame();
            }
            if (!gameRunning) return;

            switch (e.key) {
                case 'ArrowUp':
                    movePlayer(0, -1);
                    break;
                case 'ArrowDown':
                    movePlayer(0, 1);
                    break;
                case 'ArrowLeft':
                    movePlayer(-1, 0);
                    break;
                case 'ArrowRight':
                    movePlayer(1, 0);
                    break;
            }
        });

        // 2. Mobile Button Controls
        document.getElementById('up-btn').addEventListener('click', () => {
            if (!gameRunning) startGame();
            movePlayer(0, -1);
        });
        document.getElementById('down-btn').addEventListener('click', () => {
            if (!gameRunning) startGame();
            movePlayer(0, 1);
        });
        document.getElementById('left-btn').addEventListener('click', () => {
            if (!gameRunning) startGame();
            movePlayer(-1, 0);
        });
        document.getElementById('right-btn').addEventListener('click', () => {
            if (!gameRunning) startGame();
            movePlayer(1, 0);
        });

        // 3. Restart Button
        document.getElementById('restart-btn').addEventListener('click', restartGame);


        // --- Responsiveness and Initialization ---

        function resizeCanvas() {
            const container = document.getElementById('game-container');
            // Ensure the canvas is perfectly square and fills the container
            const size = Math.min(container.clientWidth, container.clientHeight);
            canvas.width = size;
            canvas.height = size;
            draw(); // Redraw the maze and player in the new size
        }

        // Initial setup and event listeners
        window.addEventListener('load', () => {
            // First resize to set the canvas size
            resizeCanvas();
            // Initialize the game state
            initializeMaze();
            // Start the game, generating the first maze
            startGame();
        });

        window.addEventListener('resize', resizeCanvas);

    </script>
</body>
</html>