/* ============================================================
   Kateri ton je to? — postavitev

   Videz samega črtovja je v assets/music.css, ker ga riše
   skupna datoteka in ga bo uporabila še katera igra. Tu je le
   to, kar je od TE igre: kje črtovje stoji in kako izgleda
   sedem gumbov s črkami.
   ============================================================ */

/* Postavitev črtovja (.staff-card, .staff-box, .clef-name) je
   v assets/music.css: uporabljata jo ta igra in "Kateri interval
   vidiš?". Tu ostane samo tisto, kar je od TE igre — klik na
   črtovje, ki ponovi ton. */
.staff-box { cursor: pointer; }

/* ---------- sedem črk ----------
   Nikoli premešane. Pri intervalih se je pokazalo, da otrok
   išče gumb po legi in ne po napisu; C D E F G A H je vrstni
   red, ki ga zna na pamet, zato ostane pribit.

   Sedem gumbov v eni vrsti je na telefonu preozko za palec, v
   dveh vrsticah pa se izgubi vrstni red. Rešitev je mreža, ki
   se prelomi sama: štiri in tri. */
.answers.letters {
  --crka-gap: clamp(5px, 1.2vh, 10px);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--crka-gap);
  width: min(100%, 620px);
  margin: 0 auto;
}
.answers.letters .answer {
  /* Enake širine, izračunane iz števila gumbov v vrsti. Prva
     različica je gumbom pustila, da se prilagodijo črki: ker so
     črke ozke, se jih je v vrsto stlačilo šest, H pa je ostal sam
     spodaj. Sedem enakih ali štiri plus tri — vmesnega ni. */
  flex: 0 0 calc((100% - 6 * var(--crka-gap)) / 7);
  padding: clamp(9px, 2vh, 18px) 0;
  border: none; border-radius: var(--radius-s);
  background: #fff;
  box-shadow: 0 5px 0 rgba(35, 48, 74, .12), inset 0 0 0 1px var(--rob);
  cursor: pointer; font: inherit;
  font-size: clamp(19px, 3.2vh, 30px); font-weight: 700;
  color: var(--ink);
}
/* Pod to širino je sedmina preozka za palec; štirje v vrsti so
   še vedno dovolj široki, zadnja vrsta treh pa se postavi na
   sredino sama, ker je justify-content: center. */
@media (max-width: 460px) {
  .answers.letters .answer {
    flex: 0 0 calc((100% - 3 * var(--crka-gap)) / 4);
  }
}
.answers.letters .answer:active { transform: translateY(3px); box-shadow: none; }
.answers.letters .answer[disabled] { cursor: default; }

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

/* Namig o zvoku je tu blažji kot pri poslušalnih igrah: ta igra
   brez zvoka deluje, le tiho je. */
.ear-note.quiet-note { color: var(--ink-soft); }