<style>
#numguess-game { max-width: 500px; margin: 0 auto; text-align: center; }
#guess-input {
    background:#000; border:2px solid #00ff00; color:#00ff00;
    font-family:'Courier New',monospace; font-size:1.5rem;
    text-align:center; width:120px; padding:8px;
}
#guess-input:focus { outline: none; border-color:#00cc00; box-shadow:0 0 6px rgba(0,255,0,.4); }
.hint-bar { height:12px; border:1px solid #007700; border-radius:6px; margin:12px auto; width:80%; position:relative; }
.hint-marker { position:absolute; top:-4px; width:4px; height:20px; background:#00ff00; border-radius:2px; transform:translateX(-50%); transition:left .4s; }
#ng-history { max-height: 180px; overflow-y: auto; font-size:.9rem; color:#007700; }
</style>

<div id="numguess-game">
    <h4 style="color:#00ff00;"><i class="bi bi-123"></i> NUMBER GUESSER</h4>
    <p style="color:#007700;">I'm thinking of a number between <strong>1</strong> and <strong>100</strong>.</p>

    <div class="hint-bar" id="hint-bar">
        <div class="hint-marker" id="hint-marker" style="left:50%;"></div>
    </div>

    <div style="font-size:1.2rem; margin:10px 0;" id="ng-message">Enter your guess!</div>

    <div class="d-flex justify-content-center gap-2 mt-2">
        <input type="number" id="guess-input" min="1" max="100" placeholder="?" autocomplete="off">
        <button id="guess-btn" class="btn btn-primary" style="font-size:1.2rem;">
            Guess
        </button>
    </div>

    <div class="mt-3" style="color:#007700;">
        Guesses: <span id="guess-count">0</span> / 10
    </div>

    <div id="ng-history" class="mt-2"></div>

    <button id="ng-new" class="btn btn-primary mt-3" style="display:none;">
        <i class="bi bi-arrow-clockwise"></i> New Game
    </button>
</div>

<script>
(function() {
    var secret, guesses, maxGuesses = 10, gameOver = false;

    function startGame() {
        secret = Math.floor(Math.random() * 100) + 1;
        guesses = 0;
        gameOver = false;
        document.getElementById('ng-message').textContent = 'Enter your guess!';
        document.getElementById('ng-message').style.color = '#007700';
        document.getElementById('guess-count').textContent = '0';
        document.getElementById('ng-history').innerHTML = '';
        document.getElementById('ng-new').style.display = 'none';
        document.getElementById('guess-input').value = '';
        document.getElementById('guess-input').disabled = false;
        document.getElementById('guess-btn').disabled = false;
        document.getElementById('hint-marker').style.left = '50%';
    }

    function makeGuess() {
        if (gameOver) return;
        var val = parseInt(document.getElementById('guess-input').value);
        if (isNaN(val) || val < 1 || val > 100) {
            document.getElementById('ng-message').textContent = 'Please enter a number between 1 and 100!';
            return;
        }
        guesses++;
        document.getElementById('guess-count').textContent = guesses;
        document.getElementById('hint-marker').style.left = ((val-1)/99*100)+'%';

        var history = document.getElementById('ng-history');
        var entry = document.createElement('div');

        if (val === secret) {
            var pts = Math.max(0, (maxGuesses - guesses + 1) * 10);
            document.getElementById('ng-message').textContent = '🎉 Correct! It was ' + secret + '! Score: ' + pts;
            document.getElementById('ng-message').style.color = '#00ff00';
            entry.textContent = '► ' + val + ' — CORRECT!';
            endGame(pts);
        } else if (guesses >= maxGuesses) {
            document.getElementById('ng-message').textContent = '💀 Out of guesses! It was ' + secret + '.';
            document.getElementById('ng-message').style.color = '#ff4444';
            entry.textContent = '► ' + val + (val < secret ? ' — too low' : ' — too high');
            endGame(0);
        } else {
            var hint = val < secret ? '▲ Too low!' : '▼ Too high!';
            var diff = Math.abs(val - secret);
            var temp = diff < 5 ? ' (burning hot!)' : diff < 15 ? ' (warm)' : ' (cold)';
            document.getElementById('ng-message').textContent = hint + temp;
            entry.textContent = '► ' + val + (val < secret ? ' — too low' : ' — too high');
        }
        entry.style.color = val === secret ? '#00ff00' : '#007700';
        history.insertBefore(entry, history.firstChild);
        document.getElementById('guess-input').value = '';
        document.getElementById('guess-input').focus();
    }

    function endGame(score) {
        gameOver = true;
        document.getElementById('ng-new').style.display = '';
        document.getElementById('guess-input').disabled = true;
        document.getElementById('guess-btn').disabled = true;
        if (score > 0) {
            fetch(window.location.pathname.replace('/play','/') + 'score', {
                method:'POST', headers:{'Content-Type':'application/json'},
                body: JSON.stringify({score: score, details: {guesses: guesses}})
            }).catch(function(){});
        }
    }

    document.getElementById('guess-btn').addEventListener('click', makeGuess);
    document.getElementById('guess-input').addEventListener('keydown', function(e) {
        if (e.key === 'Enter') makeGuess();
    });
    document.getElementById('ng-new').addEventListener('click', startGame);
    startGame();
})();
</script>
