/* --- 共通 --- */
body {
  margin: 0;
  background: #000;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 100vh;
}

/* 背景パターン */
.bg-pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../images/bg_p.png') repeat;
  z-index: -1;
}

/* ゲームコンテナ */
.game-container {
  position: relative;
  width: 90%;
  max-width: 800px;
  aspect-ratio: 2/3;
  background: url('../images/bg_game.png') center/cover no-repeat;
  overflow: hidden;
  z-index: 1;
  margin: 0 auto;
}

/* カウントダウン */
#countdown-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  transition: opacity 0.5s ease;
}

/* カウントダウン画像（数字部分） */
#countdown-image {
  width: 100px; /* ←ここで大きさを調整（例: 200px～300px） */
  height: auto;
  opacity: 0;
  transition: opacity 0.5s, transform 0.5s;
}

/* 縦パイプ */
.pipe-stage {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 1160px; /* 元画像に合わせる */
  overflow: hidden;
  z-index: 1;
}

/* 縦パイプ画像 */
.pipe-vertical {
  width: 100%;
  height: 100%; /* 親に完全フィット */
  object-fit: fill;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* 横パイプ */
.pipe-horizontal {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 120vw; /* 両端少し切れる */
  height: 160px; /* 縦パイプの太さに合わせる（JSで上書き） */
  object-fit: cover;
  z-index: 0;
}

/* キャンディ */
.candy {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: top 0.1s ease;
  z-index: 2; /* 横パイプより上 */
}

.candy.fly {
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* ボタン共通 */
.buttons {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%); /* 中央基準配置 */
  width: 100%;
  max-width: 800px; /* ゲーム領域と同じ幅で制限 */
  display: flex;
  justify-content: space-between; /* 両端配置 */
  align-items: center;
  padding: 0 40px; /* 余白は少し小さめに */
  box-sizing: border-box; /* paddingを幅に含める */
  z-index: 100;
}

.btn {
  width: 120px;
  height: 120px;
  cursor: pointer;
}

/* 見本キャンディ */
.signs {
  position: absolute;
  bottom: 150px; /* 横パイプより少し上に配置 */
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 90px;
  box-sizing: border-box;
  z-index: 10;
}

.sign {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

/* ブルブル演出 */
@keyframes shake {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  25% { transform: translateX(-52%) translateY(0); }
  50% { transform: translateX(-48%) translateY(0); }
  75% { transform: translateX(-52%) translateY(0); }
}
.candy.shake {
  animation: shake 0.3s ease;
}


/* スコア表示 */
.score-container {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 282px;
  height: 102px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.score-base {
  width: 100%;
  height: auto;
}

.score-numbers {
  position: absolute;
  bottom: 14px; /* 数字をベースの下半分に配置 */
  display: flex;
  gap: 2px; /* 数字間の間隔 */
}

/* 数字画像 */
.score-numbers img {
  width: 36px;
  height: 40px;
}

/* タイマー表示 */
.timer-container {
  position: absolute;
  top: 20px;
  left: 20px;       /* 左上 */
  width: 282px;
  height: 102px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.time-base {
  width: 100%;
  height: auto;
}

.time-numbers {
  position: absolute;
  bottom: 14px; /* 下半分に数字 */
  display: flex;
  gap: 2px;
}

/* 数字画像 */
.time-numbers img {
  width: 36px;
  height: 40px;
}

/* 残り個数表示 */
.candy-container {
  position: absolute;
  top: 20px;
  left: 20px;       /* 左上 */
  width: 282px;
  height: 102px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.candy-base {
  width: 100%;
  height: auto;
}

.candy-numbers {
  position: absolute;
  bottom: 14px; /* 数字をベースの下半分に配置 */
  display: flex;
  gap: 2px; /* 数字間の間隔 */
}

/* 数字画像 */
.candy-numbers img {
  width: 36px;
  height: 40px;
}

/* 経過時間表示 */
.progress-container {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 282px;
  height: 102px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.progress-base {
  width: 100%;
  height: auto;
}

.progress-numbers {
  position: absolute;
  bottom: 14px; /* 数字をベースの下半分に配置 */
  display: flex;
  gap: 2px; /* 数字間の間隔 */
}

/* 数字画像 */
.progress-numbers img {
  width: auto;
  height: 36px;
}

/* FINISH表示 */
.finish-overlay {
  position: absolute;
  inset: 0; /* コンテナいっぱいに広がる */
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.6s;
  z-index: 1000;
}

.finish-logo {
  width: 60%;
  max-width: 400px;
  height: auto;
  animation: pop 0.8s ease-out;
}

@keyframes pop {
  0% { transform: scale(0.5); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}


/* リザルト画面全体 */
.result-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

/* リザルト枠本体 */
.result-container {
  position: relative;
  width: 90%;
  max-width: 300px;
  height: 400px; /* 固定高さで安定表示 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* 背景画像 */
.result-bg {
  width: 100%;
  height: auto;
  display: block;
}

/* スコア表示 */
.result-score {
  position: absolute;
  top: 21%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 1.5px;
}

.result-number {
  width: 30px;
  height: auto;
  margin: 0 2px;
}

/* 名前入力欄＋登録ボタンをまとめたエリア */
.result-input-group {
  position: absolute;
  top: 40%; /* 背景中央あたり */
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* 名前入力欄 */
.result-input {
  width: 80%;
  border: 2px solid #fff;
  border-radius: 8px;
  background: #fff;
  text-align: center;
  color: #D15975;
  font-size: 1rem;
  padding: 6px 4px;
}

.result-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px #ffb7c7 /* ピンクっぽい光の枠など */
}

.result-input::placeholder {
  color: #e4859b;
}



/* ランキング登録ボタン */
.btn-ranking {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.btn-ranking img {
  width: 100%;
  max-width: 160px;
  height: auto;
}

/* トップへ戻るボタン */
.btn-top {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.btn-top img {
  width: 100%;
  max-width: 160px;
  height: auto;
}


/* ランキングポップ全体 */
.ranking-popup {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.3); /* スミ30% */
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}

.ranking-popup.visible {
  opacity: 1;
  pointer-events: auto;
}

/* 中身（ランキング枠） */
.ranking-popup-inner {
  position: relative;
  width: 300px;
  height: 555px;
}

/* 背景ベース */
.ranking-base {
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
}

/* ランキングリスト */
.ranking-list {
  position: absolute;
  top: 120px; /* ベース画像の余白に合わせて調整 */
  left: 40px;
  width: 240px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 各順位の行 */
.ranking-list li {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

/* 順位アイコン */
.rank-icon {
  width: 54px;
  height: 53px;
  margin-right: 8px;
}

/* 名前とスコア */
.rank-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rank-name {
  font-weight: bold;
  color: #D15975;
  font-size: 0.9rem;
  padding-left: 4px;
}

.rank-score {
  display: flex;
  align-items: center;
  height: 40px;
}

/* 数字画像 */
.rank-score img {
  width: 24px;
  height: 26px;
}

/* ボタンエリア */
.ranking-buttons {
  position: absolute;
  bottom: 9px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 20px;
}

/* ボタン */
.ranking-btn {
  width: auto;
  max-height: 54px;
  height: 100%;
  cursor: pointer;
  transition: transform 0.2s;
}
.ranking-btn:hover {
  transform: scale(1.05);
}


/* トップページ専用：再挑戦ボタン非表示時に中央寄せ */
.ranking-buttons.single {
  justify-content: center;
}


/* タイムアタックリザルト */
/* リザルト画面全体 */
.result-attack-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

/* リザルト枠本体 */
.result-attack-container {
  position: relative;
  width: 90%;
  max-width: 300px;
  height: 400px; /* 固定高さで安定表示 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* 背景画像 */
.result-attack-bg {
  width: 100%;
  height: auto;
  display: block;
}

/* タイムアタックスコア表示 */
.result-attack-score {
  position: absolute;
  top: 21%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 1.5px;
}

.result-attack-number {
  width: auto;
  height: 30px;
  margin: 0 2px;
}

/* 名前入力欄＋登録ボタンをまとめたエリア */
.result-attack-input-group {
  position: absolute;
  top: 40%; /* 背景中央あたり */
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* 名前入力欄 */
.result-attack-input {
  width: 80%;
  border: 2px solid #fff;
  border-radius: 8px;
  background: #fff;
  text-align: center;
  color: #D15975;
  font-size: 1rem;
  padding: 6px 4px;
}

.result-attack-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px #ffb7c7 /* ピンクっぽい光の枠など */
}

.result-attack-input::placeholder {
  color: #e4859b;
}

/* タイムアタックランキングポップ全体 */
.ranking-attack-popup {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.3); /* スミ30% */
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}

.ranking-attack-popup.visible {
  opacity: 1;
  pointer-events: auto;
}

/* 中身（ランキング枠） */
.ranking-attack-popup-inner {
  position: relative;
  width: 300px;
  height: 555px;
}

/* 背景ベース */
.ranking-attack-base {
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
}

/* ランキングリスト */
.ranking-attack-list {
  position: absolute;
  top: 120px; /* ベース画像の余白に合わせて調整 */
  left: 36px;
  width: 240px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 各順位の行 */
.ranking-attack-list li {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

/* 順位アイコン */
.rank-attack-icon {
  width: 54px;
  height: 53px;
  margin-right: 8px;
}

/* 名前とスコア */
.rank-attack-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rank-attack-name {
  font-weight: bold;
  color: #D15975;
  font-size: 0.9rem;
  padding-left: 4px;
}

.rank-attack-time {
  display: flex;
  align-items: center;
  height: 40px;
}

/* 数字画像 */
.rank-attack-time img {
  width: auto;
  height: 26px;
}

/* ボタンエリア */
.ranking-attack-buttons {
  position: absolute;
  bottom: 9px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 20px;
}

/* ボタン */
.ranking-attack-btn {
  width: auto;
  max-height: 54px;
  height: 100%;
  cursor: pointer;
  transition: transform 0.2s;
}
.ranking-btn:hover {
  transform: scale(1.05);
}









/* --- モバイル --- */
@media screen and (max-width: 768px) {
  .game-container {
    width: 100%;
    height: 100vh;
    max-width: none;
  }

  .pipe-stage {
    width: 106px;
    height: 773px;
  }

  .pipe-horizontal {
    width: 130vw;
  }

  .buttons {
    bottom: 11vw;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: none;
    padding: 0 3vw;
  }

  .btn {
    width: 80px;
    height: 80px;
  }

  .candy {
    width: 80px;
    height: 80px;
  }

  .signs {
    bottom: 40vw;
    padding: 0 10vw;
  }

  .sign {
    width: 80px;
    height: 80px;
  }

  /* スコア */
  .score-container {
    width: 60%;   /* ゲーム幅に応じて縮小 */
    height: auto; /* 高さは自動調整 */
  }

  .score-numbers {
    bottom: 10px;
    gap: 1px;
  }

  /* 数字画像 */
  .score-numbers img {
    width: 30px;
    height: auto;
  }

  /* タイマー */

  .timer-container {
    width: 60%;   /* ゲーム幅に応じて縮小 */
    height: auto; /* 高さは自動調整 */
  }

  .time-numbers {
    bottom: 10px;
    gap: 1px;
  }

  /* 数字画像 */
  .time-numbers img {
    width: 30px;
    height: auto;
  }

  /* 残り個数 */
  .candy-container {
    width: 60%;   /* ゲーム幅に応じて縮小 */
    height: auto; /* 高さは自動調整 */
  }

  .candy-numbers {
    bottom: 10px;
    gap: 1px;
  }

  /* 数字画像 */
  .candy-numbers img {
    width: 30px;
    height: auto;
  }

  /* 経過時間 */
  .progress-container {
    width: 60%;   /* ゲーム幅に応じて縮小 */
    height: auto; /* 高さは自動調整 */
  }

  .progress-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0px;
    height: 40px;
    bottom: 10px;
  }

  /* 数字画像 */
  .progress-numbers img {
    width: auto;
    height: 30px;
  }

  /* タイムアタックリザルト数字画像 */
  .result-attack-number {
    width: auto;
    height: 28px;
  }

}

/* --- PC版 --- */
@media screen and (min-width: 769px) {
  .game-container {
    height: 100vh;
    max-height: 1200px;
    max-width: 800px;
  }

  .pipe-stage,
  .pipe-vertical,
  .pipe-horizontal,
  .candy,
  .btn {
    transform-origin: top center;
  }

  .buttons {
    bottom: 3vw;
    padding: 0 30px; /* PCは少し外側に */
  }

  .signs {
    bottom: 16vw;
    padding: 0 7vw;
  }
}

/* 小さい縦長端末用 */
@media screen and (max-height: 600px) {
  .score-container {
    width: 50%;
  }

   /* スコア */
  .score-numbers {
    bottom: 8px;
    gap: 1px;
  }
  .score-numbers img {
    width: 22px;
    height: auto;
  }

  /* タイマー */
  .time-numbers {
    bottom: 8px;
    gap: 1px;
  }

  /* 数字画像 */
  .time-numbers img {
    width: 22px;
    height: auto;
  }

  /* 残り個数 */
  .candy-numbers {
    bottom: 8px;
    gap: 1px;
  }

  /* 数字画像 */
  .candy-numbers img {
    width: 22px;
    height: auto;
  }

  /* 経過時間 */
  .progress-numbers {
    bottom: 6px;
    gap: 1px;
  }

  /* 数字画像 */
  .progress-numbers img {
    width: auto;
    height: 22px;
  }

  /* タイムアタックリザルト数字画像 */
  .result-attack-number {
    width: auto;
    height: 20px;
  }

  


}