body {
  font-family: 'Segoe UI', sans-serif;
  background: linear-gradient(#1f1f1f, #333);
  color: #fff;
  text-align: center;
  margin: 0;
  padding: 0;
}

.centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

button {
  padding: 12px 20px;
  margin: 10px;
  font-size: 1em;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: linear-gradient(145deg, #d3d3d3, #b0b0b0);
  color: #222;
  box-shadow: 2px 2px 4px #0005;
  transition: all 0.2s ease-in-out;
}

button:hover {
  background: linear-gradient(145deg, #e5e5e5, #ccc);
  transform: scale(1.05);
}

#choices button.correct {
  background-color: #4CAF50;
  color: white;
}

#choices button.incorrect {
  background-color: #f44336;
  color: white;
}

#choices button.selected {
  outline: 3px solid yellow;
}

.hidden {
  display: none;
}

.explanation {
  margin-top: 20px;
  font-style: italic;
}

.start-image, .result-image {
  max-width: 200px;
  margin: 20px;
}

.genre-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* ✨ 天才すぎアニメーション ✨ */
.genius-effect {
  animation: sparkle 1s infinite;
  background: radial-gradient(circle at center, #fff8dc, #ffe4b5, #ffddc1);
}

@keyframes sparkle {
  0% { box-shadow: 0 0 10px gold; }
  50% { box-shadow: 0 0 30px gold; }
  100% { box-shadow: 0 0 10px gold; }
}

#genius-message {
  font-size: 2em;
  color: crimson;
  font-weight: bold;
  margin-top: 20px;
  animation: popUp 1s ease-in-out;
  display: none;
}

@keyframes popUp {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
/* スコア＆結果テキストのデフォルト設定 */
#final-score, #genius-message {
  color: #fff;
  text-shadow: 1px 1px 2px #000;
}

/* 天才モードのときに読みやすくする */
.genius-effect #final-score,
.genius-effect #genius-message {
  color: #800000; /* 濃い赤系で見やすく */
  text-shadow: 1px 1px 0 #ffd700; /* 金っぽい縁取り */
  font-weight: bold;
}
/* 「結果発表」文字のデフォルトと天才モードカラー */
#result-screen h2 {
  color: #fff;
  text-shadow: 1px 1px 2px #000;
}

.genius-effect #result-screen h2 {
  color: #800000; /* 濃い赤 */
  text-shadow: 1px 1px 0 #ffd700;
  font-weight: bold;
}

/* 天才うさぎ画像のスタイル */
#genius-rabbit {
  display: none;
  margin-top: 20px;
  width: 200px;
  animation: bounce 1.5s infinite ease-in-out;
}

.genius-effect #genius-rabbit {
  display: block;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
#logo-link {
  position: fixed; /* 画面左上に固定表示したい場合 */
  top: 10px;       /* 上から10px */
  left: 10px;      /* 左から10px */
  z-index: 1000;   /* 他の要素より前面に表示 */
}

#logo-link img {
  width: 80px;     /* サイズはお好みで調整 */
  cursor: pointer;
  transition: transform 0.3s ease;
}

#logo-link:hover img {
  transform: scale(1.1);
}