body { 
  font-family: Marker Felt, sans-serif; 
  text-align: center; 
}
#player-controls { margin: 15px 0; }

button {
  padding: 10px 20px;
  margin: 5px;
  border-radius: 8px;
  border: none;
  font-size: 16px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: none; /* flat */
}

/* Perussoinnut (päänapit) */
#btn1 { background:#4CAF50; color:white; }
#btn4 { background:#ffeb3b; color:black; }
#btn5 { background:#f44336; color:white; }

/* Extra-sointunapit (II, ♭III jne.) – värillisiä alusta saakka */
.extra { 
  font-size:14px; 
  height:32px; 
  padding:0 12px; 
  min-width:100px; 
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-family: "Marker Felt", sans-serif;
}
.tonic  { background:#4CAF50; color:white; }
.subdom { background:#ffeb3b; color:black; }
.dom    { background:#f44336; color:white; }

/* Vastauslaatikot */
#blocks { display:flex; justify-content:center; margin-top:40px; }
.block {
  height:80px; margin:0 4px; border-radius:12px;
  background:#808080; 
  display:flex; align-items:center; justify-content:center;
  font-size:18px; 
  transition:background 0.3s; 
  cursor:pointer;
}
.correct  { background:lightgreen!important; }
.wrong    { background:lightcoral!important; }
.inactive { background:#ccc!important; }

#stars { font-size:40px; color:gold; margin-top:20px; }

.block.editing {
  border: 3px solid #2196F3; /* sininen reunus */
  box-shadow: 0 0 6px #2196F3;
}

/* Tehtävänapit – nyt sama harmaa kuin laatikot */
.task-btn {
  background: #808080;       /* sama harmaa kuin vastauslaatikot */
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  margin: 5px;
  font-size: 16px;
  font-family: "Marker Felt", sans-serif;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  box-shadow: none;       /* täysin flat */
}
.task-btn:hover {
  background: #ccc;       /* hieman tummempi hoverissa */
}
.task-btn.active {
  background: #2196F3;    /* aktiivinen: sininen */
  color: #fff;           
}

/* Tehtävänapit */
#harmonia-app .task-btn {
  background: #C0C0C0 !important;   /* sama harmaa kuin vastauslaatikot */
  border: none !important;
  border-radius: 6px !important;
  padding: 8px 14px !important;
  margin: 5px !important;
  font-size: 16px !important;
  font-family: "Marker Felt", sans-serif !important;
  cursor: pointer !important;
  transition: background 0.2s, color 0.2s !important;
  box-shadow: none !important;       /* ei varjoa */
}

#harmonia-app .task-btn:hover {
  background: #d5d5d5 !important;   /* hover: tummempi harmaa */
}

#harmonia-app .task-btn.active {
  background: #2196F3 !important;   /* aktiivinen: sininen */
  color: #fff !important;
}