/***********************************/
/* ローディング画面                 */
/***********************************/
#screen-loading {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 2vw;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  text-align: center;
  font-size: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* 中央寄せ */
}
/* プログレスバーのスタイル */
#progress-bar {
  width: 80%;
}

/***********************************/
/* クリック画面                     */
/***********************************/
#screen-click {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;  /* 横方向に中央揃え */
  align-items: center;      /* 縦方向に中央揃え */
  background-color: rgba(0, 0, 0, 0.5);  /* 背景色を半透明にする */
}

/* バージョン情報 */
.version-info {
  position: absolute;
  bottom: 2vh;
  right: 4vw;
  font-size: 4vw;
  font-family: "Noto Sans JP", "Poppins", sans-serif;
  color: #333;
  /*background: rgba(216, 149, 243, 0.35);*/
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  padding: 5px 12px;
  /*backdrop-filter: blur(8px);*/
  box-shadow: 0 2px 10px rgba(204, 9, 9, 0.1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  transition: all 0.25s ease;
  pointer-events: auto;
}
.version-info a {
  text-decoration: none !important;
}
.version-info a:hover {
  text-decoration: underline;
  opacity: 0.8;
}

/* オーディオON/OFFボタン */
.audio-toggle {
  position: fixed; /* 画面の固定位置に配置 */
  bottom: 9vh; /* 下から20px */
  right: 7vw; /* 右から20px */
  font-size: 9vw; /* 絵文字の大きさを調整 */
  cursor: pointer; /* クリック可能にする */
  background-color: rgba(0, 0, 0, 0.5); /* 背景を半透明に */
  color: white; /* 白い文字 */
  border-radius: 50%; /* 丸いボタンにする */
  border:none;
  box-shadow: 0 2px 10px rgba(204, 9, 9, 0.1);
  padding: 2vw; /* ボタンの内側の余白 */
}
.audio-toggle:hover {
  background-color: rgba(0, 0, 0, 0.5); /* ホバー時に少し暗く */
}


/* 背景 ボールのスタイル */
#bounceCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.25;
  background: #ffecd2; /* パステルオレンジ背景 */
  border-radius: 0px;
  animation: bounceEffect 5s ease-in-out infinite;  /* 背景にアニメーション */
  z-index: 0;
}
@keyframes bounceEffect {
  0% { background: #ffecd2; }
  25% { background: #f8d5c3; }
  50% { background: #f0c1e1; }
  75% { background: #f7d4ff; }
  100% { background: #ffecd2; }
}

/* ボタン用のボックス */
.screen-click-content {
  text-align: center;
  color: white;
  font-size: 24px;
  padding: 20px;
  z-index: 1; /* ボタンを上に */
}
/* ボタンスタイル */
#screen-click-startBtn {
  display: inline-block;
  background-color: #524ff6cc; /* 可愛いピンク色 */
  border: none;
  color: white;
  font-size: 6vw; /* フォントサイズを大きめにして、視認性を高める */
  padding: 3vw 5vw; /* 余白を大きめにしてボタンを大きく */
  text-align: center;
  text-decoration: none;

  border-radius: 30px; /* 丸みを持たせて柔らかい印象 */
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* ボタンに少し影をつけて立体感を出す */
}
/* ホバー時 */
#screen-click-startBtn:hover {
  background-color: #ff5a5a; /* 少し暗くして、ホバーした感を出す */
  transform: translateY(-4px); /* 上にスライドさせて、動きが出る */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); /* 影を大きくして浮き上がるように見せる */
}
/* クリック時 */
#screen-click-startBtn:active {
  background-color: #e13a3a; /* さらに暗くする */
  transform: translateY(2px); /* クリック時に少し下がるようにする */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 影を縮小させて押した感を出す */
}






/* ロゴボックス */
#logo-box {
  width: 60vw;
  height: calc(60vw * 9 / 16);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  border-radius: 10px;

  /* overflowが影響する場合、これを確認する */
  overflow: hidden; /* 画像が丸く収まるように調整 */

  /* 初期状態で透明にする */
  opacity: 0;

  /* フェードインのアニメーション */
  animation: fadeIn 2s ease-out forwards;
}
/* opacityに対するフェードインアニメーション */
@keyframes fadeIn {
  0% {
    opacity: 0;  /* 初期状態は透明 */
  }
  100% {
    opacity: 1;  /* 最後は完全に表示 */
  }
}
/* フェードインアニメーション */
@keyframes fadeIn {
  0% {
    opacity: 0;  /* 初期状態は透明 */
  }
  100% {
    opacity: 1;  /* 最後は完全に表示 */
  }
}

