body {
	background: linear-gradient(135deg, #74B9FF, #55EFC4, #A29BFE);
}

.game-page {
	display: flex;
	justify-content: center;
	padding: 24px 16px 40px;
}

.game {
	width: 100%;
	max-width: 720px;
	background: #FFFFFF;
	border-radius: 18px;
	padding: 24px;
	box-shadow: 0 8px 25px #0000001a;
	display: grid;
	gap: 18px;
}

.game-area {
	position: relative;
	width: 100%;
	height: 240px;
	border-radius: 14px;
	background: linear-gradient(#DFF9FB, #C7ECEE);
	border: 3px solid #6C5CE7;
	overflow: hidden;
}

.game-area::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 18px;
	height: 6px;
	background: #6C5CE7;
	opacity: 0.6;
}

.player {
	position: absolute;
	left: 20px;
	bottom: 20px;
	width: 40px;
	height: 40px;
	background: url("../../img/canardpixel.png") center / contain no-repeat;
	image-rendering: pixelated;
}

.player.jump {
	animation: jump 0.55s ease-out;
}

.obstacle {
	position: absolute;
	bottom: 20px;
	left: 100%;
	width: 32px;
	height: 52px;
	background: #FF7675;
	border-radius: 8px;
	box-shadow: inset 0 0 0 3px #E17055;
}

.obstacle.moving {
	animation: obstacle-move 1.6s linear infinite;
}

.hud {
	display: grid;
	gap: 8px;
	justify-items: center;
	text-align: center;
}

.score {
	font-family: 'Fredoka One', cursive;
	color: #6C5CE7;
	font-size: 1.2rem;
}

.hint {
	color: #636E72;
	font-weight: 700;
}

.status {
	font-weight: 700;
	color: #D63031;
	min-height: 22px;
}

@keyframes obstacle-move {
	0% {
		left: 100%;
	}
	100% {
		left: -40px;
	}
}

@keyframes jump {
	0% {
		bottom: 20px;
	}
	50% {
		bottom: 130px;
	}
	100% {
		bottom: 20px;
	}
}

@media (max-width: 600px) {
	.game {
		padding: 18px;
	}

	.game-area {
		height: 200px;
	}

	.player {
		left: 40px;
	}
}