/* ============================================================
   Kako se temu reče?

   Znak stoji sam sredi kartice. Vsi znaki so prirezani na svoj
   okvir in raztegnjeni na isto višino, zato so na zaslonu
   približno enako veliki — celinka in višaj enako, čeprav sta v
   notah zelo različna. To je pravilno: vprašanje je, kako se
   znaku reče, ne kako velik je.

   Prva različica jih je risala, kolikor je šlo — kartica je bila
   visoka do 260 px in znak v njej do 220 px. Bilo je preveč:
   kartica je na telefonu prevzela pol zaslona, gumbi z imeni pa
   so se stisnili k robu, čeprav so oni tisti, kjer se naloga
   reši. Znak mora biti dovolj velik, da se oblika prebere, in nič
   več od tega — ostalo je zrak, ki ga zaslon nima na pretek.

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

/* Ovojnica požre ves prostor, ki ostane, in kartico postavi na
   njegovo sredino. Kartica sama ostane majhna. */
.znak-oder {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
  width: 100%;
}

.znak-card {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 5px 0 rgba(35, 48, 74, .10), inset 0 0 0 1px var(--rob);
  padding: clamp(10px, 2vh, 20px);
  margin: 0 auto;
  width: min(100%, 380px);
  min-height: clamp(84px, 17vh, 150px);
}

.znak-box {
  width: 100%;
  height: clamp(64px, 13vh, 118px);
  display: flex; align-items: center; justify-content: center;
}
.znak-box svg {
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  display: block;
}
/* abcjs riše črno; barva naj pride iz črnila teme. */
.znak-box svg path { fill: var(--ink); stroke: none; }

/* ---------- gumbi z imeni ---------- */
.answers.imena {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--gap);
  width: min(100%, 640px);
  margin: 0 auto;
}
.answers.imena .answer {
  flex: 1 1 8rem;
  max-width: 13rem;
  padding: clamp(10px, 2vh, 17px) 10px;
  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(14px, 2.2vh, 19px);
  font-weight: 700;
  line-height: 1.25;
  transition: transform .08s ease, box-shadow .08s ease;
}
.answers.imena .answer:active { transform: translateY(4px); box-shadow: none; }
.answers.imena .answer[disabled] { opacity: .55; cursor: default; transform: none; }
.answers.imena .answer.good { background: var(--mint); box-shadow: 0 6px 0 var(--mint-d); }
.answers.imena .answer.bad  { background: var(--coral); box-shadow: 0 6px 0 var(--coral-d); }