body {
  margin: 0;
  padding: 0;
  background: #FFFFFF;
  font-family: "Noto Sans JP", sans-serif;
}

.game-container {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #FFFFFF; /* 万一画像が読み込めなかった時の背景色 */
  background-image: url("../images/bg_pattern.png");
  background-repeat: repeat; /* ← タイル状に繰り返し表示 */
  background-size: auto;     /* ← 元の70×70サイズのまま */
  background-position: top left; /* （中央揃えでもOKです） */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* タイトル */
.title-area {
  margin-top: 80px;
  text-align: center;
  width: 100%;
}

.game-logo {
  width: 65%;
  max-width: 400px;
  height: auto;
}

/* ボタンエリア */
.button-area {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* ボタン画像 */
.menu-btn {
  width: 280px;
  height: auto;
  transition: transform 0.15s ease, opacity 0.15s ease;
  cursor: pointer;
}

.menu-btn:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

.menu-btn-link {
  text-decoration: none;
}

/* スマホ対応 */
@media (max-width: 480px) {
  .game-logo {
    width: 80%;
    margin-top: 60px;
  }

  .menu-btn {
    width: 220px;
  }

  .button-area {
    gap: 16px;
    margin-top: 40px;
  }
}


/* ----------------------------- */
/* タイムアタックランキングポップ（レスポンシブ対応） */
.ranking-attack-popup {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.3); /* スミ30％ */
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}

.ranking-attack-popup.visible {
  opacity: 1;
  pointer-events: auto;
}

.ranking-attack-popup-inner {
  position: relative;
  width: 300px;
  max-width: 90%;
  height: 555px;
}

.ranking-base {
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
}

.ranking-attack-list {
  position: absolute;
  top: 120px; /* ベース画像の余白に合わせて調整 */
  left: 40px;
  width: 240px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.ranking-attack-list li {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.rank-attack-icon {
  width: 54px;
  height: 53px;
  margin-right: 8px;
}

.rank-attack-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rank-attack-name {
  font-weight: bold;
  color: #D15975;
  font-size: 0.9rem;
  padding-left: 4px;
}

.rank-attack-time {
  display: flex;
  align-items: center;
  height: 40px;
}

.rank-attack-tiem img {
  width: 24px;
  height: 26px;
}

/* ボタンエリア */
.ranking-attack-buttons {
  position: absolute;
  bottom: 9px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

/* ボタン単体 */
.ranking-attack-btn {
  width: auto;
  max-height: 54px;
  height: 100%;
  cursor: pointer;
  transition: transform 0.2s;
}

.ranking-attack-btn:hover {
  transform: scale(1.05);
}

/* 再挑戦ボタン非表示時にトップボタン中央寄せ */
.ranking-attack-buttons.single {
  justify-content: center;
}


/* あそびかたポップ全体 */
.howTo-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 500;
}

/* 内部コンテナ */
.howTo-popup-inner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* あそびかた画像（比率維持） */
.howTo-image {
  max-width: 90%;
  max-height: 90vh;
  width: auto;
  height: auto;
  display: block;
}

/* トップへ戻るボタンを画像の上に重ねる */
.howTo-top-btn {
  position: absolute;
  bottom: 2%;              /* 画像下部に近づける（%で調整可能） */
  left: 50%;
  transform: translateX(-50%);
  width: 40%;              /* 画像に対して自然な大きさ */
  max-width: 240px;        /* 最大サイズ制限 */
  height: auto;
  cursor: pointer;
}

/* スマホなど画面が小さい場合にも自然に縮むように */
@media (max-width: 600px) {
  .howTo-top-btn {
    width: 40%;
    bottom: 2%;
  }
}