.game-container {
    max-width: 400px;
    margin: 20px auto;
    text-align: center;
    font-family: Arial, sans-serif;
}

.game-area {
    padding: 20px;
    border: 2px solid #333;
    border-radius: 10px;
    background-color: #f9f9f9;
}

.click-btn, .start-btn {
    padding: 15px 30px;
    font-size: 1.5em;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 20px 0;
}

.click-btn:disabled, .start-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.result-box {
    margin: 10px 0;
    font-size: 1.2em;
}

<div class="game-container">
    <div class="game-area">
        <p class="result-box" id="resultBox">Click "Start" to begin!</p>
        <button class="start-btn" id="startBtn">Start</button>
        <button class="click-btn" id="clickBtn" disabled>Click Me!</button>
        <input type="hidden" id="hiddenScore" value="0" />
        <p class="result-box" id="scoreBox">Score: 0</p>
        <div class="timer-display" id="timerDisplay">Time: 10s</div>
    </div>
</div>

const startBtn = document.getElementById("startBtn");
    const clickBtn = document.getElementById("clickBtn");
    const resultBox = document.getElementById("resultBox");
    const scoreBox = document.getElementById("scoreBox");
    const hiddenScore = document.getElementById("hiddenScore");
    const timerDisplay = document.getElementById("timerDisplay");

    let score = 0;
    let timeLeft = 10; // Game duration in seconds
    let gameActive = false;
    let timer;

    function startGame() {
        timerDisplay.textContent = `Time: ${timeLeft}s`;
        score = 0;
        gameActive = true;
        hiddenScore.value = score; // Reset score in hidden input
        clickBtn.disabled = false;
        startBtn.disabled = true;
        resultBox.textContent = "Game started! Click the button!";
        scoreBox.textContent = "Score: 0";

        timerInterval = setInterval(() => {
		    timeLeft--;
		    timerDisplay.textContent = `Time: ${timeLeft}s`;
		
		    if (timeLeft <= 0) {
		      endGame();
		    }
	 	 }, 1000);
    }

    function endGame() {
        gameActive = false;
        clickBtn.disabled = true;
        startBtn.disabled = false;
        resultBox.textContent = `Game over! Your final score is ${score}.`;
        document.querySelector('.share-buttons').style.display = 'flex'; // Show share buttons
        timerDisplay.textContent = "Time: 0s";
    }

    clickBtn.addEventListener("click", () => {
        if (gameActive) {
            score++;
            hiddenScore.value = score; // Update hidden score field
            scoreBox.textContent = `Score: ${score}`;
        }
    });

    startBtn.addEventListener("click", startGame);