<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Aim Trainer</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
height: 100vh;
background: linear-gradient(135deg, #1f1f1f, #2c2c2c);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
cursor: crosshair;
overflow: hidden;
position: relative;
color: #fff;
}

#score {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.4);
padding: 10px 25px;
border-radius: 20px;
font-size: 24px;
font-weight: bold;
backdrop-filter: blur(4px);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
z-index: 1000;
}

.target {
width: 60px;
height: 60px;
background-color: red;
border: 3px solid #fff;
border-radius: 50%;
position: absolute;
transition: top 0.2s ease, left 0.2s ease;
box-shadow: 0 0 15px red;
}
</style>
</head>

<body>

<div id="score">Score: 0</div>
<div class="target" id="target"></div>

<script>
const target = document.getElementById('target');
const scoreDisplay = document.getElementById('score');
const audio = new Audio('https://dictionary.cambridge.org/media/english/uk_pron/u/ukn/uknic/ukniche015.mp3');
let score = 0;

function updateScore(value) {
score += value;
if (score < 0) score = 0;
scoreDisplay.textContent = 'Score: ' + score;
}

function moveTarget() {
const maxX = window.innerWidth - 60;
const maxY = window.innerHeight - 60;
const x = Math.random() * maxX;
const y = Math.random() * maxY;
target.style.left = x + 'px';
target.style.top = y + 'px';
}

// Hit target
target.addEventListener('click', function (event) {
event.stopPropagation();
updateScore(500);
moveTarget();
});

// Missed click
document.body.addEventListener('click', function () {
audio.currentTime = 0;
audio.play();
updateScore(-100);
});

// Initial placement
moveTarget();
</script>

</body>

</html>