/* 全体背景: picsumのランダム画像を固定表示（商用利用OK） */
body {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  color: #fff;
  background: #222; /* デフォルトの暗い背景 */
  position: relative;
  overflow: hidden;
}

/* 背景画像を疑似要素で追加し、モノクロ化 */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://picsum.photos/1600/900') no-repeat center center fixed;
  background-size: cover;
  filter: grayscale(50%);  /* 背景のみモノクロ化 */
  z-index: -1; /* 背景として最背面に配置 */
}

/* メイン コンテナ: 左サイドバー, メインゲーム, 右サイドバーを横並び */
.game-container {
  display: flex;
  justify-content: center; /* 横方向中央寄せ */
  align-items: center;     /* 縦方向中央寄せ */
  margin: 0 auto;
  padding: 20px;
  background: rgba(0,0,0,0.5);
  border-radius: 8px;
  transform: translateY(7%); /* 中心基準で上下の余白を均等に */
}

/* サイドバー共通 */
.sidebar-left, .sidebar-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
  margin: 0 10px;
  padding: 10px;
  border-radius: 8px;
}

/* メインゲーム部分 */
.main-game {
  position: relative;
  top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 500px;
  margin: 0 10px;
  border-radius: 8px;
}

/* キャンバス中央寄せ */
#gameCanvas {
  display: block;
  border: 1px solid #444;
  width: 100%;
  width: 100%;
}

/* HOLD部分 */
.hold-section {
  text-align: center;
  margin-bottom: 20px;
}

.hold-section canvas {
  background: #111;
  border: 1px solid #444;
}

/* Next部分 */
.next-section {
  text-align: center;
  margin-bottom: 20px;
}

.next-section .nextCanvas {
  background: #111;
  border: 1px solid #444;
  display: block;
  margin: 5px auto;
}

/* Stats部分とKey Bindings部分の書式統一 */
.stats ul,
.keybindings ul {
  list-style: none;  /* 箇条書きの点を削除 */
  line-height: 1.6;
  padding: 0;
  text-align: left;
  margin: 0 auto;
  display: inline-block;
}

/* ゲームオーバー画面 */
.game-over {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.game-over-content {
  text-align: center;
}

.game-over-content button,
.game-over-content input[type="text"] {
  margin-top: 10px;
  padding: 10px 20px;
  font-size: 16px;
}