

<!DOCTYPE html>
<html>
<head>
    <title>Chicken Road 2 - PHP Version</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f0f0f0;
        }
        .game-container {
            width: 800px;
            height: 600px;
            margin: 0 auto;
            position: relative;
            background-color: #4CAF50;
            overflow: hidden;
            border: 3px solid #333;
        }
        .road {
            position: absolute;
            width: 100%;
            height: 60px;
            background-color: #555;
            top: 120px;
        }
        .road:nth-child(2) { top: 200px; }
        .road:nth-child(3) { top: 280px; }
        .road:nth-child(4) { top: 360px; }
        .road:nth-child(5) { top: 440px; }
        .lane-mark {
            position: absolute;
            width: 40px;
            height: 10px;
            background-color: yellow;
            top: 25px;
        }
        .vehicle {
            position: absolute;
            height: 40px;
            background-color: #47b5d3;
            border-radius: 5px;
        }
        .chicken {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: yellow;
            border-radius: 50%;
            left: 375px;
            bottom: 20px;
            transition: bottom 0.3s;
        }
        .chicken::before {
            content: '';
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: red;
            border-radius: 50%;
            top: 10px;
            left: 20px;
        }
        .controls {
            margin: 20px;
        }
        button {
            padding: 10px 20px;
            margin: 5px;
            font-size: 16px;
            cursor: pointer;
        }
        .game-info {
            margin: 20px;
            font-size: 18px;
        }
        .game-over {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0,0,0,0.8);
            color: white;
            padding: 20px;
            border-radius: 10px;
            z-index: 100;
        }
    </style>
