/* **全体の背景をグラデーションに変更** */
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    background: linear-gradient(135deg, #ff9a9e, #fad0c4); /* ピンク系グラデーション */
    font-family: 'Poppins', sans-serif; /* お洒落なフォント */
    color: #333;
}

/* **ゲーム画面（キャンバス）のデザインを調整** */
canvas {
    background: rgba(255, 255, 255, 0.8); /* 透明感のある白 */
    display: block;
    margin: 0 auto;
    border: 1px solid #dedad7; /* 黒枠 */
    border-radius: 10px; /* 角丸に */
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* 影を追加 */
}

/* **操作ボタンエリアを中央揃え** */
#controls {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

/* **移動ボタンを中央に配置** */
#moveButtons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 5px;
}

/* **ボタンのデザインをモダンに変更** */
button {
    font-size: 13px;
    font-weight: 400;
    padding: 8px 15px;
    cursor: pointer;
    width: 90px;
    height: 40px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #ff758c, #ff7eb3); /* ピンク系グラデーション */
    color: white;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    transition: 0.3s ease-in-out;
}

/* **ボタンのホバー時のアニメーション** */
button:hover {
    transform: scale(1.05);
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

/* **ボタンのクリック時のアニメーション** */
button:active {
    transform: scale(0.95);
    background: linear-gradient(135deg, #ff5e7d, #ff6b9c);
}



/* **スコアとタイマーのデザイン（キャンバスのすぐ上に配置）** */
.score-timer {
    display: flex;
    justify-content: space-between;
    width: 300px; /* キャンバスの横幅と同じサイズ */
    padding: 1px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    font-size: 15px;
    font-weight: 500;
    margin-top: 1px;
    margin-bottom: 1px; /* キャンバスとの間隔 */
}

/* **スコアとタイマーの文字を中央揃え** */
.score-timer div {
    flex: 1;
    text-align: center;
}





.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.0); /* 背景は透明 */
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 上寄せに変更 */
  z-index: 9999;
}

.modal {
  margin-top: 70px; /* ← 👈 ここを調整して「スコアのすぐ下」に */
  background: white;
  padding: 25px 30px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  text-align: center;
  font-family: 'Poppins', sans-serif;
  color: #333;
  animation: popUp 0.3s ease;
}





.ranking-title {
    font-size: 16px;
    font-weight: bold;
    color: #e91e63;
    text-align: center;
    margin-top: 1px;
    margin-bottom: 2px;
    padding-top: 1px;
    padding-bottom: 4px;
    border-bottom: 2px solid #eec1d4;
}







.ranking-scroll {
    max-height: 170px;
    overflow-y: auto;
    padding: 1px 10px 5px 10px; /* 上, 右, 下, 左 */
    border: 1px solid #ccc;
    background: linear-gradient(135deg, #fffafc, #ffe3ec); /* お洒落な背景 */
    border-radius: 12px;
    font-size: 16px;
    line-height: 1.6;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* ランキング1件ごとのスタイル */
.rank-entry {
    display: block;
    padding: 1px 4px 1px 4px; /* 上, 右, 下, 左 */          /* 上下左右の内側余白を縮小 */
    margin: 0;                  /* ブロック間の外側余白を削除 */
    line-height: 1.2;           /* 行間を詰める */
    font-size: 14px; /* この行を追加・調整 */
    border-bottom: 1px dashed #e0bfc0;
    color: #d81b60;
    font-weight: 500;
}








.modal p {
  font-size: 18px;
  margin-bottom: 10px;
  color: #555;
}
.modal p strong {
  color: #e91e63;
  font-weight: bold;
}





.player-rank {
  font-size: 20px;
  font-weight: bold;
  color: #e91e63;
  background: #fff3f6;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 15px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}






.modal input {
  width: 80%;
  padding: 10px;
  margin-top: 15px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 16px;
}

.modal button {
  margin-top: 20px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #4CAF50, #66bb6a);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s;
}

.modal button:hover {
  background: linear-gradient(135deg, #43a047, #57d17c);
}




.modal button#closeNameModalBtn {
  margin-left: 10px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #cccccc, #aaaaaa);
  color: #333;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s ease;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15);
}



.modal button#closeNameModalBtn:hover {
  background: linear-gradient(135deg, #bbbbbb, #999999);
  transform: scale(1.05);
}







.ranking-button-container {
    margin-top: 12px;
    text-align: center;
}



.ranking-button {
    font-size: 15px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #ffeb3b, #fbc02d); /* 🌟 ゴールドグラデーション */
    color: #333; /* 金に映える落ち着いた文字色 */
    cursor: pointer;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    transition: 0.3s ease-in-out;
    width: auto;
    min-width: 160px;
}





.ranking-button:hover {
    background: linear-gradient(135deg, #fdd835, #fbc02d); /* 少し濃いめの金色 */
    transform: scale(1.05);
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}








@keyframes popUp {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}