/* ============================================================
   Dur ali mol — od dveh do štirih gumbov za odgovor.

   Gumbov ni več fiksno dva: učni načrt v 4. razredu doda zvečani
   in zmanjšani kvintakord, otrok pa izbere, katere vadi. Dva
   stojita drug ob drugem, trije ali štirje se prelomijo v dve
   vrsti — zato grid z auto-fit in ne dva stolpca na trdo.
   ============================================================ */
.answers.vrste {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap);
  width: min(100%, 560px); margin: 0 auto;
}
/* Trije ali štirje: dve vrsti po dva, gumbi ostanejo enako veliki. */
.answers.vrste.stiri { width: min(100%, 620px); }
.answers.vrste.stiri .answer { padding: clamp(8px, 1.5vh, 14px) 6px; }
.answers.vrste.stiri .answer .a-word { font-size: clamp(17px, 2.7vh, 25px); }
.answers.vrste .answer {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: clamp(10px, 2vh, 18px) 8px;
  border-radius: var(--radius);
  border: none; cursor: pointer; font: inherit; color: #fff;
}
.answers.vrste .answer .a-word { font-size: clamp(20px, 3.6vh, 32px); font-weight: 700; letter-spacing: .04em; }
.answers.vrste .answer .a-hint { font-size: clamp(12px, 1.7vh, 15px); opacity: .85; }
.answers.vrste .answer.dur { background: var(--sun); box-shadow: 0 6px 0 var(--sun-d); color: var(--ink); }
.answers.vrste .answer.mol { background: var(--sky); box-shadow: 0 6px 0 var(--sky-d); }
.answers.vrste .answer.zvecan { background: var(--grape); box-shadow: 0 6px 0 var(--grape-d); }
.answers.vrste .answer.zmanjsan { background: var(--mint); box-shadow: 0 6px 0 var(--mint-d); }
.answers.vrste .answer:active { transform: translateY(4px); box-shadow: none; }
.answers.vrste .answer[disabled] { opacity: .55; cursor: default; transform: none; }