/* ============================================================
   Preberi cel ali polton? — črtovje in dva gumba za odgovor.

   Gumba za poslušanje tu NI in zanj tudi ni pravil. Ta igra se
   bere; razmik se zasliši šele po odgovoru. Če bi se gumb kdaj
   vrnil, bi ga bilo mogoče uporabiti namesto branja in igra bi
   se sesula v "Poslušaj cel ali polton?".

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

.staff-card { position: relative; }

/* ---------- gumba za odgovor ---------- */
.answers.two {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap);
  width: min(100%, 560px); margin: 0 auto;
}
.answers.two .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;
  transition: transform .08s ease, box-shadow .08s ease;
}
.answers.two .answer .a-word {
  font-size: clamp(18px, 3.2vh, 29px); font-weight: 700; letter-spacing: .03em;
}
.answers.two .answer .a-hint { font-size: clamp(12px, 1.7vh, 15px); opacity: .85; }

/* Cel ton je širok, polton ozek — barvi to podpirata: topla in
   široka proti hladni in tesni. Ni okras, je drugi namig poleg
   besede. */
.answers.two .answer.cel {
  background: var(--sun); box-shadow: 0 6px 0 var(--sun-d); color: var(--ink);
}
.answers.two .answer.polton {
  background: var(--sky); box-shadow: 0 6px 0 var(--sky-d);
}
.answers.two .answer:active { transform: translateY(4px); box-shadow: none; }
.answers.two .answer[disabled] { opacity: .55; cursor: default; transform: none; }

/* Odziv na gumbu: pravi odgovor se obrobi, napačni potemni. */
.answers.two .answer.good { outline: 4px solid var(--mint-d); outline-offset: 2px; }
.answers.two .answer.bad  { filter: saturate(.35) brightness(.9); }

/* V slušnem načinu je črtovje do odgovora prazno; kartica mora
   vseeno držati svojo višino, da gumbi ne poskočijo. */
.staff-box:empty { min-height: clamp(90px, 22vh, 190px); }