/* ===============================
   Rakenteen kuuntelu – harmonia-pohjainen tyyli
   =============================== */

#rakenneK-app {
  font-family: "Marker Felt", sans-serif;
  text-align: center;
}

/* Tehtävänapit */
#rakenneK-app .task-btn {
  background: #ddd !important;
  color: #000 !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 8px 14px !important;
  margin: 5px !important;
  font-size: 16px !important;
  font-family: inherit !important;
  cursor: pointer !important;
  transition: background 0.2s, color 0.2s !important;
  box-shadow: none !important;
}

#rakenneK-app .task-btn:hover {
  background: #ccc !important;
}

#rakenneK-app .task-btn.active {
  background: #7ba8c5 !important;
  color: #fff !important;
}

#rakenneK-app .task-btn.task-done {
  border: 2px solid #4CAF50 !important;
  position: relative !important;
  padding-right: 26px !important;
}

#rakenneK-app .task-btn.task-done::after {
  content: "✓" !important;
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #4CAF50 !important;
  font-weight: bold !important;
}

#rakenneK-app .task-btn.task-done.active::after {
  color: #fff !important;
}

#rakenneK-app #rakenneK-progress-summary {
  font-size: 15px;
  color: #555;
  margin: 8px 0 4px;
}

#rakenneK-app #rakenneK-login-prompt {
  background: #fff8e1;
  border-left: 5px solid #ffc107;
  padding: 12px 16px;
  margin: 0 0 15px;
  font-size: 15px;
  color: #333;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#rakenneK-app .rakenneK-login-btn {
  background: #4f8cc4 !important;
  color: #fff !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  font-size: 14px !important;
  display: inline-block !important;
}

#rakenneK-app .rakenneK-login-btn:hover {
  background: #3d729e !important;
}

/* Player */
#rakenneK-app #rakenneK-player-controls {
  margin: 15px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

#rakenneK-app #rakenneK-player-controls button {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 16px !important;
  background: #e0e0e0 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  border: none !important;
  cursor: pointer !important;
}

#rakenneK-app #rakenneK-player-controls button:hover {
  background: #d4d4d4 !important;
}

#rakenneK-app #rakenneK-player-controls button::before {
  content: "" !important;
  display: block !important;
  width: 38px !important;
  height: 38px !important;
  background: #4f8cc4 !important;
  border-radius: 7px !important;
  box-sizing: border-box !important;
}

/* PLAY */
#rakenneK-app #rakenneK-player-controls button[onclick*="rakenneK_playAudio"]::after {
  content: "" !important;
  position: absolute !important;
  left: 23px !important;
  top: 19px !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 10px solid transparent !important;
  border-bottom: 10px solid transparent !important;
  border-left: 17px solid #ffffff !important;
}

/* PAUSE */
#rakenneK-app #rakenneK-player-controls button[onclick*="rakenneK_pauseAudio"]::after {
  content: "" !important;
  position: absolute !important;
  width: 20px !important;
  height: 26px !important;
  background:
    linear-gradient(
      to right,
      #ffffff 0 6px,
      transparent 6px 14px,
      #ffffff 14px 20px
    ) !important;
}

/* STOP */
#rakenneK-app #rakenneK-player-controls button[onclick*="rakenneK_stopAudio"]::after {
  content: "" !important;
  position: absolute !important;
  width: 15px !important;
  height: 15px !important;
  background: #ffffff !important;
  border-radius: 1px !important;
}

#rakenneK-app #rakenneK-seekBar {
  max-width: min(420px, 90vw);
}

#rakenneK-current-task {
  margin: 12px 0;
  font-weight: bold;
  color: #4f8cc4;
}

/* Rakenneosien napit */
#rakenneK-app .part-btn,
#rakenneK-app #rakenneK-action-buttons button {
  padding: 10px 20px;
  margin: 5px;
  border-radius: 8px;
  border: none;
  font-size: 16px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: none;
  transition: background 0.2s, color 0.2s;
}

#rakenneK-app .part-btn {
  background: #ddd;
  color: #000;
}

#rakenneK-app .part-btn:hover {
  background: #ccc;
}

#rakenneK-app .part-btn.active {
  background: #85bb1a !important;
  color: #fff !important;
}

#rakenneK-bars-row {
  margin: 12px 0;
  font-size: 18px;
}

#rakenneK-bars-select {
  font-family: inherit;
  font-size: 18px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #bbb;
  margin-left: 8px;
}

/* Slotit */
#rakenneK-slots {
  margin: 22px auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

#rakenneK-app .structure-slot {
  min-width: 86px;
  min-height: 54px;
  border-radius: 10px;
  border: 2px solid #ddd;
  background: #f6f6f6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;
  padding: 8px 12px;
  box-sizing: border-box;
}

#rakenneK-app .structure-slot.editing {
  border-color: #4f8cc4;
  box-shadow: 0 0 0 3px rgba(79, 140, 196, 0.20);
}

#rakenneK-app .structure-slot.correct {
  background: #d7f5d7 !important;
  border-color: #22c55e !important;
}

#rakenneK-app .structure-slot.wrong {
  background: #ffd6d6 !important;
  border-color: #ef4444 !important;
}

#rakenneK-app .slot-part {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.1;
}

#rakenneK-app .slot-bars {
  font-size: 15px;
  color: #555;
  margin-top: 4px;
}

#rakenneK-app .slot-bars::after {
  content: " tahtia";
}

#rakenneK-action-buttons {
  margin-top: 14px;
}

#rakenneK-app #rakenneK-action-buttons button {
  background: #ddd;
  color: #000;
}

#rakenneK-app #rakenneK-action-buttons button:hover {
  background: #ccc;
}

#rakenneK-app #rakenneK-action-buttons button.active {
  background: #7ba8c5 !important;
  color: #fff !important;
}

#rakenneK-status {
  min-height: 24px;
  margin-top: 12px;
  font-weight: bold;
}

#rakenneK-stars {
  font-size: 30px;
  color: #f5b301;
  letter-spacing: 2px;
  margin-top: 8px;
}

@media (max-width: 768px) {
  #rakenneK-app .structure-slot {
    min-width: 74px;
  }

  #rakenneK-app .part-btn,
  #rakenneK-app #rakenneK-action-buttons button {
    padding: 9px 14px;
    font-size: 15px;
  }
}