/* ============================================================
   Dur ali mol — samo tisto, kar je za to igro posebnega.
   Vse ostalo (gumbi, plošče, konec kroga) je v kids.css.
   ============================================================ */

/* 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 z razlago je širok, ne v stolpcu s čipi. */
.panel.wide { grid-column: 1 / -1; }
.how { margin: 0; line-height: 1.5; }
.how strong { color: var(--grape); }

/* Zapora pred igro, 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); }
}

/* ---------- odgovora ---------- */
.answers.two {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap);
  width: min(100%, 560px); margin: 0 auto;
}
.answers.two .answer {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: clamp(10px, 2vh, 18px) 8px;
  border-radius: var(--radius);
  border: none; cursor: pointer; font: inherit; color: #fff;
}
.answers.two .answer .a-word { font-size: clamp(20px, 3.6vh, 32px); font-weight: 700; letter-spacing: .04em; }
.answers.two .answer .a-hint { font-size: clamp(12px, 1.7vh, 15px); opacity: .85; }
.answers.two .answer.dur { background: var(--sun);   box-shadow: 0 6px 0 var(--sun-d);   color: var(--ink); }
.answers.two .answer.mol { background: var(--sky);   box-shadow: 0 6px 0 var(--sky-d); }
.answers.two .answer:active { transform: translateY(4px); box-shadow: none; }
.answers.two .answer[disabled] { opacity: .55; cursor: default; transform: none; }

/* 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; }
}