</head>
<body>
    <h1>Chicken Road 2</h1>
    <div class="game-info">
        Balance: $2,000 | 
        Level: 2 | 
        Score: 100 | 
        Lives: 3    </div>
    
    <div class="game-container">
                    <div class="road">
                                    <div class="lane-mark" style="left: 0px;"></div>
                                    <div class="lane-mark" style="left: 40px;"></div>
                                    <div class="lane-mark" style="left: 80px;"></div>
                                    <div class="lane-mark" style="left: 120px;"></div>
                                    <div class="lane-mark" style="left: 160px;"></div>
                                    <div class="lane-mark" style="left: 200px;"></div>
                                    <div class="lane-mark" style="left: 240px;"></div>
                                    <div class="lane-mark" style="left: 280px;"></div>
                                    <div class="lane-mark" style="left: 320px;"></div>
                                    <div class="lane-mark" style="left: 360px;"></div>
                                    <div class="lane-mark" style="left: 400px;"></div>
                                    <div class="lane-mark" style="left: 440px;"></div>
                                    <div class="lane-mark" style="left: 480px;"></div>
                                    <div class="lane-mark" style="left: 520px;"></div>
                                    <div class="lane-mark" style="left: 560px;"></div>
                                    <div class="lane-mark" style="left: 600px;"></div>
                                    <div class="lane-mark" style="left: 640px;"></div>
                                    <div class="lane-mark" style="left: 680px;"></div>
                                    <div class="lane-mark" style="left: 720px;"></div>
                                    <div class="lane-mark" style="left: 760px;"></div>
                            </div>
                    <div class="road">
                                    <div class="lane-mark" style="left: 0px;"></div>
                                    <div class="lane-mark" style="left: 40px;"></div>
                                    <div class="lane-mark" style="left: 80px;"></div>
                                    <div class="lane-mark" style="left: 120px;"></div>
                                    <div class="lane-mark" style="left: 160px;"></div>
                                    <div class="lane-mark" style="left: 200px;"></div>
                                    <div class="lane-mark" style="left: 240px;"></div>
                                    <div class="lane-mark" style="left: 280px;"></div>
                                    <div class="lane-mark" style="left: 320px;"></div>
                                    <div class="lane-mark" style="left: 360px;"></div>
                                    <div class="lane-mark" style="left: 400px;"></div>
                                    <div class="lane-mark" style="left: 440px;"></div>
                                    <div class="lane-mark" style="left: 480px;"></div>
                                    <div class="lane-mark" style="left: 520px;"></div>
                                    <div class="lane-mark" style="left: 560px;"></div>
                                    <div class="lane-mark" style="left: 600px;"></div>
                                    <div class="lane-mark" style="left: 640px;"></div>
                                    <div class="lane-mark" style="left: 680px;"></div>
                                    <div class="lane-mark" style="left: 720px;"></div>
                                    <div class="lane-mark" style="left: 760px;"></div>
                            </div>
                    <div class="road">
                                    <div class="lane-mark" style="left: 0px;"></div>
                                    <div class="lane-mark" style="left: 40px;"></div>
                                    <div class="lane-mark" style="left: 80px;"></div>
                                    <div class="lane-mark" style="left: 120px;"></div>
                                    <div class="lane-mark" style="left: 160px;"></div>
                                    <div class="lane-mark" style="left: 200px;"></div>
                                    <div class="lane-mark" style="left: 240px;"></div>
                                    <div class="lane-mark" style="left: 280px;"></div>
                                    <div class="lane-mark" style="left: 320px;"></div>
                                    <div class="lane-mark" style="left: 360px;"></div>
                                    <div class="lane-mark" style="left: 400px;"></div>
                                    <div class="lane-mark" style="left: 440px;"></div>
                                    <div class="lane-mark" style="left: 480px;"></div>
                                    <div class="lane-mark" style="left: 520px;"></div>
                                    <div class="lane-mark" style="left: 560px;"></div>
                                    <div class="lane-mark" style="left: 600px;"></div>
                                    <div class="lane-mark" style="left: 640px;"></div>
                                    <div class="lane-mark" style="left: 680px;"></div>
                                    <div class="lane-mark" style="left: 720px;"></div>
                                    <div class="lane-mark" style="left: 760px;"></div>
                            </div>
                    <div class="road">
                                    <div class="lane-mark" style="left: 0px;"></div>
                                    <div class="lane-mark" style="left: 40px;"></div>
                                    <div class="lane-mark" style="left: 80px;"></div>
                                    <div class="lane-mark" style="left: 120px;"></div>
                                    <div class="lane-mark" style="left: 160px;"></div>
                                    <div class="lane-mark" style="left: 200px;"></div>
                                    <div class="lane-mark" style="left: 240px;"></div>
                                    <div class="lane-mark" style="left: 280px;"></div>
                                    <div class="lane-mark" style="left: 320px;"></div>
                                    <div class="lane-mark" style="left: 360px;"></div>
                                    <div class="lane-mark" style="left: 400px;"></div>
                                    <div class="lane-mark" style="left: 440px;"></div>
                                    <div class="lane-mark" style="left: 480px;"></div>
                                    <div class="lane-mark" style="left: 520px;"></div>
                                    <div class="lane-mark" style="left: 560px;"></div>
                                    <div class="lane-mark" style="left: 600px;"></div>
                                    <div class="lane-mark" style="left: 640px;"></div>
                                    <div class="lane-mark" style="left: 680px;"></div>
                                    <div class="lane-mark" style="left: 720px;"></div>
                                    <div class="lane-mark" style="left: 760px;"></div>
                            </div>
                    <div class="road">
                                    <div class="lane-mark" style="left: 0px;"></div>
                                    <div class="lane-mark" style="left: 40px;"></div>
                                    <div class="lane-mark" style="left: 80px;"></div>
                                    <div class="lane-mark" style="left: 120px;"></div>
                                    <div class="lane-mark" style="left: 160px;"></div>
                                    <div class="lane-mark" style="left: 200px;"></div>
                                    <div class="lane-mark" style="left: 240px;"></div>
                                    <div class="lane-mark" style="left: 280px;"></div>
                                    <div class="lane-mark" style="left: 320px;"></div>
                                    <div class="lane-mark" style="left: 360px;"></div>
                                    <div class="lane-mark" style="left: 400px;"></div>
                                    <div class="lane-mark" style="left: 440px;"></div>
                                    <div class="lane-mark" style="left: 480px;"></div>
                                    <div class="lane-mark" style="left: 520px;"></div>
                                    <div class="lane-mark" style="left: 560px;"></div>
                                    <div class="lane-mark" style="left: 600px;"></div>
                                    <div class="lane-mark" style="left: 640px;"></div>
                                    <div class="lane-mark" style="left: 680px;"></div>
                                    <div class="lane-mark" style="left: 720px;"></div>
                                    <div class="lane-mark" style="left: 760px;"></div>
                            </div>
                
                    <div class="vehicle" 
                 style="width: 115px;
                        top: 200px;
                        left: -10px;
                        ">
                <div style="width: 20%; height: 70%; background-color: #87CEEB; float: left; margin: 6% 5%;"></div>
                <div style="width: 20%; height: 70%; background-color: #87CEEB; float: right; margin: 6% 5%;"></div>
            </div>
                    <div class="vehicle" 
                 style="width: 95px;
                        top: 280px;
                        left: 30px;
                        ">
                <div style="width: 20%; height: 70%; background-color: #87CEEB; float: left; margin: 6% 5%;"></div>
                <div style="width: 20%; height: 70%; background-color: #87CEEB; float: right; margin: 6% 5%;"></div>
            </div>
                    <div class="vehicle" 
                 style="width: 75px;
                        top: 440px;
                        left: -10px;
                        ">
                <div style="width: 20%; height: 70%; background-color: #87CEEB; float: left; margin: 6% 5%;"></div>
                <div style="width: 20%; height: 70%; background-color: #87CEEB; float: right; margin: 6% 5%;"></div>
            </div>
                    <div class="vehicle" 
                 style="width: 76px;
                        top: 440px;
                        left: 690px;
                        transform: scaleX(-1);">
                <div style="width: 20%; height: 70%; background-color: #87CEEB; float: left; margin: 6% 5%;"></div>
                <div style="width: 20%; height: 70%; background-color: #87CEEB; float: right; margin: 6% 5%;"></div>
            </div>
                    <div class="vehicle" 
                 style="width: 76px;
                        top: 440px;
                        left: 690px;
                        transform: scaleX(-1);">
                <div style="width: 20%; height: 70%; background-color: #87CEEB; float: left; margin: 6% 5%;"></div>
                <div style="width: 20%; height: 70%; background-color: #87CEEB; float: right; margin: 6% 5%;"></div>
            </div>
                
        <div class="chicken" style="bottom: 100px;"></div>
        
            </div>
    
    <div class="controls">
                    <form method="post">
                <button type="submit" name="move_left">← Left</button>
                <button type="submit" name="move_right">→ Right</button>
                <button type="submit" name="move_up">↑ Up</button>
                <button type="submit" name="move_down">↓ Down</button>
            </form>
            </div>
    
    <div class="instructions">
        <h3>How to Play:</h3>
        <p>Use the arrow buttons to move the chicken across the roads.</p>
        <p>Avoid the vehicles and reach the top to complete each level.</p>
        <p>Each level completed increases your score and the difficulty.</p>
    </div>
</body>
</html>