/* ───────── リセット & ベース ───────── */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
  overflow: auto;
  background: linear-gradient(135deg, #000814 0%, #001f54 100%);
  color: #0ff;
  font-family: sans-serif;
  
  -webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}

/* ───────── ヘッダー ───────── */
.site-header {
  height: 60px;
  background: #111;
  display: flex;
  align-items: center;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* ───────── トップ画面 ───────── */
#title-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.btn-group2 {
  display: flex;
  gap: 1rem;
  justify-content: center;
  width: 100%;
  max-width: 300px;
  margin-bottom: 1rem;
}
.btn-group2 .btn {
  flex: 1;
  padding: 12px 0;
  font-size: 1rem;
  font-weight: bold;
  background: linear-gradient(135deg, #00e5ff, #0066ff);
  border: none;
  border-radius: 25px;
  color: #fff;
  box-shadow: 0 8px 16px rgba(0,229,255,0.4);
  transition: transform .2s, box-shadow .2s;
}
.btn-group2 .btn:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 24px rgba(0,229,255,0.6);
}
.logo {
  display: block;
  width: 60%;
  max-width: 300px;
  margin: 1rem auto;
}

/* ─── メインメニュー（START/遊び方） ─── */
.btn-group {
  display: flex;
  gap: 1rem;
  justify-content: center;
  width: 100%;
  max-width: 360px;
  margin-top: 2rem;
}
.btn-group .btn {
  flex: 1;
  padding: 14px 0;
  font-size: 1.2rem;
  font-weight: bold;
  background: linear-gradient(135deg, #00e5ff, #0066ff);
  border: none;
  border-radius: 25px;
  color: #fff;
  box-shadow: 0 8px 16px rgba(0,229,255,0.4);
  transition: transform .2s, box-shadow .2s;
}
.btn-group .btn:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 12px 24px rgba(0,229,255,0.6);
}

/* ───────── 遊び方画面 ───────── */
#how-to-screen {
  padding: 20px;
  background: rgba(0,0,0,0.9);
  text-shadow: 0 0 6px #0ff;
}
#how-to-screen .back-btn {
  display: block;
  margin: 1rem auto 0;
  padding: 10px 24px;
  border: none;
  border-radius: 30px;
  background: radial-gradient(circle at top left, #ff0066, #ffcc00);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: transform .1s, box-shadow .1s;
}
#how-to-screen .back-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #c70039;
}

/* ───────── ゲーム画面 & リザルト ───────── */
#game-screen,
#result-screen {
  height: calc(100vh - 60px);
}

/* ───────── ランキング画面 ───────── */
#ranking-screen {
  padding: 1rem;
  background: #001f54;
  min-height: calc(100vh - 60px);
}
.ranking-container {
  max-width: 400px;
  margin: 0 auto;
}
.rank-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.rank-tabs .tab-btn {
  flex: 1;
  padding: 0.5rem 0;
  background: #002f75;
  border: none;
  border-radius: 4px;
  color: #0ff;
  font-weight: bold;
  transition: background .2s;
}
.rank-tabs .tab-btn.active,
.rank-tabs .tab-btn:hover {
  background: #0047ab;
}

/* ランキングリスト */
#leaderboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
#leaderboard li {
  position: relative;
  background: #002f75;
  border-radius: 8px;
  padding: 2rem 1rem 1rem; /* 上部の番号バッジ分スペース確保 */
  box-shadow: 0 2px 4px rgba(0,255,255,0.2);
  cursor: pointer;
  transition: transform .1s, box-shadow .2s;
}
#leaderboard li:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,255,255,0.4);
}
/* 順位バッジ */
.rank-num {
  position: absolute;
  top: -0.1rem;   /* ← -0.9rem → -0.6rem に変更 */
  left: 50%;
  transform: translateX(-50%);
  background: #0ff;
  color: #001f54;
  font-size: 0.9rem;
  font-weight: bold;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
}
/* アイコン */
.ranking-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: block;
  margin: 0.5rem auto;
}
/* 名前 */
.name {
  display: block;
  text-align: center;
  color: #0ff;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
/* スコア */
.score {
  display: block;
  text-align: center;
  background: #0ff;
  color: #001f54;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.9rem;
}

/* ───────── レスポンシブ ───────── */
@media (max-width: 480px) {
  .btn-group, .btn-group2 {
    flex-direction: column;
  }
  .btn-group .btn, .btn-group2 .btn {
    width: 90vw;
    max-width: none;
  }
}



/* 「戻る」ボタンをかっこよく */
/* 戻るボタン（#back-rank）をグラデーションボタンに */
#back-rank.btn.small {
  padding: 10px 20px;
  background: linear-gradient(135deg, #00e5ff, #0066ff);
  color: #fff;
  font-weight: bold;
  border: none;
  border-radius: 25px;
  box-shadow: 0 8px 16px rgba(0,229,255,0.4);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}

#back-rank.btn.small:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 24px rgba(0,229,255,0.6);
}

