/* ============================================================
   Koliko predznakov? — postavitev

   Vprašanje je stavek, odgovor je število. Zato je na zaslonu
   malo: en napis, trije gumbi in — šele po odgovoru — ključ s
   predznaki, ki pokaže, kar je otrok preštel.
   ============================================================ */

.vprasanje-card {
  flex: 1 1 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(10px, 2.4vh, 22px);
  min-height: 0;
}

.vprasanje {
  margin: 0;
  text-align: center;
  font-weight: 700;
  font-size: clamp(20px, 4.4vh, 38px);
  line-height: 1.25;
  color: var(--ink);
  max-width: 16ch;
}
/* Ime tonalitete gre v celoti v svojo vrstico ali nikamor. */
.vprasanje .nolom { white-space: nowrap; }

/* Škatla za ključ ima svojo višino tudi takrat, ko je prazna —
   sicer bi se ob vsakem odgovoru vprašanje premaknilo navzgor in
   bi zaslon poskočil prav v trenutku, ko otrok bere odziv. */
.kljuc-box {
  flex: 0 0 auto;
  height: clamp(72px, 15vh, 132px);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(6px, 1.4vh, 12px) clamp(14px, 3.5vw, 26px);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-s), inset 0 0 0 1px var(--rob);
}
.kljuc-box.hidden { visibility: hidden; display: flex; }
.kljuc-box .crtovje.kljuc {
  height: 100%; width: auto; max-width: 100%;
  display: block;
}

/* ---------- trije gumbi s števili ----------
   Urejeni po velikosti, ker se števila tako berejo. Lego pravega
   odgovora premeša logika, ne razvrstitev. */
.answers.stevila {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  width: min(100%, 560px); margin: 0 auto;
}
.answers.stevila .answer {
  display: flex; align-items: center; justify-content: center;
  height: clamp(64px, 11vh, 104px);
  border: none; border-radius: var(--radius);
  background: #fff; color: var(--ink);
  /* 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 6px 0 var(--rob);
  cursor: pointer; font: inherit;
  font-weight: 700; font-size: clamp(26px, 5.2vh, 46px);
  transition: transform .08s ease, box-shadow .08s ease, background .18s ease;
}
.answers.stevila .answer:active { transform: translateY(4px); box-shadow: none; }
.answers.stevila .answer[disabled] { cursor: default; }
.answers.stevila .answer.good { background: var(--mint); color: #fff; box-shadow: 0 6px 0 var(--mint-d); }
.answers.stevila .answer.bad  { background: var(--coral); color: #fff; box-shadow: 0 6px 0 var(--coral-d); }

@media (max-height: 480px) {
  .vprasanje { font-size: clamp(17px, 6vh, 26px); max-width: 24ch; }
  .kljuc-box { height: clamp(46px, 24vh, 78px); }
}