/* ============================================================
   Skupni videz glasbenih iger.

   Leži v assets/, ker ga uporabljata obe poslušalni igri — enako
   kot kids.css. Prej je bil del chords.css, ki ga je igra
   "Kateri interval?" vlekla čez "../chords/chords.css"; head.php
   pa vsako pot s poševnico razume kot pot od korena, zato je
   nastalo "/../chords/chords.css" in slog se sploh ni naložil.
   Skupno naj bo v assets/, ne pri sosedu.
   ============================================================ */

/* Namig na tlorisu, da se splača imeti zvok. */
.ear-note {
  margin: -4px 0 var(--gap);
  text-align: center;
  color: #6B7280;
  font-size: clamp(13px, 1.6vh, 15px);
}

.panel.wide { grid-column: 1 / -1; }
.how { margin: 0; line-height: 1.5; }
.how strong { color: var(--grape); }
.hint.warn { color: var(--coral-d); font-weight: 600; }

/* Čipi se ne smejo stisniti pod svoje besedilo. Sedem imen
   intervalov je v eni vrsti preveč; naj se prelomijo v drugo
   vrsto, ne pa da "sekunda" in "terca" zlezeta druga v drugo. */
#setup .chips .chip { flex: 0 0 auto; }

/* ---------- zapora, kadar je zvok izklopljen ---------- */
.sound-warn {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto var(--gap);
  padding: 10px 14px;
  max-width: 560px;
  border-radius: var(--radius);
  background: #FFF3F3;
  border: 2px solid var(--coral);
}
.sound-warn .sw-ico { font-size: 20px; }
.sound-warn .sw-text { font-weight: 600; color: var(--coral-d); }
.btn.small { padding: 6px 14px; font-size: 15px; }

/* ---------- gumb za poslušanje ---------- */
.listen-card {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
}
.listen {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  width: min(88vw, 34vh, 320px);
  height: min(88vw, 34vh, 320px);
  border: none; border-radius: 50%;
  background: var(--grape); color: #fff;
  box-shadow: 0 8px 0 var(--grape-d);
  cursor: pointer;
  font: inherit; font-weight: 700;
  transition: transform .08s ease, box-shadow .08s ease;
}
.listen:active { transform: translateY(5px); box-shadow: 0 3px 0 var(--grape-d); }
.listen .l-ico  { font-size: clamp(38px, 9vh, 74px); line-height: 1; }
.listen .l-text { font-size: clamp(14px, 2.1vh, 19px); }

/* Med predvajanjem gumb utripa, da je vidno, da zvok teče. */
.listen.playing { animation: listen-pulse 1s ease-in-out infinite; }
@keyframes listen-pulse {
  0%, 100% { box-shadow: 0 8px 0 var(--grape-d); }
  50%      { box-shadow: 0 8px 0 var(--grape-d), 0 0 0 12px rgba(155, 93, 229, .18); }
}

/* Kratka telefonska ležeča slika: krog manjši, da ostane brez drsenja. */
@media (max-height: 420px) {
  .listen { width: min(30vh, 150px); height: min(30vh, 150px); }
  .listen .l-ico { font-size: clamp(26px, 11vh, 40px); }
  .how { display: none; }
}

/* ---------- črtovje na sredini zaslona ----------
   Uporabljata jo "Kateri ton je to?" in "Kateri interval vidiš?".
   Prvič je stala v notes.css; ko je črtovje potrebovala druga
   igra, bi ga morala vleči od soseda — tretjič ista napaka kot
   prej s krogom za poslušanje in z vrsto odgovorov. Skupno naj
   bo v assets/.

   Klik na črtovje (kazalec) je ostal pri "Kateri ton je to?" —
   tam ponovi ton, tu bi obljubljal nekaj, česar ni. */
.staff-card {
  /* flex-basis 0, ne auto: risba je visoka 700 px po svoji naravi,
     in z 'auto' bi ta višina štela v postavitev ter potisnila stran
     čez zaslon (izmerjeno: 47 px drsenja na iPhone SE). Z osnovo 0
     kartica dobi samo to, kar ostane, in nikoli več. */
  flex: 1 1 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(6px, 1.4vh, 12px);
  min-height: 0;
}

.staff-box {
  flex: 1 1 0;
  min-height: 0;
  width: min(100%, 520px);
  max-height: 52vh;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(8px, 1.8vh, 20px) clamp(10px, 3vw, 26px);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-s);
}

/* Velikost določi škatla; .crtovje je zgoraj že nastavljen na
   100 %, razmerje pa ohrani viewBox. abcjs-u width in height
   odvzame Staff.render(), sicer bi pribila velikost, ki jo je
   izračunal sam. */