/* リザルト画面全体 */
#result-screen {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* コンテナ */
.result-container {
  background: #1a1a1a;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 255, 200, 0.4);
  text-align: center;
  width: 90%;
  max-width: 400px;
}

/* タイトル */
.result-container h2 {
  color: #00ffe0;
  font-size: 1.8rem;
  margin-bottom: 1rem;
  text-shadow: 0 0 8px rgba(0, 255, 224, 0.6);
}

/* スコア表示 */
.result-scores p {
  color: #f0f0f0;
  font-size: 1.2rem;
  margin: 0.5rem 0;
}

.result-scores strong {
  color: #00ffd0;
}

/* シェアボタン群 */
.share-buttons {
  display: flex;
  gap: 0.5rem;
  margin: 1.5rem 0;
  flex-wrap: wrap;
  justify-content: center;
}

.btn.small {
  background: transparent;
  border: 2px solid #00ffe0;
  color: #00ffe0;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.btn.small:hover {
  background: #00ffe0;
  color: #1a1a1a;
}

/* トップへ戻るボタン強調 */
#to-top {
  display: inline-block;
  margin-top: 0.5rem;
  border-color: #ff0066;
  color: #ff0066;
}

#to-top:hover {
  background: #ff0066;
  color: #1a1a1a;
}


/* モバイル時の戻る・ランキングボタン調整 */
@media (max-width: 480px) {
  /* ボタンを中央寄せ＆横幅を揃える */
  .btn-group, .btn-group2 {
    flex-direction: column;
    align-items: center;        /* ← 横幅揃えて中央寄せ */
  }
  .btn-group .btn, .btn-group2 .btn {
    width: 80vw;                /* ← 画面幅の80%に */
    margin: 0.5rem 0;           /* ← 上下の隙間を確保 */
    max-width: 300px;           /* ← 任意で上限 */
  }

  /* #back-rank と #show-ranking を同じスタイルに */
  #back-rank, #show-ranking {
    display: block;             /* ← flexアイテムじゃなくてもOK */
    width: 80vw;
    max-width: 300px;
    margin: 0.5rem auto;        /* ← 真ん中に寄せる */
  }

  /* もしヘッダー内にボタンを置いているなら */
  .site-header {
    justify-content: space-between; /* ← 左右両端に配置 */
  }
  .site-header .btn {
    flex: none;                 /* ← ヘッダー内ボタンの横伸び抑制 */
    margin: 0 0.5rem;
  }
}





/* ───────── 遊び方画面を上下左右中央寄せ ───────── */
#how-to-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* 縦中央 */
  align-items: center;      /* 横中央 */
  min-height: calc(100vh - 60px);
  padding: 1rem;
  text-align: center;       /* テキストも中央揃え */
}

/* リスト幅を抑えて左右に余白 */
#how-to-screen .how-list {
  max-width: 90%;
  width: 400px;             /* お好みで調整 */
  margin: 0 auto 1.5rem;
  padding-left: 1rem;       /* 通常のリストマーカー用 */
  list-style-position: inside;
}

/* リストアイテムの余白調整 */
#how-to-screen .how-list li {
  margin-bottom: 0.75rem;
}

/* 戻るボタンをリストの下に中央表示 */
#back-from-howto {
  margin-top: 1rem;
}


/* タイトル画面をビューポートいっぱいに */
#title-game {
  height: 85vh;            /* 画面全体の高さ */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;  /* 縦中央 */
  align-items: center;      /* 横中央 */
}