/* ============================================================
   Katero melodijo si slišal? — postavitev

   Isti razpored kot pri ritmični sestri: krog za poslušanje in
   pod njim dve možnosti. Razlika je v tem, kaj stoji v možnosti —
   tam en takt, tu celo črtovje s ključem, ki je višje in širše.
   ============================================================ */

.listen-card.majhna { flex: 1 1 auto; }
.listen-card.majhna .listen {
  width: min(42vw, 13vh, 116px);
  height: min(42vw, 13vh, 116px);
}
.listen-card.majhna .listen .l-ico  { font-size: clamp(24px, 5vh, 42px); }
.listen-card.majhna .listen .l-text { font-size: clamp(11px, 1.4vh, 13px); }

.melodije {
  flex: 1 1 0;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(8px, 1.6vh, 14px);
  width: min(100%, 640px); margin: 0 auto; min-height: 0;
}

.melodija-izbira {
  display: flex; align-items: center; gap: clamp(6px, 1.6vw, 14px);
  width: 100%;
  padding: clamp(4px, 1vh, 10px) clamp(8px, 2vw, 16px);
  border: none; border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow-s), inset 0 0 0 1px var(--rob);
  cursor: pointer; font: inherit;
  transition: transform .08s ease, box-shadow .08s ease, background .18s ease;
}
.melodija-izbira:active { transform: translateY(3px); }
.melodija-izbira[disabled] { cursor: default; }

.melodija-izbira .st {
  flex: 0 0 auto;
  width: clamp(24px, 4.2vh, 34px); height: clamp(24px, 4.2vh, 34px);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--grape); color: #fff;
  font-weight: 700; font-size: clamp(13px, 2.2vh, 18px);
}

/* Črtovje: pribita VIŠINA, širina po vsebini — enako kot pri
   taktu. Osem not je širših od štirih, a note morajo ostati
   enako velike, sicer se zdi, da je daljša melodija drobnejša. */
.melodija-izbira .crta {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: center;
}
.melodija-izbira .crta .crtovje {
  height: clamp(56px, 11vh, 96px);
  width: auto; max-width: 100%;
  display: block;
}

/* Po odgovoru: izbrani gumb dobi barvo odziva, pravi pa zeleno. */
.melodija-izbira.good { background: var(--mint); box-shadow: 0 5px 0 var(--mint-d); }
.melodija-izbira.bad  { background: var(--coral); box-shadow: 0 5px 0 var(--coral-d); }
.melodija-izbira.good .st, .melodija-izbira.bad .st { background: rgba(255, 255, 255, .35); }
.melodija-izbira.good .crtovje, .melodija-izbira.bad .crtovje { color: #fff; }
.melodija-izbira.good .crtovje path, .melodija-izbira.bad .crtovje path { fill: #fff; }

/* Ton, ki se razlikuje, se po odgovoru obarva — otrok vidi, kje
   je bila razlika, in ne le, da je bila. */
.melodija-izbira .crtovje .abcjs-note.razlika,
.melodija-izbira .crtovje .abcjs-note.razlika path { fill: var(--sun-d); }
.melodija-izbira.good .crtovje .abcjs-note.razlika,
.melodija-izbira.good .crtovje .abcjs-note.razlika path,
.melodija-izbira.bad .crtovje .abcjs-note.razlika,
.melodija-izbira.bad .crtovje .abcjs-note.razlika path { fill: #FFE9A8; }

@media (max-height: 480px) {
  .listen-card.majhna .listen {
    width: auto; height: auto; border-radius: 999px;
    flex-direction: row; gap: 8px; padding: 6px 16px;
  }
  .listen-card.majhna .listen .l-ico { font-size: 20px; }
}