/* ============================================================
   Prvi ali drugi?

   Igra nima črtovja — prvi razred ga še ne bere — in po prvem
   poskusu tudi nima odra.

   ODER JE ODPADEL. Sredi zaslona sta stala dva kroga, ki sta se
   po odgovoru razrasla v to, kar sta bila slišati: višji se je
   dvignil, daljši raztegnil, glasnejši zrasel. Zamisel je bila,
   da otrok brez notnega zapisa drugače nima pojasnila.

   Cena je bila večja od koristi. Da se višji krog vidno dvigne,
   potrebuje pas praznega prostora nad seboj in pod seboj —
   dvakrat toliko, kolikor meri sam. Ta pas je moral biti tam ves
   čas, tudi med poslušanjem, ko ni kazal ničesar. Na telefonu je
   pojedel tretjino zaslona in potisnil gumb za poslušanje in
   odgovora v spodnjo tretjino; risba, ki se prikaže šele na
   koncu, je vse drugo stiskala od začetka.

   Zdaj vse to nosita GUMBA Z ODGOVOROMA, ki sta itak že tu:
     - med predvajanjem se ob začetku vsakega tona za hip prižge
       tisti, ki mu pripada,
     - po odgovoru se pravi obarva zeleno, zgrešeni pa obledi.
   Nič novega na zaslonu in nobenega praznega pasu.

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

/* ---------- vprašanje ---------- */
.vprasanje {
  margin: clamp(6px, 1.6vh, 14px) 0 0;
  text-align: center;
  font-size: clamp(20px, 3.6vh, 32px);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: .01em;
  min-height: 1.3em;
}

/* ---------- gumb za poslušanje ---------- */
/* Brez odra ima gumb spet ves prostor, ki ga zasluži: ta igra je
   samo poslušanje in to je njen glavni gumb. */
.listen-card {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
}

/* ---------- gumbi z odgovori ---------- */
/* Postavitev .answers.two je pri "Preberi cel ali polton?" v njegovem
   lastnem slogu in ne v music.css. Ko sem razred prevzel, sem
   dobil samo barve; gumba sta bila brez zaobljenja, brez roba in v
   eni vrstici. Zato tu cela postavitev, ne le barvi. */
.answers.two {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap);
  width: min(100%, 480px); margin: 0 auto;
}
.answers.two .answer {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: clamp(14px, 2.6vh, 24px) 8px;
  border-radius: var(--radius);
  border: none; cursor: pointer; font: inherit; color: #fff;
  transition: transform .08s ease, box-shadow .08s ease,
              background-color .18s ease, filter .18s ease;
}
.answers.two .answer .a-num {
  font-size: clamp(28px, 5vh, 46px); font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.answers.two .answer .a-word { font-size: clamp(14px, 2vh, 19px); font-weight: 600; opacity: .92; }

.answers.two .answer.prvi  { background: var(--sky);   box-shadow: 0 6px 0 var(--sky-d); }
.answers.two .answer.drugi { background: var(--grape); box-shadow: 0 6px 0 var(--grape-d); }
.answers.two .answer:active { transform: translateY(4px); box-shadow: none; }
.answers.two .answer[disabled] { cursor: default; transform: none; }

/* ---------- gumb kot kazalec tona ----------
   Utrip traja UTRIP_MS in nič drugega — ne dolžine tona. Sicer bi
   otrok pri vprašanju o trajanju odgovor VIDEL in ne slišal. */
.answers.two .answer.zveni {
  filter: brightness(1.28) saturate(1.15);
  transform: translateY(-3px);
  transition: transform .09s ease, filter .09s ease;
}
@media (prefers-reduced-motion: reduce) {
  .answers.two .answer, .answers.two .answer.zveni { transition: none; }
  .answers.two .answer.zveni { transform: none; }
}

/* ---------- odziv na odgovor ----------
   Barva in ne risba: pravi gumb pozeleni, zgrešeni obledi. Obroč
   okoli pravega je zato, da razlika ni samo v barvi. */
.answers.two .answer.good {
  background: var(--mint); box-shadow: 0 6px 0 var(--mint-d);
  outline: 4px solid var(--mint-d); outline-offset: 3px;
}
.answers.two .answer.bad {
  background: var(--rob); box-shadow: none;
  color: var(--ink-soft);
  transform: translateY(4px);
}
/* Gumb, ki ga otrok ni izbral in tudi ni pravi, se umakne — sicer
   bi po pravilnem odgovoru ostal videti, kot da nanj še čakamo. */
.answers.two .answer.mimo { opacity: .4; filter: saturate(.3); }