body {
  background: #222;
  font-family: sans-serif;
  text-align: center;
  color: #e7e7e7;
}

canvas {
  background: #111;
  display: block;
  margin: 1em auto;
  border: 4px solid #888;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.ui {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 452px; /* キャンバスと同じ幅 */
  padding: 10px 15px;
  margin: 10px auto;
  border: 2px solid #ccc;
  border-radius: 12px;
  background-color: #4e9217;
  font-family: "Segoe UI", sans-serif;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
}

.ui label,
.ui p {
  margin: 0;
  font-size: 16px;
}

/* COINだけサイズを変える */
.coin-label {
  font-size: 20px !important; /* 強制的に上書き */
  color: rgb(39, 39, 39);
  font-weight: bold;
}
#coinDisplay {
  font-size: 20px; /* お好みのサイズに調整 */
  font-weight: bold;
  color: #ff73e8; /* ゴールド系でコイン感 */
  text-shadow: 2px 1px 2px #272525;
}
.ui input {
  font-size: 18px;
  padding: 4px;
  border-radius: 6px;
  border: 1px solid #aaa;
}

.ui button {
  font-size: 16px;
  padding: 6px 12px;
  border-radius: 8px;
  border: none;
  background-color: #252ca3;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.ui button:hover {
  background-color: #38688f;
}

input[type="number"] {
  width: 120px;
  font-size:14px;

}

#legendaryScore {
    font-size: 18px;
    font-weight: bold;
    color: gold;
    text-shadow: 1px 1px 4px rgba(255,215,0,0.6);
    font-family: 'Cinzel', serif; /* 伝説感あるフォントもおすすめ */
  }

#clearLegendaryScore {
  font-size: 18px;
  margin-left: 8px;
  background: transparent;
  border: none;
  color: crimson;
  cursor: pointer;
  font-weight: bold;
}

#clearLegendaryScore:hover {
  text-decoration: underline;
}

/* 初期状態で非表示 */
#gameGuide {
  display: none;
  position: fixed; /* fixedで画面中央に固定 */
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%); /* 中央に寄せる */
  width: 430px;
  background: #111111;
  border: 2px solid #21e271;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  font-size: 14px;
  font-family: sans-serif;
  color: rgb(241, 241, 241);
  margin: 0 auto;
  opacity: 0.9;
  z-index: 100;
}
.open-button{
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  background-color: #0078D4;
  color: white;
  text-shadow: 2px 1px 2px #272525;
  border: none;
  border-radius: 4px;
}
.close-button {
  cursor: pointer;
  font-size: 12px;
  padding: 8px 12px;
  margin: 8px;
  background-color: #0078D4;
  color: white;
  border: none;
  border-radius: 4px;
}

.close-button {
  float: right;
  background-color: #d40000;
  font-size: 18px;
  border-radius: 6px;
}
#gameGuide ul {
  list-style: none;         /* デフォルトの「・」を消す */
  padding-left: 0;          /* 左余白をなくす */
  margin: 10px;
}

#gameGuide li {
  position: relative;
  padding-left: 1.4em;      /* ▶の分だけ左に余白を作る */
  text-align: left;         /* テキストを左寄せ */
}

#gameGuide li::before {
  content: "▶";
  position: absolute;
  left: 0;                  /* 左端に固定 */
  color: #80ccff;              /* お好みで色調整 */
}