/* ============================================================
   Kateri ritem si slišal? — postavitev

   Videz notnega zapisa je v assets/music.css, ker ga riše skupna
   datoteka. Tu je le, kako sta razporejena krog za poslušanje in
   dva takta pod njim.
   ============================================================ */

/* Krog za poslušanje je isti kot pri "Dur ali mol", le manjši:
   tam je edino, kar je na zaslonu, tu pa si mora deliti višino z
   dvema taktoma.

   Prosto višino si krog in takta razdelita (oba flex: 1), sicer
   se je vsa nabrala med njima in je bila sredina zaslona prazna,
   vrh in dno pa natlačena. */
.listen-card.majhna { flex: 1 1 auto; }
.listen-card.majhna .listen {
  width: min(46vw, 15vh, 130px);
  height: min(46vw, 15vh, 130px);
}
.listen-card.majhna .listen .l-ico  { font-size: clamp(26px, 5.5vh, 46px); }
.listen-card.majhna .listen .l-text { font-size: clamp(11px, 1.5vh, 14px); }

/* ---------- dva takta na izbiro ---------- */
.ritmi {
  flex: 1 1 0;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(8px, 1.8vh, 16px);
  width: min(100%, 620px); margin: 0 auto; min-height: 0;
}

.ritem-izbira {
  display: flex; align-items: center; gap: clamp(8px, 2vw, 16px);
  width: 100%;
  padding: clamp(6px, 1.4vh, 12px) clamp(10px, 2.4vw, 18px);
  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;
}
.ritem-izbira:active { transform: translateY(3px); }
.ritem-izbira[disabled] { cursor: default; }

/* Številka ni okras: otrok si med poslušanjem misli "prvi" ali
   "drugi" in mora to najti na zaslonu brez branja not. */
.ritem-izbira .st {
  flex: 0 0 auto;
  width: clamp(26px, 4.6vh, 38px); height: clamp(26px, 4.6vh, 38px);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--grape); color: #fff;
  font-weight: 700; font-size: clamp(14px, 2.4vh, 20px);
}

/* Takt sam. Kot pri "Dopolni takt" je pribita VIŠINA in ne
   širina: abcjs črtovje skrajša na vsebino, zato bi raztegnjena
   širina pomenila, da so note pri redkem taktu večje kot pri
   gostem. Pribita višina pomeni pribito merilo. */
.ritem-izbira .takt {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: center;
}
.ritem-izbira .takt .crtovje {
  height: clamp(52px, 10vh, 88px);
  width: auto; max-width: 100%;
  display: block;
}

/* Po odgovoru: izbrani gumb dobi barvo odziva, pravi pa zeleno —
   oba hkrati, da otrok vidi, kaj je izbral IN kaj je bilo prav.
   Note pobelimo, ker črna na koralni ni berljiva. */
.ritem-izbira.good { background: var(--mint); box-shadow: 0 5px 0 var(--mint-d); }
.ritem-izbira.bad  { background: var(--coral); box-shadow: 0 5px 0 var(--coral-d); }
.ritem-izbira.good .st, .ritem-izbira.bad .st { background: rgba(255, 255, 255, .35); }
.ritem-izbira.good .crtovje, .ritem-izbira.bad .crtovje { color: #fff; }
.ritem-izbira.good .crtovje path, .ritem-izbira.bad .crtovje path { fill: #fff; }
.ritem-izbira.good .crtovje .abcjs-staff path,
.ritem-izbira.bad  .crtovje .abcjs-staff path { fill: rgba(255, 255, 255, .8); }

/* Nizek zaslon: krog se umakne, taktoma pripada vsa višina. */
@media (max-height: 480px) {
  .listen-card.majhna .listen {
    width: auto; height: auto; border-radius: 999px;
    flex-direction: row; gap: 8px; padding: 8px 18px;
  }
  .listen-card.majhna .listen .l-ico { font-size: 22px; }
}