untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Arcade Soccer 2D</title>
    <style>
        * {
            box-sizing: border-box;
            user-select: none;
            -webkit-user-select: none;
            margin: 0;
            padding: 0;
        }
        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: #111;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #fff;
        }
        #game-container {
            position: relative;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #111;
        }
        canvas {
            background-color: #3b7a37;
            box-shadow: 0 0 20px rgba(0,0,0,0.8);
            display: block;
        }

        /* HUD Overlay */
        #hud {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: 20px;
            background: rgba(0, 0, 0, 0.75);
            padding: 8px 24px;
            border-radius: 30px;
            border: 2px solid rgba(255, 255, 255, 0.2);
            font-size: 20px;
            font-weight: bold;
            z-index: 10;
            pointer-events: none;
        }
        .team-score {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .flag {
            font-size: 24px;
        }
        #timer {
            color: #ffcc00;
            font-family: monospace;
            font-size: 22px;
            background: #222;
            padding: 4px 10px;
            border-radius: 8px;
        }

        /* Screens & Overlays */
        .overlay-screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 100;
            pointer-events: auto;
        }
        .hidden {
            display: none !important;
        }
        h1 {
            font-size: 48px;
            margin-bottom: 20px;
            color: #ffcc00;
            text-shadow: 0 4px 10px rgba(0,0,0,0.5);
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        h2 {
            font-size: 32px;
            margin-bottom: 15px;
        }
        .form-group {
            margin: 15px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }
        label {
            font-size: 16px;
            color: #ccc;
        }
        select, button {
            padding: 12px 24px;
            font-size: 18px;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            outline: none;
            transition: all 0.2s ease;
        }
        select {
            background: #222;
            color: #fff;
            border: 1px solid #555;
            min-width: 200px;
            text-align: center;
        }
        .btn-primary {
            background: #28a745;
            color: white;
            font-weight: bold;
            text-transform: uppercase;
            margin-top: 20px;
            box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
        }
        .btn-primary:hover {
            background: #34ce57;
            transform: translateY(-2px);
        }
        .btn-primary:active {
            transform: translateY(1px);
        }

        /* Goal Banner */
        #goal-banner {
            position: absolute;
            top: 30%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.5);
            font-size: 80px;
            font-weight: 900;
            color: #ffcc00;
            text-shadow: 0 0 20px #ff0000, 0 0 40px #ffcc00;
            opacity: 0;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s;
            pointer-events: none;
            z-index: 50;
        }
        #goal-banner.show {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
        }

        /* Mobile Controls */
        #touch-controls {
            position: absolute;
            bottom: 20px;
            left: 0;
            width: 100%;
            height: 150px;
            pointer-events: none;
            z-index: 20;
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            box-sizing: border-box;
        }
        .touch-zone {
            pointer-events: auto;
            position: relative;
        }
        #joystick-bound {
            width: 120px;
            height: 120px;
            background: rgba(255,255,255,0.15);
            border: 2px solid rgba(255,255,255,0.3);
            border-radius: 60px;
            position: absolute;
            bottom: 10px;
            left: 10px;
            touch-action: none;
        }
        #joystick-thumb {
            width: 50px;
            height: 50px;
            background: rgba(255,255,255,0.6);
            border-radius: 25px;
            position: absolute;
            top: 35px;
            left: 35px;
            pointer-events: none;
        }
        .action-buttons {
            position: absolute;
            bottom: 10px;
            right: 10px;
            display: flex;
            gap: 12px;
        }
        .action-btn {
            width: 65px;
            height: 65px;
            border-radius: 35px;
            background: rgba(255,255,255,0.25);
            border: 2px solid rgba(255,255,255,0.5);
            color: white;
            font-weight: bold;
            font-size: 14px;
            display: flex;
            justify-content: center;
            align-items: center;
            touch-action: manipulation;
        }
        .action-btn:active {
            background: rgba(255,255,255,0.6);
        }
        #btn-shoot { background: rgba(220, 53, 69, 0.6); }
        #btn-pass { background: rgba(40, 167, 69, 0.6); }
        #btn-sprint { background: rgba(255, 193, 7, 0.6); }

        /* Pause Button */
        #btn-pause {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 30;
            background: rgba(0,0,0,0.6);
            color: white;
            border: 1px solid #666;
            padding: 8px 16px;
            font-size: 14px;
            border-radius: 20px;
            cursor: pointer;
        }

        /* Controls Tip */
        .controls-tip {
            margin-top: 25px;
            font-size: 13px;
            color: #aaa;
            text-align: center;
            line-height: 1.6;
            background: rgba(255,255,255,0.05);
            padding: 10px 20px;
            border-radius: 8px;
        }
    </style>
