/* ============================================================
   Glasbeni izrazi — postavitev

   Na zaslonu sta samo pomen in tri besede. Nič se ne riše in nič
   ne zveni, zato ima pomen ves prostor: prebrati ga je treba do
   konca, preden se odgovori.
   ============================================================ */

.pomen-card {
  flex: 1 1 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(6px, 1.4vh, 14px);
  min-height: 0;
}

/* Ime skupine je namig, ne odgovor: pove, ali gre za glasnost ali
   za hitrost, kar otrok vidi tudi iz treh ponujenih besed. */
.skupina-oznaka {
  margin: 0;
  font-size: clamp(12px, 1.7vh, 15px);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.pomen {
  margin: 0;
  text-align: center;
  font-weight: 700;
  font-size: clamp(21px, 4.6vh, 40px);
  line-height: 1.25;
  color: var(--ink);
  max-width: 18ch;
}

/* Kratica ima svojo višino tudi, ko je skrita — sicer bi se ob
   vsakem odgovoru vse skupaj premaknilo navzgor. */
.kratica {
  margin: 0;
  min-height: 1.4em;
  font-size: clamp(15px, 2.4vh, 22px);
  font-weight: 700;
  color: var(--grape);
}
.kratica.hidden { visibility: hidden; display: block; }

/* ---------- tri besede ----------
   Ena pod drugo in ne v vrsto: izrazi so različno dolgi
   ("fine" proti "accelerando") in v treh stolpcih bi se en sam
   prelomil čez dve vrstici, drugi pa ne. */
.answers.izrazi {
  display: flex; flex-direction: column;
  gap: clamp(7px, 1.4vh, 12px);
  width: min(100%, 460px); margin: 0 auto;
}
.answers.izrazi .answer {
  padding: clamp(10px, 2vh, 18px) 12px;
  border: none; border-radius: var(--radius);
  background: #fff; color: var(--ink);
  box-shadow: 0 5px 0 rgba(35, 48, 74, .12), inset 0 0 0 1px var(--rob);
  cursor: pointer; font: inherit;
  font-weight: 700; font-size: clamp(17px, 3vh, 26px);
  transition: transform .08s ease, box-shadow .08s ease, background .18s ease;
}
.answers.izrazi .answer:active { transform: translateY(3px); box-shadow: none; }
.answers.izrazi .answer[disabled] { cursor: default; }
.answers.izrazi .answer.good { background: var(--mint); color: #fff; box-shadow: 0 5px 0 var(--mint-d); }
.answers.izrazi .answer.bad  { background: var(--coral); color: #fff; box-shadow: 0 5px 0 var(--coral-d); }

@media (max-height: 480px) {
  .pomen { font-size: clamp(17px, 6vh, 26px); max-width: 26ch; }
  .answers.izrazi { flex-direction: row; }
  .answers.izrazi .answer { flex: 1 1 0; font-size: clamp(14px, 4vh, 19px); }
}

/* ---------- razlaga skupin na začetni strani ----------

   Sedem vrstic, ena na skupino: ime, razlaga po domače in dva
   prava izraza iz te skupine.

   "Agogika" je izraz iz učnega načrta in je pravilen, a staršu,
   ki igro odpira, ne pove ničesar — in kdor ne ve, kaj izbira,
   ne izbere. Prej je bilo tu opisano, kako igra teče; to pove že
   podnaslov.

   Vrstica in ne dva stolpca: največ obiska pride s telefona in
   ime nad razlago bi sedem vrstic podvojilo v štirinajst. */
.pojasnila { margin: 0; }
.pojasnilo + .pojasnilo { margin-top: 7px; }
.pojasnilo dt,
.pojasnilo dd { display: inline; margin: 0; line-height: 1.45; }
.pojasnilo dt { font-weight: 700; color: var(--ink); }
.pojasnilo dd { color: var(--ink-soft); }
.pojasnilo dd::before { content: ' — '; }

/* Primeri so prave besede iz igre, zato so tudi videti drugače
   kot razlaga. Barva je --grape-d in ne --grape: na belem da
   6,15 : 1, --grape pa 4,13 in ne drži AA za navadno besedilo. */
.pojasnilo .primeri { color: var(--grape-d); font-weight: 600; }

/* Telefon: razlaga se stisne, ne skrije.

   Skriti jo pomeni vrniti se tja, od koder smo prišli — največ
   obiska pride s telefona in prav tam je razlaga skupin najbolj
   potrebna, ne najmanj.

   Pogoj je ŠIRINA in ne višina. Prvi poskus je vzel obstoječi
   pogoj (max-height: 700px in max-width: 460px), ta pa se na
   telefonu 390 x 844 sploh ne sproži: stran je bila 913 px
   visoka in gumb "Igraj" je padel pod rob. */
@media (max-width: 560px) {
  #setup .pojasnilo + .pojasnilo { margin-top: 3px; }
  #setup .pojasnila { font-size: 13px; }
  #setup .pojasnilo dt, #setup .pojasnilo dd { line-height: 1.35; }
}
/* Ploščic, gumbkov in odmikov tu NE popravljamo. Prvi poskus jih
   je, in ker ta pogoj stoji v terms.css (naloži se za music.css),
   je s svojim ohlapnejšim razmikom povozil tesnejše pravilo za
   ozke telefone iz music.css — 360 x 640 je zrasel s 672 na 744
   px. Ozko pravilo tam naj ostane najtesnejše. */
@media (max-width: 400px) {
  #setup .pojasnila { font-size: 12.5px; }
  #setup .pojasnilo + .pojasnilo { margin-top: 2px; }
}
/* Nizek zaslon: sedem vrstic v tako malo višine ne gre.

   Razlaga tam dobi SVOJE drsenje, da ne potisne gumba "Igraj" s
   strani. Bolje je drseti po razlagi, ki jo bereš, kot po celi
   strani do gumba, ki ga iščeš. */
@media (max-height: 620px) {
  #setup .pojasnila { max-height: 34vh; overflow-y: auto; }
}
@media (max-height: 480px) {
  #setup .pojasnila { max-height: 30vh; }
}

/* Zavihek je videti kot navaden naslov polja: puščica se pokaže
   šele tam, kjer se da tudi zapreti. Sicer bi otrok in starš
   videla gumb, ki ne naredi nič vidnega. */
.panel > summary.panel-title {
  list-style: none;
  cursor: default;
}
.panel > summary.panel-title::-webkit-details-marker { display: none; }
@media (max-width: 340px) {
  .panel > summary.panel-title { cursor: pointer; }
  .panel > summary.panel-title::after {
    content: ' ▸';
    display: inline-block;
    transition: transform .15s ease;
  }
  .panel[open] > summary.panel-title::after { content: ' ▾'; }
}