/* ============================================================
   ABECEDARUL INTERACTIV — literele de mână
   ============================================================
   Restul aspectului e comun cu matematica: ../clasa-i-comun/clasa-i.css

   Literele de mână: fontul Playwrite RO (licență SIL Open Font
   License 1.1), păstrat pe site, în scris-de-mana.woff2.
   ============================================================ */

@font-face {
  font-family: 'Scris de mana';
  src: url('scris-de-mana.woff2') format('woff2');
  font-display: swap;
}

/* !important: butoanele au `font: inherit`, care ar întoarce fontul obișnuit. */
.de-mana { font-family: 'Scris de mana', cursive !important; font-weight: 400 !important; }

/* ---------- modelele din „Învăț” (modele.js) ---------- */

/* desenul care arată propoziția-cheie (imagini/propozitii/) */
.desen-propozitie { flex: none; width: min(100%, 460px, 40vh); aspect-ratio: 1; object-fit: cover; border-radius: 18px; }
/* Pe ecranele late, propoziția stă lângă desen; pe telefon, sub el. */
@media (min-width: 1000px) {
  .invata-rand:has(> .desen-propozitie) { flex-wrap: nowrap; }
  .invata-rand:has(> .desen-propozitie) .text-mare { flex: 0 1 auto; min-width: 0; }
}
@media (min-width: 1700px) { .desen-propozitie { width: min(100%, 560px, 44vh); } }

/* schema propoziției: o linie pentru fiecare cuvânt */
.schema-prop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 14px; }
.schema-prop__linie {
  min-width: clamp(90px, 12vw, 160px);
  min-height: 64px;
  padding: 0 12px 4px;
  border: none;
  border-bottom: 8px solid var(--albastru);
  background: none;
  color: var(--cerneala);
  font: inherit;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 900;
  cursor: pointer;
}
.schema-prop__linie[data-aratat] { border-bottom-color: var(--verde); }
.schema-prop__semn { font-size: 3rem; font-weight: 900; line-height: 1; }

/* toba silabelor */
.toba { width: 120px; height: 120px; border: none; border-radius: 50%; background: #ffe2c2; font-size: 4.4rem; cursor: pointer; box-shadow: 0 6px 0 #c47a2c; }
.toba:active { transform: translateY(4px); box-shadow: 0 2px 0 #c47a2c; }
.silabe-toba { display: flex; gap: 10px; min-height: 64px; }
.silabe-toba__silaba { padding: 6px 16px; border-radius: 14px; background: var(--albastru-pal); font-size: 2.4rem; font-weight: 900; animation: intra 0.3s ease both; }

/* schema cuvântului: căsuțele sunetelor */
.casute-cuvant { display: flex; gap: 10px; }
.casute-cuvant__casuta {
  display: grid;
  place-items: center;
  width: clamp(64px, 9vw, 104px);
  height: clamp(72px, 10vw, 116px);
  border: 4px solid var(--albastru);
  border-radius: 14px;
  background: #fff;
  color: var(--cerneala);
  font: inherit;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  cursor: pointer;
}
.casute-cuvant__casuta--tinta { border-color: var(--rosu); background: #fdeceb; color: var(--rosu); }
/* Pe telefon, căsuțele unui cuvânt lung se îngustează și rămân pe un rând. */
@media (max-width: 640px) {
  .casute-cuvant { max-width: 100%; gap: 5px; }
  .casute-cuvant__casuta { flex: 0 1 auto; min-width: 0; border-width: 3px; font-size: 1.8rem; }
}

/* imaginile de atins */
.grila-imagini { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; width: 100%; }

/* alfabetarul */
.piesa--noua { background: linear-gradient(160deg, #ff8a8a, #d62828); box-shadow: 0 5px 0 #8e1414; }
.piesa--aleasa { outline: 5px solid var(--galben); outline-offset: 3px; }
.silaba-formata { padding: 6px 16px; border-radius: 14px; background: var(--verde-pal); font-size: 2.2rem; font-weight: 900; animation: intra 0.3s ease both; }

/* propoziția în trei forme */
.trei-forme { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.trei-forme__rand { margin: 0; font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; }
.trei-forme__rand--silabe { color: var(--albastru-inchis); }
.trei-forme__rand--schema { color: var(--cerneala-slaba); letter-spacing: 2px; }