#logo-box img {
  width: 100%;
  height: 100%;
  object-fit:fill; /* 画像をボックスに収める */
}


/***********************************/
/* キャラクターの歩き               */
/***********************************/
#canvasCharacterWalk {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;  /* 親要素に合わせてcanvasの幅を100%にする */
  height: 100%; /* 親要素に合わせてcanvasの高さを100%にする */
  z-index: 1; /* 他の要素の下に配置 */
  opacity: 0.3; /* 透明度を50%に設定 */
  /*border: #e13a3a solid 3px;*/
}
/************************************/
/* オープニング画面(コピーライト)     */
#opning-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 3vw;
  margin: 0vw;
  z-index: 100;
}
#opning-footer-copyright {
  font-size: 4vw;
  color: rgba(255, 255, 255, 0.5);
  margin: 0; /* 上下のマージンをリセット */
  padding: 0; /* パディングもリセット */
}


/***********************************/
/* オープニング画面                 */
/***********************************/
#screen-opning {
  position: relative;
  display: flex;
   overflow: hidden; /* はみ出した部分を隠す */
  width: 100%; /* 親要素を画面いっぱいに広げる */
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  justify-content: center;
  align-items: center;
  /*background: url("./../assets/img/op.webp") no-repeat center center/cover;*/
  color: white;
  text-align: center;
  z-index: 1;
  flex-direction: column;
  box-sizing: border-box;

  /* 初期状態を透明にしてフェードイン */
  opacity: 0;  /* 初期状態は透明 */
  animation: fadeIn 2s ease-out forwards;  /* フェードインアニメーション */
  /*border: blue solid 3px  ;*/
}

/* フェードインアニメーション */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;  /* 最終的に完全に表示 */
  }
}
/* オープニングオーバーレイ */
.opning-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  /*border: red solid 3px;*/
  box-sizing: border-box
}

/* オープニングコンテンツ */
.opning-content {
  position:relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2;
  text-align: center;
  /*border: red solid 3px;*/
  box-sizing: border-box;
}

/* オープニングタイトル */
#game-title {
  position: absolute;
  top: 5vh;
  font-size: 5vw;
  color: rgb(124, 231, 241); /* 文字の基本色は白 */
  text-align: center;
  overflow: hidden;
  font-family: "Nikukyu", sans-serif; /* にくきゅうフォント */
  background: linear-gradient(45deg, #A7C7E7, #A4D8E7, #B0E0E6); /* パステルブルー系 */
  -webkit-background-clip: text; /* 背景グラデーションを文字に適用 */
  text-shadow: 4px 4px 8px rgba(0, 128, 255, 0.5), 0px 0px 25px rgba(0, 128, 255, 0.4);  /* 文字にふんわりした影 */

  /* 可愛く動かすアニメーション */
  animation: bounce 1.5s infinite alternate;
}
/* アニメーション（跳ねる感じ） */
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6vw); /* 少し上に跳ねる */
  }
  100% {
    transform: translateY(0);
  }
}
.letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(-100vh); /* 画面外から開始 */
  animation: drop 1.5s ease-out forwards;
}
@keyframes drop {
  0% {
    opacity: 0;
    transform: translateY(-100vh);  /* 初期位置（画面外） */
  }
  100% {
    opacity: 1;
    transform: translateY(0);  /* 最終位置（通常位置） */
  }
}

