/* ============================================================
   Taktovski načini

   Dvoje je posebnega. Prvo: gumbi z odgovori nosijo številke in
   ne besed, zato so ožji in jih gre v vrsto več kot pri drugih
   igrah. Drugo: pod gumbom za poslušanje stoji vrsta pik, ki
   pokaže slišani utrip — velika pika težka doba, srednja doba,
   majhna poddelitev.

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

/* ---------- narisani utrip ---------- */
.utrip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.6vw, 12px);
  min-height: clamp(20px, 4vh, 34px);
  margin: clamp(6px, 1.4vh, 14px) 0;
  animation: utrip-vstop .22s ease-out;
}
.utrip.hidden { display: none; }

@keyframes utrip-vstop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .utrip { animation: none; }
}

.utrip .pika {
  display: block;
  border-radius: 50%;
  flex: 0 0 auto;
}
/* Težka doba: največja in polna. */
.utrip .pika.s2 {
  width: clamp(16px, 3.4vw, 24px); height: clamp(16px, 3.4vw, 24px);
  background: var(--grape);
  box-shadow: 0 3px 0 var(--grape-d);
}
/* Doba: srednja. */
.utrip .pika.s1 {
  width: clamp(11px, 2.4vw, 16px); height: clamp(11px, 2.4vw, 16px);
  background: var(--sky);
  box-shadow: 0 2px 0 var(--sky-d);
}
/* Poddelitev: drobna in brez sence — ni doba, le zapolnitev. */
.utrip .pika.s0 {
  width: clamp(6px, 1.3vw, 9px); height: clamp(6px, 1.3vw, 9px);
  background: var(--rob);
}

/* ---------- gumbi z odgovori ---------- */
.answers.takti {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  width: min(100%, 620px);
  margin: 0 auto;
}
.answers.takti .answer {
  flex: 1 1 5.5rem;
  max-width: 9rem;
  padding: clamp(10px, 2vh, 18px) 6px;
  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(19px, 3.4vh, 30px);
  font-weight: 700;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  transition: transform .08s ease, box-shadow .08s ease;
}
/* Pri več kot štirih izbranih se gumbi zmanjšajo, da ostanejo v
   dveh vrstah tudi na telefonu. */
.answers.takti.veliko .answer {
  flex-basis: 4.4rem;
  font-size: clamp(16px, 2.7vh, 24px);
  padding: clamp(8px, 1.5vh, 14px) 4px;
}
.answers.takti .answer:active { transform: translateY(4px); box-shadow: none; }
.answers.takti .answer[disabled] { opacity: .55; cursor: default; transform: none; }
.answers.takti .answer.good {
  background: var(--mint); box-shadow: 0 6px 0 var(--mint-d);
}
.answers.takti .answer.bad {
  background: var(--coral); box-shadow: 0 6px 0 var(--coral-d);
}

/* Čipi z ulomki: enako široki, da vrsta ne poskakuje. */
#takti .chip { font-variant-numeric: tabular-nums; min-width: 3.4rem; }