.clef-name {
  margin: 0;
  font-size: clamp(13px, 1.8vh, 16px);
  font-weight: 600;
  color: var(--ink-soft);
}


/* ---------- vrsta odgovorov (dva ali trije gumbi) ----------
   Uporabljata jo "Kateri interval?" in "Dopolni lestvico". Prvič
   je stala v intervals.css in stran z lestvicami je imela gumbe
   brez sloga — enaka napaka kot prej s krogom za poslušanje.
   Skupno naj bo v assets/, ne pri sosedu. */
.answers.pick {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--gap);
  width: min(100%, 620px);
  margin: 0 auto;
}
.answers.pick .answer {
  padding: clamp(10px, 2.2vh, 20px) 6px;
  border: none; border-radius: var(--radius);
  cursor: pointer; font: inherit; color: #fff;
  font-size: clamp(15px, 2.6vh, 24px); font-weight: 700;
  background: var(--grape); box-shadow: 0 6px 0 var(--grape-d);
}
/* Druga možnost je bila mint — ista zelena, s katero spodaj
   ".answer.right" označi PRAVILEN odgovor. Barva možnosti ne sme
   biti barva odziva. Sun nosi črnilo: belo na rumeni da 1,54 : 1,
   črnilo 8,58. */
.answers.pick .answer:nth-child(2) { background: var(--sun); box-shadow: 0 6px 0 var(--sun-d); color: var(--ink); }
.answers.pick .answer:nth-child(3) { background: var(--sky);  box-shadow: 0 6px 0 var(--sky-d); }
.answers.pick .answer:active { transform: translateY(4px); box-shadow: none; }
.answers.pick .answer[disabled] { opacity: .55; cursor: default; transform: none; }
.answers.pick .answer.right { outline: 4px solid var(--mint-d); outline-offset: 3px; }
.answers.pick .answer.wrong { opacity: .35; }

/* Pri treh dolgih imenih (septima) na ozkem telefonu raje eno pod drugim. */
@media (max-width: 380px) {
  .answers.pick { grid-auto-flow: row; }
}

/* ============================================================
   Vrsta tonov — uporabljata jo "Dopolni lestvico" in "Sestavi
   lestvico".

   Tretjič se je zgodilo isto: slog je stal pri eni igri, druga ga
   je vlekla čez "../scale/scale.css", head.php pa vsako pot s
   poševnico razume kot pot od korena — nastalo je
   "/../scale/scale.css" in slog se ni naložil. Prej krog za
   poslušanje, nato vrsta odgovorov, zdaj toni.

   Pravilo za naprej: kar uporablja več kot ena igra, gre v
   assets/. Igra ne bere iz mape sosednje igre.
   ============================================================ */
.scale-card {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(8px, 2vh, 18px);
  min-height: 0;
}

.scale-name {
  margin: 0;
  font-size: clamp(20px, 3.4vh, 32px);
  font-weight: 700;
  color: var(--grape);
}

.scale-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(5px, 1.2vh, 11px);
}

.tone {
  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);
  background: #fff;
  box-shadow: var(--shadow);
  font-size: clamp(16px, 2.8vh, 27px);
  font-weight: 700;
  color: var(--ink);
}

/* Prazno mesto je vabilo, ne luknja: prekinjen rob in vprašaj. */
.tone.gap {
  background: #F4F0FF;
  box-shadow: none;
  border: 3px dashed var(--grape);
  color: var(--grape);
}
.tone.filled { background: var(--mint); color: #fff; border-style: solid; }
.tone.wrongfill { background: var(--coral); color: #fff; border-style: solid; }

/* Ko je odgovor znan, se pravi ton na kratko poudari. */
.tone.pulse { animation: tone-pop .4s ease; }
@keyframes tone-pop {
  0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); }
}

/* ============================================================
   Notno črtovje (assets/staff.js + abcjs)

   Risbo naredi abcjs; z add_classes: true vsakemu delu pripne
   svoj razred, zato ga lahko pobarvamo od tu. Slog stoji tu in
   ne pri igri, ker bo črtovje potrebovala še katera igra —
   predznaki, lestvice, ritem — in naj podeduje isti videz, ne
   pa da ga kdo prepiše k sebi. To pravilo je zgoraj zapisano
   trikrat, ker se je trikrat kršilo.
   ============================================================ */
/* Mere postavi Staff.render v pikslih škatle (glej
   poVelikostiSkatle). Slog jih zato ne sme prevoziti s 100 %,
   sicer bi bili spet tam, kjer Safari sam ugiba velikost —
   omejuje naj le navzgor. */
