/* ============================================================
   Metronom.

   Vse drugo na spletišču je igra: nekaj se vpraša, otrok odgovori,
   krog se izteče. Tu se nič ne izteče — stran samo teče, dokler je
   kdo ne ustavi. Zato ima nekaj svojega: veliko številko tempa,
   drsnik in pike, ki utripajo.
   ============================================================ */

/* ---------- tempo ---------- */
.tempo-vrsta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 4px 0 14px;
}

.tempo-stevilka {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 140px;          /* da se vrsta ne premika, ko gre 99 v 100 */
  justify-content: center;
}
.tempo-stevilka strong {
  font-size: clamp(2.6rem, 9vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tempo-enota { font-size: .95rem; color: var(--ink-soft); font-weight: 600; }

/* Okrogla gumba −/+. Tarča 56 px in ne manj: uporabljata se med
   vadbo, z eno roko, pogosto ne da bi vadeči gledal v zaslon. */
.krog {
  font: inherit;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 3px solid var(--rob);
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-s);
  cursor: pointer;
  transition: transform .12s ease;
}
.krog:active { transform: translateY(3px); }

.drsnik {
  width: 100%;
  margin: 0 0 14px;
  accent-color: var(--sky);
  height: 44px;              /* tarča za prst; sam vodoravni pas je tanjši */
}

/* "Potrkaj tempo" je pomožen gumb. V modri barvi je tekmoval z
   "Začni" pod njim — dva enako glasna gumba na istem zaslonu in
   noben od njiju ni bil očitno tisti pravi. Zato bel z obrobo:
   opazen, kadar ga kdo išče, tih, kadar ga ne. */
#potrkaj {
  background: #fff;
  color: var(--ink);
  border: 3px solid var(--rob);
  box-shadow: var(--shadow-s);
  font-size: 1rem;
  padding: 10px 22px;
}
#potrkaj:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(35,48,74,.10); }

/* ---------- pike ---------- */
.dobe {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 22px 0 18px;
  min-height: 26px;          /* prostor ostane tudi, ko nič ne gori */
}
.pika {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  border: 3px solid var(--rob);
  /* Prehod samo ob ugašanju: prižig mora biti v istem trenutku
     kot klik, sicer oko in uho nista skupaj. */
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.pika.gori {
  background: var(--sky);
  border-color: var(--sky-d);
  transform: scale(1.18);
  transition: none;
}
/* Prva doba je poudarjena tudi za oko, ne le za uho — kdor šteje
   po zaslonu, mora videti, kje se takt začne. */
.pika.prva.gori { background: var(--coral); border-color: var(--coral-d); }

/* ---------- ustavi ---------- */
.btn.red { background: var(--coral); box-shadow: 0 7px 0 var(--coral-d); }
.btn.red:active { box-shadow: 0 2px 0 var(--coral-d); }

/* Brez zvoka metronoma ni; gumb takrat ne sme vabiti. */
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }

/* ============================================================
   Nizki zasloni

   Gumb "Začni" mora biti dosegljiv brez drsenja. Pri igrah to
   varuje tools/preveri_zacetek.js, tu pa velja iz istega razloga:
   metronom se prižge in ugasne desetkrat med eno vadbo, in vsak
   od teh desetih pritiskov bi sicer terjal še drsenje.

   Izmerjeno: pri 320 x 568 je bil gumb 202 px pod robom, pri
   360 x 640 pa 131 px. Stiska se po vrsti tisto, kar najmanj
   nosi — razmiki, nato velikost številke, nato pojasnilo pod
   izbiro takta. Tarče (kroga −/+, drsnik, ploščice) ostanejo
   velike; prst se ne stisne skupaj z zaslonom.
   ============================================================ */
@media (max-height: 820px) {
  .tempo-vrsta { margin: 0 0 10px; gap: 14px; }
  .tempo-stevilka strong { font-size: clamp(2.1rem, 7vw, 2.8rem); }
  .drsnik { margin-bottom: 8px; height: 40px; }
  #potrkaj { padding: 8px 18px; font-size: .94rem; }
  .dobe { margin: 12px 0 10px; }
  .dobe .pika { width: 18px; height: 18px; }
}

@media (max-height: 700px) {
  /* Ti razredi so skupni, a metronom.css se naloži samo tu, zato
     stiskamo natanko to stran in ničesar drugega. */
  .wrap { padding-top: 10px; }
  .topbar { margin-bottom: 8px; }
  .meni-glava { margin-bottom: 8px; }
  .subtitle { font-size: .9rem; line-height: 1.3; }
  .panels { gap: 8px; }
  .panel { padding: 12px 14px; }
  .panel-title { margin-bottom: 6px; }
  .how { margin: 6px 0 0; }
}

@media (max-height: 680px) {
  .krog { width: 50px; height: 50px; font-size: 1.5rem; }
  .tempo-stevilka { min-width: 118px; }
  .tempo-stevilka strong { font-size: 2rem; }
  .drsnik { height: 36px; margin-bottom: 4px; }
  .dobe { margin: 8px 0 8px; min-height: 20px; }
  .dobe .pika { width: 16px; height: 16px; border-width: 2px; }
  /* Pojasnilo pod izbiro takta pove isto, kar se ob prvem zagonu
     tudi sliši in vidi. Na najnižjih zaslonih se umakne gumbu. */
  .how { font-size: .86rem; line-height: 1.35; }
}

@media (max-height: 620px) {
  /* Na najnižjih zaslonih (320 x 568 je še vedno v rabi) meni v
     glavi odpade. Ne izgine s strani — v vznožju ostane in pajek
     ga tam tudi vidi — le nad gumbom ga ni. Isti razlog, iz
     katerega ga strani vaj nimajo nikoli: tarča, ki jo je treba
     pritisniti desetkrat med eno vadbo, je vredna več kot vrstica
     povezav, ki se uporabi enkrat. */
  .meni-glava { display: none; }
  .subtitle { font-size: .84rem; }
  .how { font-size: .8rem; margin-top: 4px; }
  .dobe { margin: 4px 0 2px; }
  .cta { margin-top: 0; }
  .tempo-stevilka strong { font-size: 1.85rem; }
  .chip { min-height: 44px; }
}