/* ============================================================
   Dopolni takt — postavitev

   Videz notnega zapisa je v assets/music.css, ker ga riše skupna
   datoteka. Tu je le, kje takt stoji in kako izgledajo gumbi z
   notnimi simboli.
   ============================================================ */

.bar-card {
  flex: 1 1 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(8px, 1.8vh, 16px);
  min-height: 0;
}

.bar-box {
  /* Ne sme se skrčiti: kot prožen element v .bar-card se je stisnil
     na 39 px, risba pa je štrlela čez kartico. */
  flex: 0 0 auto;
  max-width: 100%;
  padding: clamp(10px, 2.2vh, 20px) clamp(12px, 3vw, 24px);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-s), inset 0 0 0 1px var(--rob);
}

/* Pribita je VIŠINA, ne širina.

   abcjs črtovje skrajša na vsebino: takt z eno samo noto je bil
   širok 65 enot, takt z osmimi pa 150. Če bi risbo raztegnili na
   širino kartice, bi bile note pri kratkem taktu dvakrat večje
   kot pri dolgem in bi se med vprašanji spreminjale. Ker je
   navpično okno pribito na 45 enot, pribita višina pomeni pribito
   merilo — note so povsod enako velike, takt pa tako širok, kot
   pač je. */
.bar-box .crtovje {
  height: clamp(62px, 12vh, 104px);
  width: auto;
  max-width: 100%;
  display: block;
}

/* ---------- gumbi z notnimi vrednostmi ----------
   Odgovor je simbol, ne beseda. Vrstni red je od najdaljše note
   do najkrajše in se ne premeša — pri intervalih se je pokazalo,
   da otrok gumb išče po legi in ne po napisu. */
.answers.vrednosti {
  --v-gap: clamp(5px, 1.2vh, 10px);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--v-gap);
  width: min(100%, 620px);
  margin: 0 auto;
}
.answers.vrednosti .answer {
  flex: 0 0 calc((100% - 4 * var(--v-gap)) / 5);
  height: clamp(56px, 9vh, 82px);
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--radius-s);
  background: #fff;
  /* Ta gumb obrobe nima; njegov edini rob je senca navzdol. Pri
     .12 da nad skoraj belo podlago ozkega zaslona razmerje 1,27,
     preveri_kontrast.js pa terja 1,30. --rob (.16) da 1,37 in je
     ista lasnica, kot jo uporablja ves slog. */
  box-shadow: 0 5px 0 var(--rob);
  cursor: pointer; padding: 6px;
}
/* Osem vrednosti pri najtežji stopnji: štiri v vrsti, dve vrsti. */
.answers.vrednosti.veliko .answer {
  flex: 0 0 calc((100% - 3 * var(--v-gap)) / 4);
}
@media (max-width: 430px) {
  .answers.vrednosti .answer,
  .answers.vrednosti.veliko .answer {
    flex: 0 0 calc((100% - 3 * var(--v-gap)) / 4);
  }
}
.answers.vrednosti .answer:active { transform: translateY(3px); box-shadow: none; }
.answers.vrednosti .answer[disabled] { cursor: default; }

.simbol-box {
  display: block;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.simbol-box .simbol { width: auto; height: 100%; max-width: 100%; }

/* Po odgovoru: pravi gumb zelen, zgrešeni rdeč — oba hkrati, da
   otrok vidi, kaj je izbral IN kaj bi bilo prav. */
.answers.vrednosti .answer.good { background: var(--mint); box-shadow: 0 5px 0 var(--mint-d); }
.answers.vrednosti .answer.bad  { background: var(--coral); box-shadow: 0 5px 0 var(--coral-d); }
.answers.vrednosti .answer.good .simbol path,
.answers.vrednosti .answer.bad .simbol path { fill: #fff; }