body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background-color: #cce7ff; /* Light sky-blue background */
}

.game-container {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url('/image/game/endless/bg-endless.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#player {
  position: absolute;
  bottom: 0;
  left: 50px;
  width: 250px; /* Slightly bigger for more visibility */
  height: 250px;
  background-image: url('/image/game/endless/player.webp'); /* Cartoonish player character */
  background-size: contain;
  background-repeat: no-repeat;
}

#obstacle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 150px; /* More engaging size */
  height: 150px;
  background-image: url('/image/game/endless/obstacle.webp'); /* Fun, cartoonish obstacle */
  background-size: contain;
  background-repeat: no-repeat;
  animation: moveObstacle 3s linear infinite;
}

@keyframes moveObstacle {
  from {
    right: -90px;
  }
  to {
    right: 100%;
  }
}

#score {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 28px;
  color: #ff4081; /* Bright pink */
  font-family: 'Comic Sans MS', sans-serif;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px 20px;
  border-radius: 15px;
  box-shadow: 0 0 10px #ff4081;
}