/* オープニングサブタイトル */
#game-title-sub {
  position: absolute;
  top: 24vh;
  font-size: 6vw;
  color: rgb(246, 246, 246); /* 文字の基本色は白 */
  text-shadow: 4px 4px 8px rgba(0, 128, 255, 0.5), 0px 0px 25px rgba(0, 128, 255, 0.4);  /* 文字にふんわりした影 */
  text-align: center;
  overflow: hidden;
  font-family: "Nico Moji";

  /* 初期状態: 非表示 */
  opacity: 0;

  /* フェードインのアニメーション */
  animation: fadeIn 2s ease-in-out forwards;
  animation-delay: 3s; /* 1秒遅延してから表示 */
}

/* フェードインアニメーションの定義 */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px); /* 少し下から始める */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* 最終的に元の位置に戻る */
  }
}


/***********************************/
/* 共通ボタンのスタイル             */
.opning-content button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 水平中央に配置 */
  padding: 15px 30px;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  border-radius: 5px;
  transition: background-color 0.3s;
  text-shadow: 4px 4px 8px rgba(0, 128, 255, 0.5), 0px 0px 25px rgba(0, 128, 255, 0.4); /* 文字にふんわりした影 */
  /*border: #1e0474aa solid 2px;*/
}
/* スタートボタン */
#startBtn {
  top: 43vh;
  font-size: 5.5vw;
  background-color: rgba(0, 0, 0, 0.5);  /* 明るい青 */
  color: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  transition: background-color 0.3s ease;
}
#startBtn:hover {
  background-color: rgb(31, 31, 33);  /* 明るい青の強調 */
  color: black;
}

/* オプションボタン */
#optionsBtn {
  top: 57vh;
  font-size: 3.5vw;
  background-color: rgba(0, 0, 0, 0.7);  /* 緑色 */
  color: white;
  border-radius: 10px;
  transition: background-color 0.3s ease;
}
#optionsBtn:hover {
  background-color: rgb(31, 31, 33);  /* 明るい青の強調 */
  color: black;
}
/*************************************/
/* サウンドテストボタン */
#soundTestBtn {
  top: 68vh;
  font-size: 2.8vw;
  background-color: rgba(50, 42, 204, 0.7);  /* 赤色 */
  color: white;
  border-radius: 10px;
  transition: background-color 0.3s ease;
}
#soundTestBtn:hover {
  background-color:rgba(82, 74, 224, 0.7);  /* 赤色 */
  color: black;
}

/*************************************/
/* オープニング画面(ハイスコア)        */
#opning-hiScore{
  position:relative;
  bottom: 13vh;
  right: 0;
  width: 100%;
  text-align: center;
  background-color: rgba(98, 33, 204, 0.2);
  padding: 3vw;
  margin: 0vw;
  z-index: 100;
  font-size: 4vw;
  color: rgba(255, 255, 255, 0.5);
  margin: 0; /* 上下のマージンをリセット */
  padding: 0; /* パディングもリセット */
}

/* 雪の粒のスタイル */
.snowflake {
  position: absolute;
  top: -10px; /* 上から降らせる */
  background-color: white;
  border-radius: 50%;
  opacity: 0.3;
  pointer-events: none; /* 雪にマウスイベントを当てない */
  animation: fall linear infinite;
}
@keyframes fall {
  to {
    transform: translateY(100vh); /* 画面の下まで降らせる */
  }
}
/* 雪のサイズと速度をランダムに設定 */
.snowflake:nth-child(odd) {
  animation-duration: calc(4s + (10 * random)) !important;
  animation-delay: calc(-2s + (random)) !important;
  width: calc(5px + random);
  height: calc(5px + random);
}

/* 雪が積もるアニメーション */
@keyframes accumulate {
  0% {
    transform: translateY(0); /* 最初は降る */
  }
  100% {
    transform: translateY(0); /* 下まで来たら積もる位置に残る */
  }
}


/* 積雪の効果 */
.snow {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.7); /* 雪の積もった部分 */
  animation: accumulateSnow 5s infinite ease-out;
}
/* 積雪のアニメーション */
@keyframes accumulateSnow {
  0% {
    height: 0;
  }
  100% {
    height: 20px; /* 積もる高さ */
  }
}