.game-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--green-sea);
  border-radius: 48px;
  cursor: pointer;
}

.small .game-container {
  width: 100%;
}

/* .dino,
.cactus {
  display: none;
} */

.dino {
  position: absolute;
  bottom: 0;
  left: 150px;
  width: 80px;
  height: 80px;
  background-image: url("/img/runningbear8bit.webp"); /* 恐竜の画像を背景として設定 */
  background-size: cover;
  background-position: center;
  z-index: 2;
}

.cactus {
  position: absolute;
  bottom: 2px;
  right: 150px;
  width: 65px;
  height: 95px;
  /* background-color: #555; */
  background-image: url("/img/cactus8bit.webp"); /* 恐竜の画像を背景として設定 */
  background-size: cover;
  background-position: center;
  /* animation: cactusMove 2s linear forwards; */
}

@keyframes cactusMove {
  0% {
    right: -50px;
  }
  100% {
    right: 100%;
  }
}

.game-start {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  font-family: var(--font-family-audiowide);
  color: rgb(255, 255, 255);
}

.game-over {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  font-family: var(--font-family-audiowide);
  color: rgb(255, 255, 255);
  display: none; /* 最初は非表示 */
}

.score {
  position: absolute;
  top: 10px;
  right: 45px;
  font-size: 12px;
  font-family: var(--font-family-audiowide);
  font-weight: bold;
  color: var(--woodsmoke-2);
}

.high-score {
  position: absolute;
  top: 10px;
  right: 140px;
  font-size: 12px;
  font-family: var(--font-family-audiowide);
  font-weight: bold;
  color: var(--woodsmoke-2);
}

.ground {
  position: absolute;
  bottom: 22px;
  left: 0;
  width: 100%;
  height: 1px; /* 地面の高さ */
  background-color: var(--woodsmoke-2); /* 地面の色を設定 */
  display: none;
  z-index: 1;
}

/* 土を表現する小さな横線のスタイル */
.dirt {
  position: absolute;
  bottom: -5px; /* 地面の少し下に配置 */
  width: 10px; /* 小さな横線の幅 */
  height: 1px; /* 小さな横線の高さ */
  background-color: var(--woodsmoke-2); /* 小さな横線の色 */
  animation: cactusMove 2s linear forwards; /* 土にアニメーションを適用 */
}

.stop-animation {
  animation-play-state: paused !important; /* アニメーションを一時停止 */
}

/* 背景色を赤く変えるアニメーション */
@keyframes backgroundFade {
  0% {
    background-color: var(--green-sea);
  }
  100% {
    background-color: #662121;
  }
}

/* 背景が赤くなるアニメーションを適用するクラス */
.game-over-background {
  animation: backgroundFade 0.5s ease-in forwards;
}