/* ============================================================
   Klaviatura — postavitev

   Črtovje je zgoraj (slog je v assets/music.css, ker si ga deli
   več iger), klaviatura pa spodaj, kjer je palec.

   Klaviatura ni mreža. Bele tipke stojijo druga ob drugi, črne pa
   LEŽIJO ČEZNJE, vsaka na meji med dvema belima — natanko tako,
   kot na pravem klavirju, in prav ta vzorec je tisto, po čemer
   otrok najde C. Zato so črne postavljene z odstotki čez belo
   vrsto in ne vrinjene medse.
   ============================================================ */

/* Kartica s črtovjem mora RASTI (flex: 1 1 0), klaviatura pa ne.

   Prvič je bilo obratno — kartici sem dal flex: 0 1 auto, da bi
   pustila prostor tipkam. Škatla v njej ima flex: 1 1 0 in je s
   tem dobila nič višine: črtovje se sploh ni narisalo. Nič se ni
   pritožilo, ker abcjs v škatlo velikosti nič le tiho ne nariše
   ničesar. */
.staff-card { flex: 1 1 0; min-height: 0; }
.staff-box { width: min(100%, 420px); max-height: 34vh; }

/* Klaviatura ima OHIŠJE.

   Prva različica je postavila bele tipke naravnost na papir. Ker
   sta bili obe barvi skoraj beli (#fff proti #FFFDF7, razmerje
   1,01), zunanji rob klaviature ni obstajal — tipke so se na
   dnu preprosto razlile v ozadje. Temnejši papir to že sam
   popravi, ohišje pa je poleg tega pravi klavirski odgovor:
   prava klaviatura VEDNO stoji v temnem okvirju in prav ta
   okvir pove, kje se tipke začnejo in nehajo.

   Ohišje hkrati opravi še eno delo: med belimi tipkami se vidi
   skozi kot ozka temna reža, zato tipke nisi več ločene s komaj
   vidno črto, ampak z zarezo — tako kot na klavirju. */
.klaviatura {
  position: relative;
  flex: 0 0 auto;

  /* --bele postavi game.js: 8 tipk za eno oktavo, 15 za dve, 22
     za tri, 29 za štiri. Vse mere klaviature slonijo na tem
     številu, zato ni nikjer zapisane sedmice.

     Klaviatura sme biti ŠIRŠA OD .wrap (900 px). Pri štirih
     oktavah bi jo ovoj stisnil na 39 px na tipko, torej pod
     spodnjo mejo — zato se meri po zaslonu in se postavi na
     sredino okna, ne na sredino ovoja. */
  --bele: 8;
  width: min(94vw, calc(var(--bele) * 62px));
  margin: clamp(6px, 1.6vh, 16px) 0 0 50%;
  transform: translateX(-50%);
  /* Višina tipke je odmerjena za palec, ne za miško. */
  height: clamp(104px, 20vh, 170px);
  touch-action: manipulation;

  background: #1B2438;
  /* Ohišje je OBROBA in ne odmik.

     Z odmikom ga sploh ni bilo videti: podlaga absolutno
     postavljenega elementa je ODMIČNI okvir, zato so tipke
     (top:0; bottom:0; skupaj 100 % širine) pokrile prav ves
     odmik — izmerjeno 0,0 px ohišja na vseh štirih straneh.
     Obroba leži ZUNAJ tega okvirja, zato je tipke ne morejo
     prekriti.

     Debelina je znotraj višine (box-sizing: border-box), zato
     klaviatura ne zraste in preverjanje drsenja ostane v
     veljavi; odstotki v game.js ostanejo nedotaknjeni. */
  border: 7px solid #1B2438;
  border-bottom-width: 10px;
  border-radius: calc(var(--radius-s) + 7px);
  /* Tipke se porezejo po NOTRANJI krivini ohisja.

     Brez tega je bilo ohisje zaobljeno, bela tipka v vogalu pa
     je ostala pravokotna in se je z ostrim vogalom zarila v
     zaobljeni rob — spodaj se je to skrilo, ker imajo tipke
     spodaj svoj radij, zgoraj pa je stalo na ocheh. Rezanje
     vzame notranji radij ohisja samo od sebe, zato ni treba
     prvi in zadnji tipki racunati posebnega vogala; in ker so
     tipke na vrhu porezane po isti krivini, ostanejo med sabo
     poravnane tako kot na klavirju. */
  overflow: hidden;
  box-shadow: 0 7px 0 rgba(20, 27, 43, .38), 0 16px 32px rgba(35, 48, 74, .30);
}

/* ---------- bele ---------- */
.klaviatura .bela {
  position: absolute; top: 0; bottom: 0;
  width: calc(100% / var(--bele));
  border: none;
  /* Reža med tipkama je barva ohišja in ne siva črta: tako je
     videti kot prostor med tipkama, ne kot narisana meja. */
  border-right: 2px solid #1B2438;
  background: #fff;
  border-radius: 0 0 7px 7px;
  box-shadow: inset 0 -7px 0 rgba(35, 48, 74, .09);
  cursor: pointer; font: inherit; padding: 0;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 8px;
}
/* Zadnja tipka nima reže na desni — tam je že ohišje. */
.klaviatura .bela:last-of-type { border-right: none; }

/* ---------- črne ----------
   Ožje in krajše, čez bele. Pri pritisku morajo biti NAD belimi,
   sicer tap ob robu zadene belo pod njimi. */
.klaviatura .crna {
  position: absolute; top: 0;
  height: 62%;
  width: calc(100% / var(--bele) * 0.62);
  border: none;
  background: linear-gradient(180deg, #46536F 0%, #232E45 100%);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .34);
  cursor: pointer; font: inherit; padding: 0;
  z-index: 2;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 6px;
}

.klaviatura button:active { filter: brightness(.94); }
.klaviatura button[disabled] { cursor: default; }

/* ---------- ime tipke ----------
   Med igro so tipke neme: kdor bi bral napise, ne bi iskal tipke,
   ampak črko. Ime se pokaže šele po odgovoru, in samo na tisti
   tipki, za katero gre. */
.klaviatura .ime {
  font-size: clamp(11px, 1.7vh, 15px);
  font-weight: 700;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.klaviatura .bela .ime { color: var(--ink-soft); }
.klaviatura .crna .ime { color: rgba(255, 255, 255, .92); }
.klaviatura button.pokazi .ime { opacity: 1; }

/* ---------- odziv ---------- */
.klaviatura .bela.good { background: var(--mint); }
.klaviatura .bela.bad  { background: var(--coral); }
.klaviatura .crna.good { background: var(--mint-d); }
.klaviatura .crna.bad  { background: var(--coral-d); }
.klaviatura .bela.good .ime, .klaviatura .bela.bad .ime { color: #fff; }

@media (max-height: 480px) {
  .klaviatura { height: clamp(74px, 30vh, 110px); border-width: 5px; border-bottom-width: 7px; }
  .staff-box { max-height: 30vh; }
}