body {
  font-family: 'Comic Sans MS', Arial, sans-serif;
  text-align: center;
  padding: 40px;
  background: linear-gradient(135deg, #e0eafc, #cfdef3);
}
h1 {
  color: #2e4a62;
  margin-bottom: 10px;
}
#level-score {
  font-size: 1.2em;
  margin-bottom: 20px;
}
button {
  font-size: 1.1em;
  margin: 8px;
  padding: 12px 25px;
  border-radius: 8px;
  border: none;
  background-color: #4682b4;
  color: white;
  cursor: pointer;
  transition: background 0.2s;
}
button:hover {
  background-color: #31567a;
}
#noteInputs select {
  margin: 6px;
  padding: 7px;
  font-size: 1.1em;
  border-radius: 6px;
}
#result {
  margin-top: 20px;
  font-size: 1.2em;
  font-weight: bold;
  min-height: 30px;
}
#mascot {
  margin: 30px 0 0 0;
  font-size: 2.5em;
  min-height: 60px;
  transition: transform 0.3s;
}
.animate-correct {
  animation: bounce 0.6s;
}
.animate-wrong {
  animation: shake 0.5s;
}
@keyframes bounce {
  0%   { transform: scale(1);}
  30%  { transform: scale(1.3);}
  60%  { transform: scale(0.9);}
  100% { transform: scale(1);}
}
@keyframes shake {
  0%   { transform: translateX(0);}
  25%  { transform: translateX(-15px);}
  50%  { transform: translateX(15px);}
  75%  { transform: translateX(-10px);}
  100% { transform: translateX(0);}
}
#resultsList {
  list-style: decimal inside;
  padding-left: 0;
  margin-top: 10px;
}