:root {
  /* 👇 明るく、レベルに応じて彩度が上がる配色に変更 */
  --bg-level-0: #f8f8f8; /* 非常に明るいグレー */
  --bg-level-1: #e6f7ff; /* パステルブルー */
  --bg-level-2: #e0fff2; /* パステルグリーン */
  --bg-level-3: #fff3e0; /* パステルオレンジ */
  --bg-level-4: #f7e6ff; /* パステルパープル */
  --bg-level-5: #ffebf0; /* パステルピンク */
  --bg-level-6: #d1e2ff; /* 明るい青 */
  --bg-level-7: #b3ffda; /* 明るい緑 */
  --bg-level-8: #ffd9a3; /* 明るいオレンジ */
  --bg-level-9: #c2b3ff; /* 明るい紫 */
  --bg-level-10: linear-gradient(
    90deg,
    #ff6b6b,
    #ffa500,
    #ffe500,
    #6bff6b,
    #6b94ff,
    #a26bff,
    #ff6bb2
  );
  --bg-level-11: linear-gradient(
    90deg,
    #ff4a4a,
    #ff8c00,
    #ffd700,
    #4aff4a,
    #4a7aff,
    #8f4aff,
    #ff4a99
  );
  --bg-level-12: linear-gradient(
    90deg,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
}

body {
  margin: 0;
  padding: 0.75rem;
  font-family: sans-serif;
  background-color: var(--bg-level-0);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  position: relative;
}

header {
  width: 100%;
  margin-bottom: 0.25rem;
}
#level-display {
  font-size: 1.1rem;
  text-align: center;
  margin-bottom: 0.15rem;
}
#progress-bar {
  background: #eee;
  border: 2px solid #3b82f6;
  border-radius: 4px;
  height: 8px;
  margin-bottom: 0.15rem;
}
#progress-fill {
  display: block;
  height: 100%;
  background: #3b82f6;
  width: 0%;
}
#next-level-info {
  font-size: 0.9rem;
  text-align: center;
  margin-top: 0.2rem;
  margin-bottom: 0.5rem;
  color: #555;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}
.time-display {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}
button {
  padding: 0.5rem 1rem;
  font-size: 1.1rem;
  border-radius: 0.4rem;
  margin: 0.25rem 0;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.stats {
  margin: 0;
  padding: 0 0.5rem;
  text-align: center;
}
.stats h3 {
  margin-top: 0.5rem;
  margin-bottom: 0.2rem;
}

#hour-chart {
  width: 140px !important;
  height: 140px !important;
  margin-bottom: 0.25rem;
}
/* 変更点: xx/1440 の表示を中央寄せに戻す */
#count-display {
  font-size: 0.9rem;
  color: #888;
  margin-top: 1rem; /* 周囲の要素との余白を調整 */
  margin-bottom: 1rem;
  text-align: center;
  position: static; /* absolute を解除 */
}

footer {
  margin: 1.5rem 0;
  text-align: center;
}
.top-btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-radius: 0.4rem;
  background-color: #3b82f6;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.2s;
}
.top-btn:hover {
  background-color: #2563eb;
}

@media screen and (max-height: 700px) {
  .time-display {
    font-size: 2.5rem;
  }
  button {
    font-size: 1rem;
    padding: 0.4rem 0.8rem;
  }
  #hour-chart {
    width: 120px !important;
    height: 120px !important;
  }
}