/* game.css — game.html 専用スタイル（ゲームページの枠・インベーダー） */
/* home.css にあったゲーム用スタイルをこちらへ移動 */

/* ページの枠（index のヒーローと同じ中央寄せ） */
.game-page {
  position: relative;
  z-index: 2;
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 5% 34px;
}

@media (max-width: 600px) {
  .game-page { padding-top: 16px; min-height: 0; }   /* スマホは画面の高さに合わせず、ゲームの下をすぐフッターに */
}

/* invaders.css の下の余白（60px）も、このページでは消す */
.game-page .invaders-container { margin-bottom: 0; }

.game-container {
  margin: 30px auto 0;   /* フッターまでの間を詰める（以前は 60px） */
  max-width: 1040px;
  text-align: center;
  position: relative;
}

#invadersCanvas {
  max-width: 100%;
  height: auto;
  border: 1px solid #000000;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  touch-action: none;
  cursor: pointer;
}

.control-bar {
  margin: 15px auto 0;
  width: 100%;
  max-width: 1000px;
  height: 90px;
  background: rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  touch-action: none;
  cursor: pointer;
}

.control-bar::before {
  content: "← ここを指で左右になぞって操作 →";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(0, 0, 0, 0.45);
  font-size: 1rem;
  white-space: nowrap;
  pointer-events: none;
}

@media (min-width: 769px) {
  .game-container { max-width: 620px; }
}