/* ============================================================
   Poslušaj cel ali polton?

   Skoraj vse si deli s "Preberi cel ali polton?" — zato ta stran
   nalaga glasba/steps/steps.css in tu popravlja samo tisto, kar
   iz praznega črtovja res sledi.

   Sledita pa dve stvari, obe vidni šele na posnetku.

   PRVO: črtovje se ne sme raztegniti. V assets/music.css ima
   .staff-box flex: 1 1 0 in v kartici, ki tudi raste, pobere ves
   preostali prostor. Pri sosednji igri je to prav — tam so noti
   ves čas notri in naj bodo velike. Tu je bila do odgovora prazna
   bela ploskev čez tri petine zaslona in pod njo drobec gumba.
   Zato tu črtovje dobi stalno višino: dovolj za obe noti, nič za
   prazno.

   Stalna in ne "toliko, kolikor je vsebine": ko se noti po
   odgovoru pojavita, se kartica ne sme premakniti, sicer gumba z
   odgovoroma poskočita natanko v trenutku, ko otrok gleda vanju.

   DRUGO: gumb za poslušanje mora biti velik. Ta igra je samo
   poslušanje in to je njen edini gumb do odgovora. steps.css ga
   pomanjša z #replayBtn.listen — izbirnik z oznako id, ki ga
   navaden razred ne premaga — zato mora popravek uporabiti isti
   izbirnik in ne .staff-card .listen, kot je pisalo najprej.
   ============================================================ */

/* Stalna višina, prazno ali polno. */
.staff-box {
  flex: 0 0 auto;
  height: clamp(80px, 17vh, 142px);
}

/* Prazno črtovje NI bela ploskev. Prostor mora ostati zaseden, da
   se ob prihodu not nič ne premakne, videti pa ga ni treba: bel
   pravokotnik sredi zaslona je videti kot nekaj, kar se ni
   naložilo. Zato ostane višina, odideta pa barva in senca. */
.staff-box:empty {
  background: none;
  box-shadow: none;
}

/* Nazaj v krog in v velikost, ki jo ima poslušalna igra. */
#replayBtn.listen {
  width: min(42vw, 17vh, 138px);
  height: min(42vw, 17vh, 138px);
  flex-direction: column;
  gap: 4px;
  border-radius: 50%;
  padding: 0;
  margin: clamp(6px, 1.6vh, 16px) auto 0;
  box-shadow: 0 8px 0 var(--grape-d);
}
#replayBtn.listen:active { transform: translateY(5px); box-shadow: 0 3px 0 var(--grape-d); }
#replayBtn.listen .l-ico  { font-size: clamp(24px, 5vh, 40px); }
#replayBtn.listen .l-text { font-size: clamp(12px, 1.7vh, 16px); }