.crtovje { display: block; max-width: 100%; max-height: 100%; color: var(--ink); }

/* abcjs riše vse s <path> in jim da fill="currentColor", zato
   črtovje, note in pomožne črtice podedujejo barvo od 'color'
   zgoraj. Pozor pri izbirnikih: .abcjs-notehead in .abcjs-stem
   STA path, .abcjs-clef in .abcjs-staff pa <g> s path znotraj.
   Prva različica je pisala samo ".abcjs-notehead path" in ni
   pobarvala ničesar — nota je ostala črna, ker je pravilo
   naslavljalo otroka, ki ga ni. Zato oboje. */
.crtovje .abcjs-clef,
.crtovje .abcjs-clef path { fill: var(--grape); }

/* Taktnice ne rišemo: naloga je ena nota, ne takt. */
.crtovje .abcjs-bar { display: none; }

/* Ko je odgovor znan, se nota obarva — zeleno ali rdeče.

   Prva različica jo je povečala. Glavica in deblo sta ločena
   elementa in vsak se je povečal okoli SVOJEGA središča, zato je
   glavica med povečavo zdrsnila z debla. Barva pove isto in nima
   česa razmakniti. */
.crtovje .abcjs-notehead,
.crtovje .abcjs-stem,
.crtovje .abcjs-ledger,
.crtovje .abcjs-notehead path,
.crtovje .abcjs-stem path,
.crtovje .abcjs-ledger path { transition: fill .18s ease; }

.crtovje:not(.ritem).pravilna .abcjs-notehead,
.crtovje:not(.ritem).pravilna .abcjs-stem,
.crtovje:not(.ritem).pravilna .abcjs-ledger,
.crtovje:not(.ritem).pravilna .abcjs-notehead path,
.crtovje:not(.ritem).pravilna .abcjs-stem path,
.crtovje:not(.ritem).pravilna .abcjs-ledger path { fill: var(--mint-d); }

.crtovje:not(.ritem).napacna .abcjs-notehead,
.crtovje:not(.ritem).napacna .abcjs-stem,
.crtovje:not(.ritem).napacna .abcjs-ledger,
.crtovje:not(.ritem).napacna .abcjs-notehead path,
.crtovje:not(.ritem).napacna .abcjs-stem path,
.crtovje:not(.ritem).napacna .abcjs-ledger path { fill: var(--coral-d); }

/* ---------- ritem: enovrstično črtovje, vrzel, simboli ----------
   Ključa pri ritmu ni: naloga so trajanja, ne višine. abcjs pri
   clef=none vseeno nariše prazen prostor, zato ga skrijemo. */
.crtovje.ritem .abcjs-clef { display: none; }

/* Vrzel: pavza, ki je ne rišemo, in okvirček na njenem mestu.
   Pavza je pribito enako dolga ne glede na pravi odgovor, sicer
   bi širina luknje izdala, kaj manjka. */
.crtovje.ritem .abcjs-rest.skrita { visibility: hidden; }
.crtovje .vrzel {
  fill: #F4F0FF;
  stroke: var(--grape);
  stroke-width: .9;
  stroke-dasharray: 3 2.2;
}
.crtovje .vrzel-znak {
  fill: var(--grape);
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 700;
  /* Velikost postavi Staff.renderBar iz velikosti okvirčka. */
}
.crtovje.ritem.pravilna .vrzel { fill: #E7F8F4; stroke: var(--mint-d); }
.crtovje.ritem.napacna  .vrzel { fill: #FFF0F0; stroke: var(--coral-d); }

/* Posamezni notni simbol (gumbi z odgovori). */
.simbol { display: block; }
.simbol .abcjs-note, .simbol .abcjs-note path { fill: var(--ink); }

/* Pri ritmu se obarva SAMO nota, ki je zapolnila vrzel.

   Sprva so se obarvala pravila iz igre z višinami in je pordečel
   ves takt — kot da je narobe vse, kar otrok vidi, čeprav je
   zgrešil eno samo vrednost. abcjs vsaki postavki pripne razred
   abcjs-n<zaporedna>, ki se ujema z našim indeksom, zato se da
   zadeti natanko tisto noto. */
.crtovje.ritem .abcjs-note.izpolnjena,
.crtovje.ritem .abcjs-note.izpolnjena path { transition: fill .18s ease; }
.crtovje.ritem.pravilna .abcjs-note.izpolnjena,
.crtovje.ritem.pravilna .abcjs-note.izpolnjena path { fill: var(--mint-d); }
.crtovje.ritem.napacna .abcjs-note.izpolnjena,
.crtovje.ritem.napacna .abcjs-note.izpolnjena path { fill: var(--coral-d); }