html, body {
  /*position: relative;*/
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;  /* 余分なパディングを取り除く */
  box-sizing: border-box;
  /*border: #3823f4 solid1px;*/
  overflow-x: hidden;  /* 横スクロールを非表示にする */
  overflow-y: hidden;  /* 横スクロールを非表示にする */
  font-family: 'Poppins', sans-serif;
}

/* タッチ時のテキスト選択を無効化 */
* {
  -webkit-user-select: none;  /* iOSのSafari */
  -moz-user-select: none;     /* Firefox */
  -ms-user-select: none;      /* Internet Explorer/Edge */
  user-select: none;          /* 標準 */
}

/***********************************/
/* ゲーム画面                       */
/***********************************/
#screen-game {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  animation: fadeIn 0.5s ease-out forwards;  /* フェードインアニメーション */
  /*animation: fuwafuwa 1s ease-in-out infinite; /* アニメーションの適用 */
}
/* フェードインアニメーション */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;  /* 最終的に完全に表示 */
    /*background-color: black; /* 黒色に変わる */
  }
}
/* フェードアウトアニメーション */
@keyframes fadeOut {
  0% {
    opacity: 1;
    /*background-color: transparent; /* 透明 */
    background-color: black; /* 黒色に変わる */
  }
  100% {
    opacity: 0; /* 最終的に完全に非表示 */
    background-color: black; /* 黒色に変わる */
  }
}

/*
@keyframes fuwafuwa {
  0% {
    transform: translate(0px, 0px);  初期位置
  }
  25% {
    transform: translate(5px, 5px);  少し右下に
  }
  50% {
    transform: translate(-5px, -5px);  左上に
  }
  75% {
    transform: translate(5px, -5px);  右上に
  }
  100% {
    transform: translate(0px, 0px);  元の位置に戻す
  }
}
  */


/* 残機表示ボックス */
#canvas-container {
  position: absolute;
  top: 10px;    /* 画面の上から20px */
  right: 10px;  /* 画面の右から20px */
  z-index: 5;   /* UIが前面に来るように設定 */
  width: 97vw;
  height: 4vh;
  box-sizing: border-box;
  /*border: #45a049 solid 1px ;*/
}

/* 残機表示ボックス：canvas */
#characterCanvas {
  width: 100%;

  height: 100%;
  opacity: 0.7; /* 透明度を設定（0は完全に透明、1は不透明） */
  box-sizing: border-box;
  /*border: #5945a0 solid 3px ;*/
}


/* ゲーム画面(ヘッダー) */
#game-header {
  width: 100vw;
  height: 5vh;
  box-sizing: border-box;
  display: flex;               /* フレックスボックスを使用 */
  justify-content: space-between; /* 左右に配置 */
  align-items: flex-end;         /* 縦方向で下に寄せる */
  border: #000000ff solid 3px;
    border-top-left-radius: 20px; /* 左上を丸く */
  border-top-right-radius: 20px; /* 右上を丸く */
}


/* ゲーム画面(ヘッダー) スコア */
#game-score {
  padding-left: 3vw;
  font-size: 3.5vw;
  /*border: #ff12c0 solid 3px;*/
}
/* ゲーム画面(ヘッダー) ハイスコア */
#game-highScore {
  padding-left: 3vw;
  font-size: 3.5vw;
  /*border: #ff12c0 solid 3px;*/
}

/* ゲーム画面(ヘッダー) レベル */
#game-level {
  padding-right: 3vw;
  font-size: 3.5vw;
  /*border: #ff12c0 solid 3px;*/
}

/* ゲーム画面(メイン) */
#game-main {
  position: relative; /* 親要素にpositionを指定 */
  display: flex; /* Flexboxを使って子要素を中央寄せ */
  justify-content: center; /* 横方向（X軸）で中央に配置 */
  align-items: center; /* 縦方向（Y軸）で中央に配置 */
  width: 100vw;
  height: 100%;
  box-sizing: border-box;
  background: repeating-linear-gradient(
    45deg,
    #f8e0e6, /* 淡いピンク */
    #f8e0e6 10px,
    #f7d4d9 10px,
    #f7d4d9 20px
  );
  background-size: 40px 40px; /* チェック柄のサイズ */
  animation: moveBackground 25s linear infinite; /* 背景アニメーションをゆっくり動かす */
  z-index: -1; /* 背景を他の要素より後ろに配置 */
  /*border: 10px solid #5a5a5a; /* パイプの枠線（グレー系） */
  /*border-radius: 10px; /* 丸みを持たせる（パイプ感） */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* 立体感を出すための影 */
  background-image: linear-gradient(145deg, rgb(45, 40, 40), #110d0d); /* 背景タイルアニメ */

  /* 180度回転サンプル */
  /*transform: rotate(180deg); /* 180度回転 */
  /*transform-origin: center; /* 回転の中心を中央に指定 */

   transition: transform 1s ease; /* アニメーションをつけてスムーズに回転 */
}

@keyframes moveBackground {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 100%; /* スライドの方向を設定 */
  }
}

/* 重力反転用 180度、回転が適用されるクラス */
.rotate {
  transform: rotate(180deg); /* 180度回転 */
  transform-origin: center; /* 回転の中心を中央に指定 */
}


