@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;900&family=Noto+Sans+JP:wght@400;900&display=swap");

body,
html {
	height: 100%;
	font-family: "Inter", "Noto Sans JP", sans-serif;
	margin: 0;
	background-color: #f0f0f0;
	cursor: crosshair;
}

.game-target {
	position: absolute;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: red;
	transition: transform 0.5s ease; /* 移動を滑らかに */
}

#score-display {
	position: fixed;
	bottom: 50px; /* 残り時間バーの上 */
	left: 10px;
	font-size: 20px;
	pointer-events: none;
}

.time-bar-container {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 10px;
	background-color: #ddd;
}

.time-bar {
	width: 100%;
	height: 100%;
	background-color: #4caf50;
	transition: width 1s linear; /* 残り時間の減少を滑らかに */
}

/* 既存のスタイルに追加 */
.screen {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
}

.hidden {
	display: none;
}

button {
	padding: 10px 20px;
	font-size: 16px;
	cursor: pointer;
}

.repo {
	padding: 10px 20px;
	border-radius: 4px;
	border: 1px solid #333;
	text-decoration: none;
	color: #333;
	font-size: 16px;
	cursor: pointer;
}