</head>
<body>

<div id="game-container">
    <canvas id="gameCanvas"></canvas>

    <!-- Top HUD -->
    <div id="hud">
        <div class="team-score">
            <span id="p1-flag" class="flag">🇧🇷</span>
            <span id="p1-name">BRA</span>
            <span id="p1-score">0</span>
        </div>
        <div id="timer">03:00</div>
        <div class="team-score">
            <span id="p2-score">0</span>
            <span id="p2-name">ARG</span>
            <span id="p2-flag" class="flag">🇦🇷</span>
        </div>
    </div>

    <!-- Pause Button -->
    <button id="btn-pause" onclick="togglePause()">Pause ⏸</button>

    <!-- Goal Text Banner -->
    <div id="goal-banner">GOAL!!!</div>

    <!-- Main Menu Overlay -->
    <div id="menu-screen" class="overlay-screen">
        <h1>⚽ Arcade Soccer</h1>
        
        <div class="form-group">
            <label>Your Team</label>
            <select id="p1-select">
                <option value="BRA">🇧🇷 Brazil</option>
                <option value="ARG">🇦🇷 Argentina</option>
                <option value="FRA">🇫🇷 France</option>
                <option value="ENG">🏴️ England</option>
                <option value="ESP">🇪🇸 Spain</option>
                <option value="GER">🇩🇪 Germany</option>
            </select>
        </div>

        <div class="form-group">
            <label>Opponent Team</label>
            <select id="p2-select">
                <option value="ARG" selected>🇦🇷 Argentina</option>
                <option value="BRA">🇧🇷 Brazil</option>
                <option value="FRA">🇫🇷 France</option>
                <option value="ENG">🏴️ England</option>
                <option value="ESP">🇪🇸 Spain</option>
                <option value="GER">🇩🇪 Germany</option>
            </select>
        </div>

        <div class="form-group">
            <label>Match Duration</label>
            <select id="duration-select">
                <option value="1">1 Minute</option>
                <option value="3" selected>3 Minutes</option>
                <option value="5">5 Minutes</option>
            </select>
        </div>

        <button class="btn-primary" onclick="startGame()">Kick Off!</button>

        <div class="controls-tip">
            <b>Keyboard Controls:</b><br>
            Movement: WASD / Arrow Keys<br>
            Pass / Tackle: <b>J</b> or <b>Z</b> | Shoot: <b>K</b> or <b>X</b> | Sprint: <b>Shift</b> / <b>Space</b>
        </div>
    </div>

    <!-- Pause Screen -->
    <div id="pause-screen" class="overlay-screen hidden">
        <h2>Game Paused</h2>
        <button class="btn-primary" onclick="togglePause()">Resume</button>
        <button class="btn-primary" style="background: #dc3545;" onclick="resetToMenu()">Main Menu</button>
    </div>

    <!-- Game Over Screen -->
    <div id="gameover-screen" class="overlay-screen hidden">
        <h1 id="winner-text">BRAZIL WINS!</h1>
        <h2 id="final-score">3 - 1</h2>
        <button class="btn-primary" onclick="startGame()">Play Again</button>
        <button class="btn-primary" style="background: #6c757d;" onclick="resetToMenu()">Main Menu</button>
    </div>

    <!-- Mobile On-Screen Controls -->
    <div id="touch-controls">
        <div id="joystick-bound" class="touch-zone">
            <div id="joystick-thumb"></div>
        </div>
        <div class="action-buttons">
            <div id="btn-pass" class="action-btn touch-zone">PASS</div>
            <div id="btn-shoot" class="action-btn touch-zone">SHOOT</div>
            <div id="btn-sprint" class="action-btn touch-zone">SPR