/* styles.css */

/* ゲームエリア全体 */
body {
  margin: 0;
  overflow: hidden;
  background-color: #87ceeb;
  display: grid;
  place-items: center;
  height: 100vh;
}

.game-area {
  position: relative;
  width: 100%;
  max-width: 800px; /* スマホやタブレットに合わせた最大幅 */
  height: 300px;
  background-image: url("images/background.jpg");
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition: background-image 1s ease-in-out; /* 背景切り替えアニメーション */
}


/* マリオキャラクター */
.character {
  position: absolute;
  bottom: 0;
  left: 50px;
  width: 50px;
  height: 50px;
  animation: run 0.5s steps(4) infinite;
}

/* マリオのジャンプアニメーション */
@keyframes jump {
  0% {
    bottom: 0;
  }
  50% {
    bottom: 150px;
  }
  100% {
    bottom: 0;
  }
}

.character.jump {
  animation: jump 1s ease-out; /* 0.5s から 0.8s に変更 */
}

/* ゴールメッセージ */
.goal-message {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  color: gold;
  text-shadow: 2px 2px 4px #000;
}

/* カウントダウンの表示 */
.countdown {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 80px;
  font-weight: bold;
  color: white;
  text-shadow: 2px 2px 5px black;
}

/* スタートボタン */
.start-button {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 15px 30px;
  font-size: 24px;
  background-color: #ff6347;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.start-button:hover {
  background-color: #ff4500;
}

/* スコア表示 */
.score {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 24px;
  font-weight: bold;
  color: white;
  text-shadow: 2px 2px 5px black;
}

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

.obstacle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 50px;
  will-change: transform; /* パフォーマンス最適化 */
}

#restart-button {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  font-size: 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: none;
}

#restart-button:hover {
  background-color: #45a049;
}

/* タッチデバイスの操作性向上 */
.start-button,
#restart-button {
  -webkit-tap-highlight-color: transparent; /* タップ時のハイライトを消す */
  touch-action: manipulation; /* ダブルタップによるズームを防止 */
}