/* ============================================================
   Sestavi lestvico — mesta za zlaganje in premešani toni.
   Videz tonov je skupen z igro "Dopolni lestvico" (scale.css),
   ki jo stran naloži pred to.
   ============================================================ */

.scale-row.slots { min-height: clamp(46px, 8.5vh, 82px); }

/* Prazno mesto: prekinjen rob, številka stopnje namesto tona.
   Številka je pomoč, ne okras — otrok vidi, koliko jih še manjka
   in katera stopnja je na vrsti. */
.slot {
  display: flex; align-items: center; justify-content: center;
  min-width: clamp(42px, 8vh, 78px);
  padding: clamp(6px, 1.4vh, 14px) clamp(5px, 1vh, 10px);
  border-radius: var(--radius);
  border: 3px dashed #D3DBE8;
  color: #A9B4C6;
  font-size: clamp(15px, 2.4vh, 22px);
  font-weight: 700;
  background: transparent;
}
.slot.next { border-color: var(--grape); color: var(--grape); }

/* Toni v bazenu so gumbi — tap jih premakne na naslednje mesto. */
.pool .tone { cursor: pointer; border: 3px solid transparent; }
.pool .tone:active { transform: translateY(3px); }
/* Porabljen ton ostane na svojem mestu, le obledi.

   Skrit bi pomenil, da se preostali toni ob vsakem tapu
   premaknejo — in otrok bi cikal mimo, ker je gumb pod prstom
   medtem odšel drugam. Ista napaka kot premešani gumbi pri
   intervalih. Bleda sled je tudi sama po sebi koristna: vidi se,
   kateri toni so že postavljeni. */
.pool .tone.used {
  opacity: .22;
  box-shadow: none;
  pointer-events: none;
}

/* Postavljen ton je gumb nazaj: tap ga vrne v bazen. */
.slots .tone { cursor: pointer; border: 3px solid transparent; }
.slots .tone.ok    { background: var(--mint);  color: #fff; }
.slots .tone.notok { background: var(--coral); color: #fff; }

.scale-card .hint-line {
  margin: 0; font-size: clamp(12px, 1.7vh, 15px); color: #6B7280;
}