/* ブロック崩しゲーム用スタイル（ページ内で遊べる版） */

#gameContainer {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 640px;
  height: 100%;
  pointer-events: none;
  z-index: 100;
  display: none;
}

/* Title screen overlay */
#titleScreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  pointer-events: auto;
}
#titleScreen .titleContent {
  text-align: center;
  background: rgba(255,255,255,0.95);
  color: #990033;
  padding: 30px 40px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  max-width: 90%;
}
#titleScreen h1 {
  margin: 0 0 10px 0;
  font-size: 48px;
}
#titleScreen .subtitle {
  margin: 0 0 18px 0;
  color: #666;
}
.titleStartButton {
  background: #990033;
  color: white;
  font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
  font-size: 18px;
  font-weight: bold;
  border: none;
  padding: 10px 24px;
  cursor: pointer;
  border-radius: 6px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}
.titleStartButton:hover { background: #996633; transform: translateY(-2px); }

#gameCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 640px;
  height: 1400px; /* コンテンツの高さに合わせて調整してください（必要に応じて変更） */
  background: transparent;
}

#score {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.9);
  color: #990033;
  font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
  font-size: 20px;
  font-weight: bold;
  padding: 8px 20px;
  border: 2px solid #990033;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 101;
  pointer-events: none;
}

#gameOver {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.95);
  color: #990033;
  font-family: 'ヒラギノ明朝 ProN W3','ヒラギノ明朝 Pro',serif;
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  padding: 30px 40px;
  border: 4px double #990033;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  z-index: 101;
  display: none;
  pointer-events: none;
  max-width: 80%;
}

#gameOver small {
  display: block;
  margin-top: 15px;
  font-size: 16px;
  color: #666;
}

/*
#startButton {
  background: #990033;
  color: white;
  font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
  font-size: 16px;
  font-weight: bold;
  border: none;
  padding: 10px 24px;
  margin: 15px 0;
  cursor: pointer;
  border-radius: 6px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: all 0.3s;
}

#startButton:hover {
  background: #996633;
  transform: translateY(-2px);
}
*/

.block-item {
  transition: opacity 0.6s ease;
}

.hidden {
  opacity: 0;
}

/* sidemenu内のボタン専用調整 */
/*
.sidemenu #startButton {
  width: 100%;
  padding: 8px 0;
  margin: 8px 0 0 0;
  font-size: 14px;
  background: #990033;
  border-radius: 4px;
  box-shadow: none;
  transition: background 0.3s;
}

.sidemenu #startButton:hover {
  background: #996633;
  transform: none;
}
*/

/* Mobile: scale the game overlay to 120% for small screens */
@media (max-width: 600px) {
  #gameContainer {
    transform: translateX(-50%);/*拡大する*/
    transform-origin: top center;/*拡大の基準点を上中央に*/
    width: 768px; /* 640 * 1.2 */
    pointer-events: auto;
  }
  #gameCanvas {
    width: calc(100%); /* width will remain proportional via canvas width; CSS scale handles visual size */
    /* height will remain proportional via canvas height; CSS scale handles visual size */
  }
  #score {
    font-size: 22px;
    padding: 10px 24px;
  }
  #gameOver {
    font-size: 40px;
    padding: 36px 44px;
  }
}