/* 重力反転用 回転を戻すクラス */
.rotateReset {
  transform: rotate(0deg); /* 180度回転 */
  transform-origin: center; /* 回転の中心を中央に指定 */
}


/* ブロック下の画像 */
#gameImage {
  position: absolute; /* 画像を絶対位置に設定 */
  top: 3vh; /* ゲーム画面の下に配置 */
  width: calc(100vw - 10px); /* 画面の幅に合わせる */
  height: calc(100vw - 20px);  /* 画像の高さを設定（適宜変更） */
  /*background-image: url('/image.webp'); /* 画像を設定 */
  background-size: cover; /* 画像を親要素のサイズに合わせる */
  z-index: 0; /* ゲームキャンバスより手前に表示されるように設定 */
  border: 10px solid transparent;
  border-image: linear-gradient(to right bottom, #4b3f29, #2e251e) 1; /* 深いブラウンのグラデーション */
  outline: 5px solid #2b1a12; /* 渋い暗めの外縁色 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8), 0 8px 20px rgba(0, 0, 0, 0.1); /* より深いシャドウを追加 */
  /*border-radius: 2px; /* 角を丸めて柔らかさを加える */
  box-sizing: border-box;
}


#gameCanvas {
  position: absolute; /* 親要素に対して絶対位置 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* 親要素の幅と高さに合わせて最大化 */
  box-sizing: border-box;
  position: absolute;
  /*border: #ff12c0 solid 3px;*/
}

/********************/
/* ブロックボックス  */
#block-box{
  position: absolute;  /* 親要素に対して絶対位置 */
  top: 0px;              /* 親要素の上端に配置 */
  left: 0px;             /* 親要素の左端に配置 */
  width: 100vw ; /* 100vwからボーダーの幅（左右3pxずつ）を差し引く */
  height:98vw ;        /* ビューポート高さの10% */
  z-index: 1;        /* 上に表示されるように指定 */
  box-sizing: border-box;
  /*border: #45a049 solid 3px;  /* 枠線を設定 */
}

/********************/
/* 霧の世界  */
#fogOfWar-box{
  /*display: none; /* 最初は非表示 */
  position: absolute;  /* 親要素に対して絶対位置 */
  top: 0px;              /* 親要素の上端に配置 */
  left: 0px;             /* 親要素の左端に配置 */
  width: 100vw ; /* 100vwからボーダーの幅（左右3pxずつ）を差し引く */
  height:100vh ;        /* ビューポート高さの10% */
  z-index: 2;        /* 上に表示されるように指定 */
  box-sizing: border-box;

  opacity: 0; /* 初期の透明度 */
  transition: opacity 5s ease-in-out; /* 5秒でフェードイン・フェードアウト */

}
/* フェードイン後の表示状態 */
#fogOfWar-box.show {
  display: flex;
  opacity: 1; /* フェードイン後の透明度 */
}

/* フェードアウト時のクラス */
#fogOfWar-box.fadeOut {
  opacity: 0; /* フェードアウト */
}


/********************/
/* メテオストライク-BOX  */
#meteorStrike-box{
  position: absolute;  /* 親要素に対して絶対位置 */
  top: 0px;              /* 親要素の上端に配置 */
  left: 0px;             /* 親要素の左端に配置 */
  width: 100vw ; /* 100vwからボーダーの幅（左右3pxずつ）を差し引く */
  height:100vh ;        /* ビューポート高さの10% */
  z-index: 10;        /* 上に表示されるように指定 */
  box-sizing: border-box;
  background: #000000bb;
/*  opacity: 0; /* 初期の透明度 */
}
/********************/
/* メテオストライク Canvas  */
#meteorStrikeCanvas{

}

/********************/
/*  乱用UIキャンバス  */
#CanvasUI-box{
  position: absolute;
  inset: 0;
  z-index: 20;        /* 上に表示されるように指定 */
  pointer-events: none; /* ゲーム操作を邪魔しない */
  /*border: rgb(255, 0, 0) solid 3px;*/
}
#CanvasUI {
  width: 100%;
  height: 100%;
}


.block {
  position: absolute;
  /*border: #000000 solid 1px;*/
  border-radius: 2px;
  /*background: #5c6bc0; /* 背景色を設定 */
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3), 0 5px 15px rgba(0, 0, 0, 0.5); /* 影 */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

/* 3D効果のためのスタイル */
.block-inner {
  position: absolute;
  width: 100%;
  height: 100%;

  transition: transform 0.5s ease-in-out;
  box-sizing: border-box;
}

.block .front, .block .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 裏面を見えなくする */
  background: linear-gradient(145deg, #000000, #696969); /* 立体感を出す */
  box-sizing: border-box;
}

.block .back {
  transform: rotateY(180deg); /* 裏面 */
  box-sizing: border-box;
}


/****************************************************/
/* ポーズ画面の背景 */
.pause-overlay {
  display: none; /* 初期状態では非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* 半透明の黒背景 */
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.pause-menu {
  background: rgba(255, 255, 255, 0.6); /* 半透明の黒背景 */
  padding: 30px;
  border-radius: 10px;
  text-align: center;
}

.pause-menu button {
  display: block;
  width: 200px;
  margin: 15px auto;
  padding: 10px;
  background-color: #4caf50cc;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.pause-menu button:hover {
  background-color: #45a049;
}