/* ============================================================
   DO RE MI

   Gumbi z zlogi stojijo v vrstnem redu lestvice in nikoli
   premešani. To ni malomarnost, ampak del pouka: vrsta gumbov je
   lestev, po kateri se poje navzgor, in otrok jo bere z leve
   proti desni tako kot noto na črtovju.

   Premešati jih tudi ni treba — odgovor je odvisen od note na
   črtovju, ne od mesta gumba, zato stalni vrstni red ničesar ne
   izda.

   Skupni deli glasbenih iger so v assets/music.css.
   ============================================================ */

/* ---------- gumbek, ki je vedno prižgan ----------
   Skupni .chip[disabled] pobledi na 40 % — pravilno za gumbek, ki
   NI na voljo, napačno za tega: DO RE MI je vključen, samo
   izklopiti se ga ne da. Bled bi bral kot "ne velja", kar je
   ravno obratno od resnice. Zato polna barva prižganega gumbka in
   samo kazalec pove, da tu ni česa klikniti. */
#zlogi .chip.vedno[disabled] {
  opacity: 1;
  background: var(--sky);
  color: #fff;
  border-color: rgba(0, 0, 0, .08);
  box-shadow: 0 5px 0 var(--sky-d);
  cursor: default;
}

.answers.zlogi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  width: min(100%, 640px);
  margin: 0 auto;
}
.answers.zlogi .answer {
  flex: 1 1 4.2rem;
  max-width: 7rem;
  padding: clamp(12px, 2.2vh, 20px) 6px;
  border: none; border-radius: var(--radius);
  cursor: pointer; font: inherit; color: #fff;
  background: var(--sky);
  box-shadow: 0 6px 0 var(--sky-d);
  font-size: clamp(18px, 3.2vh, 28px);
  font-weight: 800;
  letter-spacing: .04em;
  transition: transform .08s ease, box-shadow .08s ease;
}
/* Pri sedmih zlogih se gumbi zmanjšajo, da ostanejo v dveh
   vrstah tudi na telefonu.

   Osnova je 4,6rem in ne manj: pri 3,4rem se jih je na telefon
   stlačilo šest, sedmi pa je ostal sam v drugi vrsti in je bilo
   videti, kot da je nekaj ušlo. Pri 4,6rem se vrsta prelomi po
   štirih in nastane 4 + 3 — lestev v dveh enakomernih stopnicah. */
.answers.zlogi.veliko .answer {
  flex-basis: 4.6rem;
  font-size: clamp(15px, 2.6vh, 22px);
  padding: clamp(9px, 1.7vh, 15px) 4px;
}
.answers.zlogi .answer:active { transform: translateY(4px); box-shadow: none; }
.answers.zlogi .answer[disabled] { opacity: .55; cursor: default; transform: none; }
.answers.zlogi .answer.good { background: var(--mint);  box-shadow: 0 6px 0 var(--mint-d); }
.answers.zlogi .answer.bad  { background: var(--coral); box-shadow: 0 6px 0 var(--coral-d); }

/* VSI GUMBI SO ENAKE BARVE.

   DO je nekaj časa stal v vijolični, ker je prvi in zadnji ton
   lestvice in se mi je zdelo prav, da ima lestev vidna tla.
   Videti pa je bilo drugače: en gumb druge barve med šestimi
   enakimi je videti kot predlagan odgovor. Otrok, ki ne ve, ga
   pritisne — in v šestini primerov ima celo prav, kar je še
   slabše, ker ga to navado nauči.

   Barva na teh gumbih pomeni odgovor in nič drugega: zeleno
   pravilno, rdeče napačno. Vse ostalo je ena sama barva. */