<!DOCTYPE html>
<html>
<head>
    <title>Daily Time Travel Heist</title>
    <style>
        body {
            font-family: 'Courier New', monospace;
            background: #1a1a1a;
            color: #00ff00;
            text-align: center;
        }
        #timer {
            font-size: 40px;
            margin: 20px;
        }
        #puzzle {
            font-size: 24px;
            margin: 20px;
            padding: 20px;
            border: 2px solid #00ff00;
        }
        input {
            font-size: 20px;
            padding: 10px;
            background: black;
            color: #00ff00;
            border: 1px solid #00ff00;
        }
        #leaderboard {
            margin: 20px;
            text-align: left;
            display: inline-block;
        }
    </style>
</head>
<body>
    <h1>🕰️ DAILY TIME TRAVEL HEIST</h1>
    <div id="timer">60</div>
    <div id="puzzle"></div>
    <input type="text" id="answer" placeholder="Enter answer...">
    <button onclick="checkAnswer()">Submit</button>
    <div id="leaderboard"></div>

    <script>
        // Daily seed based on date (changes every 24h)
        const today = new Date().toISOString().slice(0, 10);
        let timeLeft = 60;
        let score = 0;
        let puzzleAnswer;

        // Daily puzzles and eras (add more for variety)
        const dailyThemes = {
            '1503-10-10': { era: "Renaissance Italy", puzzle: "3*5+2", answer: "17", artifact: "Mona Lisa's Smile" },
            '1905-06-30': { era: "1905 Bern", puzzle: "E=mc^?", answer: "2", artifact: "Einstein's Notebook" }
        };

        // Generate today's puzzle
        function generatePuzzle() {
            const theme = dailyThemes[today] || { 
                era: "Ancient Egypt", 
                puzzle: "ABCD → DCBA → 1234 → ?", 
                answer: "4321", 
                artifact: "Pharaoh's Crown" 
            };
            document.getElementById('puzzle').innerHTML = `
                STEAL: <strong>${theme.artifact}</strong><br>
                YEAR: ${theme.era}<br>
                PUZZLE: ${theme.puzzle}
            `;
            puzzleAnswer = theme.answer.toLowerCase();
        }

        // Timer countdown
        const timer = setInterval(() => {
            timeLeft--;
            document.getElementById('timer').textContent = timeLeft;
            if (timeLeft <= 0) endGame();
        }, 1000);

        // Check answer
        function checkAnswer() {
            const userAnswer = document.getElementById('answer').value.toLowerCase();
            if (userAnswer === puzzleAnswer) {
                score = timeLeft;
                endGame();
            }
        }

        // Game over
        function endGame() {
            clearInterval(timer);
            const leaderboard = JSON.parse(localStorage.getItem('heistLeaderboard') || '[]');
            leaderboard.push({ score, date: today });
            leaderboard.sort((a, b) => b.score - a.score);
            localStorage.setItem('heistLeaderboard', JSON.stringify(leaderboard));

            // Display leaderboard
            document.getElementById('leaderboard').innerHTML = `
                <h3>TOP THIEVES:</h3>
                ${leaderboard.slice(0, 5).map(entry => 
                    ${entry.date}: ${entry.score}s).join('<br>')}
                <br><br>
                <button onclick="location.reload()">Play Again</button>
            `;
        }

        generatePuzzle();
    </script>
</body>
</html>