/* /jocuri/clasa-i-comun/clasa-i.css */
/* ============================================================
   CLASA I — aspectul comun
   ============================================================
   Folosit de Abecedarul interactiv și de Matematică și explorarea
   mediului: cititorul de cărți, copilul, fișa, jocul. Aceleași culori
   ca jocurile „Mută literele” și „Câte cuvinte găsești?”: albastru
   deschis, cartonașe albastre, butoane mari, potrivite pentru degetul
   unui copil și pentru tabla interactivă.
   ============================================================ */

:root {
  --fundal: #eaf4ff;
  --card: #ffffff;
  --cerneala: #12245a;
  --cerneala-slaba: #4a5a7a;
  --albastru: #2f6fde;
  --albastru-inchis: #1d4fb8;
  --albastru-deschis: #e3efff;
  --albastru-pal: #f2f8ff;
  --linie: #cfe0f7;
  --galben: #ffd65a;
  --verde: #23a05a;
  --verde-pal: #e3f7ec;
  --rosu: #d9534f;
  --rosu-pal: #fdeceb;
  --portocaliu: #f08a24;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
[hidden] { display: none !important; }

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 10%, #f6fbff 0, transparent 40%),
    radial-gradient(circle at 90% 80%, #dcecff 0, transparent 45%),
    var(--fundal);
  color: var(--cerneala);
  font-family: 'Segoe UI', 'Nunito', Roboto, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}


/* ---------- scena: copilul și cititorul ----------
   Pagina nu se derulează: cititorul ocupă înălțimea ferestrei, iar
   foaia se derulează în ecranul lui, ca într-un cititor de cărți. Rama
   e cea a cititorului din antetul primei pagini (CititorCarte.astro):
   neagră, mai lată în dreapta, unde stau butoanele. */

body { height: 100vh; height: 100dvh; overflow: hidden; }

.scena {
  --rama-sus: 42px;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px 16px 16px;
}

/* Legătura „înapoi” stă pe rama de sus a tabletei (cititor.js o mută în
   .cititor), ca tableta să ocupe tot ecranul: pe tabla interactivă rândul
   de deasupra lua loc. Fără script rămâne deasupra, ca înainte. */
.inapoi { align-self: flex-start; margin-bottom: 8px; color: var(--albastru-inchis); font-weight: 600; text-decoration: none; }
.scena:has(> .inapoi) { --rama-sus: 18px; }
.cititor > .inapoi {
  position: absolute;
  top: calc(var(--rama-sus) / 2);
  left: 30px;
  margin: 0;
  z-index: 4;
  transform: translateY(-50%);
  color: hsl(210 30% 88%);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
}
.cititor > .inapoi:hover { color: #fff; text-decoration: underline; }
.inapoi:focus-visible { outline: 3px solid #f6c33b; outline-offset: 3px; border-radius: 6px; }

.scena__rand {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1060px) minmax(0, 1fr);
  gap: 20px;
}

.cititor {
  grid-column: 2;
  position: relative;
  display: flex;
  min-height: 0;
  padding: var(--rama-sus) 46px 18px 18px;
  border-radius: 30px;
  background: linear-gradient(145deg, hsl(220 6% 22%) 0%, hsl(220 8% 11%) 60%, hsl(220 8% 8%) 100%);
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / 0.12),
    inset 0 0 0 1px hsl(0 0% 100% / 0.05),
    0 30px 60px hsl(205 60% 8% / 0.35),
    0 8px 18px hsl(205 60% 8% / 0.25);
}

.cititor__butoane {
  position: absolute;
  top: 50%;
  right: 13px;
  display: grid;
  gap: 10px;
  transform: translateY(-50%);
}
.cititor__buton {
  width: 20px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, hsl(220 6% 14%), hsl(220 6% 24%));
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.12), 0 1px 2px hsl(0 0% 0% / 0.5);
  cursor: pointer;
}
.cititor__buton:hover { background: linear-gradient(90deg, hsl(220 6% 20%), hsl(220 6% 32%)); }
.cititor__buton:active { transform: scaleX(0.9); }

/* Ecranul: hârtie electronică, alb-gălbuie. */
.cititor__ecran {
  --hartie: hsl(42 30% 93%);
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
  background: var(--hartie);
  box-shadow: inset 0 0 0 1px hsl(0 0% 0% / 0.35), inset 0 2px 10px hsl(0 0% 0% / 0.12);
  color: var(--cerneala);
}

/* Clipirea ecranului de hârtie electronică la schimbarea paginii. */
.cititor__ecran::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: hsl(220 15% 14%);
  opacity: 0;
  pointer-events: none;
}
.cititor__ecran--clipeste::after { animation: clipeste 0.3s linear; }
@keyframes clipeste {
  0%, 40% { opacity: 0.8; background: hsl(220 15% 14%); }
  41%, 70% { opacity: 0.9; background: #fff; }
  100% { opacity: 0; }
}

.ecran__cap, .ecran__subsol { flex: none; padding: 10px clamp(14px, 3vw, 30px); color: hsl(220 8% 42%); font-size: 0.85rem; }
.ecran__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; border-bottom: 1px solid hsl(42 18% 82%); }
.ecran__marca { color: hsl(205 70% 35%); font-weight: 700; font-size: 1rem; }
.ecran__eticheta { letter-spacing: 0.08em; text-transform: uppercase; text-align: right; }
.ecran__subsol { border-top: 1px solid hsl(42 18% 82%); }
.ecran__bara { display: block; height: 4px; margin-bottom: 6px; border-radius: 999px; background: hsl(220 10% 82%); overflow: hidden; }
.ecran__bara span { display: block; width: 0; height: 100%; background: hsl(205 70% 40%); transition: width 0.15s; }
.ecran__subsol-rand { display: flex; justify-content: space-between; gap: 1em; }

/* Foaia care se derulează. Umbrele de sus și de jos arată că textul
   continuă sub marginea ecranului. */
.ecran__foaie {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(14px, 3vw, 30px);
  outline: none;
  scrollbar-width: thin;
  scrollbar-color: hsl(220 8% 60%) transparent;
  background:
    linear-gradient(var(--hartie) 30%, transparent) top / 100% 30px no-repeat local,
    linear-gradient(transparent, var(--hartie) 70%) bottom / 100% 30px no-repeat local,
    radial-gradient(farthest-side at 50% 0, hsl(0 0% 0% / 0.14), transparent) top / 100% 10px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, hsl(0 0% 0% / 0.14), transparent) bottom / 100% 10px no-repeat scroll,
    var(--hartie);
}

.antet { text-align: center; }
.antet__titlu { margin: 0; font-size: clamp(1.6rem, 4.6vw, 2.6rem); font-weight: 900; line-height: 1.15; }
.antet__titlu a { color: inherit; text-decoration: none; }
.antet__despre { max-width: 680px; margin: 8px auto 18px; color: var(--cerneala-slaba); font-size: 1.05rem; line-height: 1.5; }
body[data-vedere='lectie'] .antet__despre { display: none; }
body[data-vedere='lectie'] .antet__titlu { font-size: clamp(1.1rem, 2.6vw, 1.4rem); color: var(--cerneala-slaba); }

/* ---------- copilul ---------- */

.copil {
  grid-column: 1;
  align-self: end;
  justify-self: end;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 280px);
  padding-bottom: 20px;
}
.copil__buton {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 200 / 250;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  animation: respira 3.6s ease-in-out infinite;
}
.copil--vorbeste .copil__buton { animation-duration: 1.2s; }
@keyframes respira {
  50% { transform: translateY(-4px); }
}
.copil__desen, .copil__poza { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.copil__desen { filter: drop-shadow(0 10px 14px hsl(205 60% 20% / 0.2)); }

/* Gura: se vede numai poziția din data-gura. */
.copil .copil__gura { visibility: hidden; }
.copil[data-gura='inchisa'] .copil__gura--inchisa,
.copil[data-gura='intredeschisa'] .copil__gura--intredeschisa,
.copil[data-gura='deschisa'] .copil__gura--deschisa { visibility: visible; }

.copil__ochi { transform-origin: 100px 106px; animation: clipeste-ochi 5s infinite; }
@keyframes clipeste-ochi {
  0%, 94%, 100% { transform: scaleY(1); }
  97% { transform: scaleY(0.1); }
}

.copil__balon {
  position: relative;
  max-width: 100%;
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 22px hsl(205 60% 20% / 0.15);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  transition: opacity 0.4s;
}
.copil__balon::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -12px;
  border: 12px solid transparent;
  border-bottom: 0;
  border-top-color: #fff;
  transform: translateX(-50%);
}
.copil__balon--stins { opacity: 0.55; }

/* Semnul „fără voce” (copil.js): în colțul copilului; atins, deschide panoul. */
.copil__fara-voce {
  position: absolute;
  left: 4px;
  bottom: 36px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--rosu);
  box-shadow: 0 6px 16px hsl(0 60% 30% / 0.3);
  font-size: 1.9rem;
  cursor: pointer;
  animation: fara-voce-puls 2.4s ease-in-out infinite;
}
@keyframes fara-voce-puls { 50% { transform: scale(1.08); } }
.fara-voce-panou {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 50;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 20px 24px;
  border: 4px solid var(--rosu);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 20px 60px hsl(205 60% 20% / 0.35);
  color: var(--cerneala);
  font-size: 1.1rem;
  line-height: 1.45;
  transform: translate(-50%, -50%);
}
.fara-voce-panou p, .fara-voce-panou ul { margin: 0 0 10px; }
.fara-voce-panou ul { padding-left: 1.2em; }
.fara-voce-panou li { margin-bottom: 6px; }
.fara-voce-panou__titlu { font-size: 1.25rem; font-weight: 900; }
.fara-voce-panou__inchide { display: block; margin: 8px auto 0; }

/* Fără loc lângă cititor, copilul stă mic, sus în dreapta, pe rândul
   legăturii „înapoi”; balonul apare dedesubt, peste capul ecranului. */
@media (max-width: 1500px) {
  .scena { --rama-sus: 50px; padding-top: 8px; }
  .scena__rand { grid-template-columns: minmax(0, 1fr); }
  .cititor { grid-column: 1; }
  /* copilul stă pe rama de sus, în dreapta, deasupra butoanelor de pagină */
  .copil {
    position: fixed;
    top: 9px;
    right: 64px;
    z-index: 5;
    width: 40px;
    padding: 0;
  }
  .copil__balon {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: max-content;
    max-width: min(420px, 80vw);
    margin: 0;
    font-size: 0.95rem;
  }
  .copil__balon::after { left: auto; right: 16px; top: -12px; bottom: auto; border: 12px solid transparent; border-top: 0; border-bottom-color: #fff; transform: none; }
  .copil__balon--stins { opacity: 0; pointer-events: none; }
  .copil__fara-voce { left: auto; right: calc(100% + 6px); top: 6px; bottom: auto; width: 46px; height: 46px; border-width: 3px; font-size: 1.35rem; }
}

@media (max-width: 640px) {
  .scena { --rama-sus: 40px; padding: 6px 6px 8px; }
  .cititor > .inapoi { left: 16px; font-size: 0.85rem; }
  .copil { top: 6px; right: 36px; width: 34px; }
  .cititor { padding: var(--rama-sus) 26px 8px 8px; border-radius: 18px; }
  .cititor__butoane { right: 6px; }
  .cititor__buton { width: 13px; height: 46px; }
  .ecran__cap, .ecran__subsol { padding: 6px 12px; font-size: 0.75rem; }
}

/* Pe telefon nu se mai desenează tableta (cerut pe 15 octombrie 2026: „pierd
   din spațiu”): fără margini negre, fără butoanele din dreapta și fără
   rândul „EduCamp”; rămâne doar bara de sus, deschisă la culoare, cu
   „← Lecții interactive” și Bit, iar foaia ocupă tot ecranul. */
@media (max-width: 640px) {
  .scena { --rama-sus: 44px; padding: 0; }
  .cititor {
    padding: var(--rama-sus) 0 0;
    border-radius: 0;
    background: hsl(42 30% 93%);
    box-shadow: none;
    border-bottom: 0;
  }
  .cititor::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: var(--rama-sus);
    border-top: 1px solid hsl(42 18% 80%);
  }
  .cititor > .inapoi { left: 12px; color: var(--albastru-inchis); }
  .cititor > .inapoi:hover { color: var(--albastru-inchis); }
  .cititor__butoane { display: none; }
  .cititor__ecran { border-radius: 0; box-shadow: none; }
  .ecran__cap { display: none; }
  .ecran__foaie { padding: 12px; }
}

/* ---------- butoane ---------- */

.buton {
  min-height: 50px;
  padding: 0 22px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(160deg, #4f8ff0, var(--albastru) 60%, var(--albastru-inchis));
  color: #fff;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 800;
  box-shadow: 0 4px 0 #1a46a3;
  cursor: pointer;
}
.buton:active { transform: translateY(3px); box-shadow: 0 1px 0 #1a46a3; }
.buton--secundar { border: 3px solid var(--albastru); background: var(--card); color: var(--albastru-inchis); box-shadow: none; }
.buton--mic { min-height: 44px; font-size: 1rem; }
.buton--verifica { background: linear-gradient(160deg, #3fc07a, var(--verde)); box-shadow: 0 4px 0 #17783f; }
.buton--da { background: linear-gradient(160deg, #3fc07a, var(--verde)); box-shadow: 0 4px 0 #17783f; }
.buton--nu { background: linear-gradient(160deg, #f6a55a, var(--portocaliu)); box-shadow: 0 4px 0 #b35e0f; }
.buton--palme { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 96px; min-height: 76px; font-size: 1.5rem; }
.buton__palme { font-size: 0.9rem; letter-spacing: -2px; }
button:focus-visible, a:focus-visible { outline: 4px solid var(--galben); outline-offset: 3px; }

.difuzor {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--linie);
  border-radius: 50%;
  background: var(--albastru-pal);
  font-size: 1.25rem;
  cursor: pointer;
  vertical-align: middle;
}

.scutura { animation: scutura 0.4s; }
@keyframes scutura {
  20%, 60% { transform: translateX(-7px); }
  40%, 80% { transform: translateX(7px); }
}

/* ---------- cuprinsul ---------- */

.cuprins__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lectie-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  height: 100%;
  padding: 14px 10px 12px;
  border: 2px solid var(--linie);
  border-radius: 20px;
  background: var(--albastru-pal);
  color: var(--cerneala);
  text-align: center;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.lectie-card:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(47, 111, 222, 0.18); }
.lectie-card__litera { font-size: 2.6rem; font-weight: 900; line-height: 1.1; color: var(--albastru-inchis); }
.lectie-card__nr { color: var(--cerneala-slaba); font-size: 0.85rem; font-weight: 700; }
.lectie-card__titlu { font-size: 0.95rem; font-weight: 600; line-height: 1.25; }
.lectie-card__semne { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 4px; }
.semn { padding: 1px 8px; border-radius: 999px; background: var(--verde-pal); color: #17783f; font-size: 0.78rem; font-weight: 700; }

/* ---------- lecția ---------- */

.lectie__inapoi { color: var(--albastru-inchis); font-weight: 700; text-decoration: none; }
.lectie__titlu { margin: 10px 0 14px; text-align: center; font-size: clamp(1.4rem, 4vw, 2.2rem); font-weight: 900; line-height: 1.2; }
.lectie__nr { display: block; color: var(--cerneala-slaba); font-size: 1rem; font-weight: 700; }

.file { display: flex; justify-content: center; gap: 10px; margin-bottom: 18px; }
.fila {
  padding: 10px 26px;
  border: 3px solid var(--albastru);
  border-radius: 999px;
  color: var(--albastru-inchis);
  font-size: 1.15rem;
  font-weight: 800;
  text-decoration: none;
}
.fila[aria-selected='true'] { background: var(--albastru); color: #fff; }
@media (max-width: 640px) {
  .file { gap: 6px; }
  .fila { padding: 8px 12px; font-size: 1rem; white-space: nowrap; }
}

.lectie__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.lectie__vecina { color: var(--albastru-inchis); font-weight: 700; text-decoration: none; }
.lectie__vecina--dreapta { margin-left: auto; text-align: right; }

/* ---------- fișa: cadrul exercițiilor ---------- */

.ex {
  margin: 0 0 18px;
  padding: clamp(12px, 2.5vw, 22px);
  border: 2px solid var(--linie);
  border-radius: 22px;
  background: var(--card);
}
.ex--prezentare { background: var(--albastru-pal); }
.ex__titlu { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; font-size: clamp(1.05rem, 2.6vw, 1.3rem); line-height: 1.35; }
.ex__nr {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--albastru);
  color: #fff;
  font-size: 1.05rem;
}
.ex__subsol { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.ex__rezultat { margin: 0; font-weight: 800; }
.ex__rezultat[data-stare='bine'] { color: var(--verde); }
.ex__rezultat[data-stare='aproape'] { color: var(--portocaliu); }
.legenda { margin: 0 0 8px; color: var(--cerneala-slaba); font-weight: 600; }

[data-rezultat='bine'] { outline: 4px solid var(--verde) !important; outline-offset: 2px; background-color: var(--verde-pal) !important; }
[data-rezultat='gresit'] { outline: 4px solid var(--rosu) !important; outline-offset: 2px; background-color: var(--rosu-pal) !important; }

/* ---------- cartonașele cu imagini ---------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  border: 3px solid var(--linie);
  border-radius: 18px;
  background: var(--card);
  color: inherit;
  font: inherit;
}
button.card { cursor: pointer; }
.card[aria-pressed='true'] { border-color: var(--albastru); background: var(--albastru-deschis); box-shadow: 0 0 0 3px var(--albastru) inset; }
.card__nume { font-weight: 700; color: var(--cerneala-slaba); }

.imagine { display: block; width: 96px; height: 96px; object-fit: contain; }
.imagine--emoji { display: grid; place-items: center; font-size: 68px; line-height: 1; white-space: nowrap; }
.imagine--dublu { letter-spacing: -0.25em; }
.imagine.imagine--dublu { font-size: 44px; }
.card--mic .imagine.imagine--dublu { font-size: 34px; }
.imagine--mare.imagine--dublu { font-size: 80px; }
.imagine--mare { width: 160px; height: 160px; }
.imagine--mare.imagine--emoji { font-size: 120px; }
.card--mic .imagine { width: 72px; height: 72px; }
.card--mic .imagine--emoji { font-size: 52px; }
.card--mic { flex-direction: row; flex: none; }

.grila { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }

/* ---------- prezentarea literei ---------- */

.prezentare__litere { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.prezentare__grupa { display: grid; grid-template-columns: auto auto; align-items: center; gap: 4px 14px; padding: 12px 20px; border-radius: 20px; background: var(--card); }
.prezentare__eticheta { color: var(--cerneala-slaba); font-weight: 700; text-align: right; }
.prezentare__rand { display: flex; gap: 18px; }
.litera-mare { min-width: 1ch; font-size: clamp(3rem, 10vw, 5rem); font-weight: 900; line-height: 1.15; color: var(--albastru-inchis); }
.litera-mare.de-mana { font-size: clamp(2.6rem, 8vw, 4.2rem); line-height: 1.6; }
.prezentare__exemple { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 16px; }
.card--exemplu { flex-direction: row; gap: 12px; padding: 10px 16px; }
.cuvant-tinta { font-size: 1.8rem; font-weight: 800; }
.tinta { color: var(--rosu); }

/* ---------- locul sunetului, silabele ---------- */

.locuri, .silabe-lista, .completeaza-lista, .primul-lista { display: flex; flex-direction: column; gap: 12px; }
.loc, .silabe, .numara { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.loc__casute { display: flex; gap: 8px; padding: 4px; border-radius: 12px; }
.loc__casuta {
  width: 58px;
  height: 58px;
  border: 3px solid var(--albastru);
  border-radius: 10px;
  background: var(--card);
  cursor: pointer;
}
.loc__casuta[aria-pressed='true'] { background: var(--rosu); border-color: var(--rosu); }

.silabe__optiuni { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px; border-radius: 14px; }
.silabe__buton {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 58px;
  border: 3px solid var(--albastru);
  border-radius: 14px;
  background: var(--card);
  color: var(--albastru-inchis);
  font: inherit;
  font-size: 1.4rem;
  font-weight: 900;
  cursor: pointer;
}
.silabe__puncte { font-size: 0.7rem; letter-spacing: 1px; }
.silabe__buton[aria-pressed='true'] { background: var(--albastru); color: #fff; }
.numara__propozitie { flex: 1 1 260px; margin: 0; font-size: 1.25rem; font-weight: 600; }

/* ---------- silabe de citit ---------- */

.citire-silabe__rand { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.silaba {
  min-width: 64px;
  min-height: 56px;
  padding: 0 14px;
  border: 3px solid var(--linie);
  border-radius: 14px;
  background: var(--albastru-pal);
  color: var(--cerneala);
  font: inherit;
  font-size: 1.6rem;
  font-weight: 800;
  cursor: pointer;
}
.silaba.de-mana { font-size: 1.5rem; font-weight: 400; }
.silaba[aria-pressed='true'] { border-color: var(--albastru); background: var(--albastru); color: #fff; }

/* ---------- potrivirea ---------- */

.potrivire { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.potrivire__coloana { display: flex; flex-direction: column; gap: 10px; }
.potrivire__cuvant {
  min-height: 108px;
  border: 3px solid var(--linie);
  border-radius: 16px;
  background: var(--albastru-pal);
  color: var(--cerneala);
  font: inherit;
  font-size: 1.7rem;
  font-weight: 800;
  cursor: pointer;
}
.potrivire__cuvant.de-mana { font-size: 1.5rem; font-weight: 400; }
.potrivire__cuvant[aria-pressed='true'] { border-color: var(--albastru); box-shadow: 0 0 0 3px var(--albastru) inset; }
.card--potrivire { min-height: 108px; justify-content: center; cursor: pointer; }
[data-culoare='0'] { background: #fff3c4 !important; border-color: #e0a800 !important; }
[data-culoare='1'] { background: #ddf5e6 !important; border-color: #23a05a !important; }
[data-culoare='2'] { background: #fde2ef !important; border-color: #d0457f !important; }
[data-culoare='3'] { background: #e6e2fd !important; border-color: #6b55d6 !important; }

/* ---------- completarea ---------- */

.completeaza { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 6px; border-radius: 16px; }
.completeaza__cuvant { font-size: 2rem; font-weight: 800; letter-spacing: 1px; }
.completeaza__cuvant--sir { word-spacing: 10px; }
.completeaza__loc {
  display: inline-grid;
  place-items: center;
  min-width: 1.4em;
  margin: 0 3px;
  padding: 0 4px;
  border-bottom: 4px solid var(--albastru);
  color: var(--cerneala-slaba);
}
.completeaza__loc--plin { color: var(--rosu); }
.completeaza__optiuni { display: flex; gap: 8px; }

/* ---------- textul ---------- */

.text__casuta { position: relative; padding: 16px 64px 16px 20px; border-radius: 18px; background: #fffbea; border: 2px solid #f1dc8f; }
.text__casuta > .difuzor { position: absolute; top: 12px; right: 12px; }
.text__rand { margin: 0 0 6px; font-size: clamp(1.4rem, 3.6vw, 1.9rem); line-height: 1.6; }
.text__cuvant { padding: 0 2px; border: none; border-radius: 8px; background: none; color: inherit; font: inherit; cursor: pointer; }
.text__cuvant:hover { background: var(--galben); }
.intrebare { margin-top: 16px; }
.intrebare__enunt { margin: 0 0 8px; font-size: 1.2rem; font-weight: 700; }
.intrebare__optiuni { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px; border-radius: 14px; }
.raspuns {
  min-height: 52px;
  padding: 0 20px;
  border: 3px solid var(--linie);
  border-radius: 14px;
  background: var(--albastru-pal);
  color: var(--cerneala);
  font: inherit;
  font-size: 1.35rem;
  font-weight: 700;
  cursor: pointer;
}
.raspuns[aria-pressed='true'] { border-color: var(--albastru); background: var(--albastru); color: #fff; }

/* ---------- scrierea de mână ---------- */

.scrie__alegeri { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.scrie__panza { display: block; width: 100%; max-width: 900px; aspect-ratio: 900 / 420; border: 3px solid var(--linie); border-radius: 18px; background: #fff; touch-action: none; cursor: crosshair; }

/* ---------- lecția de început, alfabetul ---------- */

.primul { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.primul__sageata { font-size: 2rem; color: var(--cerneala-slaba); }
.primul__optiuni { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px; border-radius: 16px; }
.card--model { flex-direction: row; background: var(--albastru-pal); }

.alfabet { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.alfabet__litera { display: flex; flex-direction: column; align-items: center; padding: 6px; border-radius: 14px; background: var(--albastru-pal); }
.alfabet__tipar { font-size: 1.7rem; font-weight: 900; }
.alfabet__mana { font-size: 1.4rem; line-height: 1.7; }

.ordine__rand { display: flex; flex-wrap: wrap; gap: 8px; min-height: 64px; margin-bottom: 12px; padding: 6px; border: 3px dashed var(--linie); border-radius: 16px; }
.ordine__asezata { display: grid; place-items: center; min-width: 52px; height: 52px; border-radius: 12px; background: var(--verde-pal); font-size: 1.6rem; font-weight: 900; }
.ordine__piese { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- ce ai învățat, subsolul fișei ---------- */

.invatat { margin: 0 0 18px; padding: 16px 22px; border-radius: 22px; background: var(--verde-pal); }
.invatat__titlu { margin: 0 0 8px; font-size: 1.3rem; }
.invatat__lista { margin: 0; padding-left: 0; list-style: none; }
.invatat__lista li { position: relative; margin: 4px 0; padding-left: 20px; font-size: 1.1rem; line-height: 1.45; }
.invatat__lista li::before { content: '–'; position: absolute; left: 0; }

.fisa__subsol { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.fisa__rezumat { margin: 0; font-size: 1.15rem; font-weight: 800; }

/* ---------- jocul ---------- */

.joc__cap { text-align: center; }
.joc__runde { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; }
.joc__runda { padding: 4px 14px; border-radius: 999px; background: var(--albastru-pal); color: var(--cerneala-slaba); font-weight: 700; }
.joc__runda[data-stare='acum'] { background: var(--albastru); color: #fff; }
.joc__runda[data-stare='gata'] { background: var(--verde-pal); color: #17783f; }
.joc__runda[data-stare='gata']::before { content: '✓ '; }
.joc__instructiune { margin: 0 0 12px; font-size: clamp(1.1rem, 2.8vw, 1.4rem); font-weight: 700; }
.joc__zona { min-height: 360px; }
.joc__model { display: flex; align-items: center; justify-content: center; gap: 12px; }
.joc__model-text { font-size: 3rem; font-weight: 900; color: var(--albastru-inchis); }
.joc__final { padding: 30px 10px; text-align: center; }
.joc__stele { margin: 0; font-size: 3rem; }
.joc__bravo { margin: 6px 0 18px; font-size: 2rem; font-weight: 900; }
.joc__butoane { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.fara-voce { margin: 14px 0 0; padding: 10px 14px; border-radius: 14px; background: #fff6e0; color: #7a5a00; font-size: 0.95rem; }

/* baloanele */
.baloane {
  position: relative;
  height: clamp(360px, 60vh, 520px);
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(#cfe7ff, #f2f9ff);
  --latime-balon: clamp(64px, 11vw, 92px);
}
.balon {
  position: absolute;
  top: 100%;
  width: var(--latime-balon);
  height: clamp(78px, 13.5vw, 112px);
  padding: 0;
  border: none;
  border-radius: 50% 50% 48% 48%;
  color: #fff;
  font: inherit;
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  font-weight: 900;
  box-shadow: inset -8px -10px 0 rgba(0, 0, 0, 0.12);
  cursor: pointer;
  animation-name: urca;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.balon.de-mana { font-weight: 400; }
.balon::after { content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: 36px; background: rgba(18, 36, 90, 0.35); }
.balon--0 { background: #ef5b5b; }
.balon--1 { background: #2f6fde; }
.balon--2 { background: #23a05a; }
.balon--3 { background: #f08a24; }
.balon--4 { background: #8a5bd6; }
.balon--spart { animation: sparge 0.35s forwards !important; pointer-events: none; }
@keyframes urca {
  from { top: 100%; }
  to { top: -40%; }
}
@keyframes sparge {
  to { transform: scale(1.6); opacity: 0; }
}
.balon.scutura { animation-name: urca, scutura; animation-duration: inherit, 0.4s; }

/* aud sau nu aud, bate din palme */
.sunet { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.sunet__imagine { padding: 16px 24px; border-radius: 24px; background: var(--albastru-pal); transition: background 0.2s; }
.sunet__imagine--bine { background: var(--verde-pal); }
.sunet__silabe { margin: 6px 0 0; text-align: center; font-size: 1.6rem; font-weight: 800; }
.sunet__optiuni { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.sunet__optiuni .buton { min-height: 64px; font-size: 1.35rem; }
.sunet__progres { margin: 0; color: var(--cerneala-slaba); font-weight: 700; }

/* alfabetarul și trenul */
.alfabetar, .tren { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.alfabetar__casute { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.alfabetar__casuta {
  display: grid;
  place-items: center;
  width: clamp(48px, 10vw, 70px);
  height: clamp(56px, 11vw, 80px);
  border: 3px dashed #9cc0f0;
  border-radius: 14px;
  background: var(--card);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 900;
}
.alfabetar__casuta--plina { border-style: solid; border-color: var(--albastru); background: var(--albastru-deschis); }
.alfabetar__casute--gata .alfabetar__casuta { border-color: var(--verde); background: var(--verde-pal); }
.alfabetar__piese { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.piesa {
  min-width: clamp(54px, 11vw, 76px);
  height: clamp(60px, 12vw, 84px);
  padding: 0 10px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(160deg, #4f8ff0, var(--albastru) 60%, var(--albastru-inchis));
  color: #fff;
  font: inherit;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 900;
  box-shadow: 0 5px 0 #1a46a3;
  cursor: pointer;
}
.piesa--lata { padding: 0 18px; }
.piesa:disabled { opacity: 0.25; box-shadow: none; cursor: default; }

.tren__garnitura { display: flex; align-items: flex-end; gap: 6px; transition: transform 1.2s ease-in; }
.tren__garnitura--pleaca { transform: translateX(-30px); }
.tren__locomotiva { font-size: 3.4rem; line-height: 1; }
.tren__vagon {
  display: grid;
  place-items: center;
  min-width: clamp(70px, 14vw, 104px);
  height: clamp(56px, 11vw, 74px);
  padding: 0 10px;
  border: 3px dashed #9cc0f0;
  border-radius: 12px 12px 6px 6px;
  background: var(--card);
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 900;
}
.tren__vagon--plin { border: 3px solid #b35e0f; background: #ffe2c2; }

@media (max-width: 560px) {
  .potrivire { gap: 8px; }
  .potrivire__cuvant { font-size: 1.3rem; }
  .imagine { width: 76px; height: 76px; }
  .imagine--emoji { font-size: 54px; }
  .text__casuta { padding-right: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .balon { animation-duration: 40s !important; }
  .copil__buton, .copil__ochi { animation: none; }
  .cititor__ecran--clipeste::after { animation: none; }
  .tren__garnitura, .lectie-card { transition: none; }
}

/* ---------- „Învăț”: lecția pas cu pas ---------- */

.invata { display: flex; flex-direction: column; gap: 16px; }
.invata__puncte { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.invata__punct { width: 14px; height: 14px; border-radius: 50%; background: var(--linie); }
.invata__punct[data-stare='gata'] { background: var(--verde); }
.invata__punct[data-stare='acum'] { width: 34px; border-radius: 999px; background: var(--albastru); }
.invata__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-height: 300px;
  padding: clamp(16px, 3vw, 30px);
  border: 2px solid var(--linie);
  border-radius: 24px;
  background: var(--card);
}
.invata__card--intra { animation: intra 0.35s ease both; }
@keyframes intra { from { opacity: 0; transform: translateX(24px); } }
/* Fără derulare: desenele se micșorează singure (max-width), iar
   emoji-urile mari pot depăși puțin înălțimea rândului fără să apară
   bare de derulare. */
.invata__vizual { display: flex; justify-content: center; width: 100%; max-width: 100%; overflow: visible; }
.invata__vizual > * { max-width: 100%; }
.invata__text { max-width: 760px; margin: 0; padding: 14px 18px; border-radius: 18px; background: #fffbea; border: 2px solid #f1dc8f; font-size: clamp(1.2rem, 3vw, 1.5rem); font-weight: 600; line-height: 1.5; text-align: center; }
.invata__actiune { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.invata__nav { display: flex; justify-content: space-between; gap: 12px; }
.invata__nav .buton { min-height: 56px; font-size: 1.2rem; }
.invata__nav .buton:disabled { opacity: 0.35; }

.numara-interactiv { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.numara-interactiv__obiect {
  position: relative;
  width: 74px;
  height: 74px;
  border: 3px dashed var(--linie);
  border-radius: 18px;
  background: var(--albastru-pal);
  font-size: 2.6rem;
  cursor: pointer;
}
.numara-interactiv__obiect[data-numar] { border-style: solid; border-color: var(--verde); background: var(--verde-pal); }
.numara-interactiv__numar { position: absolute; top: -12px; right: -10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--albastru); color: #fff; font-size: 1rem; font-weight: 900; }
.numara-interactiv__total { margin: 0; font-size: 1.3rem; font-weight: 800; }

.pe-rand { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pe-rand__element { padding: 8px 14px; border-radius: 14px; background: var(--albastru-pal); font-size: 1.5rem; font-weight: 800; animation: intra 0.3s ease both; }

.intrebare-mica { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.intrebare-mica__text { margin: 0; font-size: 1.3rem; font-weight: 800; text-align: center; }
.intrebare-mica__optiuni { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.intrebare-mica__mesaj { margin: 0; color: var(--verde); font-size: 1.3rem; font-weight: 900; }
.intrebare-mica .optiune { min-height: 58px; font-size: 1.35rem; }

.invata-rand { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
.text-mare { font-size: clamp(1.8rem, 6vw, 3rem); font-weight: 900; color: var(--albastru-inchis); white-space: pre-wrap; text-align: center; }
.emoji-mare { font-size: clamp(3.4rem, 11vw, 5.6rem); line-height: 1.15; }
.alfabet-litera { padding: 4px 8px; border-radius: 10px; background: var(--albastru-pal); font-size: 1.4rem; font-weight: 900; }

/* ---------- casetele din „Învăț” ---------- */
.caseta { max-width: 720px; width: 100%; padding: 14px 20px; border-radius: 18px; border: 2px solid; text-align: left; }
.caseta__titlu { margin: 0 0 6px; font-size: 1.25rem; font-weight: 900; }
.caseta__text { margin: 6px 0; font-size: 1.15rem; line-height: 1.5; }
.caseta__lista { margin: 0; padding: 0; list-style: none; }
.caseta__lista li { position: relative; margin: 6px 0; padding-left: 22px; font-size: 1.15rem; line-height: 1.45; }
.caseta__lista li::before { content: '–'; position: absolute; left: 0; font-weight: 900; }
.caseta--retine { border-color: var(--verde); background: var(--verde-pal); }
.caseta--atentie { border-color: #f08a24; background: #fff2e3; }
.caseta--stiai { border-color: #8a5bd6; background: #f1ebfc; }
.caseta--experiment { border-color: var(--albastru); background: var(--albastru-pal); }
.intrebare-mica + .intrebare-mica { margin-top: 10px; padding-top: 14px; border-top: 2px dashed var(--linie); }
.litere-asemanatoare { display: flex; gap: 18px; justify-content: center; }
.litere-asemanatoare span { display: grid; place-items: center; width: 92px; height: 104px; border-radius: 18px; background: var(--albastru-pal); font-size: 4rem; font-weight: 900; color: var(--cerneala-slaba); }
.litere-asemanatoare .tinta-mare { background: var(--albastru); color: #fff; }
@media (max-width: 640px) {
  .litere-asemanatoare { gap: 8px; }
  .litere-asemanatoare span { width: 72px; height: 84px; font-size: 3rem; }
}

/* Variantele de răspuns (fișa de matematică și întrebările din „Învăț”). */
.optiune {
  min-width: 56px;
  min-height: 52px;
  padding: 4px 14px;
  border: 3px solid var(--linie);
  border-radius: 14px;
  background: var(--albastru-pal);
  color: var(--cerneala);
  font: inherit;
  font-size: 1.25rem;
  font-weight: 800;
  cursor: pointer;
}
.optiune[aria-pressed='true'] { border-color: var(--albastru); background: var(--albastru); color: #fff; }
.invata-rand--coloana { flex-direction: column; gap: 4px; }

/* Nimic din foaie nu iese în lateral (nici cardul care intră din dreapta,
   în timpul animației). */
.ecran__foaie { overflow-x: hidden; }
.invata__card { min-width: 0; max-width: 100%; }
@media (max-width: 640px) {
  .invata__card .imagine--mare { width: 120px; height: 120px; }
  .invata__card .imagine--mare.imagine--emoji { font-size: 92px; }
  .cuvant-tinta { font-size: 1.5rem; }
}

/* ---------- table interactive ----------
   La clasă, paginile se folosesc pe table interactive: pe ecranele
   mari, cititorul se lățește. Textele rămân cam cât pe un laptop: cu
   112,5% se vedeau prea mari pe tablă (spus pe 7 oct 2026). */
@media (min-width: 1700px) {
  html { font-size: 96%; }
  .scena__rand { grid-template-columns: minmax(0, 1fr) minmax(0, 1320px) minmax(0, 1fr); }
  .invata__card { min-height: 380px; }
  .invata__text { max-width: 900px; }
}
@media (min-width: 2200px) {
  html { font-size: 106%; }
  .scena__rand { grid-template-columns: minmax(0, 1fr) minmax(0, 1560px) minmax(0, 1fr); }
}

/* Modelele interactive din „Învăț” (comune). */
.model { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.model__calcul { margin: 0; font-size: clamp(1.6rem, 4.5vw, 2.4rem); font-weight: 900; color: var(--albastru-inchis); text-align: center; }
.model__mesaj { min-height: 1.5em; margin: 0; color: var(--verde); font-size: 1.3rem; font-weight: 900; text-align: center; }
.model__butoane { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ---------- apa vie: lacurile (clasa-i-comun/apa.js) ----------
   Apă albastră adâncă, unde albe care alunecă încet în sensuri opuse,
   un luciu care se plimbă și nuferi care se leagănă pe loc. Desenul stă
   sub conținut: `isolation` face ca z-index -1 să rămână în lac. */
.apa-vie {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse at 50% 40%, #5aa9ee, #2f78cc 70%, #24609f);
  border-color: #1f5592;
}
.apa-vie__decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.apa-vie__decor svg { display: block; width: 100%; height: 100%; }
.apa-vie__unde { animation: apa-unde 3.6s ease-in-out infinite alternate; }
.apa-vie__unde--2 { animation-duration: 4.4s; animation-direction: alternate-reverse; }
.apa-vie__luciu { animation: apa-luciu 7s ease-in-out infinite alternate; }
.apa-vie__nufar { transform-box: fill-box; transform-origin: center; animation: apa-nufar 4.8s ease-in-out infinite alternate; }
@keyframes apa-unde { from { transform: translateX(-14px); } to { transform: translateX(14px); } }
@keyframes apa-luciu { from { transform: translate(-40px, 4px); opacity: 0.08; } to { transform: translate(60px, -4px); opacity: 0.18; } }
@keyframes apa-nufar { from { transform: translate(-2px, 1px) rotate(-4deg); } to { transform: translate(3px, -2px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) {
  .apa-vie__unde, .apa-vie__luciu, .apa-vie__nufar { animation: none; }
}

/* ---------- copilașul care face mișcările (clasa-i-comun/copilas.js) ----------
   Trecerea dintr-o poziție în alta e lină, cu o mică depășire la capăt,
   ca la un copil adevărat. Mișcările care se repetă (palme, picior,
   săritura) stau pe învelișuri separate. */
.cpl-miscari { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 28px; width: 100%; }
.cpl-scena { width: min(100%, 440px); flex: 0 1 440px; border-radius: 22px; background: linear-gradient(#eaf4ff, #f7fbff 80%); box-shadow: inset 0 0 0 3px #d6e4f7; overflow: hidden; }
.cpl-desen { display: block; width: 100%; height: auto; }
.cpl-art { transition: transform 0.65s cubic-bezier(0.34, 1.35, 0.5, 1); }
.cpl-brate { transition: opacity 0.4s; }
.cpl-ob { opacity: 0; transition: opacity 0.45s, transform 0.75s cubic-bezier(0.34, 1.2, 0.5, 1); }
.cpl-ob--vazut { opacity: 1; }
.cpl-scena[data-anim='palme'] .cpl-anim-d { animation: cpl-palma-d 0.45s ease-in-out 2 alternate; }
.cpl-scena[data-anim='palme'] .cpl-anim-s { animation: cpl-palma-s 0.45s ease-in-out 2 alternate; }
@keyframes cpl-palma-d { to { transform: rotate(-16deg); } }
@keyframes cpl-palma-s { to { transform: rotate(16deg); } }
.cpl-scena[data-anim='picior'] .cpl-anim-picior { animation: cpl-picior 0.32s ease-in-out 2 alternate; }
@keyframes cpl-picior { to { transform: translateY(-22px); } }
.cpl-scena[data-anim='sare'] .cpl-salt { animation: cpl-sare 0.55s ease-out 0.25s 2; }
@keyframes cpl-sare { 50% { transform: translateY(-16px); } }
.cpl-lista { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: min(100%, 300px); }
.cpl-rand {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  border: 3px solid #dfe8f6; border-radius: 16px; background: #f4f8ff;
  font: inherit; font-size: 1.25rem; font-weight: 800; color: var(--cerneala); text-align: left; cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}
.cpl-rand:hover { border-color: var(--albastru); }
.cpl-rand--acum { border-color: var(--albastru); background: var(--albastru-deschis, #e3eeff); transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .cpl-art, .cpl-ob { transition-duration: 0.01s; }
  .cpl-scena[data-anim] .cpl-anim-d, .cpl-scena[data-anim] .cpl-anim-s, .cpl-scena[data-anim] .cpl-anim-picior, .cpl-scena[data-anim] .cpl-salt { animation: none; }
}

/* /jocuri/matematica-clasa-1/matematica.css */
/* ============================================================
   MATEMATICĂ, CLASA I — aspectul propriu
   ============================================================
   Restul (cititorul, copilul, fișa, jocul) e comun cu Abecedarul:
   ../clasa-i-comun/clasa-i.css
   ============================================================ */

/* ---------- cuprinsul, pe domenii ---------- */

.cuprins__grup { margin-bottom: 22px; }
.cuprins__domeniu { margin: 0 0 10px; font-size: clamp(1.15rem, 2.6vw, 1.4rem); }
.cuprins__lista--mate { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.lectie-card__litera--simbol { font-size: 2.1rem; }

/* ---------- itemii fișei ---------- */

.itemi { display: flex; flex-direction: column; gap: 14px; }
.itemi--alegere { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.item { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 2px solid var(--linie); border-radius: 18px; background: var(--card); }
.item--ingust { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.item__intrebare { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.item__text { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.4; }
.item__desen { display: flex; justify-content: center; overflow-x: auto; }

.optiuni { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 4px; border-radius: 14px; }

.calcul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: clamp(1.3rem, 3.4vw, 1.7rem); font-weight: 800; }
.calcul__parte { white-space: pre-wrap; }
.calcul--sir .calcul__virgula { margin: 0 -4px 0 -6px; }
.casuta {
  width: 2.6em;
  height: 1.9em;
  border: 3px solid var(--albastru);
  border-radius: 10px;
  background: #fff;
  color: var(--cerneala);
  font: inherit;
  text-align: center;
}
.casuta:focus { outline: 4px solid var(--galben); outline-offset: 1px; }

.comparatie { font-size: 1.9rem; font-weight: 900; white-space: pre; }
.numar-mare { font-size: 2.4rem; font-weight: 900; }
.semn { font-size: 2rem; font-weight: 900; }

/* problemele */
.problema__text { margin: 0; font-size: 1.2rem; line-height: 1.5; }
.calcul--problema { padding: 6px; border-radius: 14px; }
.semn-operatie {
  width: 52px;
  height: 52px;
  border: 3px dashed var(--albastru);
  border-radius: 50%;
  background: var(--albastru-pal);
  color: var(--albastru-inchis);
  font: inherit;
  font-size: 1.6rem;
  font-weight: 900;
  cursor: pointer;
}
.problema__raspuns { margin: 0; color: var(--verde); font-weight: 800; }

/* ordine, potrivire */
.piesa-text {
  min-height: 54px;
  padding: 0 16px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(160deg, #4f8ff0, var(--albastru) 60%, var(--albastru-inchis));
  color: #fff;
  font: inherit;
  font-size: 1.3rem;
  font-weight: 800;
  box-shadow: 0 4px 0 #1a46a3;
  cursor: pointer;
}
.piesa-text:disabled { opacity: 0.25; box-shadow: none; }
.ordine__asezata { padding: 0 12px; min-width: 52px; }
.ordine .buton--mic { margin-top: 10px; }

.potrivire__element {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 64px;
  padding: 6px 12px;
  border: 3px solid var(--linie);
  border-radius: 16px;
  background: var(--albastru-pal);
  color: var(--cerneala);
  font: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
}
.potrivire__element[aria-pressed='true'] { border-color: var(--albastru); box-shadow: 0 0 0 3px var(--albastru) inset; }
.potrivire__element .desen--ceas { width: 110px; }
@media (max-width: 640px) {
  .potrivire__element { min-width: 0; padding: 6px; }
  .potrivire__element .desen--ceas { width: 90px; }
}

/* științe */
.ex--text { background: #fffbea; border-color: #f1dc8f; }
.stiinte__lista { margin: 0; padding: 0; list-style: none; }
.stiinte__lista li { position: relative; margin: 6px 0; padding-left: 22px; font-size: 1.2rem; line-height: 1.5; }
.stiinte__lista li::before { content: '–'; position: absolute; left: 0; font-weight: 800; }

/* ---------- desenele ---------- */

.desen { display: inline-block; }
.desen svg { display: block; width: 100%; height: auto; }

.desen--axa { width: min(100%, 640px); }
.desen--ceas { width: 150px; }
.desen--rigla { width: min(100%, 560px); }
.desen--figura, .desen--corp, .desen--creion { width: 120px; }
.figuri-amestec { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.figuri-amestec .desen--figura { width: 70px; }
.cu-text { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cu-text__text { font-size: 1.15rem; font-weight: 700; text-align: center; }

.obiecte { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; font-size: 2.2rem; line-height: 1.1; }
.obiecte__grup { padding: 4px 8px; border-radius: 12px; background: var(--albastru-pal); letter-spacing: 2px; }
.obiecte--amestec { gap: 6px; }
.obiect--taiat { position: relative; opacity: 0.5; }
.obiect--taiat::after { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: 4px; background: var(--rosu); transform: rotate(-35deg); border-radius: 2px; }
.obiecte__gol { font-size: 1.1rem; color: var(--cerneala-slaba); }
.adunare-desen { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }

.ceas-digital { display: inline-block; padding: 6px 14px; border-radius: 10px; background: #12245a; color: #7dffb0; font-family: 'Consolas', 'Courier New', monospace; font-size: 1.8rem; font-weight: 700; letter-spacing: 2px; }

/* bani: desenați simplu, cu valoarea scrisă */
.suma { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.bancnota {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 56px;
  border: 2px solid rgba(18, 36, 90, 0.4);
  border-radius: 8px;
  background: repeating-linear-gradient(135deg, var(--culoare) 0 10px, color-mix(in srgb, var(--culoare) 80%, white) 10px 20px);
  color: #12245a;
  line-height: 1;
}
/* Fondul desenat (biblioteca de obiecte) stă sub valoare și acoperă tot. */
.bancnota, .moneda { position: relative; isolation: isolate; }
.bancnota:has(> .bani__fond) { border: 0; background: none; padding-right: 22px; }
.moneda:has(> .bani__fond) { border: 0; background: none; }
.bani__fond { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.bancnota__valoare, .bancnota__unitate { text-shadow: 0 0 3px #fff, 0 0 6px #fff; }
.moneda__valoare, .moneda__unitate { text-shadow: 0 1px 0 #fff6cf; }
.bancnota__valoare { font-size: 1.6rem; font-weight: 900; }
.bancnota__unitate { font-size: 0.75rem; font-weight: 800; letter-spacing: 1px; }
.moneda {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 3px solid #a07b1c;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #e0b44a);
  color: #5a4500;
  line-height: 1;
}
.moneda--mare { width: 54px; height: 54px; }
.moneda__valoare { font-size: 1.1rem; font-weight: 900; }
.moneda__unitate { font-size: 0.55rem; font-weight: 800; }

/* interior / exterior */
.interior { position: relative; display: block; width: 180px; height: 140px; }
.interior__gard { position: absolute; left: 18%; top: 14%; width: 64%; height: 70%; border: 6px dashed #8a5a2b; border-radius: 50%; background: #e3f7ec; }
.interior__obiect { position: absolute; font-size: 2rem; line-height: 1; }

/* tabelul cu date */
.date { margin: 0 0 6px; }
.date__titlu { margin-bottom: 6px; font-weight: 800; text-align: center; }
.tabel-date { margin: 0 auto; border-collapse: collapse; font-size: 1.15rem; }
.tabel-date th, .tabel-date td { padding: 6px 14px; border: 2px solid var(--linie); text-align: left; }
.tabel-date th { background: var(--albastru-deschis); }
.tabel-date__emoji { font-size: 1.5rem; }
.tabel-date__bife { color: var(--verde); font-size: 1.3rem; letter-spacing: 3px; }

/* ---------- jocul ---------- */

.rapide { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.rapide__intrebare { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 120px; padding: 14px 20px; border-radius: 22px; background: var(--albastru-pal); }
.rapide__text { margin: 0; font-size: clamp(1.3rem, 3.4vw, 1.8rem); font-weight: 800; text-align: center; }
.rapide__optiuni { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.buton--raspuns { min-width: 90px; min-height: 64px; font-size: 1.35rem; }
.buton--bine { background: linear-gradient(160deg, #3fc07a, var(--verde)); box-shadow: 0 4px 0 #17783f; }
.rapide .date, .rapide .tabel-date { font-size: 1rem; }

.tinta { display: flex; flex-direction: column; gap: 10px; }
.tinta__calcul { margin: 0; text-align: center; font-size: clamp(2rem, 6vw, 3rem); font-weight: 900; }
.interior--tarc { width: 220px; height: 170px; }

/* Calculele scurte stau câte mai multe pe rând; cele cu desen, pe tot rândul. */
.itemi--calcul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.itemi--calcul .item:has(.item__desen), .itemi--calcul .item:has(.calcul--sir) { grid-column: 1 / -1; }
.desen--bete { width: auto; max-width: 100%; }
.desen--bete svg { width: auto; max-width: 100%; height: auto; }
.item .obiecte { font-size: 1.7rem; }
.obiecte__grup { white-space: nowrap; }

/* ---------- „Învăț” ---------- */

.invata__vizual .desen--figura, .invata__vizual .desen--corp, .invata__vizual .desen--creion { width: 150px; }
.invata__vizual .desen--ceas { width: 200px; }

.coloana { border-collapse: collapse; font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 900; }
.coloana td { min-width: 1.3em; padding: 0 8px; text-align: center; }
.coloana__cap td { color: var(--cerneala-slaba); font-size: 0.55em; }
.coloana__tinut td { color: var(--rosu); font-size: 0.5em; }
.coloana__linie td { border-bottom: 4px solid var(--cerneala); }
.coloana__rezultat td { color: var(--verde); }
.coloana--zu td { border: 3px solid var(--linie); }

.perechi { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; font-size: 2.4rem; }
.perechi__pereche { padding: 4px 10px; border: 3px solid var(--verde); border-radius: 16px; }
.perechi__pereche--singur { border-color: var(--rosu); border-style: dashed; }

.fata-in-fata { display: flex; flex-direction: column; gap: 22px; }
.fata-in-fata__rand { display: flex; align-items: center; gap: 6px; font-size: 2.2rem; }
.fata-in-fata__obiect { position: relative; width: 1.3em; text-align: center; border-radius: 50%; }
.fata-in-fata__numar { margin-left: 12px; font-size: 2rem; }
/* Obiectul vine din dreapta, pășind (pasul sus-jos e pe interior). */
.fata-in-fata__obiect { animation: vine-pe-rand 1.4s ease-out var(--intarziere) both; }
.fata-in-fata__pas { display: inline-block; animation: paseste 0.28s ease-in-out var(--intarziere) 5; }
@keyframes vine-pe-rand { from { transform: translateX(70vw); } }
@keyframes paseste { 50% { transform: translateY(-7px) rotate(-6deg); } }
/* După ce s-au așezat: linia dintre perechi, cercul celor fără pereche, numerele. */
.fata-in-fata__rand:first-child .fata-in-fata__obiect--pereche::after {
  content: '';
  position: absolute;
  left: calc(50% - 2px);
  top: 100%;
  width: 4px;
  height: 22px;
  border-radius: 2px;
  background: var(--verde);
  animation: apare 0.4s var(--dupa) both;
}
.fata-in-fata__obiect--singur { animation: vine-pe-rand 1.4s ease-out var(--intarziere) both, incercuieste 0.5s calc(var(--dupa) + 0.5s) both; }
@keyframes incercuieste { to { box-shadow: 0 0 0 3px var(--rosu); background: #fdeceb; } }
.fata-in-fata__numar { animation: apare 0.4s calc(var(--dupa) + 1s) both; }
@keyframes apare { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .fata-in-fata__obiect, .fata-in-fata__pas, .fata-in-fata__numar, .fata-in-fata__obiect--pereche::after { animation: none !important; }
  .fata-in-fata__obiect--singur { animation: incercuieste 0s both !important; }
}
.copil-arata { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 18px; background: #fff; border: 2px solid var(--linie); }
.copil-arata__cine { display: flex; flex-direction: column; align-items: center; }
.copil-arata__copil { font-size: clamp(3rem, 8vw, 4.6rem); line-height: 1.1; }
.copil-arata__nume { font-size: 1.3rem; }
.copil-arata__mana { font-size: clamp(1.8rem, 4vw, 2.6rem); animation: arata 1.2s ease-in-out infinite; }
@keyframes arata { 50% { transform: translateX(6px); } }
.copil-arata__grupe { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
@media (max-width: 640px) {
  .copil-arata { gap: 6px; padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .copil-arata__mana { animation: none; }
}
.atentie-cu-desen { display: flex; flex-direction: column; align-items: center; gap: 16px; }
/* Pe două coloane: obiectele și, aliniate dedesubt unul altuia, numerele. */
.loc-inselator { display: grid; grid-template-columns: auto auto; align-items: center; gap: 10px 24px; padding: 12px 18px; border-radius: 18px; background: #fff; border: 2px solid var(--linie); }
.loc-inselator__rand { display: contents; }
.loc-inselator__obiecte { line-height: 1.1; }
.loc-inselator__rand--mari .loc-inselator__obiecte { font-size: clamp(2.6rem, 8vw, 4.2rem); letter-spacing: 0.5em; }
.loc-inselator__rand--mici .loc-inselator__obiecte { font-size: clamp(1.1rem, 3vw, 1.5rem); letter-spacing: -0.15em; }
.loc-inselator__numar { font-size: 2rem; color: var(--albastru-inchis); }
.loc-inselator .text-mare { grid-column: 1 / -1; justify-self: center; }
@media (max-width: 640px) {
  .loc-inselator { padding: 10px 12px; column-gap: 14px; }
  .loc-inselator__rand--mari .loc-inselator__obiecte { letter-spacing: 0.3em; }
}

.scara { display: flex; align-items: flex-end; justify-content: center; gap: 8px; }
.scara__treapta { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.scara__obiecte { writing-mode: vertical-lr; font-size: 1.5rem; line-height: 1.1; }
.scara b { font-size: 1.6rem; }

.problema-schema { max-width: 560px; }
.problema-schema p { margin: 6px 0; padding: 10px 14px; border-radius: 12px; font-size: 1.2rem; }
.problema-schema__enunt { background: var(--albastru-pal); }
.problema-schema__intrebare { background: #fde2ef; font-weight: 800; }
/* Un item cu două calcule (calculul și proba) are nevoie de mai mult loc. */
.itemi--calcul { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.item:has(.calcul + .calcul) .calcul { flex-wrap: nowrap; }

/* Numărătoarea cu bile are stilul ei: ../clasa-i-comun/numaratoare.css */

/* ---------- calendarul ---------- */
.anul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: min(100%, 640px); }
.luna-carte { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 14px; font-weight: 800; }
.luna-carte__nr { font-size: 0.85rem; opacity: 0.7; }
.luna-carte__emoji { font-size: 1.9rem; line-height: 1.2; }
.luna-carte__nume { font-size: 0.95rem; }
.luna-carte--iarna { background: #e3f0ff; }
.luna-carte--primavara { background: #e3f7ec; }
.luna-carte--vara { background: #fff3c4; }
.luna-carte--toamna { background: #fde5cf; }
.calendar { display: grid; grid-template-columns: repeat(7, 42px); gap: 4px; }
.calendar span { display: grid; place-items: center; height: 36px; border-radius: 8px; font-weight: 800; }
.calendar__cap { color: var(--cerneala-slaba); font-size: 0.9rem; }
.calendar__zi { background: var(--albastru-pal); }
.calendar__zi.calendar__liber { background: #fde2ef; }
.calendar__cap.calendar__liber { color: #d0457f; }
.saptamana { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.zi-carte { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 86px; padding: 8px; border-radius: 14px; background: var(--albastru-pal); font-weight: 800; }
.zi-carte--libera { background: #fde2ef; }
.zi-carte__emoji { font-size: 1.8rem; }
.suta { display: grid; grid-template-columns: repeat(10, 18px); gap: 4px; padding: 10px; border-radius: 14px; background: var(--albastru-pal); }
.suta__punct { width: 18px; height: 18px; border-radius: 50%; background: var(--albastru); }
.suta__punct--alt { background: var(--portocaliu); }
.cuvinte-operatii { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.cuvinte-operatii__carte { min-width: 220px; padding: 12px 18px; border-radius: 18px; border: 3px solid; }
.cuvinte-operatii__carte--adunare { border-color: var(--verde); background: var(--verde-pal); }
.cuvinte-operatii__carte--scadere { border-color: var(--portocaliu); background: #fff2e3; }
.cuvinte-operatii__semn { margin-right: 8px; font-size: 2rem; font-weight: 900; }
.cuvinte-operatii__carte b { font-size: 1.3rem; }
.cuvinte-operatii__carte ul { margin: 6px 0 0; padding-left: 18px; font-size: 1.1rem; line-height: 1.5; }

.anotimpuri { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.anotimp-carte { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 130px; padding: 14px 10px; border-radius: 20px; }
.anotimp-carte__emoji { font-size: clamp(3.6rem, 10vw, 5.2rem); line-height: 1.1; }
.anotimp-carte__nume { font-size: 1.3rem; font-weight: 900; }

@media (max-width: 640px) {
  .calendar { grid-template-columns: repeat(7, minmax(0, 1fr)); width: 100%; }
  .fata-in-fata__rand { font-size: 1.25rem; gap: 3px; }
  .fata-in-fata__numar { margin-left: 6px; font-size: 1.4rem; }
  .fata-in-fata { gap: 18px; }
  .fata-in-fata__rand:first-child .fata-in-fata__obiect--pereche::after { height: 18px; }
  .cuvinte-operatii__carte { min-width: 0; width: 100%; }
  .anul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .luna-carte__nume { font-size: 0.8rem; }
}

/* În „Învăț”, fiecare propoziție a explicației pe rândul ei. */
.invata__propozitie { display: block; }

/* În „Învăț”, axa numerelor ocupă cât mai mult din lățime. */
.invata__vizual .desen--axa { width: min(100%, 860px); }
.invata__vizual .invata-rand .desen--axa { width: min(100%, 700px); }

/* Table interactive: obiectele de numărat cât mai mari. */
@media (min-width: 1200px) {
  .item .obiecte, .obiecte { font-size: 2.6rem; }
  .invata__vizual .obiecte { font-size: 3rem; }
}

/* ============================================================
   Modelele interactive din „Învăț” (interactiv.js, interactiv2.js,
   scheme.js). Mari, de atins cu degetul pe tabla interactivă.
   ============================================================ */

.model { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.model__calcul { margin: 0; font-size: clamp(1.6rem, 4.5vw, 2.4rem); font-weight: 900; color: var(--albastru-inchis); text-align: center; }
.model__mesaj { min-height: 1.5em; margin: 0; color: var(--verde); font-size: 1.3rem; font-weight: 900; text-align: center; }
.model__butoane { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.optiune--mica { min-width: 46px; min-height: 46px; font-size: 1.15rem; }

/* rama de zece */
.rama-zece__rame { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.rama { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 8px; border: 4px solid var(--cerneala); border-radius: 10px; background: #fff; }
.rama__loc { display: grid; place-items: center; width: clamp(40px, 6vw, 64px); aspect-ratio: 1; border: 2px solid var(--linie); border-radius: 8px; }
.rama__bulina { width: 78%; aspect-ratio: 1; border-radius: 50%; animation: intra 0.3s ease both; }
.rama__bulina--rosu { background: radial-gradient(circle at 35% 30%, #ff9a9a, #d62828 70%); }
.rama__bulina--albastru { background: radial-gradient(circle at 35% 30%, #9ac4ff, #2f6fde 70%); }

/* tabelul Z | U cu bețișoare */
.zu { display: flex; gap: 0; border: 4px solid var(--cerneala); border-radius: 12px; overflow: hidden; background: #fff; }
.zu__col { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: clamp(150px, 26vw, 320px); padding: 10px; }
.zu__col + .zu__col { border-left: 4px solid var(--cerneala); }
.zu__cap { font-size: 1.6rem; font-weight: 900; color: var(--cerneala-slaba); }
.zu__cifra { font-size: 2.6rem; font-weight: 900; color: var(--albastru-inchis); }
.zu__bete { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 120px; align-items: center; }
.zu__bat { width: 14px; height: 110px; border-radius: 6px; background: #e0a800; cursor: pointer; }
.zu__manunchi {
  position: relative;
  width: 46px;
  height: 110px;
  border-radius: 8px;
  background: repeating-linear-gradient(90deg, #e0a800 0 4px, transparent 4px 5px);
  cursor: pointer;
}
.zu__manunchi::after { content: ''; position: absolute; left: -3px; right: -3px; top: 48px; height: 12px; border-radius: 4px; background: #d9534f; }

/* balanța */
.balanta__brat { display: flex; align-items: flex-end; justify-content: center; gap: 0; width: min(100%, 640px); transition: transform 0.4s ease; }
.balanta__taler { display: flex; flex-wrap: wrap-reverse; align-content: flex-start; justify-content: center; gap: 4px; width: 40%; min-height: 90px; padding: 8px; border-bottom: 8px solid #8a5a2b; border-radius: 0 0 40px 40px; background: #fff8ec; }
.balanta__pivot { width: 20%; height: 14px; border-radius: 7px; background: #8a5a2b; }
.balanta__bila { width: 28px; height: 28px; border-radius: 50%; }
.balanta__bila--rosie { background: radial-gradient(circle at 35% 30%, #ff9a9a, #d62828 70%); }
.balanta__bila--albastra { background: radial-gradient(circle at 35% 30%, #9ac4ff, #2f6fde 70%); }
.balanta__bila--galbena { background: radial-gradient(circle at 35% 30%, #fff6c9, #e0b000 70%); }

/* mașina de calcul */
.masina__banda { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.masina__numar { display: grid; place-items: center; min-width: 80px; height: 80px; padding: 0 10px; border: 4px solid var(--albastru); border-radius: 16px; background: #fff; font-size: 2.2rem; font-weight: 900; }
.masina__cutie { display: grid; place-items: center; min-width: 120px; height: 100px; border-radius: 20px; background: linear-gradient(160deg, #8a5bd6, #5b34a8); color: #fff; font-size: 2.4rem; font-weight: 900; box-shadow: 0 6px 0 #3d2275; }
.masina__sageata { font-size: 2.4rem; font-weight: 900; color: var(--cerneala-slaba); }

/* foaia care se rotește */
.foaie-rotita { display: flex; gap: 10px; padding: 14px; border: 3px dashed var(--linie); border-radius: 18px; background: #fff; transition: transform 0.6s ease; }
.foaie-rotita .desen--creion { width: clamp(64px, 14vw, 150px); }
.foaie-rotita--rotita { transform: rotate(90deg); }

/* problema cu bare */
.bare { display: flex; flex-direction: column; gap: 12px; width: min(100%, 720px); }
.bare__rand { display: flex; align-items: center; gap: 12px; }
.bare__nume { min-width: 90px; font-size: 1.2rem; font-weight: 800; text-align: right; }
.bare__cadru { flex: 1; min-width: 0; }
.bare__bara { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 10px; color: #fff; font-size: 1.15rem; font-weight: 800; }
.bare__bara--1 { background: var(--albastru); }
.bare__bara--2 { background: var(--portocaliu); }
/* Pe telefon, barele încap în cadru: numele se strâng. */
@media (max-width: 640px) {
  .bare__rand { gap: 8px; }
  .bare__nume { min-width: 0; font-size: 1rem; }
  .bare__bara { min-height: 44px; padding: 2px 6px; font-size: 0.95rem; text-align: center; }
}
.bare__total { margin: 0; text-align: center; font-size: 1.3rem; font-weight: 900; color: var(--rosu); }

/* pușculița */
.pusculita__continut { min-height: 64px; }
.pusculita__adauga { padding: 6px; border: 3px solid var(--linie); border-radius: 14px; background: var(--albastru-pal); cursor: pointer; }
.pusculita__adauga .bancnota { width: 130px; height: 66px; }

/* liniuțele */
.liniute__scena { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 720px; }
.liniute__obiect { width: 70px; height: 70px; border: 3px solid var(--linie); border-radius: 16px; background: #fff; font-size: 2.4rem; cursor: pointer; }
.liniute__obiect:disabled { opacity: 0.3; border-style: dashed; }
.liniute__total { font-size: 1.4rem; font-weight: 900; color: var(--albastru-inchis); }

/* turnatul */
.toarna { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 24px; }
.toarna__vas { position: relative; width: 120px; height: 170px; border: 6px solid #8a5a2b; border-top: none; border-radius: 0 0 40px 40px; background: #fff; overflow: hidden; }
.toarna__apa { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(#7cc0ff, #2f6fde); transition: height 0.4s ease; }

/* ștampila */
.stampila__corp { padding: 8px; border: 3px solid var(--linie); border-radius: 18px; background: #fff; cursor: pointer; }
.stampila__corp .desen--corp { width: clamp(100px, 13vw, 150px); }
.stampila__nisip { display: grid; place-items: center; width: min(100%, 360px); height: 200px; border-radius: 22px; background: radial-gradient(circle, #f6e3b4, #e2c27a); }
.stampila__nisip .desen--figura { width: 150px; opacity: 0.75; filter: grayscale(0.4); animation: intra 0.3s ease both; }

/* laturile */
.laturi { width: clamp(220px, 34vw, 360px); }
.laturi svg { display: block; width: 100%; }
.laturi__latura { cursor: pointer; }
.laturi__latura.aprins { stroke: var(--rosu); }

/* schemele din științe */
.schema { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px; width: 100%; }
.schema__desen { width: clamp(220px, 36vw, 420px); }
.schema__desen svg { display: block; width: 100%; height: auto; }
.schema__parti { display: flex; flex-direction: column; gap: 10px; }
.schema__buton {
  min-height: 54px;
  padding: 0 20px;
  border: 3px solid var(--albastru);
  border-radius: 14px;
  background: var(--card);
  color: var(--albastru-inchis);
  font: inherit;
  font-size: 1.2rem;
  font-weight: 800;
  cursor: pointer;
}
.schema__buton[aria-pressed='true'] { background: var(--albastru); color: #fff; }
.schema__rol { max-width: 760px; margin: 6px auto 0; padding: 12px 18px; border-radius: 16px; background: var(--verde-pal); font-size: 1.25rem; line-height: 1.45; text-align: center; }
.schema__desen [data-parte] { transition: opacity 0.2s; }
.schema__desen [data-parte].aprins { filter: drop-shadow(0 0 6px #ffd65a) drop-shadow(0 0 3px #ffb300); }
.schema__desen [data-parte].aprins * { stroke: #ff8c00; }
/* Zonele de peste o imagine (scheletul): nevăzute până se aprind. */
.schema__zone [data-parte] { opacity: 0; fill: #ff8c00; stroke: #ff8c00; }
.schema__zone [data-parte].aprins { opacity: 0.45; filter: none; }

/* căderea */
.cadere { display: flex; justify-content: center; gap: clamp(40px, 10vw, 140px); width: 100%; height: 280px; padding-bottom: 10px; border-bottom: 6px solid #8fbf6a; }
.cadere__coloana { position: relative; display: flex; flex-direction: column; align-items: center; width: 140px; }
.cadere__obiect { font-size: 3.6rem; line-height: 1; }
.cadere__obiect.cade { animation: cade var(--durata) ease-in forwards; }
@keyframes cade { to { transform: translateY(190px); } }
.cadere__eticheta { position: absolute; bottom: -2px; font-weight: 800; }

/* undele sunetului */
.unde { position: relative; display: grid; place-items: center; width: min(100%, 420px); height: 300px; }
.unde__sursa { position: relative; z-index: 1; width: 110px; height: 110px; border: none; border-radius: 50%; background: #fff3c4; font-size: 4rem; cursor: pointer; }
.unde__cerc { position: absolute; width: 110px; height: 110px; border: 4px solid var(--albastru); border-radius: 50%; animation: unda 2s ease-out forwards; }
@keyframes unda { to { transform: scale(3.6); opacity: 0; } }

/* perechi de carduri */
.perechi-carduri { display: flex; flex-direction: column; gap: 10px; }
.perechi-carduri__rand { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.perechi-carduri__carte { padding: 10px 18px; border-radius: 16px; background: var(--albastru-pal); font-size: 1.35rem; font-weight: 800; }
.perechi-carduri__sageata { font-size: 1.3rem; font-weight: 800; color: var(--cerneala-slaba); }

@media (max-width: 640px) {
  .zu__col { min-width: 120px; }
  .zu__bat { height: 80px; width: 10px; }
  .zu__manunchi { height: 80px; width: 34px; }
  .zu__manunchi::after { top: 34px; }
  .schema__parti { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}

/* Schemele înalte (corpul, scheletul) nu depășesc ecranul. */
.schema__desen svg { max-height: min(62vh, 560px); width: auto; max-width: 100%; margin: 0 auto; }
.balanta { padding-top: 40px; }

.desen--parc { width: clamp(130px, 16vw, 200px); }

/* Rândul de desene din bibliotecă (invata-unelte.js, `poze`). */
.invata-poze { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.invata-poze__carte { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 10px 12px 8px; border-radius: 18px; background: #fff; box-shadow: 0 3px 0 #d8e0ee, 0 0 0 2px #e4eaf5; animation: ao-apare 0.4s ease-out var(--t, 0s) both; }
.invata-poze__img { width: clamp(84px, 11vw, 140px); height: clamp(84px, 11vw, 140px); object-fit: contain; font-size: clamp(3.4rem, 7vw, 5rem); line-height: 1; display: grid; place-items: center; }
.invata-poze__carte figcaption { font-weight: 800; font-size: clamp(1rem, 1.6vw, 1.25rem); color: #12245a; }

/* /jocuri/matematica-clasa-1/anim-numere.css */
/* ============================================================
   Animațiile din „Învăț” pentru orientare și numere (anim-numere.js).
   Întârzierea fiecărui element vine din JS, în --int; toate animațiile
   păstrează starea de la început înainte de pornire și starea de la
   sfârșit după oprire (fill-mode both).
   ============================================================ */

/* ---------- mișcări comune ---------- */
.an-apare { animation: an-apare 0.45s ease-out var(--int, 0s) both; }
.an-cade { animation: an-cade 0.55s cubic-bezier(0.3, 1.4, 0.6, 1) var(--int, 0s) both; }
.an-salt { animation: an-salt 0.6s ease-out var(--int, 0s) both; }
.an-dispare { display: inline-block; animation: an-dispare 0.5s ease-in var(--int, 0s) both; }
@keyframes an-apare { from { opacity: 0; transform: scale(0.6); } }
@keyframes an-cade { from { opacity: 0; transform: translateY(-40px); } }
@keyframes an-salt { 0% { opacity: 0; transform: scale(0.4); } 60% { opacity: 1; transform: scale(1.25); } }
@keyframes an-dispare { to { opacity: 0; transform: scale(0.3) translateY(10px); } }
/* Elementele SVG se transformă față de ele însele. */
svg .an-apare, svg .an-cade { transform-box: fill-box; transform-origin: center; }

/* Textele care se schimbă în același loc: stau unul peste altul. */
.an-contor { display: inline-grid; justify-items: center; align-items: center; }
.an-contor__val { grid-area: 1 / 1; opacity: 0; white-space: nowrap; animation: an-fereastra var(--dur, 1s) linear var(--int, 0s); }
.an-contor__val--ultim { opacity: 1; animation: an-apare 0.4s ease-out var(--int, 0s) both; }
@keyframes an-fereastra { 0%, 100% { opacity: 1; } }

.an-sir { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 8px; font-size: clamp(1.2rem, 5vw, 2.4rem); font-weight: 900; color: var(--albastru-inchis); }
.an-sir__semn { color: var(--rosu); }
.an-sir__semn--virgula { margin-left: -8px; color: var(--albastru-inchis); }
.an-bete__total { display: block; margin-top: 6px; font-size: clamp(1.4rem, 4.6vw, 2.2rem); font-weight: 900; color: var(--albastru-inchis); text-align: center; }

/* ---------- numărarea ---------- */
.an-numara { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.an-numara__rand { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.an-numara__grup { display: flex; gap: 4px; padding: 26px 8px 6px; border-radius: 14px; background: var(--albastru-pal); }
.an-numara__ob { position: relative; display: inline-block; font-size: clamp(2.2rem, 8vw, 3rem); line-height: 1.1; }
.an-numara__nr { position: absolute; top: -24px; left: 50%; display: grid; place-items: center; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: var(--albastru); color: #fff; font-size: 0.95rem; }
.an-numara__total { font-size: clamp(2.6rem, 8vw, 3.6rem); color: var(--rosu); }

.an-scara { display: flex; align-items: flex-end; justify-content: center; gap: 8px; }
.an-scara__col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.an-scara__ob { display: flex; flex-direction: column-reverse; align-items: center; font-size: clamp(1.4rem, 5vw, 1.8rem); line-height: 1.15; }
.an-scara__nou { display: inline-block; border-radius: 50%; background: var(--galben); }
.an-scara__col > b { font-size: 1.7rem; color: var(--albastru-inchis); }

.an-zero { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.an-zero__rand { display: flex; gap: 10px; min-height: 1.2em; font-size: clamp(2.4rem, 8vw, 3.2rem); line-height: 1.15; }
.an-zero__contor { font-size: clamp(1.4rem, 4.6vw, 2rem); font-weight: 900; color: var(--albastru-inchis); }

/* Bilele care trec dintr-o grupă în cealaltă. */
.an-desc { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: clamp(1.15rem, 5.2vw, 2.4rem); }
.an-desc__rand { position: relative; width: calc((2 * var(--n) + 1) * 1.25em); height: 1.5em; }
.an-desc__bila { position: absolute; top: 0.1em; left: calc(var(--i) * 1.25em); width: 1.25em; text-align: center; line-height: 1.3; animation: an-trece 0.7s ease-in-out var(--int) both; }
@keyframes an-trece {
  from { transform: none; }
  50% { transform: translate(calc((var(--n) + 1) * 0.625em), -0.6em); }
  to { transform: translateX(calc((var(--n) + 1) * 1.25em)); }
}
.an-desc__bara { position: absolute; top: 0; bottom: 0; left: calc(var(--n) * 1.25em + 0.55em); width: 0.15em; border-radius: 4px; background: var(--cerneala-slaba); }
.an-desc__contor { font-weight: 900; color: var(--albastru-inchis); }

/* ---------- axa numerelor ---------- */
.an-axa { width: min(100%, 860px); }
.an-axa svg { overflow: visible; }
.an-axa__arc { stroke-dasharray: 1; stroke-dashoffset: 1; animation: an-traseaza var(--dur, 0.8s) ease-in-out var(--int, 0s) both; }
@keyframes an-traseaza { to { stroke-dashoffset: 0; } }
.an-axa__colorat { animation: an-coloreaza 0.3s ease-out var(--int, 0s) both; }
@keyframes an-coloreaza { to { fill: #d9534f; font-weight: 900; } }
.an-axa-sir { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }

/* ---------- bețișoare ---------- */
.an-bete-anim { display: flex; flex-direction: column; align-items: center; width: 100%; }
.an-bete-loc { width: 100%; container-type: inline-size; }
.an-bete {
  --u: min(30px, calc(100cqw / var(--n)));
  position: relative;
  width: calc(var(--n) * var(--u));
  height: calc(5.6 * var(--u));
  margin: 0 auto;
}
/* Rezerva pentru browserele fără unitățile `cq*` (unele table interactive). */
@supports not (width: 1cqw) {
  .an-bete { --u: min(30px, calc(60vw / var(--n))); }
}
.an-bete__bat { position: absolute; top: calc(1.5 * var(--u)); left: calc(var(--x) * var(--u)); width: calc(0.36 * var(--u)); height: calc(3.2 * var(--u)); border-radius: calc(0.12 * var(--u)); background: #e0a800; box-shadow: inset -2px 0 0 rgba(0, 0, 0, 0.12); }
.an-bete__bat--liber { position: static; display: block; }
.an-bete__nou { position: absolute; top: 0; left: calc(var(--x) * var(--u)); width: calc(0.36 * var(--u)); height: 100%; animation: an-strange 0.9s ease-in-out var(--dupa, 0s) both; }
@keyframes an-strange { from { transform: translateX(calc(var(--dx) * var(--u))); } }
.an-bete__cade { position: absolute; top: calc(1.5 * var(--u)); left: 0; display: block; }
.an-bete__nr { position: absolute; top: 0; left: 50%; width: 3em; margin-left: -1.5em; text-align: center; font-size: clamp(9px, calc(0.55 * var(--u)), 16px); line-height: calc(1.3 * var(--u)); color: var(--albastru-inchis); }
.an-bete__nou--leaga .an-bete__nr { animation: an-ascunde 0.4s ease-in var(--dupa, 0s) both; }
@keyframes an-ascunde { to { opacity: 0; } }
.an-bete__legatura { position: absolute; top: calc(2.9 * var(--u)); left: calc(var(--x) * var(--u)); width: calc((4.86 + 0.3) * var(--u)); height: calc(0.45 * var(--u)); border-radius: calc(0.15 * var(--u)); background: #d9534f; transform-origin: center; }
.an-bete__legatura--noua { animation: an-leaga 0.5s ease-out var(--int, 0s) both; }
@keyframes an-leaga { from { transform: scaleX(0); } }
.an-bete__sus { position: absolute; top: 0; left: calc(var(--x) * var(--u)); width: 6em; margin-left: -3em; text-align: center; font-size: clamp(12px, calc(0.6 * var(--u)), 18px); line-height: calc(1.3 * var(--u)); color: var(--rosu); }
.an-bete__grup { position: absolute; inset: 0; }
.an-bete__contor { font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 900; color: var(--rosu); }

.an-grupe { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 12px; font-size: clamp(1.25rem, 4.6vw, 1.7rem); }
.an-grupe__grup { position: relative; display: grid; grid-template-columns: repeat(5, auto); gap: 2px; padding: 8px; border: 3px dashed transparent; border-radius: 14px; }
.an-grupe__grup--plin { animation: an-chenar 0.4s ease-out var(--int, 0s) both; }
@keyframes an-chenar { from { border-color: transparent; background: transparent; } to { border-color: var(--verde); border-style: solid; background: var(--verde-pal); } }
.an-grupe__eticheta { position: absolute; top: -14px; right: -10px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--verde); color: #fff; font-size: 1rem; }
.an-grupe > .an-bete__total { flex-basis: 100%; }

.an-zu td { vertical-align: bottom; }
.an-zu__desen td { height: 80px; padding: 6px 10px; }
.an-zu__manunchi, .an-zu__bat { display: inline-block; height: 64px; margin: 0 2px; border-radius: 3px; background: #e0a800; }
.an-zu__bat { width: 7px; }
.an-zu__manunchi { width: 30px; background: repeating-linear-gradient(90deg, #e0a800 0 4px, #fff 4px 6px); box-shadow: inset 0 26px 0 -20px transparent; position: relative; }
.an-zu__manunchi::after { content: ''; position: absolute; left: -3px; right: -3px; top: 28px; height: 8px; border-radius: 3px; background: #d9534f; }
.an-zu__cifra { color: var(--rosu); }

/* ---------- comparare ---------- */
.an-cmp { display: flex; align-items: flex-start; justify-content: center; gap: clamp(6px, 3vw, 30px); }
.an-cmp__nr { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.an-cmp__cifre { display: flex; gap: 4px; }
.an-cmp__cifra { display: grid; place-items: center; width: 1.2em; height: 1.35em; border: 3px solid var(--linie); border-radius: 12px; background: #fff; font-size: clamp(1.9rem, 8vw, 3.6rem); font-weight: 900; color: var(--albastru-inchis); }
.an-cmp__cifra--z, .an-cmp__cifra--u { animation: an-evidentiaza 0.5s ease-out var(--int, 0s) both; }
@keyframes an-evidentiaza { to { border-color: var(--portocaliu); background: #fff2c4; } }
.an-cmp__eticheta { font-size: clamp(1rem, 3.6vw, 1.25rem); font-weight: 800; color: var(--cerneala-slaba); white-space: nowrap; }
.an-cmp__semn { height: calc(1.35em + 6px); font-size: clamp(1.9rem, 8vw, 3.6rem); font-weight: 900; color: var(--rosu); }
.an-cmp__semn .an-contor__val--ultim { animation: an-salt 0.6s ease-out var(--int, 0s) both; }

.an-ord { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.an-ord__rand { --pas: clamp(3.2rem, 15vw, 4.4rem); display: flex; align-items: flex-end; height: 140px; }
.an-ord__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: var(--pas); height: 100%; animation: an-muta 1.6s ease-in-out var(--int, 0s) both; }
@keyframes an-muta {
  0% { transform: translateX(calc(var(--dx) * var(--pas))); }
  25% { transform: translate(calc(var(--dx) * var(--pas)), -16px); }
  75% { transform: translate(0, -16px); }
  100% { transform: none; }
}
.an-ord__bara { width: 70%; height: calc(var(--h) * 100px); border-radius: 10px 10px 0 0; background: linear-gradient(var(--albastru), var(--albastru-inchis)); }
.an-ord__nr { font-size: clamp(1.4rem, 4.6vw, 1.9rem); color: var(--albastru-inchis); }

/* ---------- par și impar ---------- */
.an-perechi { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.an-perechi__rand { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 10px; }
.an-perechi__p { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.an-perechi__ob { display: flex; min-width: 2.4em; justify-content: center; padding: 4px 8px; border: 3px solid transparent; border-radius: 16px; font-size: clamp(1.8rem, 7vw, 2.4rem); line-height: 1.15; animation: an-pereche 0.4s ease-out var(--int, 0s) both; }
@keyframes an-pereche { to { border-color: var(--verde); background: var(--verde-pal); } }
.an-perechi__p--singur .an-perechi__ob { animation-name: an-singur; }
@keyframes an-singur { to { border-color: var(--rosu); border-style: dashed; background: var(--rosu-pal); } }
.an-perechi__p .an-perechi__ob { animation-delay: var(--int, 0s); }
.an-perechi__nr { font-size: 1.1rem; color: var(--verde); }
.an-perechi__p--singur .an-perechi__nr { color: var(--rosu); }

.an-cifra-u { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.an-cifra-u__carte { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 76px; padding: 8px 10px; border-radius: 16px; background: var(--albastru-pal); }
.an-cifra-u__nr { font-size: clamp(2rem, 7vw, 2.6rem); font-weight: 900; color: var(--albastru-inchis); }
.an-cifra-u__u { display: inline-block; padding: 0 4px; border-radius: 10px; animation: an-cerc-verde 0.4s ease-out var(--int, 0s) both; }
.an-cifra-u__carte--impar .an-cifra-u__u { animation-name: an-cerc-rosu; }
@keyframes an-cerc-verde { to { box-shadow: 0 0 0 3px var(--verde); color: var(--verde); } }
@keyframes an-cerc-rosu { to { box-shadow: 0 0 0 3px var(--rosu); color: var(--rosu); } }
.an-cifra-u__carte b { font-size: 1.15rem; color: var(--verde); }
.an-cifra-u__carte--impar b { color: var(--rosu); }

/* ---------- zece, sută, bani ---------- */
.an-zece { display: flex; flex-direction: column; gap: 6px; }
.an-zece__rand { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; }
.an-zece__bile { display: flex; gap: 3px; }
.an-zece__bila { width: clamp(16px, 5.4vw, 24px); height: clamp(16px, 5.4vw, 24px); border-radius: 50%; background: var(--albastru); }
.an-zece__bila--rosie { background: var(--rosu); }
.an-zece__bila:nth-child(5) { margin-right: 6px; }
.an-zece__calcul { min-width: 5.6em; font-size: clamp(1.15rem, 4vw, 1.5rem); color: var(--albastru-inchis); }

.an-suta-cu-total { display: flex; flex-direction: column; align-items: center; }
.an-suta { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--albastru-pal); }
.an-suta__rand { display: flex; align-items: center; gap: 4px; }
.an-suta__punct { width: clamp(13px, 4.2vw, 18px); height: clamp(13px, 4.2vw, 18px); border-radius: 50%; background: var(--albastru); }
.an-suta__punct--alt { background: var(--portocaliu); }
.an-suta__nr { min-width: 2.4em; margin-left: 8px; font-size: 1.05rem; color: var(--albastru-inchis); }

.an-bani { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.an-bani__rand { gap: 6px; }
.an-bani .bancnota { width: clamp(56px, 16vw, 96px); height: clamp(40px, 11vw, 52px); }
.an-bani .bancnota__valoare { font-size: clamp(1.1rem, 4.4vw, 1.5rem); }
.an-bani .bancnota__unitate { font-size: 0.65rem; }
.an-bani__contor { font-size: clamp(1.4rem, 4.6vw, 2rem); font-weight: 900; color: var(--albastru-inchis); }

.an-schimb { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.an-schimb__tabel { --cel: clamp(64px, 18vw, 90px); display: grid; grid-template-columns: var(--cel) var(--cel); }
.an-schimb__cap, .an-schimb__cifra { display: grid; place-items: center; height: var(--cel); border: 3px solid var(--linie); font-weight: 900; }
.an-schimb__cap { height: 40px; color: var(--cerneala-slaba); font-size: 1.3rem; }
.an-schimb__cifra { position: relative; z-index: 1; font-size: clamp(2.6rem, 9vw, 3.6rem); color: var(--albastru-inchis); }
.an-schimb__cifra--z { animation: an-spre-dreapta 1.1s ease-in-out var(--int, 0s) both; }
.an-schimb__cifra--u { animation: an-spre-stanga 1.1s ease-in-out var(--int, 0s) both; color: var(--rosu); }
@keyframes an-spre-dreapta { 50% { transform: translate(calc(var(--cel) / 2), -40px); } to { transform: translateX(var(--cel)); } }
@keyframes an-spre-stanga { 50% { transform: translate(calc(var(--cel) / -2), 40px); } to { transform: translateX(calc(var(--cel) * -1)); } }
.an-schimb__contor { font-size: clamp(1.5rem, 5vw, 2.2rem); font-weight: 900; color: var(--albastru-inchis); }

/* ---------- interior și exterior ---------- */
.an-gard { width: min(100%, 320px); }
.an-gard__linie { stroke-dasharray: 1; stroke-dashoffset: 1; animation: an-traseaza 2s linear var(--int, 0s) both; }
.an-gard__interior { animation: an-apare-plin 0.6s ease-out var(--int, 0s) both; }
@keyframes an-apare-plin { from { opacity: 0; } }

.an-tarc-cu-text { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.an-tarc { position: relative; width: min(100%, 300px); aspect-ratio: 26 / 18; }
.an-tarc__gard { position: absolute; left: 18%; top: 15%; width: 64%; height: 70%; border: 6px dashed #8a5a2b; border-radius: 50%; background: var(--verde-pal); box-sizing: border-box; }
.an-tarc__ob { position: absolute; transform: translate(-50%, -50%); font-size: clamp(1.7rem, 7vw, 2.2rem); line-height: 1; }
.an-tarc__pasi { display: inline-block; animation: an-paseste 0.3s ease-in-out 0.5s var(--pasi, 6) alternate; }
@keyframes an-paseste { to { transform: translateY(-5px) rotate(-6deg); } }
.an-tarc__ob--vine { animation: an-vine-tarc 0.9s ease-out var(--int, 0s) both; }
.an-tarc__ob--vine .an-tarc__pasi { animation-delay: var(--int, 0s); --pasi: 3; }
@keyframes an-vine-tarc { from { left: -4%; top: 50%; opacity: 0; } 20% { opacity: 1; } }
.an-tarc__ob--in { animation: an-vine-tarc 0.9s ease-out var(--int, 0s) both, an-cerc-verde-ob 0.4s ease-out calc(var(--int, 0s) + 0.9s) both; border-radius: 50%; }
.an-tarc__ob--out { animation: an-vine-tarc 0.9s ease-out var(--int, 0s) both, an-cerc-rosu-ob 0.4s ease-out calc(var(--int, 0s) + 0.9s) both; border-radius: 50%; }
@keyframes an-cerc-verde-ob { to { box-shadow: 0 0 0 3px var(--verde); } }
@keyframes an-cerc-rosu-ob { to { box-shadow: 0 0 0 3px var(--rosu); } }
.an-tarc__total { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: clamp(1.25rem, 4.4vw, 1.6rem); }
.an-tarc__in { color: var(--verde); }
.an-tarc__out { color: var(--rosu); }
.an-tarc__contor { font-size: clamp(1.3rem, 4.6vw, 1.8rem); font-weight: 900; color: var(--albastru-inchis); }

/* ---------- poziții ---------- */
.an-traseaza { stroke-dasharray: 1; stroke-dashoffset: 1; animation: an-traseaza 1.4s ease-in-out var(--int, 0s) both; }

.an-roteste { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.an-roteste__creion { display: block; width: 150px; animation: an-roteste 5.2s ease-in-out 0.4s both; }
.an-roteste__creion .desen--creion { width: 100%; }
@keyframes an-roteste {
  0%, 18% { transform: rotate(-90deg); }
  32%, 58% { transform: rotate(-45deg); }
  72%, 100% { transform: rotate(0deg); }
}
.an-roteste__contor { font-size: clamp(1.5rem, 5vw, 2.1rem); font-weight: 900; color: var(--albastru-inchis); }

.an-foaie-loc { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 28px; }
.an-foaie { position: relative; width: 180px; height: 180px; border: 3px dashed var(--linie); border-radius: 16px; background: #fff; animation: an-foaia 1.6s ease-in-out 1.2s both; }
@keyframes an-foaia { to { transform: rotate(90deg); } }
.an-foaie__creion { position: absolute; width: 90px; }
.an-foaie__creion .desen--creion { width: 100%; }
.an-foaie__creion--v { left: -6px; top: 40px; }
.an-foaie__creion--o { right: 0; top: -6px; }
.an-foaie__creion--b { right: 0; bottom: -4px; }
.an-foaie__lista { display: flex; flex-direction: column; gap: 6px; font-size: clamp(1.1rem, 4vw, 1.35rem); font-weight: 800; }
.an-foaie__rand { display: flex; align-items: center; gap: 8px; }
.an-foaie__bulina { width: 18px; height: 18px; border-radius: 50%; }

.an-litere { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.an-litere__desen { width: min(100%, 360px); }
.an-litere__legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 1.15rem; font-weight: 800; }

/* ---------- fără mișcare: starea de la sfârșit ---------- */
@media (prefers-reduced-motion: reduce) {
  .an-apare, .an-cade, .an-salt, .an-axa__arc, .an-traseaza, .an-gard__linie, .an-gard__interior,
  .an-bete__nou, .an-bete__nr, .an-bete__legatura--noua, .an-desc__bila, .an-ord__col,
  .an-tarc__pasi, .an-foaie, .an-roteste__creion, .an-contor__val, .an-cmp__semn .an-contor__val--ultim {
    animation: none !important;
  }
  .an-dispare { animation: none !important; opacity: 0; }
  .an-axa__arc, .an-traseaza, .an-gard__linie { stroke-dashoffset: 0; }
  .an-desc__bila { transform: translateX(calc((var(--n) + 1) * 1.25em)); }
  .an-bete__nou--leaga .an-bete__nr { opacity: 0; }
  .an-foaie { transform: rotate(90deg); }
  .an-roteste__creion { transform: none; }
  .an-axa__colorat { animation-duration: 0s !important; animation-delay: 0s !important; }
  .an-cmp__cifra--z, .an-cmp__cifra--u, .an-grupe__grup--plin, .an-perechi__ob, .an-cifra-u__u,
  .an-tarc__ob--vine, .an-tarc__ob--in, .an-tarc__ob--out, .an-schimb__cifra--z, .an-schimb__cifra--u {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
  }
}

/* Axa scurtă (până la 10) are mai puține numere: se desenează mai mică,
   ca numerele să fie mari și pe telefon. */
.invata__vizual .an-axa.an-axa--scurta { width: min(100%, 600px); }

/* acvariul: peștele înoată în interior, pisica stă în exterior */
.an-acvariu { width: min(100%, 460px); }
.an-acvariu__inot { animation: an-inot 7s ease-in-out infinite; }
@keyframes an-inot {
  0% { transform: translate(85px, 150px); }
  45% { transform: translate(245px, 125px); }
  50% { transform: translate(245px, 125px); }
  95% { transform: translate(85px, 160px); }
  100% { transform: translate(85px, 150px); }
}
/* Emoji-ul peștelui privește spre stânga: spre dreapta înoată întors. */
.an-acvariu__intoarce { animation: an-intoarce 7s step-end infinite; }
@keyframes an-intoarce {
  0% { transform: scaleX(-1); }
  47.5% { transform: scaleX(1); }
  97.5% { transform: scaleX(-1); }
}
.an-acvariu__bula { animation: an-bula 4.2s ease-in var(--int, 0s) infinite both; }
@keyframes an-bula {
  from { transform: translateY(0); opacity: 0; }
  10% { opacity: 1; }
  to { transform: translateY(-120px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .an-acvariu__inot, .an-acvariu__intoarce, .an-acvariu__bula { animation: none; }
  .an-acvariu__inot { transform: translate(165px, 150px); }
}

/* /jocuri/matematica-clasa-1/anim-operatii.css */
/* Animațiile din „Învăț” pentru adunarea, scăderea și problemele (invata-operatii.js).
   Toate clasele încep cu „ao-”. Momentul fiecărei mișcări vine din JS, în
   proprietățile --t și --t2; animațiile păstrează starea finală (both). */

/* ---------- mișcările de bază ---------- */
@keyframes ao-apare { from { opacity: 0; transform: scale(0.3); } }
@keyframes ao-apare-simplu { from { opacity: 0; } }
@keyframes ao-intra { from { opacity: 0; transform: translateY(14px); } }
@keyframes ao-iese { to { opacity: 0; transform: scale(0.3); } }
@keyframes ao-vine { from { transform: translateX(60vw); } }
@keyframes ao-paseste { 50% { transform: translateY(-7px) rotate(-6deg); } }
@keyframes ao-pleaca { 25% { transform: translateY(-12px); opacity: 1; } to { transform: translate(36px, -80px) rotate(18deg); opacity: 0; } }
@keyframes ao-taie { from { transform: rotate(-35deg) scaleX(0); } to { transform: rotate(-35deg) scaleX(1); } }
@keyframes ao-estompeaza { to { opacity: 0.35; } }
@keyframes ao-cadru { to { box-shadow: 0 0 0 4px var(--verde); background: var(--verde-pal); } }
@keyframes ao-cadru-portocaliu { to { box-shadow: 0 0 0 4px var(--portocaliu); background: #fff2e3; } }
@keyframes ao-uneste { to { background: transparent; } }
@keyframes ao-strange { to { max-width: 0; margin: 0; opacity: 0; } }
@keyframes ao-lumina { to { background: #fff3c4; } }
@keyframes ao-lumina-jeton { to { background: #fff3c4; box-shadow: 0 0 0 3px #f1c40f; } }
@keyframes ao-potrivit { to { background: var(--verde-pal); box-shadow: 0 0 0 3px var(--verde); color: var(--verde); } }
@keyframes ao-clipeste { 0%, 100% { background: transparent; } 20%, 60% { background: #ffd65a; } 40%, 80% { background: #fff3c4; } }
@keyframes ao-muta { from { transform: translate(var(--dx), var(--dy)); } }
@keyframes ao-muta-jeton { from { transform: translate(var(--dx), var(--dy)); color: var(--portocaliu); } }
@keyframes ao-deseneaza { to { stroke-dashoffset: 0; } }
@keyframes ao-nr-axa { to { fill: #d9534f; } }
@keyframes ao-creste { from { transform: scaleX(0); } }
@keyframes ao-plina { to { box-shadow: 0 0 0 4px var(--verde); background: var(--verde-pal); } }

.ao-intra { animation: ao-intra 0.45s ease-out var(--t) both; }
.ao-apare { animation: ao-apare 0.35s ease-out var(--t) both; }

/* ---------- obiectele de numărat ---------- */
.ao-op { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; font-size: clamp(1.7rem, 6.4vw, 2.8rem); }
.ao-op .text-mare, .ao-randuri .text-mare { font-size: clamp(1.7rem, 5.6vw, 2.8rem); }
.ao-op__scena { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 8px 10px; border-radius: 20px; animation: ao-cadru 0.5s var(--t) both; }
.ao-grup { display: flex; flex-direction: column; align-items: center; }
.ao-grup__ob { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 4px 8px; border-radius: 14px; background: var(--albastru-pal); animation: ao-uneste 0.5s var(--t2) both; }
.ao-cinci { display: flex; white-space: nowrap; }
.ao-ob { position: relative; display: inline-block; width: 1.3em; line-height: 1.25; text-align: center; }
.ao-ob__e { display: inline-block; }
.ao-ob--apare { animation: ao-apare 0.35s ease-out var(--t) both; }
.ao-ob--vine { animation: ao-vine 1.2s ease-out var(--t) both; }
.ao-ob--vine .ao-ob__e { animation: ao-paseste 0.28s ease-in-out var(--t) 4; }
/* Obiectul luat pleacă; în locul lui rămâne un cerc punctat. */
.ao-ob--pleaca::before { content: ''; position: absolute; inset: 0.08em 0.1em; border: 3px dashed #9aa9c4; border-radius: 50%; animation: ao-apare-simplu 0.4s var(--t2) both; }
.ao-ob--pleaca .ao-ob__e { animation: ao-pleaca 1s ease-in var(--t2) both; }
/* Obiectul luat se taie cu o linie. */
.ao-ob--taiat::after { content: ''; position: absolute; left: 0; right: 0; top: 48%; height: 4px; border-radius: 2px; background: var(--rosu); animation: ao-taie 0.4s ease-out var(--t2) both; }
.ao-ob--taiat .ao-ob__e { animation: ao-estompeaza 0.4s var(--t2) both; }
.ao-nr { position: absolute; top: -0.25em; right: -0.2em; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--albastru); color: #fff; font-size: 0.85rem; font-weight: 900; line-height: 1; animation: ao-apare 0.3s var(--t) both; }
.ao-semn { display: inline-block; overflow: hidden; max-width: 2em; margin: 0 0.25em; color: var(--albastru-inchis); font-weight: 900; text-align: center; animation: ao-strange 0.5s var(--t2) both; }
.ao-semn__x { display: inline-block; animation: ao-apare 0.35s var(--t) both; }
.ao-gol { min-width: 2.2em; align-items: center; border: 3px dashed #9aa9c4; background: #fff; }
.ao-eticheta { display: block; margin-top: 4px; color: var(--cerneala-slaba); font-size: 1.15rem; font-weight: 800; text-align: center; animation: ao-intra 0.4s var(--t) both; }
.ao-etichete { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }

/* ---------- numele numerelor (termen, sumă, diferență) ---------- */
.ao-etichetat { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: 4px 12px; padding: 0 1.4em; }
.ao-etichetat__col { display: flex; flex-direction: column; align-items: center; }
.ao-etichetat__nume { display: flex; flex-direction: column; align-items: center; width: 0; white-space: nowrap; color: var(--portocaliu); font-size: 1.2rem; font-weight: 900; animation: ao-intra 0.45s var(--t) both; }
.ao-etichetat__sageata { font-size: 1.4rem; line-height: 1; }
.ao-jeton { display: inline-block; min-width: 0.7em; padding: 0 0.14em; border-radius: 12px; color: var(--albastru-inchis); font-size: clamp(1.9rem, 6.6vw, 3rem); font-weight: 900; line-height: 1.25; text-align: center; white-space: nowrap; }
.ao-jeton--aratat { animation: ao-lumina-jeton 0.4s var(--t2) both; }
.ao-jeton--card { padding: 0.05em 0.4em; border: 3px solid var(--linie); background: #fff; }

/* ---------- axa numerelor ---------- */
.ao-axa { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.ao-axa__desen { display: block; width: min(100%, 760px); }
.ao-axa__desen svg { display: block; width: 100%; height: auto; }
.ao-arc { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ao-deseneaza 0.6s ease-in-out var(--t) both; }
.ao-svg-apare { transform-box: fill-box; transform-origin: center; animation: ao-apare 0.35s var(--t) both; }
.ao-axa__nr { animation: ao-nr-axa 0.3s var(--t) both; }

/* ---------- schimbarea locului ---------- */
@keyframes ao-schimb-sus { 50% { transform: translate(calc(var(--dx) / 2), -0.8em); } to { transform: translateX(var(--dx)); } }
@keyframes ao-schimb-jos { 50% { transform: translate(calc(var(--dx) / 2), 0.8em); } to { transform: translateX(var(--dx)); } }
@keyframes ao-schimb-drept { to { transform: translateX(var(--dx)); } }
.ao-schimb { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.ao-schimb__rand { position: relative; display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 0.3em; padding: 0.9em 0 0.9em; font-size: clamp(1.4rem, 5.4vw, 2.4rem); }
.ao-schimb__el { animation: ao-schimb-drept 1s ease-in-out var(--t) both; }
.ao-schimb__el--sus { animation: ao-schimb-sus 1s ease-in-out var(--t) both; }
.ao-schimb__el--jos { animation: ao-schimb-jos 1s ease-in-out var(--t) both; }
.ao-schimb__el.ao-evidentiat { animation: ao-schimb-drept 1s ease-in-out var(--t) both, ao-lumina-jeton 0.4s var(--t2) both; }
.ao-schimb__el--sus.ao-evidentiat { animation: ao-schimb-sus 1s ease-in-out var(--t) both, ao-lumina-jeton 0.4s var(--t2) both; }
.ao-schimb__el--jos.ao-evidentiat { animation: ao-schimb-jos 1s ease-in-out var(--t) both, ao-lumina-jeton 0.4s var(--t2) both; }
.ao-schimb .text-mare { font-size: clamp(1.7rem, 5.6vw, 2.8rem); }
.ao-grupmic { flex-direction: column; font-size: 1em; }
.ao-asteapta .ao-schimb__el, .ao-schimb__rand.ao-asteapta > * { animation: none !important; }
.ao-coloana-desene { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }

/* ---------- trei termeni ---------- */
.ao-grupare { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: clamp(1.5rem, 5.4vw, 2.4rem); }
.ao-grupare__rand { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25em; }
.ao-grupare__pereche { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border-radius: 16px; animation: ao-cadru-portocaliu 0.5s var(--t) both; }
.ao-grupare__tot { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border-radius: 20px; animation: ao-cadru 0.5s var(--t) both; }
.ao-grupare__eticheta { color: #b35c00; font-size: 1.35rem; font-weight: 900; }
.ao-grupare__eticheta--tot { color: var(--verde); font-size: 1.6rem; }
.ao-semn-mic { color: var(--albastru-inchis); font-weight: 900; }

/* ---------- rânduri care apar unul sub altul ---------- */
.ao-randuri { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ao-randuri--text .text-mare { font-size: clamp(1.35rem, 4.8vw, 2.2rem); }
.ao-sir { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; font-size: clamp(1.4rem, 5vw, 2.1rem); }
.ao-sir__ob { display: flex; align-items: center; padding: 2px 8px; border-radius: 12px; background: var(--albastru-pal); letter-spacing: 2px; }
.ao-sir__bara { width: 3px; height: 1.1em; margin: 0 6px; border-radius: 2px; background: var(--cerneala-slaba); }
.ao-sir__nou { animation: ao-apare 0.4s var(--t) both; }
.ao-sir__calcul { color: var(--albastru-inchis); font-size: 1.05em; font-weight: 900; white-space: nowrap; }

/* ---------- un număr desfăcut în două ---------- */
.ao-desc { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ao-desc__arbore { display: flex; flex-direction: column; align-items: center; }
.ao-desc__linii { display: block; width: 130px; }
.ao-desc__linii svg { display: block; width: 100%; height: auto; }
.ao-desc__jos { display: flex; gap: 46px; }

/* ---------- rama de zece ---------- */
.ao-rama-zece { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.ao-rama-zece__rame { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 26px; }
.ao-rama-zece__col { display: flex; flex-direction: column; align-items: center; }
.ao-rama-zece__col .ao-eticheta { color: var(--verde); font-size: 1.6rem; }
.ao-rama { --c: clamp(30px, 8.4vw, 52px); display: grid; grid-template-columns: repeat(5, var(--c)); gap: 4px; padding: 6px; border: 3px solid var(--cerneala); border-radius: 10px; background: #fff; animation: ao-plina 0.5s var(--t) both; }
.ao-rama__loc { display: grid; place-items: center; width: var(--c); height: var(--c); border: 2px solid var(--linie); border-radius: 6px; }
.ao-bulina { display: block; width: 78%; height: 78%; border-radius: 50%; }
.ao-bulina--rosie { background: radial-gradient(circle at 35% 30%, #ff9a96, var(--rosu)); }
.ao-bulina__fata { display: block; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #9cc2ff, var(--albastru)); animation: ao-apare 0.35s var(--t) both; }
.ao-bulina--muta { position: relative; z-index: 1; animation: ao-muta 0.6s ease-in-out var(--t) both; }
.ao-asteapta .ao-bulina--muta { visibility: hidden; animation: none; }

/* ---------- bețișoare în tabelul Z | U ---------- */
.ao-zu-op { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.ao-zu { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); width: min(100%, 600px); border: 3px solid var(--linie); border-radius: 16px; background: #fff; }
.ao-zu__col { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 6px; }
.ao-zu__col + .ao-zu__col { border-left: 3px solid var(--linie); }
.ao-zu__cap { color: var(--cerneala-slaba); font-size: 1.3rem; font-weight: 900; }
.ao-zu__bete { display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; gap: 8px 6px; width: 100%; min-height: 84px; padding: 6px 0; }
.ao-zu__cifra { display: grid; justify-items: center; }
.ao-cifra { grid-area: 1 / 1; color: var(--albastru-inchis); font-size: clamp(1.8rem, 5vw, 2.4rem); font-weight: 900; }
.ao-cifra--veche { animation: ao-iese 0.4s var(--t) both; }
.ao-cifra--noua { color: var(--verde); animation: ao-apare 0.4s var(--t) both; }
.ao-bat { position: relative; display: inline-block; flex: none; width: 12px; height: 60px; }
.ao-bat__lemn { position: absolute; inset: 0 2px; border-radius: 3px; background: #e0a800; }
.ao-bat--apare { animation: ao-apare 0.3s var(--t) both; }
.ao-bat--vine { animation: ao-vine 1.1s ease-out var(--t) both; }
.ao-manunchi { position: relative; display: inline-block; flex: none; padding: 0 3px; }
.ao-manunchi__lemn { position: relative; display: flex; gap: 2px; height: 60px; }
.ao-manunchi__bat { width: 4px; border-radius: 2px; background: #e0a800; }
.ao-manunchi__lemn::after { content: ''; position: absolute; left: -3px; right: -3px; top: 42%; height: 9px; border-radius: 4px; background: var(--rosu); }
.ao-manunchi--apare { animation: ao-apare 0.3s var(--t) both; }
.ao-manunchi--vine { animation: ao-vine 1.1s ease-out var(--t) both; }
@keyframes ao-nou { from { opacity: 0; transform: translateX(60px) scale(0.4); } 70% { box-shadow: 0 0 0 4px var(--verde); } to { box-shadow: 0 0 0 4px var(--verde); border-radius: 6px; } }
.ao-manunchi--nou { border-radius: 6px; animation: ao-nou 0.7s ease-out var(--t) both; }
.ao-plus-unu { position: absolute; top: -0.2em; left: 100%; padding-left: 2px; color: var(--verde); font-size: 1.1rem; font-weight: 900; animation: ao-apare 0.35s var(--t) both; }
/* Zece bețișoare se strâng, se leagă și trec la zeci. */
@keyframes ao-strange-zece { to { gap: 0; background: #fff3c4; } }
@keyframes ao-dispare-zece { to { opacity: 0; max-width: 0; padding: 0; margin: 0; transform: translateX(-40px); } }
.ao-zece-noua { position: relative; display: inline-flex; flex-wrap: nowrap; gap: 6px; max-width: 320px; padding: 2px; border-radius: 6px; animation: ao-strange-zece 0.6s var(--t) both, ao-dispare-zece 0.7s var(--t2) both; }
.ao-zece-noua::after { content: ''; position: absolute; left: 0; right: 0; top: 42%; height: 9px; border-radius: 4px; background: var(--rosu); animation: ao-apare-simplu 0.3s calc(var(--t) + 0.6s) both; }
/* Un mănunchi se desface: legătura dispare, bețișoarele trec la unități. */
@keyframes ao-desfa { to { gap: 6px; } }
.ao-manunchi--desfacut { animation: ao-apare 0.3s var(--t) both, ao-dispare-zece 0.6s calc(var(--t2) + 0.6s) both; }
.ao-manunchi--desfacut .ao-manunchi__lemn { animation: ao-desfa 0.5s var(--t2) both; }
.ao-manunchi--desfacut .ao-manunchi__lemn::after { animation: ao-iese 0.4s var(--t2) both; }
.ao-zece-desfacuta { display: contents; }
/* Bețișoarele luate pleacă; locul lor rămâne marcat punctat. */
.ao-pleaca::before { content: ''; position: absolute; inset: 0; border: 2px dashed #9aa9c4; border-radius: 4px; animation: ao-apare-simplu 0.4s var(--t2) both; }
.ao-pleaca > .ao-bat__lemn, .ao-pleaca > .ao-manunchi__lemn { animation: ao-pleaca 1s ease-in var(--t2) both; }

/* ---------- calculul în coloană ---------- */
.ao-coloana { border-collapse: collapse; font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 900; }
.ao-coloana td { min-width: 1.3em; padding: 0 8px; text-align: center; }
.ao-cif { display: inline-block; }
.ao-coloana__cap td { color: var(--cerneala-slaba); font-size: 0.55em; }
.ao-coloana__tinut td { color: var(--rosu); font-size: 0.5em; }
.ao-coloana__linie td { border-bottom: 4px solid var(--cerneala); }
.ao-coloana__rezultat td { color: var(--verde); }
.ao-col--lumina { animation: ao-lumina 0.4s var(--t) both; }
.ao-clipeste { animation: ao-clipeste 1.2s var(--t2) both; }
.ao-clipeste-col { animation: ao-clipeste 1s var(--t) both; }

/* ---------- proba: rezultatul trece în operația inversă ---------- */
.ao-intoarce { display: grid; grid-template-columns: repeat(5, auto) 1.3em; align-items: center; justify-content: center; gap: 10px 0.3em; }
.ao-intoarce .ao-jeton { font-size: clamp(1.7rem, 6.2vw, 2.8rem); }
.ao-jeton--muta { position: relative; z-index: 1; animation: ao-muta-jeton 0.8s ease-in-out var(--t) both; }
.ao-asteapta .ao-jeton--muta { visibility: hidden; animation: none !important; }
.ao-jeton.ao-potrivit { animation: ao-apare 0.35s ease-out var(--t) both, ao-potrivit 0.4s var(--t2) both; }
.ao-jeton--muta.ao-potrivit { animation: ao-muta-jeton 0.8s ease-in-out var(--t) both, ao-potrivit 0.4s var(--t2) both; }
.ao-intoarce__semn { display: flex; justify-content: center; }
.ao-bifa { display: inline-block; color: var(--verde); font-size: 2rem; font-weight: 900; }
.ao-necunoscut { display: inline-grid; justify-items: center; }
.ao-necunoscut > * { grid-area: 1 / 1; }
.ao-necunoscut__q { animation: ao-iese 0.4s var(--t) both; }
.ao-necunoscut__v { color: var(--verde); animation: ao-apare 0.4s var(--t) both; }

/* ---------- problemele desenate cu bare ---------- */
.ao-bare { display: flex; flex-direction: column; gap: 12px; width: min(100%, 640px); }
.ao-bare__rand { display: grid; grid-template-columns: minmax(3em, auto) minmax(0, 1fr) 2.4em; align-items: center; gap: 10px; }
.ao-bare__nume { max-width: 7em; font-size: 1.15rem; font-weight: 800; line-height: 1.15; }
.ao-bare__cadru { display: flex; height: 48px; }
.ao-bare__seg { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; height: 100%; border: 2px solid var(--albastru); background: #a9c8ff; transform-origin: left center; animation: ao-creste 0.6s ease-out var(--t) both; }
.ao-bare__seg + .ao-bare__seg { border-left-width: 0; }
.ao-bare__seg--b { border-color: var(--verde); background: #9fe2b6; }
@keyframes ao-estompeaza-bara { to { opacity: 0.55; } }
.ao-bare__seg--taiat { animation: ao-creste 0.6s ease-out var(--t) both, ao-estompeaza-bara 0.5s var(--t2) both; }
.ao-bare__seg--taiat::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(217, 83, 79, 0.85) 7px 11px); animation: ao-apare-simplu 0.4s var(--t2) both; }
.ao-bare__seg--gol { border: 3px dashed var(--cerneala-slaba); background: #fff; }
.ao-bare__seg--tot { border: 3px solid #c79a1c; border-radius: 8px; background: #fff3c4; }
.ao-bare__text { position: relative; z-index: 1; display: inline-block; color: var(--cerneala); font-size: 1.25rem; font-weight: 900; }
.ao-bare__val { color: var(--albastru-inchis); font-size: 1.5rem; text-align: left; }
.ao-bare__total { margin: 4px 0 0; color: var(--albastru-inchis); font-size: 1.35rem; font-weight: 900; text-align: center; }

/* ---------- desenul unei probleme ---------- */
.ao-enunt { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; font-size: clamp(1.7rem, 6.2vw, 2.6rem); }
.ao-enunt__texte { display: flex; flex-direction: column; gap: 6px; width: min(100%, 560px); }
.ao-enunt__rand { margin: 0; padding: 8px 14px; border-radius: 12px; background: var(--albastru-pal); font-size: 1.2rem; font-weight: 700; line-height: 1.4; }
.ao-enunt__rand--intrebare { background: #fde2ef; font-weight: 900; }
.ao-enunt .text-mare { font-size: clamp(1.7rem, 5.6vw, 2.8rem); }

@media (max-width: 640px) {
  .ao-bat { width: 10px; height: 48px; }
  .ao-manunchi__lemn { gap: 1px; height: 48px; }
  .ao-manunchi__bat { width: 3px; }
  .ao-zu__bete { gap: 6px 4px; min-height: 64px; }
  .ao-zece-noua { gap: 2px; }
  .ao-zece-noua .ao-bat { width: 8px; }
  .ao-op { font-size: clamp(1.45rem, 6vw, 2.8rem); }
  .ao-bare__rand { gap: 6px; }
  .ao-bare__nume { font-size: 1rem; }
  .ao-bare__cadru { height: 42px; }
  .ao-desc__jos { gap: 34px; }
  .ao-etichetat__nume { font-size: 1.05rem; }
}

/* Fără mișcare: se arată direct starea de la sfârșitul animațiilor. */
@media (prefers-reduced-motion: reduce) {
  [class*='ao-'], [class*='ao-']::before, [class*='ao-']::after {
    animation-duration: 0.001s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }
}

/* Bețișoarele în tabelul Z | U, încet: mișcările durează mai mult. */
.ao-zu-op--lent .ao-bat--apare, .ao-zu-op--lent .ao-manunchi--apare { animation-duration: 0.6s; }
.ao-zu-op--lent .ao-bat--vine, .ao-zu-op--lent .ao-manunchi--vine { animation-duration: 1.8s; }
.ao-zu-op--lent .ao-pleaca > .ao-bat__lemn, .ao-zu-op--lent .ao-pleaca > .ao-manunchi__lemn { animation-duration: 1.8s; }
.ao-zu-op--lent .ao-manunchi--desfacut .ao-manunchi__lemn { animation-duration: 1.2s; }
.ao-zu-op--lent .ao-cifra--veche, .ao-zu-op--lent .ao-cifra--noua { animation-duration: 0.8s; }

/* ---------- lacul (adunare cu `lac: true`) ----------
   Apă albastră, cu nuferi desenați pe margini; lebedele albe se văd
   bine pe ea. Grupele nu mai au fundalul lor deschis, doar un chenar. */
.ao-op__scena--lac { gap: 6px; padding: 26px 34px; box-shadow: inset 0 0 0 4px #1f5592; }
.ao-op__scena--lac .ao-grup { position: relative; }
.ao-op__scena--lac .ao-grup__ob { background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55); }
.ao-op__scena--lac .ao-semn { color: #fff; }
.ao-op__scena--lac .ao-ob__e { filter: drop-shadow(0 3px 2px rgba(0, 25, 60, 0.45)); }
.ao-op__scena--lac .ao-eticheta, .ao-op__scena--lac [class*='eticheta'] { color: #fff; }
/* La sfârșit cadrul se încercuiește cu verde, dar apa rămâne albastră. */
.ao-op__scena--lac { animation-name: ao-cadru-lac; }
@keyframes ao-cadru-lac { to { box-shadow: inset 0 0 0 4px #1f5592, 0 0 0 4px var(--verde); } }

/* /jocuri/matematica-clasa-1/anim-masurari.css */
/* Animațiile din „Învăț” pentru figurile, corpurile, datele și măsurările (invata-masurari.js).
   Toate clasele încep cu „am-”. Fiecare element pornește la momentul din
   --am-i; stilul lui obișnuit este starea de la sfârșitul animației, iar
   cadrele cheie descriu numai începutul. Cu „mișcare redusă” se vede
   direct desenul terminat (blocul de la sfârșitul fișierului). */

/* ---------- comune ---------- */
.am-anim { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; }
.am-desen { display: inline-block; max-width: 100%; }
.am-desen svg { display: block; width: 100%; height: auto; overflow: visible; }
.am-randul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; max-width: 100%; }
.am-eticheta { font-size: clamp(1.3rem, 4vw, 1.7rem); font-weight: 900; color: var(--albastru-inchis); text-align: center; }
.am-eticheta--rosu { color: var(--rosu); }
.am-eticheta--verde { color: var(--verde); }

.am-apare { animation: am-apare 0.45s ease-out var(--am-i, 0s) both; }
@keyframes am-apare { from { opacity: 0; } }
.am-creste { transform-box: fill-box; transform-origin: center; animation: am-creste 0.5s cubic-bezier(0.3, 1.5, 0.6, 1) var(--am-i, 0s) both; }
.am-creste-html { animation: am-creste 0.5s cubic-bezier(0.3, 1.5, 0.6, 1) var(--am-i, 0s) both; }
@keyframes am-creste { from { opacity: 0; transform: scale(0.2); } }
.am-coboara { animation: am-coboara 0.55s ease-out var(--am-i, 0s) both; }
@keyframes am-coboara { from { opacity: 0; transform: translateY(-40px); } }
.am-vine { animation: am-vine 0.6s ease-out var(--am-i, 0s) both; }
@keyframes am-vine { from { opacity: 0; transform: translateX(60px); } }
.am-cade { animation: am-cade 0.45s cubic-bezier(0.5, 0, 0.7, 1.4) var(--am-i, 0s) both; }
@keyframes am-cade { from { opacity: 0; transform: translateY(-70px); } }
/* Linia se desenează de la un capăt la altul (drumul are pathLength="1"). */
.am-linie { stroke-dasharray: 1 1; animation: am-linie var(--am-d, 0.6s) ease-in-out var(--am-i, 0s) both; }
@keyframes am-linie { from { stroke-dashoffset: 1; } }

/* Texte în același loc, unul după altul: fiecare intră la --am-i și
   iese la --am-j; ultimul rămâne. */
.am-succesiune { display: inline-grid; justify-items: center; }
.am-succesiune > * { grid-area: 1 / 1; }
.am-succesiune__pe-rand { opacity: 0; animation: am-intra 0.3s ease-out var(--am-i) both, am-iese 0.3s ease-in var(--am-j) forwards; }
@keyframes am-intra { from { opacity: 0; } to { opacity: 1; } }
@keyframes am-iese { from { opacity: 1; } to { opacity: 0; } }

/* ---------- figuri ---------- */
.am-figura__desen { width: min(100%, 230px); }
.invata-rand .am-figura__desen { width: min(100%, 190px); }
.am-din-obiecte { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
.am-din-obiecte__coloana { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 74px; }
.am-din-obiecte__emoji { font-size: 3rem; line-height: 1.1; }
.am-din-obiecte__sageata { font-size: 1.5rem; font-weight: 900; color: var(--cerneala-slaba); }
.am-din-obiecte__figura { width: 70px; }
.am-triunghi { width: clamp(80px, 24vw, 130px); }
.am-intoarce { transform-box: fill-box; transform-origin: center; transform: rotate(var(--am-r)); animation: am-intoarce 1.6s ease-in-out var(--am-i, 0s) both; }
@keyframes am-intoarce { from { transform: rotate(0deg); } }
.am-casa__desen { width: min(100%, 300px); }
.am-casa__piesa { animation: am-coboara 0.6s ease-out var(--am-i) both, am-clipeste 0.9s ease-in-out var(--am-j) both; }
@keyframes am-clipeste { 50% { stroke: #d62828; stroke-width: 7px; } }
.am-casa__legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.am-casa__tip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 12px; background: var(--albastru-pal); border: 2px solid var(--linie); font-size: 1.1rem; }
.am-casa__mic { width: 30px; }

/* ---------- corpuri ---------- */
.am-zar__fete { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.am-zar__fata { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 1.1rem; }
.am-zar__desen { width: clamp(44px, 12vw, 64px); }
.am-urme { gap: 18px; }
.am-urma { display: grid; grid-template-columns: auto auto auto; grid-template-rows: auto auto; align-items: center; justify-items: center; column-gap: 8px; }
.am-urma__scena { width: clamp(110px, 30vw, 150px); grid-row: 1 / 3; }
.am-urma__sageata { font-size: 1.8rem; font-weight: 900; color: var(--cerneala-slaba); grid-row: 1 / 3; }
.am-urma__figura { width: clamp(70px, 20vw, 100px); }
.am-urma__nume { grid-column: 3; font-size: 1.2rem; }
.am-apasa { opacity: 0; animation: am-apasa 2s ease-in-out var(--am-i, 0s) both; }
@keyframes am-apasa {
  0% { opacity: 0; transform: translateY(-50px); }
  15% { opacity: 1; transform: translateY(-50px); }
  45%, 62% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-80px); }
}
.am-panta { gap: 6px; width: min(100%, 460px); }
.am-panta__rand { display: flex; flex-direction: column; align-items: center; width: 100%; }
.am-panta__desen { width: 100%; }
.am-panta__text { font-size: 1.15rem; }
.am-muta { transform: translate(var(--am-dx), var(--am-dy)); animation: am-muta var(--am-d, 2.4s) ease-in var(--am-i, 0s) both; }
.am-muta--aluneca { animation-timing-function: ease-out; }
@keyframes am-muta { from { transform: translate(0, 0); } }
.am-rot { transform-box: fill-box; transform-origin: center; transform: rotate(var(--am-r)); animation: am-rot var(--am-d, 2.4s) ease-in var(--am-i, 0s) both; }
@keyframes am-rot { from { transform: rotate(0deg); } }

.am-sortare { width: min(100%, 620px); }
.am-sortare__sursa { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 6px 12px; border-radius: 16px; background: #fff6e0; border: 2px dashed #e0b44a; font-size: 2rem; }
.am-sortare__pleaca { opacity: 0.18; filter: grayscale(1); animation: am-pleaca 0.4s ease-in var(--am-i) both; }
@keyframes am-pleaca { from { opacity: 1; filter: none; } }
.am-sortare__coloane { display: grid; grid-template-columns: repeat(var(--am-n), minmax(0, 1fr)); gap: 6px; width: 100%; }
.am-sortare__coloana { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border-radius: 14px; background: var(--albastru-pal); border: 2px solid var(--linie); }
.am-sortare__cap { display: flex; flex-direction: column; align-items: center; font-size: clamp(0.85rem, 2.6vw, 1.1rem); text-align: center; }
.am-sortare__cap .desen--corp { width: clamp(44px, 13vw, 76px); }
.am-sortare__cap .emoji-mare { font-size: clamp(2rem, 7vw, 2.8rem); }
.am-sortare__cutie { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; min-height: 2.4em; font-size: clamp(1.5rem, 5vw, 2rem); }

/* ---------- date ---------- */
.am-liniute__sir { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 520px; }
.am-liniute__fruct { position: relative; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 10px; font-size: 1.7rem; background: var(--verde-pal); animation: am-bifat 0.3s ease-out var(--am-i) both; }
@keyframes am-bifat { from { background: transparent; } }
.am-liniute__bifa { position: absolute; right: -4px; bottom: -6px; color: var(--verde); font-size: 1rem; font-weight: 900; }
.am-liniute__tabel td, .am-liniute__tabel th { padding: 6px 10px; }
.am-liniute__bife { min-width: 6.5rem; color: var(--albastru-inchis); font-size: 1.5rem; font-weight: 900; letter-spacing: 4px; }
.am-liniute__linie { display: inline-block; }
.am-liniute__total { min-width: 2rem; font-size: 1.4rem; text-align: center !important; color: var(--verde); }

.am-coloane__grafic { display: flex; align-items: flex-end; justify-content: center; padding: 8px 0 0; }
.am-coloane__coloana { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0 0; border-radius: 14px 14px 0 0; }
.am-coloane__coloana > * { padding-inline: clamp(10px, 3.5vw, 20px); }
.am-coloane__coloana--max { background: #fff3c4; animation: am-max 0.5s ease-out var(--am-i) both; }
@keyframes am-max { from { background: transparent; } }
.am-coloane__numar { font-size: 1.6rem; color: var(--albastru-inchis); }
.am-coloane__stiva { display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; align-self: stretch; padding-bottom: 4px; border-bottom: 4px solid var(--cerneala); }
.am-coloane__bulina { width: clamp(22px, 6vw, 30px); aspect-ratio: 1; border-radius: 50%; }
.am-coloane__bulina--0 { background: radial-gradient(circle at 35% 30%, #ff9a9a, #d62828 70%); }
.am-coloane__bulina--1 { background: radial-gradient(circle at 35% 30%, #c8f08a, #4c9a1e 70%); }
.am-coloane__bulina--2 { background: radial-gradient(circle at 35% 30%, #fff08a, #d9a400 70%); }
.am-coloane__bulina--3 { background: radial-gradient(circle at 35% 30%, #9ac4ff, #2f6fde 70%); }
.am-coloane__cap { display: flex; flex-direction: column; align-items: center; padding-top: 4px; font-size: 1rem; }
.am-coloane__emoji { font-size: 2rem; line-height: 1.1; }

/* ---------- lungime ---------- */
.am-unitati { width: min(100%, 560px); }
.am-unitati__bara { width: 100%; container-type: inline-size; }
.am-unitati__sir { display: grid; grid-template-columns: repeat(var(--am-n), minmax(0, 1fr)); }
.am-unitati__unitate { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0 2px; border: 2px solid var(--albastru); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--albastru-pal); }
.am-unitati__unitate:nth-child(even) { background: var(--albastru-deschis); }
.am-unitati__emoji { display: inline-block; font-size: 1.8rem; font-size: min(2.6rem, calc(100cqw / var(--am-n) * 0.6)); line-height: 1.1; }
.am-unitati__nr { font-size: 1rem; color: var(--albastru-inchis); }
.am-unitati__obiect { height: 30px; border-radius: 0 0 8px 8px; color: #fff; font-weight: 900; font-size: 1.05rem; line-height: 30px; text-align: center; }

.am-rigla__desen { width: min(100%, 600px); }
.am-rigla__desen svg { overflow: hidden; }
.am-banda { animation: am-banda 1.2s ease-out var(--am-i, 0s) both; }
@keyframes am-banda { from { opacity: 0; transform: translateX(260px); } 20% { opacity: 1; } }

/* ---------- capacitate ---------- */
.am-umple { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.am-umple__desen { width: clamp(150px, 42vw, 240px); }
.am-goleste__desen { width: clamp(100px, 28vw, 150px); }
.am-umple__sir { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; max-width: 240px; min-height: 3.2rem; }
.am-umple__pahar { display: flex; flex-direction: column; align-items: center; font-size: 0.95rem; }
.am-umple__emoji { font-size: 1.6rem; line-height: 1.1; }
.am-umple__emoji--mare { font-size: 2.1rem; }
.am-doua { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 10px 20px; }
.am-doua .am-umple__desen { width: clamp(130px, 40vw, 220px); }
.am-doua .am-goleste__desen { width: clamp(110px, 36vw, 170px); }
.am-doua .am-umple__sir { max-width: min(42vw, 220px); }
.am-doua .am-umple { flex: 1 1 0; min-width: 0; max-width: 260px; }
.am-umple-strat { transform-box: fill-box; transform-origin: bottom; animation: am-umple-strat var(--am-d, 0.4s) ease-out var(--am-i, 0s) both; }
@keyframes am-umple-strat { from { transform: scaleY(0); } }
.am-goleste-strat { opacity: 0; animation: am-goleste-strat 0.5s ease-in var(--am-i, 0s) both; }
@keyframes am-goleste-strat { from { opacity: 1; } to { opacity: 0; } }
/* Paharul se înclină spre vas și revine, o dată pentru fiecare turnare. */
.am-toarna { transform-origin: 80px 16px; animation: am-toarna var(--am-d) ease-in-out var(--am-i, 0s) var(--am-n) both; }
@keyframes am-toarna { 35%, 65% { transform: rotate(105deg); } }
.am-jet { opacity: 0; animation: am-jet var(--am-d) linear var(--am-i, 0s) var(--am-n) both; }
@keyframes am-jet { 0%, 32% { opacity: 0; } 40%, 62% { opacity: 1; } 70%, 100% { opacity: 0; } }

/* ---------- ceasul ---------- */
.am-ceas__desen { width: clamp(170px, 50vw, 220px); }
.am-ceas__digital { font-size: 1.8rem; }
.am-ac { transform-origin: 100px 100px; transform: rotate(var(--am-la)); animation: am-ac var(--am-d) ease-in-out var(--am-i, 0s) both; }
@keyframes am-ac { from { transform: rotate(var(--am-de)); } }
.am-ac--clipeste line { animation: am-ac-clipeste 0.7s ease-in-out var(--am-j) 3; }
@keyframes am-ac-clipeste { 50% { stroke: #f08a24; stroke-width: 12px; } }
.am-ceas__legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.am-ceas__ac { padding: 6px 12px; border-radius: 12px; font-size: 1.15rem; font-weight: 800; }
.am-ceas__ac--ora { background: #e3e8f5; color: #12245a; }
.am-ceas__ac--min { background: var(--rosu-pal); color: #a51d1d; }

/* ---------- calendarul ---------- */
.am-ziua__desen { width: min(100%, 460px); border-radius: 18px; overflow: hidden; }
.am-ziua__cer { fill: #1d2b5a; animation: am-cer 6s linear 0s both; }
@keyframes am-cer {
  0% { fill: #ffd9a8; }
  30% { fill: #bfe3ff; }
  55% { fill: #bfe3ff; }
  70% { fill: #ffb48a; }
  85%, 100% { fill: #1d2b5a; }
}
.am-ziua__umbra { fill: #1d2b5a; }
.am-ziua__fereastra { fill: #ffd65a; animation: am-fereastra 6s linear 0s both; }
@keyframes am-fereastra { 0%, 75% { fill: #9cc7ee; } }
.am-ziua__soare { opacity: 0; transform: translate(300px, 160px); animation: am-soare 6s ease-in-out 0s both; }
@keyframes am-soare {
  0% { opacity: 1; transform: translate(30px, 118px); }
  30% { opacity: 1; transform: translate(160px, 34px); }
  62% { opacity: 1; transform: translate(290px, 112px); }
  78%, 100% { opacity: 0; transform: translate(305px, 165px); }
}
.am-ziua__momente { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: min(100%, 460px); }
.am-ziua__moment { display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border-radius: 12px; background: var(--albastru-pal); font-size: clamp(0.78rem, 2.6vw, 1rem); }
.am-ziua__moment span { font-size: 1.7rem; }

.am-zile { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 640px; }
.am-zi { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 72px; padding: 6px; border-radius: 12px; background: var(--albastru-pal); font-weight: 800; }
.am-zi--libera { background: #fde2ef; }
.am-zi__nr { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--albastru); color: #fff; font-size: 0.95rem; }
.am-zi__emoji { font-size: 1.6rem; }
.am-zi__nume { font-size: 1rem; }
.am-zi__semn { min-height: 1.4em; font-size: 1.05rem; }
.am-zi--marcata { animation: am-marcata 0.5s ease-out var(--am-i) both; }
@keyframes am-marcata { from { background: var(--albastru-pal); box-shadow: none; } }
.am-zi.am-zi--azi { background: #fff3c4; box-shadow: 0 0 0 3px #e0a800; }
.am-zi.am-zi--ieri { background: #e3e8f5; box-shadow: 0 0 0 3px #7a8bb5; }
.am-zi.am-zi--maine { background: var(--verde-pal); box-shadow: 0 0 0 3px var(--verde); }
.am-zi__semn.am-zi--azi, .am-zi__semn.am-zi--ieri, .am-zi__semn.am-zi--maine { background: none; box-shadow: none; }

/* ---------- anotimpurile ---------- */
.am-copac__desen { width: clamp(170px, 50vw, 240px); border-radius: 18px; overflow: hidden; }
.am-copac__luni { margin: 0; padding: 0; list-style: none; font-size: 1.35rem; font-weight: 800; }
.am-copac__luni li { position: relative; margin: 4px 0; padding-left: 22px; }
.am-copac__luni li::before { content: '–'; position: absolute; left: 0; }
.am-copac__anotimpuri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: min(100%, 460px); }
.am-copac__anotimp { display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border-radius: 12px; font-size: clamp(0.78rem, 2.6vw, 1rem); }
.am-copac__anotimp span { font-size: 1.6rem; }
.am-strat { opacity: 0; animation: am-intra 0.5s ease-out var(--am-i) both, am-iese 0.5s ease-in var(--am-j) forwards; }
.am-frunza { transform-box: fill-box; transform-origin: center; transform: translate(var(--am-dx), var(--am-dy)) rotate(var(--am-r)); animation: am-frunza 2.2s ease-in var(--am-i, 0s) both; }
@keyframes am-frunza {
  from { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(calc(var(--am-dx) * -0.6), calc(var(--am-dy) * 0.5)) rotate(calc(var(--am-r) * 0.5)); }
}
.am-fulg { transform: translateY(var(--am-dy)); animation: am-fulg 2.4s linear var(--am-i, 0s) both; }
@keyframes am-fulg { from { transform: translate(0, 0); } 50% { transform: translate(8px, calc(var(--am-dy) * 0.5)); } }

/* ---------- banii ---------- */
.am-bani__obiect { display: flex; align-items: center; gap: 10px; }
.am-bani__pret { padding: 4px 12px; border-radius: 10px; background: #fff; border: 2px solid var(--cerneala); font-size: 1.4rem; }
.am-bani__sir { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.am-bani__ban, .am-schimb__ban { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.am-bani__valoare { font-size: 1.3rem; color: var(--albastru-inchis); }
.am-bani__suma { padding: 4px 16px; border-radius: 12px; background: #fff3c4; font-size: clamp(1.4rem, 4.5vw, 1.9rem); font-weight: 900; color: var(--cerneala); }
.am-schimb__rand { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.am-schimb__parte { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; max-width: 100%; padding: 8px; border-radius: 14px; border: 3px dashed var(--linie); }
.am-schimb__parte--gata { border: 3px solid var(--verde); background: var(--verde-pal); animation: am-gata 0.5s ease-out var(--am-i) both; }
@keyframes am-gata { from { border-color: var(--linie); background: transparent; } }
.am-schimb__semn { font-size: 2.2rem; color: var(--albastru-inchis); }
.am-rest__desen { width: min(100%, 420px); }

@media (max-width: 640px) {
  .am-bani .bancnota, .am-schimb .bancnota { width: 92px; height: 50px; }
  .am-zi { min-width: 0; padding: 5px 6px; }
  .am-zi__nume { font-size: 0.85rem; }
}

/* ---------- mișcare redusă: direct starea finală ---------- */
@media (prefers-reduced-motion: reduce) {
  .am-anim, .am-anim * { animation: none !important; }
}

/* /jocuri/matematica-clasa-1/joc-unelte.css */
/* Unelte comune pentru jocuri: tragerea cu degetul și stelele. */
.jt-trage { cursor: grab; user-select: none; -webkit-user-select: none; position: relative; z-index: 1; }
.jt-trage--acum { cursor: grabbing; z-index: 20; transition: none; filter: drop-shadow(0 8px 10px hsl(220 40% 20% / 0.3)); }
.jt-inapoi { transition: transform 0.3s ease-out; }
.jt-blocat { cursor: default; }
.jt-tinta--peste { outline: 4px dashed var(--albastru); outline-offset: 4px; }
.jt-tinta--gresit { animation: jt-scutura 0.4s; }
@keyframes jt-scutura { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.jt-stele { position: fixed; z-index: 50; width: 0; height: 0; pointer-events: none; }
.jt-stea { position: absolute; left: -0.5em; top: -0.5em; font-size: 1.4rem; animation: jt-stea 0.8s ease-out both; }
@keyframes jt-stea { to { transform: translate(var(--dx), var(--dy)) scale(0.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .jt-stea, .jt-tinta--gresit { animation: none; }
  .jt-stele { display: none; }
}

/* /jocuri/romana-clasa-2/romana.css */
/* ============================================================
   LIMBA ROMÂNĂ, CLASA a II-a — aspectul paginii
   ============================================================
   Restul aspectului e comun: ../clasa-i-comun/clasa-i.css. Toate
   clasele de aici încep cu r2-. Jocurile: jocuri-tipuri.css.
   ============================================================ */

/* ---------- mișcările comune ---------- */
.r2-intra { animation: r2-intra 0.5s cubic-bezier(0.3, 1.4, 0.6, 1) var(--intarziere, 0ms) both; }
@keyframes r2-intra { from { opacity: 0; transform: translateY(18px) scale(0.85); } }
.r2-apare { animation: r2-apare 0.35s ease-out both; }
@keyframes r2-apare { from { opacity: 0; transform: translateY(-8px); } }
.r2-zbor { transition: none !important; }

/* Explicația din „Învăț”: fiecare propoziție pe rândul ei (peRanduri). */
.invata__propozitie { display: block; }

/* ---------- cuprinsul ---------- */
.r2-grup { margin-bottom: 22px; }
.r2-grup__titlu { margin: 0 0 10px; font-size: clamp(1.15rem, 2.6vw, 1.4rem); }
.r2-lista { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.r2-card__simbol { font-size: 2.2rem; }

/* ---------- textul de citit ---------- */
.r2-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 980px;
  padding: clamp(12px, 2.4vw, 22px);
  border: 2px solid #f1dc8f;
  border-radius: 22px;
  background: #fffbea;
  text-align: left;
}
.r2-text--compact { margin-bottom: 14px; padding: 12px 16px; }
.r2-text__cap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.r2-text__titluri { text-align: center; }
.r2-text__titlu { margin: 0; padding: 0 6px; border-radius: 10px; font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 900; color: var(--albastru-inchis); }
.r2-text--compact .r2-text__titlu { font-size: clamp(1.2rem, 3vw, 1.5rem); }
.r2-text__autor { margin: 2px 0 0; color: var(--cerneala-slaba); font-weight: 700; font-style: italic; }
.r2-scena-img { display: block; width: min(100%, 360px, 34vh); aspect-ratio: 1; object-fit: cover; border-radius: 18px; box-shadow: 0 6px 16px hsl(205 60% 20% / 0.18); }
.r2-scena-img--emoji { display: grid; place-items: center; background: var(--albastru-pal); font-size: clamp(5rem, 16vw, 8rem); box-shadow: none; }

.r2-text__corp { font-size: clamp(1.3rem, 3.2vw, 1.75rem); line-height: 1.7; }
.r2-text--compact .r2-text__corp { font-size: clamp(1.1rem, 2.6vw, 1.35rem); line-height: 1.6; }
.r2-text__alineat { margin: 0 0 8px; text-indent: 1.6em; }
.r2-text__strofa { display: flex; flex-direction: column; align-items: flex-start; margin: 0 auto 14px; width: fit-content; max-width: 100%; }
.r2-text__strofa .r2-text__rand { display: block; }
.r2-text__rand { padding: 2px 0; border-radius: 8px; transition: background-color 0.25s, box-shadow 0.25s; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.r2-text__rand--acum, .r2-text__titlu.r2-text__rand--acum { background: #ffe58a; box-shadow: 0 0 0 4px #ffe58a; }

.r2-cuvant {
  display: inline;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  color: inherit;
  font: inherit;
  text-indent: 0;
  cursor: pointer;
}
.r2-cuvant:hover { background: hsl(205 90% 88%); }
.r2-cuvant--nou { color: #8a3fc4; font-weight: 800; text-decoration: underline dotted 3px; text-underline-offset: 5px; }
.r2-cuvant--atins { background: var(--galben); }
.r2-cuvant--eticheta { display: inline-block; min-height: 48px; padding: 4px 14px; border: 3px solid #c9a4ea; border-radius: 999px; background: #f6edfd; font-size: 1.2rem; text-decoration: none; }

.r2-text__butoane { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.r2-text { position: relative; }
.r2-text__sens {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  width: max-content;
  max-width: min(440px, calc(100% - 16px));
  padding: 12px 40px 12px 16px;
  border: 3px solid #c9a4ea;
  border-radius: 16px;
  background: #f6edfd;
  box-shadow: 0 10px 24px hsl(270 40% 30% / 0.25);
  font-size: clamp(1.1rem, 2.8vw, 1.35rem);
  line-height: 1.4;
  cursor: pointer;
}
.r2-text__sens-cuvant { color: #8a3fc4; }
.r2-text__sens-x { position: absolute; top: 6px; right: 10px; color: var(--cerneala-slaba); font-size: 1rem; }
.r2-cuvant.r2-cuvant--atins { background: var(--galben); }
.invata__card .r2-text { padding: clamp(10px, 2vw, 22px); }
@media (max-width: 640px) {
  .invata__card:has(.r2-text) { padding: 10px 6px; }
  .r2-text { padding: 10px; }
}
.r2-text__noi { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.r2-text__noi-titlu { margin: 0; font-weight: 800; color: var(--cerneala-slaba); }

/* ---------- piesele din „Învăț” ---------- */
.r2-propozitie { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.32em; max-width: 100%; margin: 0; font-size: clamp(1.8rem, 5.5vw, 3rem); font-weight: 900; color: var(--albastru-inchis); }
.r2-propozitie__semn { margin-left: -0.28em; }
.r2-propozitie--cuvinte .r2-propozitie__cuvant { padding: 0 10px; border: 3px solid var(--albastru); border-radius: 12px; background: #fff; }
.r2-evid { color: var(--rosu); }
.r2-evid--puls { display: inline-block; animation: r2-puls 1.2s ease-in-out 1.4s 3 both; }
@keyframes r2-puls { 50% { transform: scale(1.45); } }

.r2-impreuna { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; max-width: 100%; }
.r2-imagine-mare { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; }
.r2-imagine-mare__text { font-size: 1.3rem; font-weight: 800; }

.r2-semne { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: min(100%, 720px); }
.r2-semne__rand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 8px 16px; border-radius: 16px; background: var(--albastru-pal); }
.r2-semne__text { margin: 0; font-size: clamp(1.4rem, 4vw, 2.2rem); font-weight: 900; }
.r2-semne__semn { display: inline-block; color: var(--rosu); animation: r2-cade 0.7s cubic-bezier(0.3, 1.6, 0.6, 1) var(--intarziere, 0ms) both; }
@keyframes r2-cade { from { opacity: 0; transform: translateY(-70px) scale(2); } }
.r2-semne__eticheta { color: var(--cerneala-slaba); font-size: 1.1rem; font-weight: 800; }

.r2-schema-text { display: flex; flex-direction: column; gap: 10px; width: min(100%, 760px); }
.r2-schema-text__parte { position: relative; padding: 26px 14px 10px; border: 3px solid var(--linie); border-radius: 16px; background: #fffbea; }
.r2-schema-text__parte--titlu { text-align: center; border-color: var(--albastru); background: var(--albastru-pal); }
.r2-schema-text__eticheta { position: absolute; top: -2px; left: 12px; padding: 0 10px; border-radius: 0 0 10px 10px; background: var(--albastru); color: #fff; font-size: 0.9rem; font-weight: 800; }
.r2-schema-text__titlu { font-size: 1.3rem; }
.r2-schema-text__corp { margin: 0; text-indent: 1.6em; font-size: 1.05rem; line-height: 1.5; }
.r2-schema-text__corp--versuri { display: flex; flex-direction: column; text-indent: 0; }

.r2-indemn { margin: 0; color: var(--cerneala-slaba); font-size: 1.2rem; font-weight: 800; text-align: center; }
.r2-indemn--gata { color: var(--verde); font-size: 1.35rem; }

.r2-cartonase { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; width: 100%; }
.r2-cartonas {
  display: grid;
  min-height: 120px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  perspective: 800px;
}
.r2-cartonas__fata, .r2-cartonas__spate {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  padding: 12px;
  border-radius: 18px;
  backface-visibility: hidden;
  transition: transform 0.5s;
}
.r2-cartonas__fata { border: 3px solid #c9a4ea; background: #f6edfd; color: #8a3fc4; font-size: 1.7rem; font-weight: 900; }
.r2-cartonas__spate { border: 3px solid var(--verde); background: var(--verde-pal); font-size: 1.15rem; font-weight: 700; line-height: 1.35; transform: rotateY(180deg); }
.r2-cartonas--intors .r2-cartonas__fata { transform: rotateY(180deg); }
.r2-cartonas--intors .r2-cartonas__spate { transform: rotateY(0); }

.r2-numara { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.r2-numara__cuvant { position: relative; min-height: 64px; padding: 0 18px; border: 3px dashed var(--linie); border-radius: 16px; background: var(--albastru-pal); color: var(--cerneala); font: inherit; font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 900; cursor: pointer; }
.r2-numara__cuvant[data-nr] { border-style: solid; border-color: var(--verde); background: var(--verde-pal); }
.r2-numara__nr { position: absolute; top: -14px; right: -10px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--albastru); color: #fff; font-size: 1rem; animation: r2-intra 0.4s both; }

.r2-ordine-anim { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 10px; border: 3px dashed var(--linie); border-radius: 18px; }
.r2-ordine-anim__cuvant { padding: 6px 16px; border-radius: 14px; background: #ffe2c2; font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 900; }
.r2-ordine-anim--gata { border-color: var(--verde); }
.r2-ordine-anim--gata .r2-ordine-anim__cuvant { background: var(--verde-pal); }
.r2-ordine-anim__semn { margin-left: -6px; padding: 6px 4px; background: none !important; color: var(--rosu); }

.r2-intamplari { display: flex; flex-direction: column; gap: 10px; width: min(100%, 720px); margin: 0; padding: 0; list-style: none; }
.r2-intamplari__pas { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: var(--albastru-pal); font-size: 1.25rem; font-weight: 700; text-align: left; }
.r2-intamplari__nr { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--albastru); color: #fff; font-weight: 900; }

/* ---------- fișa ---------- */
.r2-itemi { display: flex; flex-direction: column; gap: 12px; }
.r2-itemi--alegere, .r2-itemi--intrebari { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.r2-item { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; padding: 12px; border: 2px solid var(--linie); border-radius: 18px; background: var(--card); }
.r2-item--rand { flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
.r2-item__text { margin: 0; font-size: clamp(1.15rem, 2.8vw, 1.35rem); font-weight: 700; line-height: 1.45; text-align: center; }
.r2-item--rand .r2-item__text { text-align: left; flex: 1 1 260px; }
.r2-item__text--mare { font-size: clamp(1.25rem, 3.2vw, 1.6rem); }
.r2-variante { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 4px; border-radius: 14px; }
.r2-optiune--af { min-width: 110px; }
.r2-optiune--semn { min-width: 64px; min-height: 64px; font-size: 2rem; }

.r2-gol { display: inline-block; min-width: 3.2em; margin: 0 4px; padding: 0 6px; border-bottom: 4px solid var(--albastru); border-radius: 6px 6px 0 0; color: var(--cerneala-slaba); text-align: center; }
.r2-gol--plin { color: var(--rosu); font-weight: 900; }
.r2-gol--semn { min-width: 1.4em; margin-left: 2px; }

.r2-asezate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; min-height: 66px; padding: 6px; border: 3px dashed var(--linie); border-radius: 16px; }
.r2-asezata { background: var(--verde-pal); animation: r2-intra 0.3s both; }
.r2-asezate__semn { font-size: 1.6rem; font-weight: 900; color: var(--rosu); }
.r2-item .optiune:disabled { opacity: 0.25; cursor: default; }

.r2-item--silabe { container-type: inline-size; justify-content: center; }
.r2-silabe { --marime: clamp(1.2rem, calc(100cqw / (var(--n, 6) * 1.2)), 2.6rem); display: flex; align-items: stretch; max-width: 100%; padding: 4px; border-radius: 14px; }
/* Rezerva pentru browserele fără unitățile `cq*` (unele table interactive). */
@supports not (width: 1cqw) {
  .r2-silabe { --marime: 1.8rem; }
}
.r2-silabe__litera { display: grid; place-items: center; font-size: var(--marime); font-weight: 900; line-height: 1.4; }
.r2-silabe__loc { flex: none; width: 20px; width: clamp(12px, calc(100cqw / (var(--n, 6) * 2.4)), 30px); min-height: 56px; padding: 0; border: none; border-radius: 8px; background: repeating-linear-gradient(transparent 0 6px, var(--linie) 6px 12px) center / 3px 100% no-repeat; color: var(--rosu); font: inherit; font-size: var(--marime); font-weight: 900; cursor: pointer; }
.r2-silabe__loc:hover { background-color: var(--albastru-pal); }
.r2-silabe__loc[aria-pressed='true'] { background: none; }

.r2-majuscule { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; }
.r2-cuvant-mic { min-height: 54px; padding: 0 14px; border: 3px solid var(--linie); border-radius: 14px; background: var(--albastru-pal); color: var(--cerneala); font: inherit; font-size: clamp(1.3rem, 3.6vw, 1.7rem); font-weight: 800; cursor: pointer; }
.r2-cuvant-mic[aria-pressed='true'] { border-color: var(--albastru); background: #fff; color: var(--rosu); }

.r2-potrivire__el { display: flex; align-items: center; justify-content: center; min-height: 76px; padding: 8px 10px; border: 3px solid var(--linie); border-radius: 16px; background: var(--albastru-pal); color: var(--cerneala); font: inherit; font-size: clamp(1rem, 2.8vw, 1.35rem); font-weight: 800; line-height: 1.25; cursor: pointer; }
.r2-potrivire__el[aria-pressed='true'] { border-color: var(--albastru); box-shadow: 0 0 0 3px var(--albastru) inset; }
.r2-potrivire__continut { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.r2-potrivire__continut .imagine { width: 72px; height: 72px; }

@media (max-width: 640px) {
  .r2-text__alineat { text-indent: 1em; }
  .r2-item { padding: 10px 8px; }
  .r2-scena-img { width: min(100%, 240px); }
  .r2-cartonas { min-height: 100px; }
}

@media (prefers-reduced-motion: reduce) {
  .r2-intra, .r2-apare, .r2-evid--puls, .r2-semne__semn, .r2-numara__nr, .r2-asezata { animation: none; }
  .r2-cartonas__fata, .r2-cartonas__spate, .r2-text__rand { transition: none; }
}

/* ---------- pașii de după citire (pasi-lectura.js) ---------- */
.r2m-item { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(100%, 780px); margin: 0 auto 12px; padding: 12px 16px; border: 3px solid var(--linie); border-radius: 18px; background: #fff; }
.r2m-propozitie { margin: 0; font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 700; text-align: center; }
.r2m-optiuni { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.r2m-cerinta { margin: 0 0 10px; padding: 8px 16px; border-radius: 14px; background: var(--galben); font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 900; text-align: center; }
.r2m-selectiva { display: flex; flex-direction: column; gap: 8px; width: min(100%, 820px); margin: 0 auto; }
.r2m-prop { padding: 10px 14px; border: 3px solid var(--linie); border-radius: 14px; background: #fff; color: var(--cerneala); font: inherit; font-size: clamp(1.1rem, 2.6vw, 1.4rem); text-align: left; cursor: pointer; }
.r2m-prop[data-rezultat="bine"] { border-color: var(--verde); background: var(--verde-pal); }
.r2m-strofa { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 auto 12px; padding: 14px 22px; border-radius: 18px; background: #fffbea; }
.r2m-vers { margin: 0; font-size: clamp(1.3rem, 3.2vw, 1.8rem); font-weight: 700; }
.r2m-gol { color: var(--albastru); letter-spacing: 1px; }

/* /jocuri/romana-clasa-2/jocuri-tipuri.css */
/* ============================================================
   LIMBA ROMÂNĂ, CLASA a II-a — jocurile (jocuri-tipuri.js)
   Toate clasele încep cu r2-. Întârzierile animațiilor vin din
   variabila --intarziere.
   ============================================================ */

.r2-joc { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 1000px; margin: 0 auto; user-select: none; -webkit-user-select: none; }
.r2-cerinta { margin: 0; padding: 10px 16px; border-radius: 16px; background: var(--albastru-pal); font-size: clamp(1.1rem, 2.8vw, 1.4rem); font-weight: 800; line-height: 1.35; text-align: center; }
.r2-puncte { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.r2-punct { width: 18px; height: 18px; border: 3px solid var(--linie); border-radius: 50%; background: #fff; }
.r2-punct--plin { border-color: var(--verde); background: var(--verde); animation: r2-pop 0.4s both; }
@keyframes r2-pop { 50% { transform: scale(1.6); } }

/* ---------- cartonașele ---------- */
.r2-tava { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; width: 100%; min-height: 96px; padding: 12px; border: 3px dashed #f0c96a; border-radius: 20px; background: #fff8e6; }
.r2-piesa {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 64px;
  min-height: 64px;
  padding: 8px 14px;
  border: 3px solid var(--albastru);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 4px 0 var(--linie);
  color: var(--cerneala);
  text-align: center;
  cursor: pointer;
}
.r2-piesa__text { font-size: clamp(1.2rem, 3.4vw, 1.6rem); font-weight: 900; line-height: 1.2; }
.r2-piesa__img.imagine { width: 72px; height: 72px; }
.r2-piesa__img.imagine--emoji { font-size: 52px; }
.r2-piesa--cuvant { min-height: 60px; background: linear-gradient(#fff, #f2f8ff); }
.r2-ales { outline: 5px solid var(--galben); outline-offset: 3px; background: #fffbea; }
.r2-piesa--pusa { min-height: 44px; padding: 4px 10px; box-shadow: none; border-color: var(--verde); cursor: default; animation: r2-pune 0.4s ease-out both; }
.r2-piesa--pusa .r2-piesa__text { font-size: 1.05rem; }
@keyframes r2-pune { from { transform: scale(1.5); opacity: 0.3; } }

/* ---------- trenul ---------- */
.r2-sina {
  position: relative;
  width: 100%;
  min-height: 120px;
  padding: 14px 10px 22px;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(transparent calc(100% - 14px), #8d6e63 calc(100% - 14px) calc(100% - 9px), transparent calc(100% - 9px)), #e8f6ff;
}
.r2-garnitura { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 8px 6px; }
.r2-garnitura--vine { animation: r2-vine 0.9s ease-out both; }
@keyframes r2-vine { from { transform: translateX(110%); } }
.r2-garnitura--pleaca { animation: r2-pleaca 1.2s ease-in both; }
@keyframes r2-pleaca { to { transform: translateX(-115%); } }
.r2-locomotiva { font-size: clamp(2.8rem, 8vw, 4rem); line-height: 1; }
.r2-vagon {
  position: relative;
  display: grid;
  place-items: center;
  min-width: clamp(76px, 15vw, 120px);
  min-height: clamp(56px, 11vw, 74px);
  padding: 0 12px 8px;
  border: 3px dashed #9cc0f0;
  border-radius: 12px 12px 6px 6px;
  background: #fff;
  font-size: clamp(1.2rem, 3.4vw, 1.7rem);
  font-weight: 900;
}
.r2-vagon::before, .r2-vagon::after { content: ''; position: absolute; bottom: -9px; width: 16px; height: 16px; border-radius: 50%; background: #455a64; }
.r2-vagon::before { left: 12px; }
.r2-vagon::after { right: 12px; }
.r2-vagon--plin { border: 3px solid #b35e0f; background: #ffe2c2; animation: r2-pune 0.4s ease-out both; }

/* ---------- cutiile ---------- */
.r2-cutii { display: flex; gap: 12px; width: 100%; }
.r2-cutie {
  --c: var(--albastru); --cp: var(--albastru-pal);
  display: flex; flex: 1 1 0; flex-direction: column; min-width: 0; min-height: 170px; padding: 8px;
  border: 4px solid var(--c); border-top-width: 12px; border-radius: 0 0 22px 22px; background: var(--cp);
}
.r2-cutie--1 { --c: #e0731f; --cp: #fff1e3; }
.r2-cutie--2 { --c: #8e44ad; --cp: #f6ebfb; }
.r2-cutie--3 { --c: #23a05a; --cp: #e3f7ec; }
.r2-cutie__cap { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.r2-cutie__e { font-size: 2.2rem; line-height: 1.1; }
.r2-cutie__nume { font-size: clamp(1rem, 2.6vw, 1.3rem); font-weight: 900; line-height: 1.15; color: var(--c); overflow-wrap: break-word; }
.r2-cutie__continut { display: flex; flex: 1; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 6px; padding-top: 8px; }
.r2-salt { animation: r2-salt 0.45s both; }
@keyframes r2-salt { 40% { transform: scale(1.04) translateY(-4px); } }

/* ---------- pescuitul ---------- */
.r2-lac {
  position: relative;
  width: 100%;
  height: clamp(300px, 50vh, 460px);
  overflow: hidden;
  border-radius: 24px;
  background:
    repeating-linear-gradient(170deg, transparent 0 38px, hsl(200 80% 80% / 0.35) 38px 42px),
    linear-gradient(#7cc7f2, #2f8fd0);
}
/* Peștele pornește din afara lacului, din stânga, și iese prin dreapta
   (sau invers); poziția și deplasarea se schimbă împreună. */
.r2-peste {
  position: absolute;
  left: 0;
  animation: r2-inoata var(--durata, 16s) linear var(--intarziere, 0s) infinite both;
}
.r2-peste--stanga { animation-name: r2-inoata-stanga; }
@keyframes r2-inoata { from { left: 0; transform: translateX(-100%); } to { left: 100%; transform: translateX(0); } }
@keyframes r2-inoata-stanga { from { left: 100%; transform: translateX(0); } to { left: 0; transform: translateX(-100%); } }
/* Spre dreapta: capul (emoji-ul întors) în dreapta. */
.r2-peste__corp {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 2px;
  min-height: 60px;
  padding: 4px 6px 4px 16px;
  border: 3px solid #fff;
  border-radius: 40% 999px 999px 40%;
  background: #ffb347;
  color: var(--cerneala);
  font: inherit;
  cursor: pointer;
  box-shadow: 0 4px 0 hsl(30 70% 40% / 0.5);
}
.r2-peste--stanga .r2-peste__corp { flex-direction: row; padding: 4px 16px 4px 6px; border-radius: 999px 40% 40% 999px; background: #ffd65a; }
.r2-peste__e { font-size: 2.2rem; line-height: 1; transform: scaleX(-1); }
.r2-peste--stanga .r2-peste__e { transform: none; }
.r2-peste__text { font-size: clamp(1.2rem, 3.4vw, 1.6rem); font-weight: 900; white-space: nowrap; }
.r2-peste--prins { animation-play-state: paused; }
.r2-peste--prins .r2-peste__corp { animation: r2-sare 0.7s ease-in both; }
@keyframes r2-sare { 40% { transform: translateY(-40px) rotate(-15deg) scale(1.1); } to { transform: translateY(-160px) scale(0.4); opacity: 0; } }
.r2-galeata { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; min-height: 60px; padding: 6px 14px; border-radius: 18px; background: #eef7ff; }
.r2-galeata__e { font-size: 2.4rem; }
.r2-galeata__cuvant { padding: 4px 12px; border-radius: 12px; background: #ffb347; font-size: 1.2rem; font-weight: 900; }

/* ---------- perechile ---------- */
.r2-memorie { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(84px, 18vw, 170px), 1fr)); gap: clamp(8px, 1.4vw, 14px); width: 100%; }
.r2-carte { display: grid; aspect-ratio: 1; min-height: 84px; padding: 0; border: none; background: none; font: inherit; color: inherit; cursor: pointer; perspective: 800px; }
.r2-carte__spate, .r2-carte__fata {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: 18px;
  backface-visibility: hidden;
  transition: transform 0.45s;
}
.r2-carte__spate { background: linear-gradient(160deg, #4f8ff0, var(--albastru-inchis)); color: #fff; font-size: 2.6rem; font-weight: 900; box-shadow: 0 4px 0 #1a46a3; }
.r2-carte__fata { padding: 6px; border: 3px solid var(--albastru); background: #fff; transform: rotateY(180deg); }
.r2-carte--intoarsa .r2-carte__spate { transform: rotateY(180deg); }
.r2-carte--intoarsa .r2-carte__fata { transform: rotateY(0); }
.r2-carte--gasita .r2-carte__fata { border-color: var(--verde); background: var(--verde-pal); animation: r2-salt 0.5s both; }
.r2-carte__continut { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.r2-carte__continut .imagine { width: clamp(56px, 12vw, 110px); height: clamp(56px, 12vw, 110px); }
.r2-carte__continut .r2-piesa__text { font-size: clamp(1rem, 3vw, 1.5rem); }
.r2-carte__continut .imagine--emoji { font-size: clamp(46px, 9vw, 80px); }

/* ---------- baloanele ---------- */
.r2-baloane { width: 100%; --latime-balon: clamp(84px, 14vw, 124px); }
.r2-baloane .balon { height: calc(var(--latime-balon) * 1.2); font-size: clamp(1.2rem, 3.6vw, 1.9rem); }
.r2-casute { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 70px; }
.r2-casuta { display: grid; place-items: center; min-width: clamp(70px, 14vw, 110px); height: 66px; padding: 0 10px; border: 3px dashed #9cc0f0; border-radius: 14px; background: #fff; font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 900; }
.r2-casuta--plina { border-style: solid; border-color: var(--albastru); background: var(--albastru-deschis); animation: r2-pune 0.35s both; }
.r2-casute--gata .r2-casuta { border-color: var(--verde); background: var(--verde-pal); }

/* ---------- propoziția mare (completează, semnul) ---------- */
.r2-prop-mare { margin: 0; padding: 14px 18px; border-radius: 20px; background: #fffbea; border: 2px solid #f1dc8f; font-size: clamp(1.5rem, 4.4vw, 2.4rem); font-weight: 900; line-height: 1.5; text-align: center; }
.r2-prop-mare--gata { border-color: var(--verde); background: var(--verde-pal); }
.r2-gol--tinta { min-width: 3.6em; min-height: 1.3em; border: 3px dashed var(--albastru); border-radius: 12px; vertical-align: middle; line-height: 1.2; }
.r2-gol--semn.r2-gol--tinta { min-width: 1.6em; }
.r2-gol--plin.r2-gol--tinta { border-style: solid; border-color: var(--verde); background: #fff; animation: r2-pune 0.4s both; }
.r2-gol--semn-pus { font-size: 1.3em; }
.r2-semne-joc { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.r2-semn-mare {
  width: clamp(84px, 16vw, 120px);
  height: clamp(84px, 16vw, 120px);
  border: none;
  border-radius: 24px;
  background: linear-gradient(160deg, #ff8a8a, #d62828);
  color: #fff;
  font: inherit;
  font-size: clamp(3rem, 9vw, 4.4rem);
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 6px 0 #8e1414;
  cursor: pointer;
}
.r2-semn-mare:nth-child(2) { background: linear-gradient(160deg, #4f8ff0, var(--albastru-inchis)); box-shadow: 0 6px 0 #1a46a3; }
.r2-semn-mare:nth-child(3) { background: linear-gradient(160deg, #3fc07a, var(--verde)); box-shadow: 0 6px 0 #17783f; }
.r2-semn-mare:active { transform: translateY(4px); }

@media (max-width: 640px) {
  .r2-semne-joc { gap: 12px; }
  .r2-semn-mare { width: 76px; height: 76px; }
  .r2-piesa__text { font-size: 1.15rem; }
  .r2-joc--cutii .r2-tava { min-height: 70px; }
  .r2-cutii { gap: 6px; }
  .r2-cutie { padding: 4px; }
  .r2-tava { padding: 8px; gap: 8px; }
  .r2-piesa { padding: 6px 10px; }
  .r2-peste__corp { min-height: 50px; }
  .r2-peste__e { font-size: 1.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .r2-garnitura--vine, .r2-garnitura--pleaca, .r2-vagon--plin, .r2-piesa--pusa, .r2-salt, .r2-punct--plin,
  .r2-casuta--plina, .r2-gol--plin.r2-gol--tinta, .r2-carte--gasita .r2-carte__fata, .r2-peste--prins .r2-peste__corp { animation: none; }
  .r2-garnitura--pleaca { visibility: hidden; }
  .r2-peste { animation-duration: 60s; }
  .r2-carte__spate, .r2-carte__fata { transition: none; }
}

/* /jocuri/matematica-clasa-2/mate2.css */
/* ============================================================
   MATEMATICĂ, CLASA a II-a — aspectul desenelor
   ============================================================
   Restul aspectului e comun (../clasa-i-comun/clasa-i.css,
   ../matematica-clasa-1/matematica.css). Toate clasele de aici încep
   cu m2-. Codul de culori al ordinelor: sutele albastre, zecile verzi,
   unitățile portocalii. Momentul mișcărilor vine din JS, în --t și --t2.
   Totul e mare, pentru tabla interactivă.
   ============================================================ */

:root, .mate2 {
  --m2-s: #2f6fde;
  --m2-s-inchis: #1d4fb8;
  --m2-z: #1f9a52;
  --m2-z-inchis: #0f6a36;
  --m2-u: #e07b12;
  --m2-u-inchis: #a85600;
  --m2-l: clamp(52px, 7.6vw, 124px);
}
.mate2 .casuta { width: 3.3em; }
.invata__propozitie { display: block; }

/* ---------- mișcările ---------- */
@keyframes m2-apare { from { opacity: 0; transform: scale(0.4); } }
@keyframes m2-intra { from { opacity: 0; transform: translateY(16px); } }
@keyframes m2-ridica { from { opacity: 0; transform: translateY(40px); } }
@keyframes m2-dispare { to { opacity: 0; transform: scale(0.3); } }
@keyframes m2-deseneaza { to { stroke-dashoffset: 0; } }
@keyframes m2-pop { 0% { transform: scale(0.2); } 70% { transform: scale(1.15); } }
@keyframes m2-strange { to { transform: translateX(calc(var(--m2-l) * -0.6)) scale(0.6); opacity: 0.15; } }
@keyframes m2-lipeste { to { gap: 0; } }
@keyframes m2-egal { to { background: #eef1f6; color: #7a869c; } }
@keyframes m2-decide { to { background: #e3f7ec; box-shadow: inset 0 0 0 4px var(--verde); } }
@keyframes m2-tremura { 0%, 100% { transform: none; } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
@keyframes m2-stropi { 0% { opacity: 0; transform: translate(0, 0) scale(0.5); } 15% { opacity: 1; } 100% { opacity: 0.9; transform: translate(var(--dist), var(--dy)) scale(1); } }

.m2-intra { animation: m2-intra 0.45s ease-out var(--t, 0s) both; }
.m2-apare { animation: m2-apare 0.35s ease-out var(--t, 0s) both; }
.m2-ridica { animation: m2-ridica 0.5s ease-out var(--t, 0s) both; }
.m2-svg-apare { transform-box: fill-box; transform-origin: center; animation: m2-apare 0.4s ease-out var(--t, 0s) both; }

/* ---------- cifrele colorate ---------- */
.m2-numar { display: inline-flex; font-weight: 900; letter-spacing: 0.03em; line-height: 1.1; }
.m2-numar--mare { font-size: clamp(2.4rem, 6.4vw, 3.8rem); }
.m2-c--s { color: var(--m2-s); }
.m2-c--z { color: var(--m2-z); }
.m2-c--u { color: var(--m2-u); }
.m2-c--m { color: #8e44ad; }
.m2-c--ales { padding: 0 0.08em; border-radius: 10px; background: var(--galben); }
.m2-text-citit { color: var(--cerneala); font-size: clamp(1.3rem, 3.4vw, 2rem); font-weight: 800; text-align: center; }
.m2-numar-cu-text { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.m2-randuri { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.m2-randuri .text-mare { font-size: clamp(1.6rem, 5vw, 2.6rem); }

/* ---------- blocurile: placa (o sută), bara (o zece), cubul (o unitate) ---------- */
.m2-bl { display: inline-block; flex: none; box-sizing: border-box; }
/* Ca blocurile de plastic adevărate: fiecare cub are o muchie luminată
   (sus-stânga) și una în umbră; tot blocul are lumina din stânga sus și
   o umbră pe masă. Mărimile nu se schimbă (umbra nu ocupă loc). */
.m2-bl--suta {
  width: var(--m2-l); height: var(--m2-l);
  border: 2px solid var(--m2-s-inchis); border-radius: 3px;
  background-color: #7fb0ff;
  background-image:
    linear-gradient(var(--m2-s-inchis) 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--m2-s-inchis) 1.5px, transparent 1.5px),
    linear-gradient(rgba(255, 255, 255, 0.55) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.55) 1.5px, transparent 1.5px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 50%, rgba(10, 40, 110, 0.22));
  background-size: calc(var(--m2-l) / 10) calc(var(--m2-l) / 10), calc(var(--m2-l) / 10) calc(var(--m2-l) / 10), calc(var(--m2-l) / 10) calc(var(--m2-l) / 10), calc(var(--m2-l) / 10) calc(var(--m2-l) / 10), 100% 100%;
  background-position: -1px -1px, -1px -1px, 0.5px 0.5px, 0.5px 0.5px, 0 0;
  box-shadow: 2px 3px 4px rgba(18, 36, 90, 0.28), inset -1px -1px 0 rgba(10, 40, 110, 0.35);
}
.m2-bl--zece {
  width: calc(var(--m2-l) / 10 + 2px); height: var(--m2-l);
  border: 2px solid var(--m2-z-inchis); border-radius: 3px;
  background-color: #4cc782;
  background-image:
    linear-gradient(var(--m2-z-inchis) 1.5px, transparent 1.5px),
    linear-gradient(rgba(255, 255, 255, 0.55) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 45%, rgba(5, 60, 30, 0.25));
  background-size: 100% calc(var(--m2-l) / 10), 100% calc(var(--m2-l) / 10), 100% 100%;
  background-position: 0 -1px, 0 0.5px, 0 0;
  box-shadow: 2px 3px 4px rgba(18, 36, 90, 0.28);
}
.m2-bl--unit {
  width: calc(var(--m2-l) / 10 + 2px); height: calc(var(--m2-l) / 10 + 2px);
  border: 2px solid var(--m2-u-inchis); border-radius: 3px;
  background: linear-gradient(135deg, #ffd59a, #ffb54d 50%, #e08a1a);
  box-shadow: 1px 2px 3px rgba(18, 36, 90, 0.3), inset 1px 1px 0 rgba(255, 255, 255, 0.55);
}
/* Blocurile din „Învăț” apar unul câte unul (--t). */
.m2-formare .m2-bl, .m2-unire .m2-bl, .m2-sute .m2-bl { animation: m2-apare 0.3s ease-out var(--t, 0s) both; }
.m2-bl--nou { animation: m2-pop 0.35s ease-out both; }
.m2-bl--strange { animation: m2-strange 0.8s ease-in both; }

.m2-blocuri { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 12px; }
.m2-blocuri--rand { align-items: flex-end; gap: 18px; }
.m2-blocuri--mie { gap: 4px; }
.m2-col { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: calc(var(--m2-l) * 0.9); padding: 8px 10px 10px; border: 3px solid var(--linie); border-radius: 18px; background: #fff; }
.m2-col--s { border-color: #b8d0fa; }
.m2-col--z { border-color: #b5e6c8; }
.m2-col--u { border-color: #ffd7a8; }
.m2-col__cap { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; color: #fff; font-size: 1.3rem; font-weight: 900; }
.m2-col--s .m2-col__cap { background: var(--m2-s); }
.m2-col--z .m2-col__cap { background: var(--m2-z); }
.m2-col--u .m2-col__cap { background: var(--m2-u); }
.m2-col__blocuri { display: flex; flex-wrap: wrap; align-content: flex-end; justify-content: center; gap: 5px; flex: 1; min-height: var(--m2-l); }
.m2-col__blocuri--s { max-width: calc(var(--m2-l) * 3 + 12px); }
.m2-col__blocuri--z { max-width: calc((var(--m2-l) / 10 + 7px) * 5); }
.m2-col__blocuri--u { max-width: calc((var(--m2-l) / 10 + 7px) * 5); align-content: flex-end; }
.m2-blocuri--rand .m2-col__blocuri { flex: none; min-height: 0; align-items: flex-end; }
.m2-col__cifra { font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; line-height: 1; }
.m2-col__butoane { display: flex; gap: 6px; }
.m2-gol { padding: 6px 10px; border: 3px dashed #9aa9c4; border-radius: 12px; color: var(--cerneala-slaba); font-size: 1.1rem; font-weight: 800; align-self: center; }
.item .m2-blocuri { --m2-l: clamp(48px, 6.4vw, 96px); }

/* ---------- construirea numărului ---------- */
.m2-construieste { gap: 12px; }
.m2-blocuri--interactiv .m2-col { min-width: calc(var(--m2-l) * 1.05); }
.m2-blocuri--interactiv .m2-col--s { min-width: calc(var(--m2-l) * 3 + 36px); }
.m2-buton-ordin { min-height: 54px; padding: 8px 14px; font-size: 1.1rem; }
.m2-buton-ordin--s { background: var(--m2-s); }
.m2-buton-ordin--z { background: var(--m2-z); }
.m2-buton-ordin--u { background: var(--m2-u); }
.m2-buton-minus { min-width: 54px; min-height: 54px; padding: 0; font-size: 1.6rem; }
.m2-construieste__numar { min-height: 1.2em; }
.m2-construieste__desc { font-size: clamp(1.15rem, 3vw, 1.7rem); }
.m2-construieste__citit { margin: 0; font-size: clamp(1.2rem, 3.2vw, 1.8rem); font-weight: 800; text-align: center; }
.m2-tinta { margin: 0; padding: 8px 18px; border-radius: 16px; background: var(--galben); font-size: clamp(1.3rem, 3.4vw, 1.9rem); font-weight: 900; text-align: center; }
.m2-indicatie { margin: 0; color: var(--cerneala-slaba); font-size: 1.2rem; font-weight: 700; text-align: center; }

/* ---------- unirea: 10 bucăți fac una mai mare ---------- */
.m2-unire { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; }
.m2-unire__grup { display: flex; gap: 10px; animation: m2-lipeste 0.8s ease-in-out var(--t2, 99s) both; }
.m2-unire__grup--cuburi { gap: 12px; }
/* 10 unități → o zece: blocurile mai mari decât în tabel, ca fiecare cub
   să se vadă; cuburile stau unul peste altul, ca bara de alături. */
.m2-unire--cuburi { --m2-l: clamp(170px, 26vw, 260px); }
.m2-unire--cuburi .m2-unire__grup--cuburi { flex-direction: column-reverse; gap: 6px; }
.m2-unire__grup--placi { flex-wrap: wrap; max-width: calc(var(--m2-l) * 5.4); gap: 8px; --m2-l: clamp(46px, 6vw, 84px); }
.m2-unire__rez { display: flex; align-items: center; gap: 14px; animation: m2-apare 0.45s ease-out var(--t, 0s) both; }
.m2-unire__egal { font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 900; }
.m2-unire .text-mare { flex-basis: 100%; text-align: center; }
.m2-mie { padding: 10px 20px; border: 4px solid #8e44ad; border-radius: 18px; background: #f5ecfb; color: #6c2f8a; font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 900; }

.m2-sute { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.m2-sute__rand { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; --m2-l: clamp(42px, 5.4vw, 78px); }
.m2-sute__una { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.m2-sute__nr { color: var(--m2-s-inchis); font-size: clamp(1.1rem, 2.6vw, 1.6rem); font-weight: 900; animation: m2-apare 0.3s var(--t, 0s) both; }

.m2-formare { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }

/* ---------- numărul citit pe ordine ---------- */
.m2-litere { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.m2-litere__rand { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 22px; }
.m2-litere__col { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 110px; padding: 10px 14px; border-radius: 18px; background: var(--albastru-pal); }
.m2-litere__cifra { font-size: clamp(2.6rem, 7vw, 4rem); font-weight: 900; line-height: 1; }
.m2-litere__text { font-size: clamp(1.2rem, 3.2vw, 1.8rem); font-weight: 900; }

/* ---------- numărătoarea de poziționare ---------- */
.m2-abac__cadru { display: inline-flex; flex-direction: column; align-items: stretch; padding: 10px 16px 0; border-radius: 18px; background: #fff7ea; }
.m2-abac { display: flex; justify-content: center; gap: clamp(14px, 3vw, 34px); }
.m2-abac__baza { height: 16px; margin: 0 -10px; border-radius: 8px; background: #8a6a3d; }
.m2-tija { display: flex; flex-direction: column-reverse; align-items: center; }
.m2-tija__bat { position: relative; display: flex; justify-content: center; width: 70px; height: clamp(170px, 21vh, 220px); }
.m2-tija__bat::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 9px; border-radius: 5px; background: #8a6a3d; transform: translateX(-50%); }
.m2-tija__bile { position: relative; display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; height: 100%; }
.m2-tija__cap { order: -1; margin-top: 4px; font-size: 1.6rem; font-weight: 900; }
.m2-tija--s .m2-tija__cap { color: var(--m2-s); }
.m2-tija--z .m2-tija__cap { color: var(--m2-z); }
.m2-tija--u .m2-tija__cap { color: var(--m2-u); }
.m2-bila { width: 52px; height: 21px; border-radius: 50%; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.2); }
.m2-bila--s { background: radial-gradient(circle at 40% 30%, #a9c8ff, var(--m2-s) 70%); }
.m2-bila--z { background: radial-gradient(circle at 40% 30%, #9fe6bc, var(--m2-z) 70%); }
.m2-bila--u { background: radial-gradient(circle at 40% 30%, #ffd09a, var(--m2-u) 70%); }
.m2-bila--noua { animation: m2-pop 0.35s ease-out both; }
.m2-bila--pleaca { animation: m2-dispare 0.9s ease-in both; }
.m2-abac--interactiv .m2-tija { cursor: pointer; }
.m2-abac--interactiv .m2-tija:active .m2-tija__bat::before { background: #b58a52; }
.m2-abac__butoane { display: flex; justify-content: center; gap: clamp(14px, 3vw, 34px); }
.item .m2-tija__bat { height: 200px; width: 60px; }
.item .m2-bila { width: 46px; height: 19px; }

/* ---------- tabelul S | Z | U ---------- */
.m2-tabel { border-collapse: separate; border-spacing: 6px; margin: 0 auto; }
.m2-tabel th, .m2-tabel td { min-width: clamp(52px, 7vw, 78px); height: clamp(52px, 7vw, 72px); border-radius: 14px; background: #fff; font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 900; text-align: center; box-shadow: inset 0 0 0 3px var(--linie); }
.m2-tabel th { height: auto; padding: 4px; color: #fff; font-size: 1.5rem; box-shadow: none; }
.m2-tabel th.m2-c--s { background: var(--m2-s); }
.m2-tabel th.m2-c--z { background: var(--m2-z); }
.m2-tabel th.m2-c--u { background: var(--m2-u); }
.m2-cel--egal { animation: m2-egal 0.4s var(--t, 0s) both; }
.m2-cel--decide { animation: m2-decide 0.4s var(--t, 0s) both; }
.m2-tabel__verdict td { height: auto; background: none; box-shadow: none; font-size: clamp(1.1rem, 3vw, 1.6rem); }
.m2-verdict { display: inline-block; padding: 2px 10px; border-radius: 10px; animation: m2-intra 0.4s var(--t, 0s) both; }
.m2-verdict--egal { color: #7a869c; }
.m2-verdict--decide { background: var(--verde-pal); color: var(--verde); }
.m2-compara { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.m2-compara__numere { display: flex; gap: clamp(40px, 8vw, 120px); }

/* ---------- axa ---------- */
.m2-axa { width: min(100%, 860px); margin: 0 auto; }
.m2-axa svg { display: block; width: 100%; height: auto; }
.m2-zoom, .m2-rotunjire { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.m2-bila-deal { transform-box: view-box; }

/* ---------- șirul de cartonașe ---------- */
.m2-sir { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.m2-sir__carte { min-width: 84px; padding: 10px 14px; border: 3px solid var(--linie); border-radius: 16px; background: #fff; font-size: clamp(1.6rem, 4.6vw, 2.4rem); font-weight: 900; text-align: center; }
.m2-sir__carte--gol { border-style: dashed; border-color: var(--albastru); color: var(--albastru); }

/* ---------- calculul în trepte ---------- */
.m2-trepte { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(26px, 5vw, 44px); margin: 0 auto; padding: 6px 10px 10px; font-size: clamp(1.5rem, 5vw, 2.7rem); font-weight: 900; }
.m2-trepte__rand { display: flex; align-items: baseline; gap: 0.32em; white-space: nowrap; animation: m2-intra 0.45s ease-out var(--t, 0s) both; }
.m2-trepte__rand--final { padding-top: 4px; border-top: 4px solid var(--cerneala); }
.m2-trepte__cap { color: var(--cerneala); }
.m2-trepte__cap--umbra { visibility: hidden; }
.m2-trepte__eticheta { font-size: 0.6em; font-weight: 800; }
.m2-tok--a { color: var(--m2-z); }
.m2-tok--p0 { color: var(--rosu); }
.m2-tok--p1 { color: var(--m2-s); }
.m2-tok--op, .m2-tok--eg, .m2-tok--rez { color: var(--cerneala); }
.m2-trepte__linii { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.m2-trepte__linie { fill: none; stroke: var(--cerneala); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: m2-deseneaza 0.5s ease-out var(--t, 0s) both; }

/* ---------- sortarea ---------- */
.m2-sortare__cutii { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.m2-sortare__cutie { display: flex; flex-direction: column; gap: 8px; min-width: 220px; padding: 10px; border: 3px solid var(--linie); border-radius: 18px; background: #fff; }
.m2-sortare__nume { font-size: 1.4rem; font-weight: 900; text-align: center; }
.m2-sortare__loc { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 60px; }
.m2-sortare__ob { padding: 6px 12px; border-radius: 12px; background: var(--albastru-pal); font-size: 1.6rem; font-weight: 900; }

/* ---------- galeria de cartonașe ---------- */
.m2-galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(120px, 15vw, 180px), 1fr)); gap: 12px; width: 100%; }
.m2-galerie__carte { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border: 3px solid var(--linie); border-radius: 18px; background: #fff; }
.m2-galerie__img { width: clamp(56px, 7vw, 96px); height: clamp(56px, 7vw, 96px); object-fit: contain; }
.m2-galerie__img.imagine--emoji { display: grid; place-items: center; font-size: clamp(2.6rem, 5.6vw, 4.2rem); line-height: 1; }
.m2-galerie__text { font-size: clamp(1.1rem, 2.6vw, 1.5rem); font-weight: 800; text-align: center; }

/* ---------- piramida alimentelor ---------- */
.m2-piramida { display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(100%, 820px); margin: 0 auto; }
.m2-piramida__etaj { display: flex; flex-direction: column; align-items: center; gap: 4px; width: var(--latime); padding: 10px 9%; clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%); cursor: pointer; }
.m2-piramida__etaj--0 { background: #ffe2a8; }
.m2-piramida__etaj--1 { background: #c8f0c3; }
.m2-piramida__etaj--2 { background: #cfe3ff; }
.m2-piramida__etaj--3 { padding: 10px 14%; background: #ffd0d0; clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.m2-piramida__etaj--ales { outline: 5px solid var(--galben); outline-offset: -5px; }
.m2-piramida__ob { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.m2-piramida__img { width: clamp(40px, 4.8vw, 60px); height: clamp(40px, 4.8vw, 60px); object-fit: contain; }
.m2-piramida__img.imagine--emoji { display: grid; place-items: center; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1; }
.m2-piramida__nume { font-size: clamp(1.05rem, 2.6vw, 1.45rem); font-weight: 900; text-align: center; }

/* ---------- spălarea mâinilor ---------- */
.m2-spalare { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.m2-spalare__mana { position: relative; width: clamp(160px, 20vw, 210px); height: clamp(160px, 20vw, 210px); }
.m2-spalare__e { display: block; font-size: clamp(130px, 17vw, 176px); line-height: 1; text-align: center; }
.m2-microb { position: absolute; font-size: clamp(22px, 3vw, 34px); animation: m2-dispare 0.6s ease-in var(--t2, 99s) both; }
.m2-spuma { position: absolute; font-size: clamp(26px, 3.4vw, 40px); animation: m2-apare 0.4s ease-out var(--t, 0s) both; }
.m2-spuma__e { display: inline-block; animation: m2-dispare 0.5s ease-in var(--t2, 99s) both; }
.m2-picatura { position: absolute; font-size: clamp(22px, 3vw, 34px); animation: m2-intra 0.6s ease-in var(--t, 0s) both; }
.m2-spalare__etape { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.m2-spalare__etapa { display: flex; flex-direction: column; align-items: center; min-width: 92px; padding: 8px 10px; border-radius: 14px; background: var(--albastru-pal); font-size: 1.15rem; font-weight: 800; }
.m2-spalare__etapa-e { font-size: 2.2rem; }

/* ---------- strănutul ---------- */
.m2-stranut { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.m2-stranut__scena { position: relative; display: flex; align-items: center; justify-content: space-between; width: min(100%, 600px); height: clamp(110px, 16vw, 160px); font-size: clamp(56px, 8vw, 84px); }
.m2-stranut__copil { line-height: 1; }
.m2-stranut__servetel { position: absolute; left: clamp(70px, 11vw, 112px); top: 50%; font-size: 0.6em; transform: translateY(-50%); }
.m2-stropi { position: absolute; left: clamp(70px, 11vw, 112px); top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #5aa9e6; animation: m2-stropi 1s ease-out var(--t, 0s) both; }
.m2-stranut__colegi { display: flex; gap: 6px; line-height: 1; }
.m2-stranut__colegi--atinsi { animation: m2-tremura 0.5s ease-in-out var(--t, 0s) 2; }

/* ---------- valoarea cifrei ---------- */
.m2-valoare__cifre { display: flex; gap: 14px; }
.m2-valoare__cifra { min-width: 80px; min-height: 92px; border: 4px solid var(--linie); border-radius: 20px; background: #fff; font-size: clamp(2.6rem, 7vw, 4rem); font-weight: 900; cursor: pointer; }
.m2-valoare__cifra[aria-pressed='true'] { border-color: var(--galben); background: #fff8dc; }
.m2-valoare__blocuri { display: flex; justify-content: center; min-height: calc(var(--m2-l) + 10px); }
.m2-valoare__grup { flex: none; max-width: none; }
.m2-valoare__grup .m2-bl { animation: m2-pop 0.35s ease-out both; }

/* ---------- rotunjirea, aleasă ---------- */
.m2-rotunjeste__desen { width: 100%; }
.m2-optiune-mare { min-width: 120px; min-height: 64px; font-size: 2rem; font-weight: 900; }

/* ---------- ordinea ---------- */
.m2-in-ordine__casute { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.m2-in-ordine__casuta { display: grid; place-items: center; min-width: 84px; min-height: 60px; border: 3px dashed var(--albastru); border-radius: 16px; font-size: 2rem; font-weight: 900; }
.m2-in-ordine__casuta--plina { border-style: solid; border-color: var(--verde); background: var(--verde-pal); animation: m2-pop 0.35s ease-out both; }
.m2-in-ordine__piese { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.m2-in-ordine__piesa { min-width: 84px; min-height: 60px; padding: 6px 12px; border: 3px solid var(--albastru); border-radius: 16px; background: #fff; color: var(--albastru-inchis); font-size: 2rem; font-weight: 900; cursor: pointer; }
.m2-in-ordine__piesa:disabled { opacity: 0.25; }
.m2-in-ordine__piesa--text { font-size: clamp(1.1rem, 2.6vw, 1.5rem); text-align: left; }
.m2-in-ordine__lista { display: flex; flex-direction: column; gap: 6px; width: min(100%, 640px); margin: 0; padding-left: 2em; font-size: clamp(1.1rem, 2.6vw, 1.5rem); font-weight: 800; }
.m2-in-ordine__pas { padding: 6px 10px; border-radius: 12px; background: var(--verde-pal); animation: m2-intra 0.35s ease-out both; }

/* ---------- jocurile ---------- */
.m2-joc__cerinta { margin: 0; font-size: clamp(1.4rem, 4vw, 2.2rem); font-weight: 900; text-align: center; }
.m2-joc__progres { margin: 0; color: var(--cerneala-slaba); font-size: 1.1rem; font-weight: 800; text-align: center; }
.m2-joc-construieste, .m2-joc-axa, .m2-joc-cosuri { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }

.m2-axa-joc { position: relative; width: calc(100% - 80px); height: 150px; margin: 10px 40px; }
.m2-axa-joc__linie { position: absolute; top: 60px; left: -20px; right: -30px; height: 5px; border-radius: 3px; background: var(--cerneala); }
.m2-axa-joc__linie::after { content: ''; position: absolute; right: -6px; top: -8px; border: 10px solid transparent; border-left: 14px solid var(--cerneala); }
.m2-axa-joc__semn { position: absolute; top: 44px; width: 0; }
.m2-axa-joc__semn::before { content: ''; position: absolute; left: -2px; top: 0; width: 4px; height: 36px; border-radius: 2px; background: var(--cerneala); }
.m2-axa-joc__nr { position: absolute; top: 44px; left: 0; transform: translateX(-50%); font-size: 1.4rem; font-weight: 900; white-space: nowrap; }
.m2-axa-joc__buton { position: absolute; top: 44px; left: 0; min-width: 66px; height: 56px; padding: 0 6px; border: 3px solid var(--albastru); border-radius: 14px; background: #fff; color: var(--albastru); font-size: 1.4rem; font-weight: 900; transform: translateX(-50%); cursor: pointer; }
.m2-axa-joc__buton[data-rezultat='bine'] { border-color: var(--verde); background: var(--verde-pal); color: var(--verde); }

.m2-joc-cosuri__minge { display: grid; place-items: center; min-width: 116px; min-height: 116px; padding: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd09a, var(--portocaliu) 70%); color: #fff; font-size: 2.6rem; font-weight: 900; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); transition: transform 0.9s ease-in, opacity 0.9s ease-in; }
.m2-joc-cosuri__minge--stanga { transform: translate(-30vw, 120px) scale(0.5); opacity: 0; }
.m2-joc-cosuri__minge--dreapta { transform: translate(30vw, 120px) scale(0.5); opacity: 0; }
.m2-joc-cosuri__rand { display: flex; justify-content: space-between; gap: 40px; width: min(100%, 720px); }
.m2-cos { display: flex; flex-direction: column; align-items: center; min-width: 170px; padding: 10px 16px; border: 4px solid var(--linie); border-radius: 22px; background: #fff; cursor: pointer; }
.m2-cos__e { font-size: 5rem; line-height: 1; }
.m2-cos__nr { font-size: 2.4rem; font-weight: 900; }

.m2-tabel-sute { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; width: 100%; }
.m2-tabel-sute__carte { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px; border-radius: 14px; background: var(--albastru-pal); font-size: clamp(1.1rem, 2.4vw, 1.4rem); font-weight: 800; }
.m2-tabel-sute__carte b { color: var(--m2-s-inchis); font-size: 1.8em; }

.m2-grup__stiinte { margin: -6px 0 10px; color: var(--cerneala-slaba); font-size: 1.05rem; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .mate2 [class*='m2-'] { animation-duration: 0.01s !important; animation-delay: 0s !important; transition: none !important; }
}
.m2-piramida__etaj--3 .m2-piramida__ob { flex-wrap: nowrap; }

/* Pe telefon, coloanele S | Z | U rămân pe un rând. */
@media (max-width: 640px) {
  .mate2 { --m2-l: 44px; }
  .m2-blocuri { gap: 6px; flex-wrap: nowrap; }
  .m2-col { min-width: 0; padding: 6px 4px 8px; }
  .m2-blocuri--interactiv .m2-col, .m2-blocuri--interactiv .m2-col--s { min-width: 0; flex: 1; }
  .m2-col__butoane { flex-direction: column; }
  .m2-buton-ordin { min-height: 46px; padding: 6px 8px; font-size: 0.9rem; }
  .m2-buton-minus { min-width: 46px; min-height: 40px; }
}

/* ============================================================
   UNITATEA 2 — adunarea și scăderea, Pământul
   ============================================================ */
@keyframes m2-taie { from { background-size: 0 4px; } to { background-size: 100% 4px; } }
@keyframes m2-activ { to { background: var(--galben); } }
@keyframes m2-scos { to { opacity: 0; transform: translateY(-30px) scale(0.6); } }
@keyframes m2-desface { 0%, 100% { transform: none; } 30% { transform: scale(1.15) rotate(-6deg); } 60% { transform: scale(1.15) rotate(6deg); opacity: 0.6; } }

/* ---------- calculul în coloană ---------- */
.m2-col3-cadru { display: flex; justify-content: center; }
.m2-col3 { border-collapse: separate; border-spacing: 4px 0; font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 900; line-height: 1.15; }
.m2-col3 td { min-width: 1.2em; text-align: center; }
.m2-col3__cap td { padding: 2px 0; border-radius: 8px; font-size: 0.5em; }
.m2-col3__activ { animation: m2-activ 0.4s var(--t, 0s) both; }
.m2-col3__mic td { height: 0.8em; font-size: 0.48em; line-height: 1; vertical-align: bottom; }
.m2-col3__deasupra { position: relative; color: var(--rosu); }
.m2-col3__tinut { display: inline-block; color: var(--rosu); }
.m2-col3__nou { display: inline-block; color: var(--rosu); }
.m2-col3__nou + .m2-col3__nou { margin-left: -1.2em; }
.m2-col3__nou-v { display: inline-block; animation: m2-dispare 0.3s var(--t2, 99s) both; }
.m2-col3__taiat { background: linear-gradient(var(--rosu), var(--rosu)) no-repeat center / 0 4px; animation: m2-taie 0.4s ease-out var(--t, 0s) both; }
.m2-col3__semn { color: var(--cerneala); }
.m2-col3__linie td { height: 0; border-top: 4px solid var(--cerneala); }
.m2-col3__linie td:first-child { border-top: none; }
.m2-col3__rez td { padding-top: 2px; }
.m2-randuri--stanga { align-items: flex-start; }
.item .m2-col3 { font-size: clamp(1.4rem, 3.4vw, 2rem); }

/* ---------- adunarea și scăderea cu blocuri, pas cu pas ---------- */
.m2-pas__rand { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 30px; width: 100%; }
.m2-pas__scris { min-width: 200px; }
.m2-pas__scadem { font-size: 0.75em; font-weight: 800; }
.m2-pas__plus { font-size: 1.6rem; font-weight: 900; color: var(--cerneala-slaba); line-height: 1; }
.m2-blocuri--pas .m2-col { min-width: calc(var(--m2-l) * 1.05); }
.m2-blocuri--pas .m2-col--s { min-width: calc(var(--m2-l) * 3 + 36px); }
.m2-blocuri--pas .m2-col__blocuri { flex: none; min-height: calc(var(--m2-l) * 0.5); }
.m2-blocuri--pas .m2-col__cap + .m2-col__blocuri { margin-top: auto; }
.m2-col__blocuri--al2:empty { min-height: 0; }
.m2-bl--al2 { opacity: 0.9; filter: saturate(0.55) brightness(1.12); border-style: dashed; }
.m2-bl--scos { animation: m2-scos 0.7s ease-in both; }
.m2-bl--desface { animation: m2-desface 0.9s ease-in-out both; }
.m2-pas__mesaj { min-height: 2.6em; color: var(--albastru-inchis); font-size: clamp(1.1rem, 2.6vw, 1.45rem); }

/* ---------- cântarul ---------- */
.m2-cantar { gap: 6px; }
.m2-cantar__brat { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; width: min(100%, 720px); padding: 0 10px 8px; border-bottom: 8px solid #8a6a3d; border-radius: 4px; transform: rotate(var(--unghi, 0deg)); transition: transform 0.5s ease-out; }
.m2-cantar__pivot { position: absolute; left: 50%; bottom: -36px; width: 0; height: 0; border: 22px solid transparent; border-bottom: 30px solid #8a6a3d; transform: translateX(-50%); }
.m2-cantar__picior { width: 18px; height: 40px; border-radius: 0 0 6px 6px; background: #8a6a3d; }
.m2-cantar__taler { display: flex; flex-wrap: wrap; align-content: flex-end; justify-content: center; gap: 4px; width: 46%; min-height: 110px; padding: 8px; border: 3px solid #c9a46b; border-bottom: none; border-radius: 22px 22px 0 0; background: #fff7ea; }
.m2-cantar__cunoscut { display: grid; place-items: center; min-width: 96px; padding: 8px 14px; border-radius: 14px; background: var(--albastru); color: #fff; font-size: 2rem; font-weight: 900; }
.m2-cantar__cunoscut--total { background: var(--verde); }
.m2-greutate { display: inline-grid; place-items: center; border-radius: 10px 10px 6px 6px; color: #fff; font-weight: 900; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.2); cursor: pointer; }
.m2-greutate--100 { min-width: 64px; height: 50px; background: var(--m2-s); font-size: 1.35rem; }
.m2-greutate--10 { min-width: 46px; height: 40px; background: var(--m2-z); font-size: 1.15rem; }
.m2-greutate--1 { min-width: 34px; height: 32px; background: var(--m2-u); font-size: 1rem; }
.m2-greutate-buton { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 14px; border: 3px solid var(--linie); border-radius: 16px; background: #fff; cursor: pointer; }
.m2-greutate-buton__text { font-size: 1.05rem; font-weight: 800; }
.m2-joc-cantar { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }

/* ---------- liftul ---------- */
.m2-lift { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.m2-lift__cladire { position: relative; display: flex; flex-direction: column; gap: 4px; width: min(100%, 360px); padding: 10px 10px 10px 90px; border: 4px solid #9aa9c4; border-radius: 16px 16px 4px 4px; background: #f3f6fb; --h: 40px; }
.m2-lift__etaj { height: var(--h); border: 3px solid var(--linie); border-radius: 10px; background: #fff; color: var(--albastru-inchis); font-size: 1.3rem; font-weight: 900; cursor: pointer; }
.m2-lift__etaj[data-rezultat="bine"] { border-color: var(--verde); background: var(--verde-pal); color: var(--verde); }
.m2-lift__cabina { position: absolute; left: 14px; bottom: calc(10px + var(--etaj, 0) * (var(--h) + 4px)); display: grid; place-items: center; width: 64px; height: var(--h); border-radius: 10px; background: var(--galben); font-size: 1.6rem; transition: bottom 1.1s ease-in-out; }

/* ---------- racheta ---------- */
.m2-racheta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 40px; width: 100%; }
.m2-racheta__lansare { display: flex; align-items: flex-end; gap: 14px; min-height: 260px; }
.m2-racheta__nava { font-size: clamp(5rem, 10vw, 7rem); line-height: 1; transform: rotate(-45deg); transition: transform 1.6s ease-in, opacity 1.6s ease-in; }
.m2-racheta__nava--zboara { transform: translateY(-120vh) rotate(-45deg); opacity: 0; }
.m2-racheta__rezervor { display: flex; flex-direction: column-reverse; gap: 4px; width: 46px; padding: 4px; border: 3px solid #9aa9c4; border-radius: 14px; background: #fff; }
.m2-racheta__bucata { height: 28px; border-radius: 8px; background: #eef1f6; transition: background 0.4s; }
.m2-racheta__bucata--plina { background: linear-gradient(90deg, #ffb347, #f08a24); }
.m2-racheta__intrebare { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: min(100%, 420px); padding: 16px 20px; border-radius: 22px; background: var(--albastru-pal); }

/* ---------- schemele: Pământul și relieful ---------- */
.m2-schema { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.m2-schema__desen { width: min(100%, 420px); }
.m2-schema--relief .m2-schema__desen { width: min(100%, 860px); }
.m2-schema__desen svg { display: block; width: 100%; height: auto; }
.m2-zona { cursor: pointer; transition: filter 0.2s; }
.m2-zona--aleasa { filter: brightness(1.15) drop-shadow(0 0 6px #ffd65a); stroke: #f1c40f; stroke-width: 6; }
.m2-schema__butoane { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.m2-schema__buton { min-height: 52px; padding: 6px 18px; border: 3px solid var(--albastru); border-radius: 14px; background: #fff; color: var(--albastru-inchis); font: inherit; font-size: 1.2rem; font-weight: 900; cursor: pointer; }
.m2-schema__buton[aria-pressed="true"] { background: var(--albastru); color: #fff; }
.m2-schema__text { max-width: 760px; min-height: 2.8em; margin: 0; font-size: clamp(1.1rem, 2.6vw, 1.4rem); font-weight: 700; text-align: center; }

@media (max-width: 640px) {
  .m2-blocuri--pas .m2-col, .m2-blocuri--pas .m2-col--s { min-width: 0; flex: 1; }
  .m2-lift__cladire { padding-left: 76px; --h: 34px; }
  .m2-cantar__cunoscut { min-width: 70px; font-size: 1.5rem; }
}

/* ============================================================
   UNITATEA 3 — înmulțirea, viețuitoarele (modele3.js); clasele m3-
   ============================================================ */
@keyframes m3-rostogolire { 0% { transform: rotate(-200deg) scale(0.4); } 70% { transform: rotate(20deg) scale(1.08); } 100% { transform: none; } }
@keyframes m3-aprins { to { background: #fff3c4; box-shadow: inset 0 0 0 3px #f1c40f; } }

.m3-ob { width: clamp(30px, 3.4vw, 46px); height: clamp(30px, 3.4vw, 46px); object-fit: contain; }
.m3-ob.imagine--emoji { display: inline-grid; place-items: center; font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1; }
.m3-ob-emoji { font-size: 1.5rem; line-height: 1.1; }

/* coșurile (grupele) */
.m3-grupe { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.m3-grupe__rand { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.m3-grupe__una { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.m3-cos { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 4px; max-width: calc(clamp(30px, 3.4vw, 46px) * 3 + 20px); min-height: 70px; padding: 10px 10px 14px; border: 4px solid #c9a46b; border-radius: 10px 10px 30px 30px; background: #fff7ea; }
.m3-cos--mic { min-height: 0; padding: 6px 8px 10px; border-width: 3px; }
.m3-cos--mic .m3-ob { width: 24px; height: 24px; }
.m3-cos--mic .m3-ob.imagine--emoji { font-size: 1.2rem; }
.m3-grupe__rand--fisa .m3-cos { max-width: 110px; }
.m3-grupe__suma { color: var(--albastru-inchis); font-size: 1.4rem; font-weight: 900; }
.m3-inmultire { color: var(--verde); }
.m3-pune__rand { min-height: 90px; }
.m3-pune__adunare { font-size: clamp(1.1rem, 3vw, 1.7rem); }

/* tabloul (rânduri a câte) */
.m3-tablou__grila { display: grid; grid-template-columns: repeat(var(--c), auto); gap: 6px; padding: 12px; border-radius: 18px; background: #eaf7e4; }
.m3-tablou__grila--mic .m3-ob { width: 30px; height: 30px; }
.m3-tablou__celula { display: grid; place-items: center; padding: 4px; border-radius: 10px; transition: background 0.3s; animation: m2-apare 0.3s var(--t, 0s) both; }
.m3-tablou__celula[data-aprins="0"] { background: #fff3c4; box-shadow: inset 0 0 0 3px #f1c40f; }
.m3-tablou__celula[data-aprins="1"] { background: #d8ecff; box-shadow: inset 0 0 0 3px var(--albastru); }
.m3-tablou__celula--b { background: #e3efff; }
.m3-desp { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* tabla înmulțirii */
.m3-tabla__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; width: min(100%, 860px); }
.m3-tabla__rand { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; border: 3px solid var(--linie); border-radius: 14px; background: #fff; color: var(--cerneala); font: inherit; font-size: 1.4rem; font-weight: 800; cursor: pointer; }
.m3-tabla__rand[data-aratat] { border-color: var(--verde); background: var(--verde-pal); }
.m3-tabla__produs { min-width: 1.6em; color: var(--albastru-inchis); }
.m3-tabla__desen { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 60px; }

/* zarurile */
.m3-zar { display: inline-block; width: clamp(80px, 10vw, 120px); }
.m3-zar svg { display: block; width: 100%; height: auto; }
.m3-zar--rostogolit { animation: m3-rostogolire 0.9s ease-out both; }
.m3-joc-zaruri, .m3-joc-cosuri, .m3-joc-gradina { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.m3-joc-zaruri__masa { display: flex; align-items: center; gap: 20px; min-height: 130px; padding: 14px 24px; border-radius: 22px; background: #1f7a4d; }
.m3-joc-zaruri__masa .text-mare { color: #fff; }

/* planta */
.m3-planta__ghiveci { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.m3-planta__planta { font-size: clamp(5rem, 10vw, 8rem); transition: transform 0.5s, filter 0.5s; }
.m3-planta__vas { width: clamp(90px, 10vw, 130px); height: clamp(60px, 7vw, 86px); margin-top: -12px; background: linear-gradient(#d9774a, #b4552c); clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%); border-radius: 4px; }
.m3-planta__ghiveci[data-stare="ofilita"] .m3-planta__planta { transform: rotate(18deg) scale(0.85); filter: saturate(0.4); }
.m3-planta__nevoie { min-height: 56px; padding: 6px 14px; border: 3px solid var(--verde); border-radius: 14px; background: var(--verde-pal); color: var(--cerneala); font: inherit; font-size: 1.2rem; font-weight: 800; cursor: pointer; }
.m3-planta__nevoie[aria-pressed="false"] { border-color: var(--rosu); background: var(--rosu-pal); text-decoration: line-through; }
.m3-planta .model__mesaj[data-stare="rau"] { color: var(--rosu); }

.m3-zar--asteapta { opacity: 0.45; }

/* ================= UNITATEA 4: împărțirea ================= */
.m4-imparte, .m4-grupe, .m4-joc-imparte, .m4-incercari { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.m4-imparte__gramada { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 50px; max-width: 640px; padding: 8px 12px; border: 3px dashed #c9a46b; border-radius: 16px; background: #fffaf2; }
.m4-imparte__gramada:empty { opacity: 0.4; }
.m4-imparte__copii { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.m4-imparte__copil { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 96px; }
.m4-imparte__fata { font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1; }
.m4-imparte__farfurie { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 2px; width: clamp(96px, 10vw, 130px); min-height: 60px; padding: 6px; border: 4px solid #8ab4f8; border-radius: 50%; background: #f2f8ff; }
.m4-imparte__farfurie .m3-ob { width: clamp(24px, 2.4vw, 32px); height: clamp(24px, 2.4vw, 32px); }
.m4-imparte__farfurie .m3-ob.imagine--emoji { font-size: clamp(1.2rem, 2vw, 1.6rem); }
.m4-imparte__nr { min-width: 2.2em; padding: 2px 8px; border-radius: 10px; background: var(--portocaliu-pal, #ffe9cc); font-size: 1.3rem; font-weight: 900; text-align: center; }
.m4-zboara { animation: m4-zboara 0.16s ease-in both; }
@keyframes m4-zboara { to { transform: translateY(30px) scale(0.6); opacity: 0.3; } }
.m4-grupe__nr { flex-basis: 100%; font-size: 1rem; font-weight: 900; text-align: center; color: #a85600; }
.m4-incercari .model__butoane { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.m4-incercari__opt { min-width: 56px; min-height: 56px; font-size: 1.4rem; font-weight: 900; }
.m4-incercari__lista { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.m4-incercari__rand { margin: 0; padding: 4px 12px; border-radius: 10px; background: var(--rosu-pal, #ffe1e1); font-size: 1.2rem; font-weight: 700; }
.m4-incercari__rand--bine { background: var(--verde-pal, #dff5e5); font-weight: 900; }
.m4-jumatate { display: flex; justify-content: center; }
.m4-jumatate__desen svg { width: clamp(150px, 18vw, 220px); height: auto; }
.m4-forme { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.m4-forme figure { display: flex; flex-direction: column; align-items: center; margin: 0; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .m4-zboara { animation: none; } }

/* ================= UNITATEA 5: fracțiile, cerul ================= */
.m5-fr { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 0.15em; font-weight: 900; line-height: 1.05; }
.m5-fr__sus { padding: 0 0.2em; border-bottom: 0.12em solid currentColor; }
.m5-fr__jos { padding: 0 0.2em; }
.m5-forma { width: clamp(150px, 17vw, 230px); height: auto; overflow: visible; }
.m5-forma-nod .m5-forma { width: clamp(90px, 9vw, 130px); }
.m5-et { font: 900 26px/1 system-ui, sans-serif; fill: #25324d; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.m5-et--mic { font-size: 16px; }
.m5-parte { transition: transform 0.5s ease-out; }
.m5-taie, .m5-coloreaza, .m5-perete, .m5-robot, .m5-zi { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.m5-taie--taiat .m5-parte { transform: translate(var(--dx), var(--dy)); }
.m5-taie__desen .m5-et { opacity: 0; transition: opacity 0.4s 0.3s; }
.m5-taie--taiat .m5-et { opacity: 1; }
.m5-coloreaza .m5-parte { cursor: pointer; }
.m5-coloreaza__scris { display: flex; align-items: center; gap: 10px; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.m5-coloreaza__text { font-size: 1.1rem; font-weight: 800; }

/* foaia îndoită */
.m5-indoire { display: flex; justify-content: center; perspective: 900px; padding: 10px; }
.m5-foaie { position: relative; width: clamp(150px, 15vw, 200px); aspect-ratio: 1; background: var(--c); border: 4px solid #25324d; border-radius: 4px; transform-style: preserve-3d; }
.m5-foaie__v { position: absolute; inset: -4px -4px -4px 50%; background: var(--c); border: 4px solid #25324d; border-left: 0; transform-origin: left center; animation: m5-pliaza-v 2.6s ease-in-out 0.4s both; backface-visibility: visible; }
.m5-foaie__o { position: absolute; inset: 50% -4px -4px -4px; background: var(--c); border: 4px solid #25324d; border-top: 0; transform-origin: center top; animation: m5-pliaza-o 2.6s ease-in-out 3.2s both; }
.m5-foaie__lin-v, .m5-foaie__lin-o { position: absolute; border: 0 dashed #25324d; opacity: 0; }
.m5-foaie__lin-v { left: 50%; top: 0; bottom: 0; border-left-width: 4px; animation: m5-apare-linie 0.4s 2.9s both; }
.m5-foaie__lin-o { top: 50%; left: 0; right: 0; border-top-width: 4px; animation: m5-apare-linie 0.4s 5.7s both; }
.m5-foaie__colt { position: absolute; left: 0; top: 0; width: 50%; height: 100%; background: #3fa7f5; opacity: 0; animation: m5-apare-linie 0.5s 3s both; }
.m5-foaie--2 .m5-foaie__colt { height: 50%; animation-delay: 6s; }
@keyframes m5-pliaza-v { 0%, 10% { transform: rotateY(0); } 40%, 60% { transform: rotateY(-178deg); filter: brightness(0.85); } 90%, 100% { transform: rotateY(0); } }
@keyframes m5-pliaza-o { 0%, 10% { transform: rotateX(0); } 40%, 60% { transform: rotateX(178deg); filter: brightness(0.85); } 90%, 100% { transform: rotateX(0); } }
@keyframes m5-apare-linie { to { opacity: 0.85; } }

/* peretele fracțiilor */
.m5-perete__randuri { display: flex; flex-direction: column; gap: 6px; width: min(100%, 620px); }
.m5-perete__rand { display: flex; gap: 6px; }
.m5-perete__piesa { flex: 1; display: grid; place-items: center; min-height: 60px; border: 3px solid #25324d; border-radius: 8px; background: #fff; color: #25324d; font: inherit; font-size: 1.3rem; font-weight: 900; cursor: pointer; }
.m5-perete__piesa--1[aria-pressed="true"] { background: #ffc928; }
.m5-perete__piesa--2[aria-pressed="true"] { background: #ff8a3d; }
.m5-perete__piesa--4[aria-pressed="true"] { background: #3fa7f5; }
.m5-perete__rez { display: flex; align-items: center; gap: 14px; min-height: 64px; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }

/* robotelul */
.m5-robotel-loc { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.m5-robotel { width: clamp(120px, 12vw, 170px); height: auto; }
.m5-robotel__bec { animation: m5-bec 1.4s ease-in-out infinite alternate; }
@keyframes m5-bec { to { fill: #ff6b3d; } }
.m5-balon { position: relative; max-width: 420px; margin: 0; padding: 12px 18px; border: 3px solid #25324d; border-radius: 18px; background: #fff; font-size: 1.25rem; font-weight: 800; }
.m5-balon::before { content: ''; position: absolute; left: -14px; top: 40%; border: 8px solid transparent; border-right: 10px solid #25324d; }

/* robotul din fracții */
.m5-robot__scena { display: flex; justify-content: center; }
.m5-robot__svg { width: clamp(200px, 20vw, 280px); height: auto; }
.m5-robot__loc { cursor: pointer; transition: fill 0.3s; }
.m5-robot__loc--bun { fill: #fff3b0; stroke: #f1a90f; animation: m5-pulseaza 0.8s ease-in-out infinite alternate; }
@keyframes m5-pulseaza { to { fill: #ffe066; } }
.m5-robot__fata { pointer-events: none; }
.m5-robot__tava { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px; }
.m5-robot__piesa { display: flex; align-items: center; gap: 4px; min-height: 64px; padding: 4px 10px; border: 3px solid #cfd8ea; border-radius: 12px; background: #fff; font: inherit; font-size: 1.1rem; color: #25324d; cursor: pointer; }
.m5-robot__piesa svg { width: 44px; height: 56px; }
.m5-robot__piesa[aria-pressed="true"] { border-color: #f1a90f; background: #fff8d6; transform: translateY(-3px); }
.m5-robot--gata .m5-robot__brat--st { transform-origin: 80px 130px; animation: m5-salut 0.6s ease-in-out 4 alternate; }
.m5-robot--gata .m5-robot__brat--dr { transform-origin: 220px 130px; animation: m5-salut-dr 0.6s ease-in-out 4 alternate; }
.m5-robot--gata .m5-robot__svg { animation: m5-sare 0.5s ease-out 3 alternate; }
@keyframes m5-salut { to { transform: rotate(40deg); } }
@keyframes m5-salut-dr { to { transform: rotate(-40deg); } }
@keyframes m5-sare { to { transform: translateY(-12px); } }

/* cerul */
.m5-planete .m2-schema__desen svg { width: min(100%, 760px); height: auto; }
.m5-orbite svg { width: clamp(240px, 26vw, 360px); height: auto; border-radius: 16px; }
.m5-orbita { animation: m5-rotire var(--d) linear infinite; }
@keyframes m5-rotire { to { transform: rotate(360deg); } }
.m5-zi__desen { width: min(100%, 560px); }
.m5-zi__desen svg { width: 100%; height: auto; border-radius: 16px; }
.m5-zi__pamant { transform-box: view-box; transform-origin: 290px 130px; transition: transform 0.9s ease-in-out; }
.m5-raza { animation: m5-raza 1.2s linear var(--t) infinite; }
@keyframes m5-raza { to { stroke-dashoffset: -36; } }
.m5-zi[data-fel="zi"] .m5-zi__mesaj { color: #a85600; }
.m5-zi[data-fel="noapte"] .m5-zi__mesaj { color: #3b4fb8; }
.m5-joc-fractii { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.m5-joc-fractii__optiuni { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.m5-joc-fractii__optiuni .buton { min-width: 90px; min-height: 80px; font-size: 1.6rem; }
.m5-joc-fractii__forma { display: grid; place-items: center; padding: 8px; border: 3px solid #cfd8ea; border-radius: 16px; background: #fff; cursor: pointer; }
.m5-joc-fractii__forma[data-rezultat="bine"] { border-color: var(--verde); background: var(--verde-pal); }

@media (prefers-reduced-motion: reduce) {
  .m5-foaie__v, .m5-foaie__o, .m5-orbita, .m5-raza, .m5-robotel__bec, .m5-robot--gata .m5-robot__svg, .m5-robot__brat { animation: none !important; }
  .m5-foaie__lin-v, .m5-foaie__lin-o, .m5-foaie__colt { animation-duration: 0s; animation-delay: 0s; }
}
.m5-robot__brat { transform-box: view-box; }
.m5-fr--mare { font-size: clamp(3rem, 5vw, 4.4rem); color: #1d4fb8; }
.m5-scris { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.m5-scris__text p { margin: 6px 0; font-size: 1.2rem; font-weight: 800; }
.m5-lant { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.m5-lant__sir { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.m5-lant__nr { display: grid; place-items: center; min-width: 64px; min-height: 64px; padding: 0 8px; border: 4px solid #1d4fb8; border-radius: 50%; background: #eef4ff; font-size: 1.6rem; font-weight: 900; }
.m5-lant__nr--gol { border-style: dashed; color: #8a97b5; }
.m5-lant__op { padding: 4px 10px; border-radius: 10px; background: #fff3d6; font-size: 1.4rem; font-weight: 900; }
.m5-lant__op::after { content: ' →'; }
.m5-et--mini { font-size: 12px; }
.item .m5-fr--mare { font-size: 2.4rem; }
.m2-zona--aleasa text { stroke: none; filter: none; }

/* ================= UNITATEA 6: figuri, corpuri, date, fenomene ================= */
.m6-fig { width: clamp(80px, 8vw, 120px); height: auto; overflow: visible; }
.m6-fig-nod { display: inline-grid; place-items: center; }
.m6-laturi, .m6-interior, .m6-robot, .m6-oglinda, .m6-criterii, .m6-cub, .m6-circuit, .m6-coarda, .m6-taria, .m6-acoperit, .m6-numara, .m6-grafic-fa, .m6-joc { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.m6-laturi__desen svg { width: clamp(180px, 18vw, 250px); height: auto; overflow: visible; }
.m6-latura__vizibil { stroke: #12245a; stroke-width: 6; stroke-linecap: round; }
.m6-latura__atins { stroke: transparent; stroke-width: 26; cursor: pointer; }
.m6-latura--numarata .m6-latura__vizibil { stroke: #ef5b5b; stroke-width: 10; }
.m6-colt { fill: #fff; stroke: #12245a; stroke-width: 4; cursor: pointer; }
.m6-colt--numarat { fill: #f6c33b; }
.m6-laturi__cerc { cursor: pointer; }
.m6-laturi__cerc--ales { stroke: #ef5b5b; stroke-width: 10; }
.m6-punct { cursor: pointer; }
.m6-punct circle { fill: #fff; stroke: #12245a; stroke-width: 3; }
.m6-punct text { font: 900 13px system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.m6-punct--bine circle { fill: #4bb35a; }
.m6-punct--afara circle { fill: #ffd6d6; }
.m6-robot__desen svg { width: clamp(200px, 18vw, 260px); height: auto; }
.m6-robot__fig { cursor: pointer; transition: filter 0.2s; }
.m6-robot__fig--gasit { filter: drop-shadow(0 0 6px #ffd65a) brightness(1.1); stroke: #f1a90f; stroke-width: 6; }
.m6-scutura { animation: m6-scutura 0.4s; transform-box: fill-box; transform-origin: center; }
@keyframes m6-scutura { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.m6-robot__tabel { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.m6-robot__rand { display: flex; align-items: center; gap: 6px; padding: 4px 12px; border: 3px solid #cfd8ea; border-radius: 12px; background: #fff; font-weight: 800; }
.m6-robot__rand .m6-fig { width: 34px; }
.m6-robot__rand b { min-width: 1.5em; font-size: 1.4rem; text-align: center; }

/* simetria */
.m6-pliaza { position: relative; display: grid; width: clamp(160px, 16vw, 220px); aspect-ratio: 1; margin: 0 auto; perspective: 700px; }
.m6-pliaza > div { grid-area: 1 / 1; display: grid; place-items: center; }
.m6-pliaza .m6-fig-nod, .m6-pliaza .m6-fig { width: 100%; }
.m6-pliaza__img { width: 100%; height: auto; font-size: clamp(7rem, 12vw, 10rem); line-height: 1; text-align: center; }
.m6-pliaza__st { clip-path: inset(0 50% 0 0); }
.m6-pliaza__dr { clip-path: inset(0 0 0 50%); transform-origin: 50% 50%; animation: m6-pliaza 3.4s ease-in-out 0.6s both; filter: brightness(0.9); }
@keyframes m6-pliaza { 0%, 10% { transform: rotateY(0); } 45%, 65% { transform: rotateY(-180deg); } 100% { transform: rotateY(0); } }
.m6-pliaza__axa { grid-area: 1 / 1; justify-self: center; width: 0; border-left: 4px dashed #ef5b5b; z-index: 2; }
.m6-pliaza--nu .m6-pliaza__axa { justify-self: start; margin-left: 32%; }
.m6-pliaza--nu .m6-pliaza__st { clip-path: inset(0 68% 0 0); }
.m6-pliaza--nu .m6-pliaza__dr { clip-path: inset(0 0 0 32%); transform-origin: 32% 50%; }
.m6-axe svg { width: clamp(170px, 17vw, 230px); height: auto; overflow: visible; }
.m6-axa { stroke: #ef5b5b; stroke-width: 4; stroke-dasharray: 10 7; }
.m6-oglinda__grila { display: grid; grid-template-columns: repeat(var(--c), clamp(34px, 3.6vw, 48px)); border: 3px solid #12245a; }
.m6-oglinda__cel { aspect-ratio: 1; border: 1px solid #b8c4dc; background: #fff; cursor: pointer; padding: 0; }
.m6-oglinda__cel:disabled { cursor: default; }
.m6-oglinda__cel--axa { border-right: 4px dashed #ef5b5b; }
.m6-oglinda__cel[data-rezultat="gresit"] { background: #ffb3b3 !important; }
.m6-criterii__set { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px; }
.m6-criterii__fig { display: grid; place-items: center; width: clamp(80px, 8vw, 110px); aspect-ratio: 1; padding: 4px; border: 3px solid #cfd8ea; border-radius: 14px; background: #fff; cursor: pointer; }
.m6-criterii__fig .m6-fig-nod, .m6-criterii__fig .m6-fig { width: 100%; }
.m6-criterii__fig[data-rezultat="bine"] { border-color: var(--verde); background: var(--verde-pal); }

/* corpurile */
.m6-corp { width: clamp(110px, 11vw, 160px); height: auto; }
.m6-corp-nod { display: inline-grid; place-items: center; }
.m6-fete { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.m6-fete__sageata { font-size: 2.4rem; font-weight: 900; color: #8a97b5; }
.m6-fete__lista { display: grid; grid-template-columns: repeat(3, auto); gap: 8px; }
.m6-fete__fata { display: flex; flex-direction: column; align-items: center; font-size: 1.1rem; }
.m6-fete__fata svg { width: 54px; height: 54px; }
.m6-fete__nimic { grid-column: 1 / -1; font-size: 1.3rem; font-weight: 800; }
.m6-cub { perspective: 900px; }
.m6-cub__scena { position: relative; width: 210px; height: 290px; transform-style: preserve-3d; transition: transform 1.2s ease-in-out; }
.m6-cub__fata { position: absolute; width: 70px; height: 70px; display: grid; place-items: center; border: 3px solid #12245a; box-sizing: border-box; transform-style: preserve-3d; transition: transform 1.2s ease-in-out; font-size: 1.6rem; font-weight: 900; color: #12245a; }
.m6-cub__fata > span { pointer-events: none; }
.m6-cub__baza { left: 70px; top: 145px; }
.m6-cub__sus { left: -3px; top: -73px; transform-origin: 50% 100%; }
.m6-cub__capac { left: -3px; top: -73px; transform-origin: 50% 100%; }
.m6-cub__jos { left: -3px; top: 67px; transform-origin: 50% 0; }
.m6-cub__st { left: -73px; top: -3px; transform-origin: 100% 50%; }
.m6-cub__dr { left: 67px; top: -3px; transform-origin: 0 50%; }
.m6-cub--pliat .m6-cub__sus, .m6-cub--pliat .m6-cub__capac { transform: rotateX(-90deg); }
.m6-cub--pliat .m6-cub__jos { transform: rotateX(90deg); }
.m6-cub--pliat .m6-cub__st { transform: rotateY(90deg); }
.m6-cub--pliat .m6-cub__dr { transform: rotateY(-90deg); }
.m6-cub--pliat .m6-cub__scena { transform: scale(1.5) rotateX(-28deg) rotateY(-32deg); }
.m6-cub__fata > span { transition: opacity 0.4s; }
.m6-cub--pliat .m6-cub__fata > span { opacity: 0; }
.m6-desf svg { width: clamp(150px, 15vw, 200px); height: auto; }

/* electricitatea */
.m6-circuit__desen { position: relative; width: min(100%, 460px); }
.m6-circuit__desen svg { width: 100%; height: auto; }
.m6-fir { fill: none; stroke: #c97a2a; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.m6-bec__sticla { fill: #eef2f7; stroke: #5b6578; stroke-width: 3; transition: fill 0.3s; }
.m6-circuit__lumina { fill: #ffe066; opacity: 0; transition: opacity 0.3s; }
.m6-circuit--aprins .m6-bec__sticla { fill: #ffe066; }
.m6-circuit--aprins .m6-circuit__lumina { opacity: 0.6; }
.m6-circuit__loc { fill: #fff; stroke: #8a97b5; stroke-width: 3; stroke-dasharray: 6 5; }
.m6-circuit__obiect { position: absolute; left: 50%; top: 68%; transform: translate(-50%, -50%); font-size: clamp(1.8rem, 3vw, 2.4rem); color: #8a97b5; font-weight: 900; }
.m6-circuit__materiale { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 820px; }
.m6-circuit__material { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: 3px solid #cfd8ea; border-radius: 12px; background: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.m6-circuit__e { font-size: 1.6rem; }
.m6-circuit__material[data-rezultat="bine"] { border-color: #f1a90f; background: #fff8d6; }
.m6-circuit__material[data-rezultat="gresit"] { border-color: #8a97b5; background: #eef0f4; }
.m6-circuit__tabel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(100%, 720px); }
.m6-circuit__col { padding: 8px 12px; border: 3px solid #cfd8ea; border-radius: 12px; background: #fff; }
.m6-circuit__lista { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }

/* sunetul */
.m6-coarda__desen { width: min(100%, 520px); }
.m6-coarda__desen svg { width: 100%; height: auto; }
.m6-coarda__fir { fill: none; stroke: #8a5a2a; stroke-width: 5; }
.m6-coarda--vibreaza .m6-coarda__fir { animation: m6-vibreaza 0.07s linear infinite alternate; }
@keyframes m6-vibreaza { from { d: path('M30 60 Q180 40 330 60'); } to { d: path('M30 60 Q180 80 330 60'); } }
.m6-taria__trepte { display: flex; align-items: flex-end; justify-content: center; gap: 8px; flex-wrap: wrap; }
.m6-taria__treapta { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 110px; min-height: calc(var(--h) + 70px); padding: 6px; border: 3px solid #cfd8ea; border-radius: 12px; background: linear-gradient(to top, #ffe0c2 var(--h), #fff var(--h)); font: inherit; cursor: pointer; }
.m6-taria__treapta[aria-pressed="true"] { border-color: #ef5b5b; }
.m6-taria__e { font-size: 2rem; }
.m6-taria__nume { font-size: 0.95rem; font-weight: 800; }
.m6-taria__unda { width: min(100%, 520px); }
.m6-taria__unda svg { width: 100%; height: auto; background: #0e1530; border-radius: 12px; }
.m6-taria__drum { fill: none; stroke: #6bf0a8; stroke-width: 3; }
.m6-acoperit__difuzor { position: relative; font-size: clamp(5rem, 9vw, 7rem); line-height: 1; }
.m6-acoperit__strat { position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.8em; }
.m6-acoperit__strat[data-gros="3"] { font-size: 1.1em; }
.m6-acoperit__eticheta { margin: 0; font-weight: 800; }
.m6-acoperit__bara { width: min(100%, 420px); height: 22px; border: 3px solid #12245a; border-radius: 12px; overflow: hidden; background: #fff; }
.m6-acoperit__bara span { display: block; height: 100%; background: linear-gradient(90deg, #4bb35a, #f6c33b, #ef5b5b); transition: width 0.4s; }

/* tabele și grafice */
.m6-tabel { border-collapse: collapse; font-size: 1.15rem; background: #fff; }
.m6-tabel th, .m6-tabel td { padding: 6px 14px; border: 2px solid #8a97b5; text-align: center; }
.m6-tabel th { background: #eef4ff; }
.m6-tabel .m6-tabel--ales, .m6-tabel tr.m6-tabel--ales > * { background: #fff3b0; }
.m6-tabel__nume { display: flex; align-items: center; gap: 6px; }
.m6-tabel__img { width: 32px; height: 32px; object-fit: contain; }
.m6-tabel__img.imagine--emoji { font-size: 1.6rem; }
.m6-tabel__liniute { min-width: 120px; font-weight: 900; letter-spacing: 3px; color: #3f86d6; }
.m6-tabel__nr { font-weight: 900; font-size: 1.4rem; }
.m6-numara__camp { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 720px; padding: 10px; border: 3px dashed #c9a46b; border-radius: 16px; background: #fffaf2; }
.m6-numara__ob { padding: 2px; border: 0; background: none; cursor: pointer; transform: rotate(var(--r)); transition: opacity 0.3s, transform 0.3s; }
.m6-numara__ob:disabled { opacity: 0.18; transform: scale(0.7); cursor: default; }
.m6-grafic { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.m6-grafic__titlu { margin: 0; font-weight: 900; }
.m6-grafic__zona { display: flex; gap: 6px; }
.m6-grafic__zona { align-items: flex-end; }
.m6-grafic__axa { position: relative; width: 24px; height: calc(var(--m) * 26px); margin-bottom: 54px; font-size: 0.85rem; font-weight: 800; color: #5b6578; }
.m6-grafic__axa span { position: absolute; right: 0; transform: translateY(50%); line-height: 1; }
.m6-grafic__bare { display: flex; align-items: flex-end; gap: 14px; padding: 0 10px; border-left: 3px solid #12245a; background: repeating-linear-gradient(to top, #e3e8f2 0 1px, transparent 1px 26px); background-position: 0 calc(100% - 54px); background-size: 100% calc(var(--m) * 26px); background-repeat: no-repeat; }
.m6-grafic__col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; width: clamp(54px, 6vw, 80px); }
.m6-grafic__bara { width: 100%; height: calc(var(--n) * 26px); border: 3px solid #12245a; border-bottom: 0; border-radius: 8px 8px 0 0; display: flex; justify-content: center; transition: height 0.4s; box-sizing: border-box; }
.m6-grafic__bara b { margin-top: -26px; font-size: 1.1rem; }
.m6-creste { animation: m6-creste 0.8s ease-out var(--t) both; transform-origin: bottom; }
@keyframes m6-creste { from { transform: scaleY(0); } }
.m6-grafic__cap { height: 54px; display: flex; flex-direction: column; align-items: center; border-top: 3px solid #12245a; width: calc(100% + 14px); font-size: 0.85rem; font-weight: 800; box-sizing: border-box; }
.m6-grafic__img { width: 28px; height: 28px; object-fit: contain; }
.m6-grafic__img.imagine--emoji { font-size: 1.4rem; }
.m6-grafic-fa__butoane { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.m6-grafic-fa__grup { display: flex; align-items: center; gap: 4px; font-size: 1.6rem; }
.m6-joc__optiuni { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.m6-joc__optiune { display: grid; place-items: center; padding: 8px; border: 3px solid #cfd8ea; border-radius: 16px; background: #fff; cursor: pointer; font: inherit; font-weight: 800; }
.m6-joc__optiune[data-rezultat="bine"] { border-color: var(--verde); background: var(--verde-pal); }
@media (prefers-reduced-motion: reduce) {
  .m6-pliaza__dr, .m6-creste, .m6-coarda--vibreaza .m6-coarda__fir { animation: none !important; }
  .m6-cub__fata, .m6-cub__scena { transition: none; }
}

/* ---------- fracțiile: exemplele concrete (fractii2.js) ---------- */
.m5b-taie, .m5b-alege, .m5b-scrie, .m5b-pizza { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.m5b-taie__obiect { position: relative; width: clamp(180px, 18vw, 240px); aspect-ratio: 1; }
.m5b-taie__bucata { position: absolute; inset: 0; display: grid; place-items: center; transition: transform 0.6s ease-out 0.5s; }
.m5b-taie__img { width: 100%; height: 100%; object-fit: contain; }
.m5b-taie__img.imagine--emoji { font-size: clamp(8rem, 13vw, 11rem); line-height: 1; display: grid; place-items: center; }
.m5b-taie--taiat .m5b-taie__bucata { transform: translate(var(--dx), var(--dy)); }
.m5b-taie__linie { position: absolute; background: repeating-linear-gradient(var(--dir, 180deg), #25324d 0 8px, transparent 8px 14px); opacity: 0; transition: transform 0.45s, opacity 0.2s; }
.m5b-taie__linie--v { left: calc(50% - 2px); top: -6%; width: 4px; height: 112%; transform: scaleY(0); transform-origin: top; }
.m5b-taie__linie--o { top: calc(50% - 2px); left: -6%; height: 4px; width: 112%; --dir: 90deg; transform: scaleX(0); transform-origin: left; }
.m5b-taie--taiat .m5b-taie__linie { opacity: 1; transform: none; }
.m5b-taie--taiat .m5b-taie__linie { animation: m5b-dispare 0.3s 0.9s forwards; }
@keyframes m5b-dispare { to { opacity: 0; } }
.m5b-taie__et { position: absolute; transform: translate(-50%, -50%); padding: 2px 8px; border-radius: 10px; background: #fff; border: 3px solid #25324d; font-size: 1.3rem; opacity: 0; transition: opacity 0.4s 1s; }
.m5b-taie--taiat .m5b-taie__et { opacity: 1; }

.m5b-corect { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.m5b-corect__scena { display: flex; flex-direction: column; align-items: center; padding: 10px 14px; border: 4px solid; border-radius: 18px; background: #fff; max-width: 360px; }
.m5b-corect__scena--rau { border-color: #ef5b5b; }
.m5b-corect__scena--bine { border-color: #4bb35a; }
.m5b-corect__titlu { margin: 0 0 6px; font-weight: 900; text-align: center; }
.m5b-corect__roboti { display: flex; gap: 6px; }
.m5b-corect__robot svg { width: clamp(100px, 10vw, 140px); height: auto; }

.m5b-alege__desen svg { width: clamp(260px, 28vw, 380px); height: auto; overflow: visible; }
.m5b-alege__linie { cursor: pointer; }
.m5b-alege__vizibil { stroke: #ef5b5b; stroke-width: 4; stroke-dasharray: 8 6; }
.m5b-alege__linie:hover .m5b-alege__vizibil { stroke-width: 7; }
.m5b-alege__comparare svg { width: clamp(240px, 24vw, 330px); height: auto; }
.m5b-alege__bucata { animation: m5b-desparte 0.6s ease-out both; }
.m5b-alege__bucata--2 { animation-name: m5b-desparte-2; }
@keyframes m5b-desparte { from { transform: translateX(5px); } }
@keyframes m5b-desparte-2 { from { transform: translateX(-5px); } }
.m5b-alege[data-stare="bine"] .model__mesaj { color: #23a05a; }
.m5b-alege[data-stare="gresit"] .model__mesaj { color: #c0392b; }

.m5b-supra { display: flex; flex-direction: column; align-items: center; }
.m5b-supra svg { width: clamp(220px, 24vw, 320px); height: auto; }
.m5b-supra__mobil { animation: m5b-muta 1.4s ease-in-out 0.6s both; }
@keyframes m5b-muta { to { transform: translateX(-100px); } }
.m5b-supra__rest { opacity: 0; animation: m5b-apare 0.4s 2s both; }
@keyframes m5b-apare { to { opacity: 1; } }
.m5b-supra__text { margin: 6px 0 0; font-size: 1.15rem; font-weight: 900; opacity: 0; animation: m5b-apare 0.4s 2.1s both; }
.m5b-supra--egale .m5b-supra__text { color: #23a05a; }
.m5b-supra--neegale .m5b-supra__text { color: #c0392b; }
.m5b-sferturi { display: flex; flex-direction: column; align-items: center; }
.m5b-sferturi svg { width: clamp(260px, 28vw, 380px); height: auto; }
.m5b-sferturi__s1 { animation: m5b-s1 1.2s ease-in-out 0.6s both; }
.m5b-sferturi__s2 { animation: m5b-s2 1.2s ease-in-out 1.6s both; }
@keyframes m5b-s1 { to { transform: translate(-190px, 0); } }
@keyframes m5b-s2 { to { transform: translate(-190px, -10px); } }
.m5b-sferturi .m5b-supra__text { color: #23a05a; animation-delay: 2.9s; }

.m5b-scrie__rand { display: flex; align-items: center; gap: 28px; }
.m5b-scrie__fr { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.m5b-scrie__casuta { display: grid; place-items: center; width: 64px; height: 64px; border: 4px dashed #8a97b5; border-radius: 12px; font-size: 2.2rem; font-weight: 900; color: #8a97b5; }
.m5b-scrie__casuta--bun { border-style: solid; border-color: #23a05a; color: #1d4fb8; background: #eaf7ee; }
.m5b-scrie__linie { width: 84px; height: 6px; border-radius: 3px; background: #25324d; }

.m5b-pizza__scena { position: relative; width: min(100%, 460px); height: 320px; }
.m5b-pizza__pizza { position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; transform: translate(-50%, -50%); }
.m5b-pizza__felie { position: absolute; inset: 0; transition: transform 0.9s ease-in-out; }
.m5b-pizza__felie svg { width: 100%; height: 100%; }
.m5b-pizza__robot { position: absolute; width: 96px; }
.m5b-pizza__robot svg { width: 100%; height: auto; }
.m5b-pizza--4 .m5b-pizza__robot--0 { right: 0; top: 0; }
.m5b-pizza--4 .m5b-pizza__robot--1 { right: 0; bottom: 0; }
.m5b-pizza--4 .m5b-pizza__robot--2 { left: 0; bottom: 0; }
.m5b-pizza--4 .m5b-pizza__robot--3 { left: 0; top: 0; }
.m5b-pizza--2 .m5b-pizza__robot--0 { right: 0; top: 30%; }
.m5b-pizza--2 .m5b-pizza__robot--1 { left: 0; top: 30%; }
.m5b-pizza--4.m5b-pizza--impartit .m5b-pizza__felie--0 { transform: translate(90px, -60px) scale(0.75); }
.m5b-pizza--4.m5b-pizza--impartit .m5b-pizza__felie--1 { transform: translate(90px, 60px) scale(0.75); }
.m5b-pizza--4.m5b-pizza--impartit .m5b-pizza__felie--2 { transform: translate(-90px, 60px) scale(0.75); }
.m5b-pizza--4.m5b-pizza--impartit .m5b-pizza__felie--3 { transform: translate(-90px, -60px) scale(0.75); }
.m5b-pizza--2.m5b-pizza--impartit .m5b-pizza__felie--0 { transform: translate(100px, 0) scale(0.75); }
.m5b-pizza--2.m5b-pizza--impartit .m5b-pizza__felie--1 { transform: translate(-100px, 0) scale(0.75); }
@media (prefers-reduced-motion: reduce) {
  .m5b-supra__mobil, .m5b-sferturi__s1, .m5b-sferturi__s2 { animation-duration: 0s; animation-delay: 0s; }
  .m5b-supra__rest, .m5b-supra__text { animation-delay: 0s; }
}
.m5b-piesa, .m5b-grup { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.m5b-piesa__contur svg { width: clamp(160px, 16vw, 220px); height: auto; }
.m5b-grup__camp { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 640px; }
.m5b-grup__ob { padding: 6px; border: 3px solid #cfd8ea; border-radius: 14px; background: #fff; cursor: pointer; }
.m5b-grup__ob[aria-pressed="true"] { border-color: #f1a90f; background: #fff3b0; transform: translateY(-4px); }
.m5b-grup__nr { margin: 0; font-size: 1.2rem; font-weight: 900; }

/* ================= modele comune (modele6.js) ================= */
.m7-salturi, .m7-tablou, .m7-multipli, .m7-degete, .m7-masina, .m7-numara, .m7-greseli { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.m7-salturi__loc { position: relative; width: min(100%, 720px); }
.m7-salturi__axa { width: 100%; height: auto; overflow: visible; }
.m7-salturi__animal { position: absolute; top: 18%; transform: translate(-50%, -50%); transition: left 0.5s ease-in-out; }
.m7-salturi__img { width: clamp(40px, 4vw, 56px); height: clamp(40px, 4vw, 56px); object-fit: contain; }
.m7-salturi__img.imagine--emoji { font-size: 2.4rem; }
.m7-salturi__animal--sare { animation: m7-sare 0.5s ease-out; }
@keyframes m7-sare { 50% { margin-top: -34px; } }
.m7-salturi__arc { stroke-dasharray: 200; animation: m7-arc 0.5s ease-out both; }
@keyframes m7-arc { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
.m7-salturi__scris, .m7-tablou__scris { margin: 0; min-height: 1.4em; }
.m7-tablou__controale { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.m7-tablou__control { display: flex; align-items: center; gap: 6px; font-weight: 800; }
.m7-tablou__grila { display: grid; grid-template-columns: repeat(var(--c), auto); gap: 4px; padding: 10px; border: 3px dashed #9fe0a8; border-radius: 14px; background: #f3fbf5; transition: transform 0.5s; }
.m7-multipli__grila { display: grid; grid-template-columns: repeat(10, clamp(36px, 3.6vw, 50px)); gap: 4px; }
.m7-multipli__nr { aspect-ratio: 1; border: 2px solid #cfd8ea; border-radius: 8px; background: #fff; font: inherit; font-weight: 800; font-size: 1.05rem; cursor: pointer; }
.m7-multipli__nr[data-rezultat="bine"] { background: #ffd36b; border-color: #f1a90f; }
.m7-degete__maini svg { width: min(100%, 460px); height: auto; }
.m7-degete__maini rect { transition: y 0.3s, height 0.3s; }
.m7-masina__banda { display: flex; align-items: center; gap: 10px; }
.m7-masina__nr { display: grid; place-items: center; min-width: 70px; height: 70px; padding: 0 8px; border: 4px solid #1d4fb8; border-radius: 14px; background: #eef4ff; font-size: 1.8rem; font-weight: 900; }
.m7-masina__cutie { display: grid; place-items: center; width: 110px; height: 90px; border: 5px solid #25324d; border-radius: 16px; background: repeating-linear-gradient(45deg, #ffd36b 0 12px, #ffc928 12px 24px); font-size: 1.8rem; font-weight: 900; }
.m7-masina__cutie--merge { animation: m7-merge 0.7s ease-in-out; }
@keyframes m7-merge { 25% { transform: rotate(-4deg) scale(1.05); } 50% { transform: rotate(4deg); } 75% { transform: rotate(-3deg) scale(1.05); } }
.m7-masina__sageata { font-size: 2rem; font-weight: 900; color: #8a97b5; }
.m7-masina__tabel { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 640px; }
.m7-masina__rand { padding: 4px 10px; border-radius: 10px; background: #fff3d6; font-weight: 800; }
.m7-numara__rand { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.m7-numara__ob { position: relative; padding: 8px; border: 3px solid #cfd8ea; border-radius: 16px; background: #fff; cursor: pointer; }
.m7-numara__ob[data-rezultat="bine"] { border-color: #f1a90f; background: #fff8d6; }
.m7-numara__img { width: clamp(60px, 6vw, 84px); height: clamp(60px, 6vw, 84px); object-fit: contain; }
.m7-numara__img.imagine--emoji { font-size: 3.4rem; }
.m7-numara__k { position: absolute; right: -8px; top: -8px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #1d4fb8; color: #fff; font-weight: 900; }
.m7-numara__sir { margin: 0; min-height: 1.4em; color: #1d4fb8; }
@media (prefers-reduced-motion: reduce) { .m7-salturi__animal--sare, .m7-masina__cutie--merge, .m7-salturi__arc { animation: none; } }

/* ================= UNITATEA 7: măsurări, timp, bani, magneți ================= */
.m8-nest, .m8-rigla, .m8-estim, .m8-cana, .m8-balanta, .m8-ceas, .m8-zile, .m8-calendar, .m8-plata, .m8-magazin, .m8-rest, .m8-magnet, .m8-poli { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.m8-nest__bara { position: relative; width: min(100%, 700px); padding-top: 54px; }
.m8-nest__sir { position: absolute; left: 0; right: 0; top: 0; display: flex; height: 50px; }
.m8-nest__unitate { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; border-right: 2px dashed #8a97b5; animation: m2-intra 0.3s ease-out both; box-sizing: border-box; }
.m8-nest__e { font-size: 1.6rem; line-height: 1; }
.m8-nest__obiect { height: 46px; border-radius: 8px; background: #c98b4a; color: #fff; font-weight: 900; display: grid; place-items: center; font-size: 1.2rem; }
.m8-nest__tabel { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.m8-nest__rez { padding: 4px 12px; border-radius: 10px; background: #fff3d6; font-weight: 900; }
.m8-rigla__desen { width: min(100%, 720px); }
.m8-rigla__desen svg { width: 100%; height: auto; cursor: pointer; }
.m8-metru { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.m8-metru__bara { display: flex; width: min(100%, 720px); border: 3px solid #a87b00; border-radius: 6px; }
.m8-metru__bucata { flex: 1; padding: 10px 0; text-align: center; font-size: 0.85rem; font-weight: 900; background: #ffe9a8; border-right: 2px solid #a87b00; }
.m8-metru__bucata:nth-child(even) { background: #fff3c4; }
.m8-lupa { display: flex; flex-direction: column; align-items: center; }
.m8-lupa svg { width: min(100%, 560px); height: auto; }
.m8-instr { display: inline-grid; place-items: center; }
.m8-instr svg { width: clamp(110px, 11vw, 150px); height: auto; }
.m8-estim__ob { display: flex; flex-direction: column; align-items: center; font-size: 1.2rem; }
.m8-cana__desen svg { width: clamp(150px, 15vw, 200px); height: auto; }
.m8-cana__apa { transition: y 0.5s, height 0.5s; }
.m8-cana__scris { margin: 0; }
.m8-balanta__desen { position: relative; width: min(100%, 460px); --u: 0deg; --dy: 0px; }
.m8-balanta__desen svg { width: 100%; height: auto; }
.m8-balanta__brat { transform-box: view-box; transform-origin: 200px 58px; transform: rotate(var(--u)); transition: transform 0.6s; }
.m8-balanta__pe { position: absolute; top: 28%; display: flex; flex-wrap: wrap-reverse; justify-content: center; align-items: flex-end; gap: 2px; width: 22%; min-height: 60px; transition: transform 0.6s; }
.m8-balanta__pe--st { left: 7%; transform: translateY(var(--dy)); }
.m8-balanta__pe--dr { right: 7%; transform: translateY(calc(var(--dy) * -1)); }
.m8-greutate { display: grid; place-items: center; min-width: 40px; height: 28px; padding: 0 4px; border-radius: 8px 8px 4px 4px; background: #5b6578; color: #fff; font-size: 0.8rem; font-weight: 900; }
.m8-balanta__scris { margin: 0; font-weight: 900; font-size: 1.15rem; }
.m8-cantar { display: inline-grid; place-items: center; }
.m8-cantar svg { width: clamp(150px, 15vw, 200px); height: auto; }
.m8-minute { display: flex; flex-direction: column; align-items: center; }
.m8-minute .desen--ceas { width: clamp(220px, 22vw, 300px); }
.m8-ceas .desen--ceas { width: clamp(170px, 17vw, 230px); }
.m8-zile__rand { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.m8-zile__zi { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 96px; padding: 8px; border: 3px solid #cfd8ea; border-radius: 12px; background: #fff; font: inherit; font-size: 1.05rem; cursor: pointer; }
.m8-zile__et { min-height: 1.2em; font-size: 0.85rem; font-weight: 900; color: #a85600; }
.m8-zile__zi--azi { border-color: #1d4fb8; background: #eef4ff; }
.m8-zile__zi--gasit { border-color: #f1a90f; background: #fff8d6; }
.m8-calendar__titlu { margin: 0; font-size: 1.4rem; font-weight: 900; text-transform: capitalize; }
.m8-calendar__grila { display: grid; grid-template-columns: repeat(7, clamp(40px, 4.4vw, 56px)); gap: 4px; }
.m8-calendar__cap { text-align: center; font-weight: 900; color: #5b6578; text-transform: capitalize; }
.m8-calendar__zi { aspect-ratio: 1; border: 2px solid #cfd8ea; border-radius: 8px; background: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.m8-calendar__zi--liber { color: #c0392b; background: #fff1f1; }
.m8-calendar__zi[data-rezultat="bine"] { background: #ffd36b; border-color: #f1a90f; }
.m8-plata__produs, .m8-rest__scena { display: flex; align-items: center; gap: 12px; font-size: 1.2rem; }
.m8-plata__e { font-size: clamp(2.4rem, 4vw, 3.2rem); line-height: 1; }
.m8-plata__tejghea { min-height: 70px; min-width: 260px; padding: 8px; border: 3px dashed #c9a46b; border-radius: 14px; }
.m8-rest__sageata { font-size: 2rem; font-weight: 900; color: #8a97b5; }
.m8-magazin__portofel { margin: 0; font-size: 1.4rem; font-weight: 900; }
.m8-magazin__raft { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 10px; border-bottom: 8px solid #c98b4a; }
.m8-magazin__produs { display: flex; flex-direction: column; align-items: center; min-width: 100px; padding: 8px; border: 3px solid #cfd8ea; border-radius: 14px; background: #fff; font: inherit; cursor: pointer; }
.m8-magazin__pret { margin-top: 4px; padding: 2px 8px; border-radius: 8px; background: #fff3b0; font-weight: 900; }
.m8-magazin__cos { display: flex; flex-wrap: wrap; gap: 6px; min-height: 56px; min-width: 220px; padding: 6px 12px; border: 3px solid #8a97b5; border-radius: 6px 6px 22px 22px; background: #f4f6fb; }
.m8-euro { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 96px; height: 52px; border: 2px solid #25324d; border-radius: 6px; background: #c9e4f6; font-weight: 900; }
.m8-euro b { font-size: 1.4rem; line-height: 1; }
.m8-euro span { font-size: 0.7rem; letter-spacing: 1px; }
.m8-euro--10 { background: #f6c9c9; } .m8-euro--20 { background: #c9d9f6; } .m8-euro--50 { background: #f6dfb3; } .m8-euro--100 { background: #cdeac0; } .m8-euro--5 { background: #e0e0e0; }
.m8-cent { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; border: 3px solid #a87b00; background: #f4cf7a; font-weight: 900; }
.m8-cent b { font-size: 1.05rem; line-height: 1; }
.m8-cent span { font-size: 0.55rem; }
.m8-cent--euro { background: radial-gradient(#e7e7e7 55%, #f4cf7a 56%); width: 58px; height: 58px; }
.m8-magnet__masa { position: relative; display: flex; align-items: center; justify-content: space-between; width: min(100%, 460px); height: 110px; padding: 0 30px; border-bottom: 8px solid #c98b4a; box-sizing: border-box; }
.m8-magnet__magnet { font-size: clamp(3.4rem, 6vw, 4.6rem); transform: rotate(-90deg); }
.m8-magnet__obiect { font-size: clamp(2.6rem, 5vw, 3.4rem); transition: transform 0.4s ease-in; }
.m8-magnet--atras .m8-magnet__obiect { animation: m8-atras 0.6s ease-in forwards; }
@keyframes m8-atras { to { transform: translateX(calc(-1 * min(300px, 60vw))); } }
.m8-poli__scena { display: flex; justify-content: center; gap: 120px; width: min(100%, 520px); transition: gap 0.6s; }
.m8-poli__magnet svg { width: clamp(130px, 14vw, 180px); height: auto; }
.m8-poli--atrag .m8-poli__scena { gap: 0; }
.m8-poli--resping .m8-poli__scena { gap: 200px; }
@media (prefers-reduced-motion: reduce) { .m8-magnet--atras .m8-magnet__obiect { animation-duration: 0s; } }

/* ---------- Sistemul solar, apoi Pământul (pamant.js) ---------- */
.m2-sistem { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.m2-sistem__scena { position: relative; width: min(100%, 520px); aspect-ratio: 1; }
.m2-sistem__cer, .m2-sistem__pamant { position: absolute; inset: 0; transition: opacity 1.2s ease, transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1); }
.m2-sistem__cer svg { width: 100%; height: 100%; display: block; }
.m2-sistem__pamant { opacity: 0; transform: scale(0.08) translate(160%, 0); pointer-events: none; display: flex; justify-content: center; }
.m2-sistem--pamant .m2-sistem__cer { opacity: 0; transform: scale(2.4); pointer-events: none; }
.m2-sistem--pamant .m2-sistem__pamant { opacity: 1; transform: none; pointer-events: auto; position: static; }
.m2-sistem--pamant .m2-sistem__scena { aspect-ratio: auto; }
.m2-sistem--pamant .m2-sistem__legenda { display: none; }
.m2-sistem__legenda { margin: 0; font-weight: 800; color: #1d2a55; text-align: center; }
.m2-sistem__reia { display: none; border: 2px solid #3f6fd8; border-radius: 999px; background: #fff; color: #2a4fb0; font: inherit; font-weight: 800; padding: 6px 16px; cursor: pointer; }
.m2-sistem--pamant .m2-sistem__reia { display: inline-block; }
.m2-sistem__planeta { transform-origin: 350px 350px; transform: rotate(var(--s)); animation: m2-orbita var(--d) linear infinite; }
@keyframes m2-orbita { from { transform: rotate(var(--s)); } to { transform: rotate(calc(var(--s) + 360deg)); } }
/* Numele Pământului se rotește invers, ca să rămână drept. */
.m2-sistem__eticheta { animation: m2-orbita-invers var(--d) linear infinite; }
@keyframes m2-orbita-invers { from { transform: rotate(calc(-1 * var(--s, 0deg))); } to { transform: rotate(calc(-1 * var(--s, 0deg) - 360deg)); } }
.m2-sistem__aura { animation: m2-aura 2.4s ease-in-out infinite; transform-origin: 350px 350px; }
@keyframes m2-aura { 50% { transform: scale(1.18); opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) {
  .m2-sistem__planeta, .m2-sistem__eticheta, .m2-sistem__aura { animation: none; }
}
.m2-sistem__inel { animation: m2-inel 1.6s ease-in-out infinite; }
@keyframes m2-inel { 50% { stroke-opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .m2-sistem__inel { animation: none; } }

/* Banca din „măsurăm în palme, în creioane”: tăblie de lemn cu fibre, o
   dungă de lumină și picioare de fier dedesubt, ca o bancă de clasă. Lungimea
   rămâne lățimea tăbliei, deci măsurarea nu se schimbă. */
.m8-nest__bara { margin-bottom: 64px; }
.m8-nest__obiect {
  position: relative; height: 40px; border: 3px solid #7a4a1c; border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0 6px, transparent 6px),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(122, 74, 28, 0.25) 46px 48px),
    linear-gradient(180deg, #e0a868, #c98b4a);
  text-shadow: 0 1px 0 #7a4a1c; box-shadow: 0 4px 0 #a96d33;
}
.m8-nest__obiect::before, .m8-nest__obiect::after {
  content: ''; position: absolute; top: calc(100% + 4px); width: 8px; height: 56px;
  border-radius: 0 0 3px 3px; background: #4a505a;
}
.m8-nest__obiect::before { left: 7%; }
.m8-nest__obiect::after { right: 7%; }
.desen.m8-metru { width: min(100%, 640px); max-width: none; height: auto; max-height: none; }
.desen.m8-metru svg { width: 100%; height: auto; max-height: none; }

/* globul pământesc (glob.js) */
.m2-glob__desen { width: min(100%, 460px); }
.m2-glob__canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; cursor: pointer; filter: drop-shadow(0 18px 30px rgba(29, 79, 184, 0.25)); animation: m2-glob-intra 0.9s ease-out both; }
@keyframes m2-glob-intra { from { opacity: 0; transform: scale(0.85); } }
@media (prefers-reduced-motion: reduce) { .m2-glob__canvas { animation: none; } }

/* /jocuri/matematica-clasa-1/extra.css */
/* Modelele adăugate în „Învăț” (interactiv3.js). Clasele încep cu m1-. */

/* ---------- compară tu ---------- */
.m1-compara__rand { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; }
.m1-compara__numar { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 120px; padding: 10px 14px; border: 3px solid var(--linie); border-radius: 18px; background: #fff; }
.m1-compara__semn { display: grid; place-items: center; min-width: 80px; min-height: 80px; border: 4px dashed var(--albastru); border-radius: 18px; color: var(--albastru-inchis); font-size: 3rem; font-weight: 900; }
.m1-semn { min-width: 96px; min-height: 76px; font-size: 2.4rem; font-weight: 900; }
.m1-compara__explicatie { display: flex; justify-content: center; width: 100%; }

/* ---------- ia tu obiectele ---------- */
.m1-ia__obiecte { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 760px; }
.m1-ia__obiect { position: relative; display: grid; place-items: center; width: 86px; height: 86px; border: 3px solid var(--linie); border-radius: 18px; background: #fff; font-size: 3rem; cursor: pointer; transition: opacity 0.4s, transform 0.4s; }
.m1-ia__obiect[data-luat] { opacity: 0.18; transform: translateY(-14px) scale(0.8); }
.m1-ia__obiect[data-luat]::after { content: ''; position: absolute; left: 8%; right: 8%; top: 48%; height: 5px; border-radius: 3px; background: var(--rosu); transform: rotate(-30deg); }
.m1-ia__nr { position: absolute; top: -10px; right: -8px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--albastru); color: #fff; font-size: 1.05rem; font-weight: 900; }

/* ---------- trei probleme ---------- */
.m1-trei__scena { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 40px; }
.m1-trei__grup { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 18px; background: var(--albastru-pal); }
.m1-trei__eticheta { font-size: 1.2rem; font-weight: 900; }
.m1-trei__lista { display: flex; flex-direction: column; gap: 12px; width: min(100%, 820px); }
.m1-trei__problema { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 16px; border: 3px solid var(--linie); border-radius: 18px; background: #fff; }
.m1-trei__text { margin: 0; font-size: clamp(1.15rem, 2.8vw, 1.5rem); font-weight: 800; text-align: center; }
.m1-trei__rezolvare { margin: 0; color: var(--verde); font-size: clamp(1.4rem, 3.6vw, 2rem); font-weight: 900; }

/* ---------- schimbă locul termenilor ---------- */
.m1-schimb__rand { display: flex; align-items: center; justify-content: center; gap: 18px; }
.m1-schimb__grup { padding: 10px 14px; border-radius: 18px; background: var(--albastru-pal); transition: order 0s; }
.m1-schimb__grup:first-child { order: 1; }
.m1-schimb__grup:last-child { order: 3; }
.m1-schimb__rand--schimbat .m1-schimb__grup:first-child { order: 3; }
.m1-schimb__rand--schimbat .m1-schimb__grup:last-child { order: 1; }
.m1-schimb__rand > .text-mare { order: 2; }

/* /jocuri/matematica-clasa-3/mate3.css */
/* ============================================================
   MATEMATICĂ, CLASA a III-a — aspectul desenelor
   ============================================================
   Restul vine de la clasa a II-a (../matematica-clasa-2/mate2.css):
   aceleași clase m2-, cu ordinul miilor (m) adăugat aici. Clasele noi
   încep cu m3c-. Codul de culori: miile mov, sutele albastre, zecile
   verzi, unitățile portocalii.
   ============================================================ */

.mate3 {
  --m3c-m: #8e44ad;
  --m3c-m-inchis: #6c2f8a;
  --m3c-m-pal: #f3e8fa;
}

/* ---------- ordinul miilor ---------- */
.m2-c--m { color: var(--m3c-m); }
.m3c-dupa-mii { margin-right: 0.28em; }
.m2-col--m { border-color: #dcc3ec; }
.m2-col--m .m2-col__cap { background: var(--m3c-m); }
.m2-buton-ordin--m { background: var(--m3c-m); }
.m2-tabel th.m2-c--m { background: var(--m3c-m); color: #fff; }
.m2-tija--m .m2-tija__cap { color: var(--m3c-m); }
.m2-bila--m { background: radial-gradient(circle at 40% 30%, #dcb6ef, var(--m3c-m) 70%); }

/* Cubul mare: o mie (zece plăci una peste alta). */
.m2-bl--mie {
  position: relative;
  display: inline-block;
  width: calc(var(--m2-l) * 0.62);
  height: calc(var(--m2-l) * 0.62);
  margin: 6px 8px 0 0;
  border: 2px solid var(--m3c-m-inchis);
  border-radius: 3px;
  background-color: #b77fd6;
  background-image: linear-gradient(var(--m3c-m-inchis) 1.5px, transparent 1.5px), linear-gradient(90deg, var(--m3c-m-inchis) 1.5px, transparent 1.5px);
  background-size: 10% 10%;
  box-shadow: 6px -6px 0 -1px #9b59c2, 6px -6px 0 1px var(--m3c-m-inchis);
}
.m3c-blocuri .m2-col__blocuri--m { display: flex; flex-wrap: wrap; gap: 4px; max-width: calc(var(--m2-l) * 2.2); }
.m2-blocuri--interactiv .m2-col--m { min-width: calc(var(--m2-l) * 2.2); }
.m3c-blocuri { flex-wrap: wrap; justify-content: center; }
.m3c-abac .m2-tija { min-width: 70px; }

/* miile numărate până la 10 000 */
.m3c-mii { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.m3c-mii__rand { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.m3c-mii__col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.m3c-mii__cub { display: grid; place-items: center; }
.m3c-mii__cub .m2-bl--mie { width: calc(var(--m2-l) * 0.5); height: calc(var(--m2-l) * 0.5); margin: 6px 6px 0 0; }
.m3c-mii__nr { font-weight: 900; color: var(--m3c-m-inchis); font-size: clamp(0.95rem, 1.6vw, 1.3rem); }

/* ---------- compararea ---------- */
.m3c-compara { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.m3c-compara__rand { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }
.m3c-compara__semn { display: grid; place-items: center; min-width: 72px; height: 72px; border: 4px dashed #8a97b5; border-radius: 16px; font-size: 2.6rem; font-weight: 900; color: #8a97b5; }
.m3c-compara__semn--bun { border-style: solid; border-color: var(--verde); color: var(--verde); background: var(--verde-pal); }

/* ---------- axa pe care se atinge ---------- */
.m3c-peaxa { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.m3c-peaxa__axa { width: min(100%, 820px); }
.m3c-peaxa__axa svg { cursor: pointer; }

/* ---------- cifrele romane ---------- */
.m3c-roman { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.m3c-roman__tabla { display: flex; gap: 6px; min-height: 90px; min-width: 260px; padding: 10px 18px; border-radius: 16px; background: #24452f; align-items: center; justify-content: center; }
.m3c-roman__cifra { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(3rem, 6vw, 4.4rem); font-weight: 700; color: #fff; line-height: 1; animation: m2-apare 0.3s ease-out both; }
.m3c-roman__cifra--V { color: #ffd36b; }
.m3c-roman__cifra--X { color: #9fd3ff; }
.m3c-roman__arab { margin: 0; color: #1d4fb8; }
.m3c-roman__explicatie { min-height: 1.4em; }
.m3c-roman__buton { min-width: 120px; font-family: Georgia, serif; font-size: 1.4rem; }
.m3c-roman__buton--V { background: #c99a1c; }
.m3c-roman__buton--X { background: #2f86c8; }

/* ---------- modele și șiruri ---------- */
.m3c-model, .m3c-sir, .m3c-joc { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.m3c-model__sir { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 820px; }
.m3c-model__el { display: grid; place-items: center; min-width: 58px; height: 58px; padding: 0 6px; border: 3px solid #cfd8ea; border-radius: 12px; background: #fff; font-size: 2rem; font-weight: 900; }
.m3c-model__el--gol { border-style: dashed; color: #8a97b5; }
.m3c-model__opt { min-width: 70px; min-height: 64px; font-size: 2rem; }

/* Cu patru ordine, blocurile se fac mai mici, ca să încapă în card și cu 9 plăci. */
.mate3 .m2-blocuri--interactiv { --m2-l: clamp(40px, 4.6vw, 80px); }
.mate3 .m2-blocuri--interactiv .m2-col__blocuri--s { max-width: calc(var(--m2-l) * 5 + 24px); }
.mate3 .m2-blocuri--interactiv .m2-col--s { min-width: calc(var(--m2-l) * 5 + 44px); }

/* Variantele scrise cu litere: mari, citibile de la distanță. */
.mate3 .m6-joc__optiune { min-height: 64px; padding: 10px 18px; font-size: clamp(1.1rem, 1.7vw, 1.5rem); }
.mate3 .m6-joc .m2-joc__cerinta { font-size: clamp(1.2rem, 1.9vw, 1.7rem); }

/* ============ unitatea 2: adunarea și scăderea ============ */

/* blocurile, mai mici: patru ordine și două rânduri de blocuri */
.mate3 .m2-blocuri--pas { --m2-l: clamp(38px, 4.2vw, 72px); }
.mate3 .m2-blocuri--pas .m2-col--s { min-width: calc(var(--m2-l) * 5 + 44px); }
.mate3 .m2-blocuri--pas .m2-col__blocuri--s { max-width: calc(var(--m2-l) * 5 + 24px); }
.mate3 .m2-blocuri--pas .m2-col--m { min-width: calc(var(--m2-l) * 2.2); }
.mate3 .m2-blocuri--pas .m2-col__blocuri--m { display: flex; flex-wrap: wrap; gap: 4px; max-width: calc(var(--m2-l) * 2.2); }

/* calculul în coloană scris de copil */
.m3c-coltu, .m3c-mers, .m3c-calc, .m3c-estim, .m3c-perechi, .m3c-schimba { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.m3c-coltu__tabel { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
.m3c-coltu__activ { background: #ffe58a; }
.m3c-coltu__gol { display: inline-grid; place-items: center; width: 1.1em; height: 1.1em; border: 3px dashed #2f6fde; border-radius: 10px; color: #2f6fde; animation: m3c-clipeste 1.2s ease-in-out infinite; }
@keyframes m3c-clipeste { 50% { background: #e8f0ff; } }
.m3c-taiat { background: linear-gradient(to top right, transparent 46%, var(--rosu) 46%, var(--rosu) 56%, transparent 56%); }
.m3c-coltu__intrebare { margin: 0; min-height: 1.4em; font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 800; color: #12245a; text-align: center; }
.m3c-taste { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 720px; }
.m3c-tasta { min-width: 58px; min-height: 58px; border: 3px solid #cfd8ea; border-radius: 14px; background: #fff; font: inherit; font-size: 1.8rem; font-weight: 900; color: #12245a; cursor: pointer; }
.m3c-tasta:hover { border-color: #2f6fde; }

/* balanța cu greutatea de 1 000 */
.m2-greutate--1000 { min-width: 86px; height: 58px; background: var(--m3c-m); font-size: 1.4rem; }
.m3c-cantar .m2-cantar__taler { flex-wrap: wrap; max-width: 320px; }

/* mersul invers */
.m3c-mers__lant { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.m3c-mers__cutie { display: grid; place-items: center; min-width: 110px; height: 70px; padding: 0 10px; border: 4px solid #2f6fde; border-radius: 16px; background: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 900; color: #12245a; }
.m3c-mers__cutie--gol { border-style: dashed; color: #8a97b5; }
.m3c-mers__cutie--acum { background: #fff6cf; }
.m3c-mers__sageata { display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 900; font-size: clamp(1.15rem, 2vw, 1.6rem); }
.m3c-mers__inainte { color: #1d4fb8; }
.m3c-mers__inapoi { color: var(--rosu); animation: m2-apare 0.4s ease-out both; }

/* calculatorul */
.m3c-calc__aparat { display: flex; flex-direction: column; gap: 10px; width: min(100%, 330px); padding: 16px; border-radius: 22px; background: #3b4252; box-shadow: 0 8px 0 #262b36; }
.m3c-calc__ecran { padding: 10px 14px; border-radius: 10px; background: #c9e6c3; font-family: 'Courier New', monospace; font-size: 2rem; font-weight: 900; text-align: right; color: #1b2a1b; min-height: 1.4em; }
.m3c-calc__taste { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.m3c-calc__tasta { min-height: 58px; border: 0; border-radius: 12px; background: #eceff4; font: inherit; font-size: 1.6rem; font-weight: 900; cursor: pointer; box-shadow: 0 4px 0 #b8bfcc; }
.m3c-calc__tasta:active { transform: translateY(3px); box-shadow: 0 1px 0 #b8bfcc; }
.m3c-calc__tasta--op { background: #f6c453; box-shadow: 0 4px 0 #c99a1c; }
.m3c-calc__tasta--egal { grid-column: span 1; background: #4cbf6b; color: #fff; box-shadow: 0 4px 0 #2e8a48; }

/* estimarea */
.m3c-estim__randuri { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.m3c-estim__rand { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 900; color: #1d4fb8; animation: m2-apare 0.4s ease-out both; }
.m3c-estim__rand--exact { color: #1f7a3a; }

/* perechile rotunde */
.m3c-perechi__rand { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.m3c-perechi__carte { min-width: 120px; min-height: 70px; border: 4px solid #cfd8ea; border-radius: 16px; background: #fff; font: inherit; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 900; color: #12245a; cursor: pointer; }
.m3c-perechi__carte--ales { border-color: #f0a500; background: #fff6cf; }
.m3c-perechi__carte[data-stare="bine"] { border-color: var(--verde); background: var(--verde-pal); }
.m3c-perechi__pas { flex-basis: 100%; margin: 0; text-align: center; font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 900; color: #1d4fb8; animation: m2-apare 0.4s ease-out both; }

/* comutativitatea */
.m3c-schimba__rand { display: flex; align-items: center; gap: 14px; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 900; }
.m3c-schimba__carte { display: inline-grid; place-items: center; min-width: 130px; height: 76px; border-radius: 16px; color: #fff; transition: transform 0.7s ease-in-out; }
.m3c-schimba__carte--a { background: #2f86c8; }
.m3c-schimba__carte--b { background: #e07a1f; }
.m3c-schimba__istoric { margin: 0; font-size: clamp(1.2rem, 2.2vw, 1.7rem); font-weight: 800; color: #12245a; }

/* ============ unitatea 3: înmulțirea ============ */

.m3c-inmbl, .m3c-inm, .m3c-ori10, .m3c-tablou, .m3c-factori { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.m3c-inmbl__randuri { display: flex; flex-direction: column; gap: 6px; --m2-l: clamp(40px, 4vw, 66px); }
.m3c-inmbl__rand { display: flex; align-items: flex-end; gap: 10px; padding: 4px 10px; border: 2px dashed #cfd8ea; border-radius: 12px; }
.m3c-inmbl__nr { min-width: 3.2em; font-weight: 900; font-size: 1.3rem; color: #12245a; }
.m3c-inmbl__grup { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 3px; transition: opacity 0.5s; }
.m3c-inmbl__grup .m2-bl--mie { margin: 4px 4px 0 0; }
.m3c-inmbl__grup--luat { opacity: 0.18; }
.m3c-inmbl__sageata { margin: 0; font-weight: 800; color: #8a97b5; }

.m3c-inm__tabel { font-size: clamp(2.1rem, 4.2vw, 3.2rem); }
.m3c-inm__tabel .m2-col3__rez td { height: 1.2em; }
.m3c-inm__b { color: #12245a; }
.m3c-inm__activ { background: #ffe58a; border-radius: 8px; }
.m3c-inm__partial { color: #1d4fb8; }
.m3c-inm__suma { color: #1f7a3a; }
.item .m3c-inm__tabel { font-size: clamp(1.4rem, 3.2vw, 2rem); }

.m3c-ori10__tabel { display: grid; grid-template-columns: repeat(4, minmax(64px, 96px)); gap: 6px; }
.m3c-ori10__cel { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0 10px; border: 3px solid #cfd8ea; border-radius: 14px; background: #fff; }
.m3c-ori10__cel--m { border-color: #dcc3ec; }
.m3c-ori10__cap { font-weight: 900; font-size: 1rem; }
.m3c-ori10__cifra { min-height: 1.1em; font-size: clamp(2.4rem, 4.6vw, 3.4rem); font-weight: 900; line-height: 1; }
.m3c-ori10__cifra--mutat { animation: m3c-stanga 0.6s ease-out both; }
.m3c-ori10__cifra--zero { color: var(--rosu); animation: m2-apare 0.5s 0.4s ease-out both; }
@keyframes m3c-stanga { from { transform: translateX(80px); opacity: 0.3; } }

.m3c-tablou__cadru { max-width: 100%; overflow-x: auto; }
.m3c-tablou__cadru svg { display: block; max-width: 100%; height: auto; }
.m3c-tablou__linie { cursor: pointer; }
.m3c-tablou__linie:hover { fill: rgba(240, 165, 0, 0.45); }

.m3c-factori__cadru { display: flex; flex-direction: column; gap: 6px; padding: 10px; min-height: 60px; }
.m3c-factori__rand { display: flex; gap: 6px; }
.m3c-factori__bila { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd3a1, #e07a1f 70%); animation: m2-apare 0.3s ease-out both; }
.m3c-factori__bila--lipsa { background: none; border: 2px dashed #c0392b; }
.m3c-factori__lista { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.m3c-factori__produs { padding: 6px 14px; border-radius: 12px; background: var(--verde-pal); color: #1f7a3a; font-weight: 900; font-size: 1.3rem; }

/* ============ unitatea 4: împărțirea, ordinea operațiilor ============ */

.m3c-ordine, .m3c-familie { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.m3c-ordine__rand { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; min-height: 76px; }
.m3c-ordine__jeton { display: inline-grid; place-items: center; min-width: 64px; height: 68px; padding: 0 10px; border-radius: 14px; background: #eef3ff; font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 900; color: #12245a; }
.m3c-ordine__paranteza { min-width: 26px; padding: 0; background: none; color: #8e44ad; font-size: clamp(2.2rem, 4vw, 3rem); }
.m3c-ordine__jeton--ales { background: #ffe58a; }
.m3c-ordine__jeton--rezultat { background: var(--verde-pal); color: #1f7a3a; min-width: 120px; }
.m3c-ordine__semn { display: inline-grid; place-items: center; width: 68px; height: 68px; border: 3px solid #cfd8ea; border-radius: 50%; background: #fff; font: inherit; font-size: 2.2rem; font-weight: 900; color: #c0392b; cursor: pointer; }
.m3c-ordine__semn:hover { border-color: #f0a500; }
.m3c-ordine__semn--ales { border-color: #f0a500; background: #ffe58a; }
.m3c-ordine__pasi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.m3c-ordine__pas { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 800; color: #1d4fb8; animation: m2-apare 0.35s ease-out both; }

.m3c-familie__triunghi { display: grid; grid-template-columns: 90px 90px; grid-template-rows: auto auto; gap: 8px 30px; justify-items: center; padding: 14px 24px; border: 4px solid #8e44ad; border-radius: 18px; background: #f3e8fa; }
.m3c-familie__sus { grid-column: 1 / 3; font-size: 2.4rem; font-weight: 900; color: #8e44ad; }
.m3c-familie__jos { font-size: 2.2rem; font-weight: 900; color: #1d4fb8; }
.m3c-familie__lista { display: grid; gap: 8px; }
.m3c-familie__rand { display: flex; align-items: center; gap: 12px; }
.m3c-familie__fapt { min-width: 140px; font-size: 1.7rem; font-weight: 900; color: #12245a; }
.m3c-familie__opt { display: flex; gap: 6px; }
.m3c-familie__rez { font-size: 1.7rem; font-weight: 900; color: #1f7a3a; }
.m3c-familie__opt .optiune { min-width: 64px; min-height: 56px; font-size: 1.5rem; }

/* ============ unitatea 5: problemele ============ */

.m3c-seg, .m3c-date { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.m3c-fig__desen { display: flex; flex-direction: column; gap: 10px; width: min(100%, 860px); }
.m3c-seg__rand { display: flex; align-items: center; gap: 10px; width: min(100%, 860px); }
.m3c-seg__nume { flex: 0 0 120px; font-weight: 900; font-size: 1.25rem; color: #12245a; text-align: right; }
.m3c-seg__bara { display: flex; flex: 1; gap: 0; height: 52px; }
.m3c-seg__parte { display: grid; place-items: center; height: 100%; border: 3px solid #12245a; margin-right: -3px; font-weight: 900; font-size: 1.15rem; color: #12245a; transition: opacity 0.6s, transform 0.6s; }
.m3c-seg__parte--a { background: #9fd3ff; }
.m3c-seg__parte--b { background: #ffc58a; }
.m3c-seg__parte--taiat { opacity: 0.25; background: repeating-linear-gradient(45deg, #ffc58a 0 8px, #fff 8px 14px); }
.m3c-seg__lege, .m3c-fig__total { margin: 0; font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 800; color: #1d4fb8; text-align: center; }

.m3c-date__text { max-width: 860px; font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.9; text-align: left; }
.m3c-date__prop { padding: 2px 4px; border-radius: 8px; cursor: pointer; }
.m3c-date__prop--aleasa { background: #ffe58a; }
.m3c-date__nr { display: inline-block; margin: 0 2px; padding: 0 8px; border: 3px solid #2f6fde; border-radius: 10px; background: #fff; font: inherit; font-weight: 900; color: #1d4fb8; cursor: pointer; }
.m3c-date__nr[data-stare="bine"] { border-color: var(--verde); background: var(--verde-pal); color: #1f7a3a; }
.m3c-date__stim { display: flex; gap: 8px; flex-wrap: wrap; min-height: 40px; }
.m3c-date__dat { padding: 4px 12px; border-radius: 10px; background: var(--verde-pal); font-weight: 900; font-size: 1.3rem; color: #1f7a3a; }

/* ============ unitatea 6: fracțiile ============ */

.m3c-frm, .m3c-perete { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.m3c-frm__desen, .m3c-desen-loc { display: flex; justify-content: center; }
.m3c-desen { max-width: 100%; height: auto; }
.m3c-parte--clic { cursor: pointer; }
.m3c-parte--clic:hover { opacity: 0.8; }
.m3c-parte--taiat { opacity: 0.25; }
.m3c-frm__nume { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; min-height: 2.4em; font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 800; color: #12245a; text-align: center; }
.m3c-frm__rand { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; }
.m3c-frm__casute { min-height: 70px; padding: 8px 14px; border: 3px dashed #cfd8ea; border-radius: 16px; }
.m3c-frm__semn { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 900; color: #12245a; }
.m3c-frm__expr .m5-fr { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.m3c-frm__piesa { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 12px; border: 3px solid #cfd8ea; border-radius: 16px; background: #fff; cursor: pointer; }
.m3c-frm__piesa[data-stare="bine"] { opacity: 0.35; }
.m3c-desen-fr { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.m3c-fr { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.m3c-fr--mic { font-size: 0.95rem; }
.m3c-fr-scrisa { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-width: 90px; font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 900; }
.m3c-fr-scrisa__sus { color: #1d4fb8; }
.m3c-fr-scrisa__jos { color: #c0392b; }
.m3c-fr-scrisa__linie { width: 100%; border-top: 5px solid #12245a; }

.m3c-perete__zid { display: flex; flex-direction: column; gap: 4px; width: min(100%, 860px); }
.m3c-perete__rand { display: flex; height: 48px; }
.m3c-perete__bucata { display: grid; place-items: center; flex: 1; border: 3px solid #12245a; margin-right: -3px; background: #fff; font-weight: 900; color: #12245a; }
.m3c-perete__bucata--ref { background: #ffc58a; }
.m3c-perete__bucata--col { background: #9fd3ff; }
.m3c-perete__bucata--clic { cursor: pointer; }
.m3c-perete__bucata--clic:hover { outline: 3px solid #f0a500; outline-offset: -6px; }

.m3c-grup { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 860px; }
.m3c-grup--impartit { gap: 14px; }
.m3c-grup__ob { width: 52px; height: 52px; font-size: 2.4rem; }
.m3c-grup__parte { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 8px; border: 3px dashed #8a97b5; border-radius: 16px; max-width: 200px; }
.m3c-grup__parte--aleasa { border-style: solid; border-color: #f0a500; background: #fff6cf; }
.m3c-frm__eticheta { font-weight: 800; font-size: clamp(1rem, 1.6vw, 1.25rem); color: #1d4fb8; text-align: center; }
.m3c-termeni { display: flex; align-items: center; gap: 24px; }
.m3c-termeni .m3c-fr-scrisa { font-size: clamp(3.4rem, 6vw, 4.6rem); }
.m3c-termeni__etichete { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; font-weight: 800; font-size: clamp(1.05rem, 1.8vw, 1.4rem); }
.m3c-termeni__sus { color: #1d4fb8; }
.m3c-termeni__linie { color: #12245a; }
.m3c-termeni__jos { color: #c0392b; }
.m3c-grup__ob--ales { filter: none; }
.m3c-grup__ob--alt { opacity: 0.85; }

/* ============ unitatea 7: geometria ============ */

.m3c-geo { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.m3c-geo__desen { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.m3c-geo__pct, .m3c-geo__colt, .m3c-geo__latura { cursor: pointer; }
.m3c-geo__pct:hover circle:nth-child(2) { fill: #f0a500; }
.m3c-geo__suprapus { position: relative; width: 220px; height: 200px; }
.m3c-geo__suprapus:empty { display: none; }
.m3c-geo__strat { position: absolute; inset: 0; }
.m3c-geo__strat--sus { opacity: 0.8; animation: m3c-vine 0.9s ease-out both; }
@keyframes m3c-vine { from { transform: translateX(120px); opacity: 0; } }
.m3c-geo__gasit { border-color: var(--verde); background: var(--verde-pal); }
.m3c-linie-loc { display: flex; justify-content: center; }
.m3c-linie { max-width: 100%; height: auto; }

.m3c-retea { display: grid; grid-template-columns: 34px repeat(calc(var(--col) - 1), minmax(48px, 72px)); gap: 3px; }
.m3c-retea__cap { display: grid; place-items: center; font-weight: 900; font-size: 1.25rem; color: #1d4fb8; }
.m3c-retea__casuta { aspect-ratio: 1; border: 2px solid #b5c1db; border-radius: 6px; background: #fff; cursor: pointer; display: grid; place-items: center; padding: 2px; }
.m3c-retea__casuta:hover { border-color: #f0a500; }
.m3c-retea__casuta--bine { background: #fff6cf; border-color: #f0a500; }
.m3c-retea__ob { width: 82%; height: 82%; font-size: 1.9rem; }
.m3c-retea > :nth-last-child(-n + 0) { display: none; }
.m3c-turn { display: flex; flex-direction: column; align-items: center; gap: 0; } .m3c-turn > * { margin-top: -18px; } .m3c-turn svg { width: 90px; height: auto; }

/* ============ unitatea 8: măsurările ============ */

.m3c-scara-loc { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.m3c-scara { display: flex; align-items: flex-end; gap: 4px; }
.m3c-scara__treapta { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; width: clamp(70px, 9vw, 112px); height: calc(150px - var(--i) * 16px); padding-top: 8px; border-radius: 10px 10px 0 0; background: #cfe2ff; border: 3px solid #12245a; animation: m2-apare 0.4s var(--t, 0s) ease-out both; }
.m3c-scara__treapta--mult { background: #e9dcf6; }
.m3c-scara__treapta--baza { background: #ffd36b; }
.m3c-scara__simbol { font-size: clamp(1.3rem, 2.2vw, 1.8rem); color: #12245a; }
.m3c-scara__nume { font-size: clamp(0.7rem, 1vw, 0.9rem); font-weight: 700; color: #12245a; text-align: center; }
.m3c-scara__lege { max-width: 760px; margin: 0; font-weight: 800; color: #1d4fb8; text-align: center; }
.m3c-schimb__tinta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.m3c-ceas { display: flex; justify-content: center; width: 170px; }
.m3c-ceas svg { width: 100%; height: auto; }

/* ============ unitatea 9: organizarea datelor ============ */

.m3c-tabel { font-size: clamp(1rem, 1.4vw, 1.25rem); }
.m3c-tabel th { white-space: nowrap; }
.m3c-tabel .m3c-tabel__colt { background: #dfe8fb; font-style: italic; font-weight: 700; }
.m3c-tabel td { padding: 4px 8px; }
.m3c-tabel .casuta { width: 3.2em; }
.m3c-tabel .casuta[data-rezultat="bine"] { border-color: var(--verde); background: var(--verde-pal); }
.m3c-tabel .casuta[data-rezultat="gresit"] { border-color: #d9534f; background: #ffe6e4; }
.m3c-tabel__buton { min-width: 3em; padding: 4px 8px; border: 2px dashed transparent; border-radius: 8px; background: none; font: inherit; font-weight: 800; color: inherit; cursor: pointer; }
.m3c-tabel__buton:hover { border-color: #f0a500; }
.m3c-tabel__card { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 96px; padding: 8px 12px; border: 3px solid #8a97b5; border-radius: 12px; background: #fff; font: inherit; cursor: pointer; }
.m3c-tabel__card b { font-size: 1.6rem; color: #12245a; }
.m3c-tabel__card--pus { opacity: 0.4; border-style: dashed; }
.m3c-ordonat:empty { display: none; }
.m3c-ordonat { animation: m2-apare 0.5s ease-out both; }

.m3c-grafic { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.m3c-grafic__zona { position: relative; display: flex; align-items: flex-end; gap: 6px; height: var(--h); padding: 0 0 0 46px; margin-bottom: 64px; border-left: 3px solid #12245a; border-bottom: 3px solid #12245a; }
.m3c-grafic__axa { position: absolute; left: 0; bottom: 0; width: 40px; height: 100%; }
.m3c-grafic__gradatie { position: absolute; right: 4px; transform: translateY(50%); font-size: 0.85rem; font-weight: 800; color: #12245a; }
.m3c-grafic__linie { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed #c3cde3; }
.m3c-grafic__bare { position: relative; display: flex; align-items: flex-end; gap: clamp(10px, 2vw, 26px); height: 100%; padding: 0 14px; }
.m3c-grafic__col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; width: clamp(48px, 6vw, 76px); height: 100%; }
.m3c-grafic__bara { width: 100%; min-height: 0; border: 3px solid #12245a; border-bottom: 0; border-radius: 8px 8px 0 0; display: flex; justify-content: center; box-sizing: border-box; transition: height 0.35s; }
.m3c-grafic__bara b { margin-top: -1.6em; font-size: 1rem; color: #12245a; }
.m3c-grafic__bara--creste { animation: m3c-creste 0.7s var(--t, 0s) ease-out both; transform-origin: bottom; }
@keyframes m3c-creste { from { transform: scaleY(0); } }
.m3c-grafic__cap { position: absolute; top: calc(100% + 6px); display: flex; flex-direction: column; align-items: center; font-size: 0.9rem; font-weight: 800; text-align: center; line-height: 1.1; }
.m3c-grafic__e { font-size: 1.5rem; }
.m3c-grafic__unitate { margin: 0; font-weight: 700; color: #4a5a80; }

/* /jocuri/matematica-clasa-4/mate4.css */
/* Matematică, clasa a IV-a: modelele noi (clasele încep cu m4-). Restul
   aspectului vine de la clasele I–III. */

.m4-model { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.m4-calcul { align-self: stretch; }

/* metoda grafică */
.m4-parti__desen .m3c-seg__nume { flex-basis: 140px; }
.m4-parti__seg { cursor: pointer; }
.m4-parti__seg--numarat { background: #5fb0f5; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
.m4-parti__plus { cursor: pointer; font: inherit; font-weight: 900; font-size: 1.1rem; padding: 0; animation: m4-clipeste 1.4s ease-in-out infinite; }
.m4-parti__plus[data-scos] { animation: none; cursor: default; }
.m4-parti__valoare { flex: 0 0 auto; min-width: 70px; padding: 4px 10px; border: 3px dashed #8a97b5; border-radius: 12px; text-align: center; font-weight: 900; font-size: 1.3rem; color: #8a97b5; }
.m4-parti__valoare--aflat { border-style: solid; border-color: #4bb35a; background: #ecf9ef; color: #1c6b2b; animation: m2-apare 0.4s ease-out both; }
@keyframes m4-clipeste { 50% { filter: brightness(1.15); box-shadow: 0 0 0 4px #ffd9a8; } }

/* „dacă i-ar da” */
.m4-transfer__scena { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; width: 100%; }
.m4-transfer__cos { flex: 1 1 320px; max-width: 460px; padding: 12px; border: 4px solid #c99a5b; border-radius: 22px; background: #fff8ec; }
.m4-transfer__cap { margin: 0 0 8px; text-align: center; font-weight: 900; font-size: 1.35rem; color: #12245a; }
.m4-transfer__nr { display: inline-block; min-width: 2.2em; padding: 0 8px; border-radius: 10px; background: #12245a; color: #fff; }
.m4-transfer__obiecte { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 60px; }
.m4-transfer__cos:last-child .m4-transfer__ob { cursor: pointer; }
.m4-transfer__ob { display: grid; place-items: center; width: 38px; height: 38px; font-size: 1.9rem; line-height: 1; }
.m4-transfer__img { width: 100%; height: 100%; object-fit: contain; }
.m4-transfer__ob--nou { animation: m4-vine 0.5s ease-out both; }
@keyframes m4-vine { from { transform: translateX(160px) scale(0.6); opacity: 0; } }

/* metoda comparației */
.m4-comp__tabla { display: flex; flex-direction: column; gap: 12px; width: min(100%, 980px); }
.m4-comp__rand { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border: 3px solid #c4d6ee; border-radius: 18px; background: #fff; }
.m4-comp__rand--nou { animation: m2-apare 0.5s ease-out both; border-color: #f6c33b; }
.m4-comp__nume { flex: 0 0 130px; font-weight: 900; font-size: 1.2rem; color: #12245a; }
.m4-comp__grup { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 10px; border: 3px solid transparent; border-radius: 14px; background: #f3f7fd; font: inherit; cursor: pointer; }
.m4-comp__grup:hover { border-color: #9fc3ef; }
.m4-comp__grup--la-fel { opacity: 0.45; background: repeating-linear-gradient(45deg, #e9eef6 0 8px, #fff 8px 14px); border-color: #8a97b5; }
.m4-comp__obiecte { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 280px; font-size: 1.7rem; line-height: 1; }
.m4-comp__img { width: 34px; height: 34px; object-fit: contain; }
.m4-comp__eticheta { font-weight: 800; font-size: 1.05rem; color: #12245a; }
.m4-comp__semn { font-size: 1.8rem; font-weight: 900; color: #1d4fb8; }
.m4-comp__pret { padding: 6px 14px; border-radius: 12px; background: #fff3c4; font-weight: 900; font-size: 1.35rem; color: #7a4b00; }
.m4-comp__alege { max-width: 420px; white-space: normal; }

/* mersul invers pe lanț */
.m4-lant__sir { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.m4-lant__cutie { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 120px; padding: 8px 12px; border: 4px dashed #8a97b5; border-radius: 16px; background: #fff; }
.m4-lant__cutie--aflat { border-style: solid; border-color: #2f6fde; background: #eef5ff; }
.m4-lant__nume { font-weight: 800; font-size: 1.05rem; color: #44507a; text-align: center; }
.m4-lant__val { font-weight: 900; font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: #12245a; }
.m4-lant__sageata { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 10px; border: 3px solid transparent; border-radius: 14px; background: none; font: inherit; cursor: default; }
.m4-lant__sageata--acum { border-color: #f6c33b; background: #fff8dc; cursor: pointer; animation: m4-clipeste 1.4s ease-in-out infinite; }
.m4-lant__sageata--intoarsa .m4-lant__op { color: var(--rosu, #d23c3c); }
.m4-lant__op { font-weight: 900; font-size: clamp(1.15rem, 2vw, 1.5rem); color: #1d4fb8; white-space: nowrap; }
.m4-lant__text { font-size: 0.95rem; font-weight: 700; color: #55607f; text-align: center; max-width: 150px; }

@media (max-width: 640px) {
  .m4-comp__nume { flex-basis: 100%; }
  .m4-parti__desen .m3c-seg__nume { flex-basis: 58px; font-size: 0.9rem; }
  .m4-parti__desen .m3c-seg__rand { gap: 6px; }
  .m4-parti__desen .m3c-seg__parte { font-size: 0.8rem; }
  .m4-parti__plus { min-width: 40px; font-size: 0.8rem; }
  .m4-parti__valoare { min-width: 44px; padding: 2px 6px; font-size: 1rem; }
  .m4-comp__rand { gap: 6px; padding: 8px; }
  .m4-comp__grup { padding: 4px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .m4-parti__plus, .m4-lant__sageata--acum, .m4-transfer__ob--nou { animation: none; }
}

/* emoji-ul de rezervă, când obiectul nu are desen */
.m4-comp__obiecte .imagine--emoji { display: grid; place-items: center; width: 34px; height: 34px; font-size: 1.6rem; line-height: 1; overflow: visible; }
.m4-transfer__ob .imagine--emoji { display: grid; place-items: center; width: 38px; height: 38px; font-size: 1.8rem; line-height: 1; }

/* calculul scris (scris.js) */
.m4s-cap td { padding: 0 2px; text-align: center; }
.m4s-clasa { font-size: 0.78rem; font-weight: 800; color: #55607f; border-bottom: 3px solid currentColor; white-space: nowrap; }
.m4s-clasa--mii { color: #7a3fb0; }
.m4s-clasa--unitati { color: #1d6b4a; }
.m4s-clasa--milioane { color: #b0413f; }
.m4s-ord { font-weight: 900; font-size: 0.95rem; }
.m4s-ord--mii { background: #f4ecfb; }

/* împărțirea scrisă */
.m4i__tabla { display: flex; justify-content: center; width: 100%; overflow-x: auto; }
.m4i__tabel { border-collapse: collapse; font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 900; color: #12245a; }
.m4i__tabel td { min-width: 1.05em; height: 1.35em; padding: 0 1px; text-align: center; vertical-align: middle; }
.m4i__semn { color: #1d4fb8; }
.m4i__imp { padding-left: 14px !important; border-left: 4px solid #12245a; border-bottom: 4px solid #12245a; text-align: left !important; }
.m4i__cat { padding-left: 14px !important; border-left: 4px solid #12245a; text-align: left !important; color: #1d6b4a; letter-spacing: 0.06em; }
.m4i__sub { border-bottom: 3px solid #12245a; color: #b0413f; }
.m4i__rand--rest td.m4i__cifra { color: #1d4fb8; }
.m4i__coboara { background: #fff3c4; border-radius: 6px; animation: m4-clipeste 1.2s ease-in-out infinite; }

/* numerele până la 1 000 000 încap în căsuțele fișei */
.mate4 .casuta { width: 4.6em; }
.mate4 .calcul--problema .casuta { width: 4.9em; }

/* Exercițiile cu probă (două rânduri de calcul) au căsuțe late: cartonașele
   lor sunt mai late, iar rândurile trec pe rândul următor când nu încap,
   fără să rupă textul („43 : 7 =”) și fără să iasă din cartonaș. */
.mate4 .itemi--calcul:has(.calcul + .calcul) { grid-template-columns: repeat(auto-fill, minmax(min(600px, 100%), 1fr)); }
.mate4 .item:has(.calcul + .calcul) .calcul { flex-wrap: wrap; }
.mate4 .item:has(.calcul + .calcul) .casuta { width: 3.9em; }
.mate4 .item:has(.calcul + .calcul) .calcul__parte { white-space: nowrap; }
.mate4 .item { min-width: 0; }

/* graficul liniar */
.m4-liniar { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.m4-liniar__svg { width: min(100%, 720px); height: auto; }
.m4-liniar__grila { stroke: #dfe6f2; stroke-width: 1.5; }
.m4-liniar__axa { stroke: #12245a; stroke-width: 3; }
.m4-liniar__gradatie, .m4-liniar__eticheta { font: 700 16px system-ui, sans-serif; fill: #44507a; }
.m4-liniar__eticheta { font-size: 17px; fill: #12245a; }
.m4-liniar__linie--anim { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: m4-traseaza 1.6s var(--t, 0s) ease-out forwards; }
@keyframes m4-traseaza { to { stroke-dashoffset: 0; } }
.m4-liniar__tinta { fill: transparent; stroke: transparent; stroke-width: 3; cursor: pointer; }
.m4-liniar__tinta:hover { fill: #fff3c4; stroke: #f6c33b; }
.m4-liniar__tinta--rau { fill: #ffd6d6; stroke: #d23c3c; }
.m4-liniar__legenda { display: flex; gap: 18px; margin: 0; font-weight: 800; }
.m4-liniar__leg::before { content: ''; display: inline-block; width: 26px; height: 6px; margin-right: 6px; border-radius: 3px; background: var(--c); vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .m4-liniar__linie--anim { animation: none; stroke-dashoffset: 0; } }
.m4-liniar__tabel { max-width: 100%; overflow-x: auto; }

/* Metoda comparației cu trei feluri de obiecte (modele-comparatie3.js). */
.m4-comp3 .m4-comp__obiecte { max-width: 220px; }
.m4-comp3__nou { animation: m2-apare 0.45s ease-out both; }

/* Pe telefon: numerele de șase cifre de la comparare și tabelele cu date
   încap în cartonașul fișei (tabelul prea lat se derulează în cartonaș). */
.mate4 .comparatie { font-size: clamp(1.2rem, 5.2vw, 1.9rem); }
.mate4 .item .m6-tabel { display: block; max-width: 100%; overflow-x: auto; }
@media (max-width: 560px) {
  .mate4 .m6-tabel { font-size: 1rem; }
  .mate4 .m6-tabel th, .mate4 .m6-tabel td { padding: 4px 7px; }
  /* graficul cu bare: coloane mai înguste, ca toate să încapă */
  .mate4 .item .m3c-grafic__zona { padding-left: 40px; }
  .mate4 .item .m3c-grafic__bare { gap: 8px; padding: 0 6px; }
  .mate4 .item .m3c-grafic__col { width: 40px; }
}
/* eticheta celei mai înalte bare nu mai atinge titlul graficului */
.mate4 .item .m3c-grafic { gap: 16px; }

/* /jocuri/matematica-clasa-4/u1.css */
/* Aspectul modelelor unității 1 (clasele încep cu m4u1-).
   Clasele numerelor: clasa miilor mov deschis, clasa unităților verde
   deschis, clasa milioanelor roz; cifrele: sutele albastre, zecile verzi,
   unitățile portocalii (ca la clasele a II-a și a III-a). */

.m4u1--mii { --m4u1-fond: #f4ecfb; --m4u1-linie: #7a3fb0; }
.m4u1--unitati { --m4u1-fond: #eaf7ef; --m4u1-linie: #1d6b4a; }
.m4u1--milioane { --m4u1-fond: #fdeceb; --m4u1-linie: #b0413f; }

/* ---------- numărul scris pe clase ---------- */
.m4u1-nr { display: inline-flex; align-items: baseline; font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: 0.02em; line-height: 1.1; }
.m4u1-nr--mare { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.m4u1-nr__cifra--clasa { margin-right: 0.28em; }

/* ---------- numărătoarea ---------- */
.m4u1-num__cadru { display: grid; gap: 6px; width: min(100%, calc(var(--w) * 96px)); padding: 10px 10px 8px; border: 4px solid #a0703f; border-radius: 18px; background: #fffaf2; box-sizing: border-box; }
.m4u1-num__clase, .m4u1-num__tije, .m4u1-num__minus { display: grid; grid-template-columns: repeat(var(--w), minmax(0, 1fr)); gap: 6px; }
.m4u1-num__clasa { padding: 3px 4px; border-bottom: 4px solid var(--m4u1-linie); border-radius: 10px 10px 0 0; background: var(--m4u1-fond); color: var(--m4u1-linie); font-size: clamp(0.72rem, 1.6vw, 0.95rem); font-weight: 800; text-align: center; }
.m4u1-tija { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 230px; padding: 0 0 30px; border: 0; border-radius: 12px; background: var(--m4u1-fond); font: inherit; cursor: pointer; }
.m4u1-tija:hover { outline: 3px solid #f6c33b; }
.m4u1-tija__bat { position: absolute; top: 10px; bottom: 30px; left: 50%; width: 6px; margin-left: -3px; border-radius: 3px; background: #8a6a45; }
.m4u1-tija__bile { position: relative; display: flex; flex-direction: column-reverse; align-items: center; gap: 1px; }
.m4u1-tija__cap { position: absolute; bottom: 4px; left: 0; right: 0; font-weight: 900; font-size: 1.15rem; text-align: center; }
.m4u1-bila { display: block; width: clamp(26px, 5vw, 40px); height: 18px; border-radius: 50%; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2); }
.m4u1-bila--u { background: var(--m2-u, #e07b12); }
.m4u1-bila--z { background: var(--m2-z, #1f9a52); }
.m4u1-bila--s { background: var(--m2-s, #2f6fde); }
.m4u1-bila--noua { animation: m4u1-cade 0.35s ease-out both; }
.m4u1-bila--pleaca { animation: m4u1-pleaca 1s ease-in forwards; }
@keyframes m4u1-cade { from { transform: translateY(-60px); opacity: 0; } }
@keyframes m4u1-pleaca { 60% { transform: translateX(-30px); } to { transform: translateX(-90px) scale(0.3); opacity: 0; } }
.m4u1-num__baza { height: 10px; border-radius: 6px; background: #a0703f; }
.m4u1-num__minusb { min-width: 0; padding: 4px 0; }
.m4u1-num__numar { min-height: 1.2em; }
.m4u1-num__desc { max-width: 900px; font-size: clamp(1.05rem, 2.2vw, 1.4rem); text-align: center; }
.m4u1-num__citit { margin: 0; font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 800; color: #1d4fb8; text-align: center; }

/* ---------- tabelul claselor ---------- */
.m4u1-tabel-cadru { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; overflow-x: auto; }
.m4u1-tabel { border-collapse: separate; border-spacing: 3px; }
.m4u1-tabel td { padding: 0; text-align: center; }
.m4u1-tabel__clasa { padding: 3px 6px !important; border-bottom: 4px solid var(--m4u1-linie); border-radius: 10px 10px 0 0; background: var(--m4u1-fond); color: var(--m4u1-linie); font-size: clamp(0.75rem, 1.6vw, 0.95rem); font-weight: 800; white-space: nowrap; }
.m4u1-tabel__ordin { min-width: 2.2em; background: var(--m4u1-fond); font-weight: 900; font-size: 1.05rem; }
.m4u1-tabel__cifra { min-width: 1.4em; height: 1.4em; border-radius: 8px; background: var(--m4u1-fond); font-weight: 900; font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
.m4u1-tabel__citiri { margin: 0; padding: 0; list-style: none; font-size: clamp(1.05rem, 2vw, 1.3rem); }
.m4u1-tabel__citiri li { margin: 4px 0; }
.m4u1-tabel__citiri b { margin-right: 4px; color: #12245a; }

/* ---------- valoarea cifrei ---------- */
.m4u1-val td { background: var(--m4u1-fond); border-radius: 10px; }
.m4u1-val__cifra { width: clamp(46px, 9vw, 70px); height: clamp(56px, 10vw, 80px); border: 3px solid transparent; border-radius: 12px; background: #fff; font: inherit; font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; cursor: pointer; }
.m4u1-val__cifra:hover { border-color: #f6c33b; }
.m4u1-val__cifra[aria-pressed='true'] { border-color: #f08a24; background: #fff3c4; }
.m4u1-val__cifra--atinsa { box-shadow: inset 0 -5px 0 #c4d6ee; }
.m4u1-val__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.m4u1-val__chip { padding: 4px 12px; border-radius: 12px; background: #f3f7fd; font-weight: 900; font-size: 1.15rem; animation: m2-apare 0.35s ease-out both; }
.m4u1-val__desc { text-align: center; }

/* ---------- citirea pe clase ---------- */
.m4u1-cit__nr { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.m4u1-cit__clasa { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 14px; border: 4px solid transparent; border-radius: 16px; background: var(--m4u1-fond); }
.m4u1-cit__clasa .m4u1-nr { font-size: clamp(2.2rem, 5vw, 3.2rem); }
.m4u1-cit__clasa--acum { border-color: #f6c33b; box-shadow: 0 0 0 4px #fff3c4; }
.m4u1-cit__eticheta { color: var(--m4u1-linie); font-size: 0.95rem; font-weight: 800; }
.m4u1-cit__citit { min-height: 1.4em; margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.55rem); font-weight: 800; color: #1d4fb8; text-align: center; }
.m4u1-cit__citit--gata { padding: 4px 14px; border-radius: 12px; background: #ecf9ef; color: #1c6b2b; }
.m4u1-cit__varianta { max-width: 440px; white-space: normal; }

/* ---------- dictarea ---------- */
.m4u1-dict__text { margin: 0; font-size: clamp(1.25rem, 2.6vw, 1.7rem); font-weight: 800; color: #1d4fb8; text-align: center; }
.m4u1-dict__ecran { display: grid; place-items: center; min-width: min(100%, 360px); min-height: 84px; padding: 4px 18px; border: 4px solid #c4d6ee; border-radius: 18px; background: #fff; box-sizing: border-box; }
.m4u1-dict__ecran--bine { border-color: #4bb35a; background: #ecf9ef; }
.m4u1-dict__gol { color: #8a97b5; font-size: 1.2rem; font-weight: 700; }

/* ---------- compararea ---------- */
.m4u1-comp__tabel--activ .m4u1-tabel__cifra { cursor: pointer; }
.m4u1-comp__tabel--activ .m4u1-tabel__cifra:hover { outline: 3px solid #f6c33b; }
.m4u1-comp__semn { height: 1.4em; font-weight: 900; font-size: 1.5rem; }
.m4u1-comp__semn--egal { color: #8a97b5; }
.m4u1-comp__semn--dif { color: #d23c3c; }
.m4u1-comp__col--egal { opacity: 0.55; }
.m4u1-comp__col--dif { outline: 4px solid #d23c3c; }
.m4u1-comp__rez { min-height: 1.3em; margin: 0; font-size: 1.15rem; font-weight: 800; color: #44507a; text-align: center; }

/* ---------- rotunjirea ---------- */
.m4u1-rot__cifre { display: flex; justify-content: center; gap: 4px; }
.m4u1-rot__cifra { width: clamp(42px, 8vw, 62px); height: clamp(54px, 10vw, 76px); border: 3px solid #cfd8ea; border-radius: 12px; background: #fff; font: inherit; font-size: clamp(1.9rem, 4.6vw, 2.8rem); font-weight: 900; cursor: pointer; }
.m4u1-rot__cifra:hover { border-color: #f6c33b; }
.m4u1-rot__cifra--privita { border-color: #f08a24; background: #fff3c4; }
.m4u1-rot__cifra--zero { opacity: 0.45; }
.m4u1-rot__spatiu { width: 10px; }
.m4u1-rot__axa { width: 100%; }
.m4u1-axa { width: 100%; max-width: 860px; margin: 0 auto; }
.m4u1-axa svg { display: block; width: 100%; height: auto; overflow: visible; }
.m4u1-axa__bun { fill: #1c8a3c; }
.m4u1-axa__atins { cursor: crosshair; }

/* ---------- cifrele romane ---------- */
.m4u1-rom__tabla { display: flex; flex-wrap: wrap; gap: 6px; min-height: 90px; min-width: min(100%, 280px); padding: 10px 18px; border-radius: 16px; background: #24452f; align-items: center; justify-content: center; box-sizing: border-box; }
.m4u1-rom__semn { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.4rem, 5.4vw, 4rem); font-weight: 700; color: #fff; line-height: 1; animation: m2-apare 0.3s ease-out both; }
.m4u1-rom__semn--V, .m4u1-rom__semn--L, .m4u1-rom__semn--D { color: #ffd36b; }
.m4u1-rom__semn--X, .m4u1-rom__semn--C, .m4u1-rom__semn--M { color: #9fd3ff; }
.m4u1-rom__semn--buton { padding: 2px 6px; border: 3px solid transparent; border-radius: 12px; background: none; cursor: pointer; }
.m4u1-rom__semn--buton:hover { border-color: #f6c33b; }
.m4u1-rom__semn--pereche { border-color: #ff9d9d; }
.m4u1-rom__semn--citit { opacity: 0.5; }
.m4u1-rom__gol { color: #9db5a4; font-size: 2rem; }
.m4u1-rom__arab { margin: 0; }
.m4u1-rom__expl { min-height: 1.3em; text-align: center; }
.m4u1-rom__butoane { max-width: 760px; }
.m4u1-rom__buton { display: inline-flex; flex-direction: column; align-items: center; min-width: 64px; padding: 6px 10px; line-height: 1.05; }
.m4u1-rom__buton b { font-family: Georgia, 'Times New Roman', serif; font-size: 1.8rem; }
.m4u1-rom__buton small { font-size: 0.85rem; font-weight: 700; }

/* ---------- fișa ---------- */
.m4u1-fisa-nr { display: inline-block; padding: 2px 12px; border-radius: 12px; background: #f3f7fd; font-weight: 900; font-size: clamp(1.4rem, 3vw, 1.9rem); color: #12245a; }

@media (max-width: 640px) {
  .m4u1-tija { height: 190px; }
  .m4u1-bila { height: 15px; }
  .m4u1-num__cadru { padding: 6px; gap: 4px; }
  .m4u1-num__clase, .m4u1-num__tije, .m4u1-num__minus { gap: 3px; }
  .m4u1-tabel { border-spacing: 2px; }
  .m4u1-tabel__ordin { min-width: 1.6em; }
  .m4u1-rom__buton { min-width: 52px; padding: 4px 6px; }
  /* pe telefon, desenul axei se micșorează: etichetele se măresc */
  .m4u1-peaxa .m4u1-axa__et { font-size: 28px; }
  .m4u1-rot__axa .m4u1-axa__et { font-size: 42px; }
  .m4u1-rot__axa .m4u1-axa__mij { font-size: 30px; }
  .m4u1-rot__axa .m4u1-axa__n { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .m4u1-bila--noua, .m4u1-bila--pleaca { animation: none; }
}

/* /jocuri/matematica-clasa-4/u2.css */
/* Aspectul modelelor unității 2 (clasele încep cu m4u2-). */

/* ---------- balanța ---------- */
.m4u2-bal { gap: 6px; }
.m4u2-bal__brat { width: min(100%, 860px); gap: 24px; box-sizing: border-box; }
.m4u2-bal__taler { width: 47%; min-height: 120px; box-sizing: border-box; }
.m4u2-bal .m2-cantar__cunoscut { min-width: 0; font-size: clamp(1.15rem, 2.6vw, 1.7rem); white-space: nowrap; }
.m4u2-greutate { display: inline-grid; place-items: center; padding: 0 5px; border-radius: 10px 10px 6px 6px; color: #fff; font-weight: 900; white-space: nowrap; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.2); cursor: pointer; }
.m4u2-greutate--100000 { height: 46px; background: #7a3fb0; font-size: 1.05rem; }
.m4u2-greutate--10000 { height: 40px; background: #a35ad8; font-size: 1rem; }
.m4u2-greutate--1000 { height: 36px; background: #c58be8; font-size: 0.95rem; }
.m4u2-greutate--100 { height: 32px; background: var(--m2-s, #2f6fde); font-size: 0.9rem; }
.m4u2-greutate--10 { height: 28px; background: var(--m2-z, #1f9a52); font-size: 0.85rem; }
.m4u2-greutate--1 { height: 26px; min-width: 22px; background: var(--m2-u, #e07b12); font-size: 0.85rem; }
.m4u2-bal__butoane { gap: 8px; }
.m4u2-bal__pune { padding: 6px 10px; }
.m4u2-bal__ecuatie { text-align: center; }

/* ---------- estimarea, proba, calculul rapid, problemele ---------- */
.m4u2-estim .m4-calcul, .m4u2-proba .m4-calcul, .m4u2-rapid .m4-calcul, .m4u2-nec .m4-calcul { align-items: center; text-align: center; }
.m4u2-prob .m4-calcul { max-width: 900px; align-self: center; }
.m4u2-estim__exact { background: #eef5ff; }
.m4u2-proba__zona { display: flex; justify-content: center; width: 100%; }
.m4u2-proba__zona:empty { display: none; }
.m4u2-proba__ok { background: #ecf9ef; color: #1c6b2b; }
.m4u2-rapid__tot { background: #fff3c4; }
.m4u2-nec__x { background: #eef5ff; font-size: 1.2em; }
.m4u2-prob__text { max-width: 900px; margin: 0; padding: 10px 16px; border-radius: 16px; background: #fffaf0; border: 3px solid #f2d8a6; font-size: clamp(1.1rem, 2.2vw, 1.4rem); font-weight: 700; line-height: 1.45; color: #12245a; }
.m4u2-prob__raspuns { background: #ecf9ef; color: #1c6b2b; }

@media (max-width: 640px) {
  .m4u2-bal__brat { gap: 10px; padding: 0 2px 6px; }
  .m4u2-bal__taler { padding: 4px; min-height: 90px; }
  .m4u2-greutate--100000, .m4u2-greutate--10000, .m4u2-greutate--1000 { font-size: 0.78rem; height: 32px; }
  .m4u2-greutate--100, .m4u2-greutate--10, .m4u2-greutate--1 { font-size: 0.75rem; height: 26px; }
  .m4u2-bal__pune { padding: 4px 6px; }
}

/* /jocuri/matematica-clasa-4/u3.css */
/* Aspectul modelelor unității 3 (clasele încep cu m4u3-). */

/* tabelul ordinelor */
.m4u3-tabel { display: grid; grid-template-columns: repeat(7, minmax(0, 64px)); gap: 4px; justify-content: center; width: min(100%, 520px); }
.m4u3-tabel__clasa { text-align: center; padding-bottom: 2px; }
.m4u3-tabel__ord { display: grid; place-items: center; height: 34px; border-radius: 8px 8px 0 0; background: #eef3ff; }
.m4u3-tabel__cifra { display: grid; place-items: center; height: 64px; border: 3px solid #c4d6ee; border-radius: 0 0 12px 12px; background: #fff; font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 900; }
.m4u3-tabel__cifra--stanga { animation: m4u3-stanga 0.6s ease-out both; }
.m4u3-tabel__cifra--dreapta { animation: m4u3-dreapta 0.6s ease-out both; }
.m4u3-tabel__cifra--zero { animation: m4u3-zero 0.7s ease-out both; background: #fff3c4; }
@keyframes m4u3-stanga { from { transform: translateX(70px); opacity: 0.3; } }
@keyframes m4u3-dreapta { from { transform: translateX(-70px); opacity: 0.3; } }
@keyframes m4u3-zero { from { transform: scale(0.2); opacity: 0; } }

/* pe ordine */
.m4u3-peordine__termeni { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.m4u3-chip { padding: 6px 14px; border: 3px solid #c4d6ee; border-radius: 999px; background: #fff; font-weight: 900; font-size: clamp(1.05rem, 2vw, 1.35rem); }
.m4u3-chip--acum { border-color: #f6c33b; background: #fff8dc; animation: m4-clipeste 1.4s ease-in-out infinite; }
.m4u3-chip--gata { border-color: #4bb35a; background: #ecf9ef; }

/* gruparea factorilor */
.m4u3-grup__rand { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; min-height: 76px; }
.m4u3-grup__ori { font-size: 2rem; font-weight: 900; color: #c0392b; }
.m4u3-jeton { min-width: 76px; height: 68px; padding: 0 14px; border: 3px solid #c4d6ee; border-radius: 16px; background: #eef3ff; font: inherit; font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 900; color: #12245a; cursor: pointer; }
.m4u3-jeton:hover { border-color: #f0a500; }
.m4u3-jeton--ales { border-color: #f0a500; background: #ffe58a; }
.m4u3-jeton--rezultat { background: #ecf9ef; border-color: #4bb35a; color: #1f7a3a; cursor: default; }

/* distributivitatea */
.m4u3-distr__desen { display: flex; flex-direction: column; gap: 6px; width: min(100%, 760px); }
.m4u3-distr__rand { display: flex; height: 34px; }
.m4u3-distr__a, .m4u3-distr__b { display: grid; place-items: center; min-width: 2.6em; border: 3px solid #12245a; margin-right: -3px; font-weight: 900; font-size: 1rem; color: #12245a; transition: filter 0.3s, box-shadow 0.3s; overflow: hidden; white-space: nowrap; }
.m4u3-distr__a { background: #9fd3ff; }
.m4u3-distr__b { background: #ffc58a; }
.m4u3-distr__b--scos { background: repeating-linear-gradient(45deg, #ffc58a 0 8px, #fff 8px 14px); }
.m4u3-distr--acum { filter: brightness(1.08); box-shadow: inset 0 0 0 4px #f6c33b; }
.m4u3-distr__legenda { margin: 4px 0 0; text-align: center; font-weight: 700; color: #44507a; }

/* de câte ori, pe segmente */
.m4u3-deori__desen { display: flex; flex-direction: column; gap: 12px; width: min(100%, 860px); }
.m4u3-deori__rand { display: flex; align-items: center; gap: 10px; }
.m4u3-deori__nume { flex: 0 0 110px; font-weight: 900; font-size: 1.15rem; color: #12245a; }
.m4u3-deori__bara { display: flex; flex: 1; height: 46px; }
.m4u3-deori__bara--gol { border: 3px dashed #c4d6ee; border-radius: 10px; }
.m4u3-deori__seg { height: 100%; border: 3px solid #12245a; margin-right: -3px; background: #9fd3ff; animation: m2-apare 0.4s ease-out both; }
.m4u3-deori__seg--b { background: #ffc58a; }

/* cadrul înmulțirii, în fișă */
.m4u3-cadru__loc { display: flex; justify-content: center; }
.m4u3-cadru { font-size: clamp(1.3rem, 2.4vw, 1.8rem); }

@media (max-width: 640px) {
  .m4u3-tabel { gap: 2px; }
  .m4u3-tabel__cifra { height: 48px; }
  .m4u3-tabel__ord { height: 28px; }
  .m4u3-tabel__clasa { font-size: 0.62rem; white-space: normal; }
  .m4u3-deori__nume { flex-basis: 64px; font-size: 0.95rem; }
  .m4u3-jeton { min-width: 56px; height: 54px; padding: 0 8px; }
  .m4u3-ordineop .m3c-ordine__jeton { min-width: 0; height: 52px; padding: 0 6px; font-size: 1.4rem; }
  .m4u3-ordineop .m3c-ordine__semn { width: 50px; height: 50px; font-size: 1.7rem; }
  .m4u3-ordineop .m3c-ordine__rand { gap: 4px; }
  .m4u3-distr__a, .m4u3-distr__b { font-size: 0.8rem; min-width: 2.2em; }
}
@media (prefers-reduced-motion: reduce) {
  .m4u3-tabel__cifra--stanga, .m4u3-tabel__cifra--dreapta, .m4u3-tabel__cifra--zero, .m4u3-chip--acum { animation: none; }
}
.m4u3-jeton--fix { display: inline-grid; place-items: center; cursor: default; }

/* /jocuri/matematica-clasa-4/u4.css */
/* Aspectul modelelor unității 4 (clasele încep cu m4u4-). */

/* grupe egale */
.m4u4-grupe__gramada { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 48px; width: min(100%, 760px); padding: 10px; border: 3px dashed #c4d6ee; border-radius: 18px; background: #f8fbff; }
.m4u4-grupe__cutii { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.m4u4-ob { display: grid; place-items: center; width: 36px; height: 36px; font-size: 1.7rem; line-height: 1; }
.m4u4-ob__img { width: 100%; height: 100%; object-fit: contain; }
.m4u4-ob .imagine--emoji { display: grid; place-items: center; width: 36px; height: 36px; font-size: 1.6rem; line-height: 1; }
.m4u4-ob--nou { animation: m4u4-coboara 0.5s ease-out both; }
@keyframes m4u4-coboara { from { transform: translateY(-70px) scale(0.6); opacity: 0; } }
.m4u4-cutie { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 96px; max-width: 200px; padding: 8px; border: 3px solid #c99a5b; border-radius: 16px; background: #fff8ec; }
.m4u4-cutie--grupa { border-color: #5aa0e6; background: #eef5ff; animation: m2-apare 0.4s ease-out both; }
.m4u4-cutie__cap { font-size: 1.6rem; font-weight: 900; color: #12245a; }
.m4u4-cutie--grupa .m4u4-cutie__cap { font-size: 1rem; }
.m4u4-cutie__ob { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; min-height: 36px; }
.m4u4-cutie__nr { min-width: 2em; padding: 0 8px; border-radius: 10px; background: #12245a; color: #fff; font-weight: 900; text-align: center; }

/* resturile posibile */
.m4u4-rest__plansa { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: min(100%, 720px); }
.m4u4-rest__nr { width: 64px; height: 64px; border: 3px solid #c4d6ee; border-radius: 50%; background: #fff; font: inherit; font-size: 1.7rem; font-weight: 900; color: #12245a; cursor: pointer; }
.m4u4-rest__nr:hover { border-color: #f0a500; }
.m4u4-rest__nr--bun { border-color: #4bb35a; background: #ecf9ef; color: #1f7a3a; }

/* cifra câtului */
.m4u4-cifra__tabla { min-height: 48px; }
.m4u4-cifra__incerc { margin: 0; padding: 8px 18px; border-radius: 14px; background: #fff3c4; font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-weight: 900; color: #7a4b00; animation: m2-apare 0.35s ease-out both; }
.m4u4-cifra__incerc--bun { background: #ecf9ef; color: #1f7a3a; }
.m4u4-cifra .optiune { white-space: normal; max-width: 320px; }

/* numărul necunoscut */
.m4u4-necunoscut__ec { margin: 0; padding: 10px 22px; border: 3px solid #c4d6ee; border-radius: 16px; background: #fff; font-size: clamp(1.6rem, 3.4vw, 2.5rem); font-weight: 900; color: #12245a; }
.m4u4-necunoscut__ec--gata { border-color: #4bb35a; background: #ecf9ef; color: #1f7a3a; }

/* cadrul împărțirii, în fișă */
.m4u4-cadru__loc { display: flex; justify-content: center; }
.m4u4-cadru { font-size: clamp(1.3rem, 2.4vw, 1.8rem); }

@media (max-width: 640px) {
  .m4u4-ob, .m4u4-ob .imagine--emoji { width: 28px; height: 28px; font-size: 1.3rem; }
  .m4u4-cutie { min-width: 72px; padding: 6px; }
  .m4u4-rest__nr { width: 52px; height: 52px; font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .m4u4-ob--nou, .m4u4-cutie--grupa { animation: none; }
}

/* /jocuri/matematica-clasa-4/u6.css */
/* Aspectul modelelor unității 6 (clasele încep cu m4u6-). */

.m4u6 { max-width: 100%; }

/* pătratul de 10 × 10 */
.m4u6-grila { max-width: 100%; height: auto; touch-action: manipulation; }
.m4u6-celula--clic, .m4u6-grila--clic { cursor: pointer; }
.m4u6-celula--clic:hover { opacity: 0.75; }
.m4u6-sub { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; font-weight: 800; }
.m4u6-procent { font-size: clamp(1.6rem, 2.8vw, 2.2rem); color: #1d4fb8; }

/* două benzi la fel de lungi */
.m4u6-benzi { display: flex; flex-direction: column; gap: 12px; align-items: center; max-width: 100%; }
.m4u6-banda { display: flex; align-items: center; gap: 14px; max-width: 100%; }
.m4u6-banda__fr { min-width: 3.2em; display: flex; justify-content: center; }
.m4u6-banda__desen { min-width: 0; }
.m4u6-banda__desen svg { max-width: 100%; height: auto; }

/* axa cu salturi */
.m4u6-axa__desen { width: min(680px, 100%); }
.m4u6-axa__desen svg { width: 100%; height: auto; display: block; }
.m4u6-axa__tinta { cursor: pointer; }
.m4u6-axa__tinta:hover { fill: rgba(63, 167, 245, 0.12); }

/* segmentul unui număr, împărțit în părți egale */
.m4u6-seg { width: min(680px, 100%); display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.m4u6-seg__bara { display: flex; width: 100%; min-height: 54px; border: 3px solid #12245a; border-radius: 10px; overflow: hidden; background: #e7f3ff; }
.m4u6-seg__tot { flex: 1; display: flex; align-items: center; justify-content: center; font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 900; color: #12245a; }
.m4u6-seg__acolada { margin: 0; text-align: center; font-weight: 900; color: #12245a; font-size: clamp(1rem, 1.8vw, 1.3rem);
  border: 3px solid #12245a; border-bottom: none; border-radius: 12px 12px 0 0; padding: 2px 0 6px; }
.m4u6-seg__parte { flex: 1 1 0; min-width: 0; min-height: 54px; border: none; border-left: 3px solid #12245a; background: #fff; font: inherit; font-weight: 900;
  font-size: clamp(0.85rem, 1.8vw, 1.3rem); color: #1d4fb8; cursor: pointer; padding: 2px; overflow-wrap: anywhere; }
.m4u6-seg__parte:first-child { border-left: none; }
.m4u6-seg__parte--aleasa { background: #ffd9a8; color: #7a3d00; }
.m4u6-seg__parte--taiat { background: repeating-linear-gradient(45deg, #ffe0e0 0 8px, #ffc2c2 8px 16px); color: #a11d1d; text-decoration: line-through; }

/* grupele de obiecte se aleg prin atingere */
.m4u6-parte { font: inherit; background: #fff; cursor: pointer; }

/* eticheta de preț */
.m4u6-eticheta { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; padding: 8px 18px; border: 3px solid #12245a; border-radius: 14px; background: #fffbe6; }
.m4u6-eticheta__img { width: 56px; height: 56px; font-size: 2.6rem; display: inline-flex; align-items: center; justify-content: center; }
.m4u6-eticheta__produs { font-weight: 800; font-size: 1.15rem; }
.m4u6-eticheta__pret { font-size: 1.5rem; color: #12245a; }
.m4u6-eticheta__red { font-weight: 900; font-size: 1.4rem; color: #fff; background: #d62828; border-radius: 10px; padding: 2px 10px; }

/* obiecte numărate și întregii unei fracții supraunitare */
.m4u6-obiecte { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 460px; }
.m4u6-obiect { font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1; }
.m4u6-intregi { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

@media (max-width: 520px) {
  .m4u6 .m3c-grup--impartit { gap: 8px; }
  .m4u6 .m3c-grup__parte { max-width: 150px; padding: 5px; }
  .m4u6 .m3c-grup__ob { width: 34px; height: 34px; font-size: 1.6rem; }
  .m4u6-banda { flex-direction: column; gap: 4px; }
  .m4u6-eticheta { gap: 8px; padding: 6px 10px; }
}

/* /jocuri/matematica-clasa-4/u7.css */
/* Aspectul modelelor unității 7 (clasele încep cu m4u7-). */

.m4u7-model { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.m4u7-cerinta { max-width: 760px; }
.m4u7-desen { display: flex; justify-content: center; max-width: 100%; }
.m4u7-svg { display: block; max-width: 100%; height: auto; }
.m4u7-clic { cursor: pointer; }
.m4u7-clic:hover > line:last-child, .m4u7-clic:hover > circle:last-child { filter: brightness(1.25); }
.m4u7-drum { margin: 0; min-height: 1.3em; max-width: 760px; font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 800; color: #1d4fb8; text-align: center; overflow-wrap: anywhere; }
.m4u7-eticheta { margin: 0; min-height: 1.3em; font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 900; color: #12245a; text-align: center; }
.m4u7-sageata { min-width: 110px; }
.m4u7-optiune-lata { max-width: 520px; text-align: left; white-space: normal; }
.m4u7-coloana { flex-direction: column; align-items: stretch; }
.m4u7-pasi { margin: 0; padding-left: 1.6em; max-width: 620px; font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-weight: 700; color: #1f7a3a; }
.m4u7-pasi:empty { display: none; }
.m4u7-ales { border-color: #f0a500; background: #fff4d6; }
.m4u7-bine { border-color: var(--verde, #2f9e5b); background: var(--verde-pal, #e6f7ec); }
.m4u7-rau { border-color: #c0392b; background: #fdecea; }
.m4u7-apare { animation: m2-apare 0.5s ease-out both; }
.m4u7-aluneca { transition: transform 0.9s ease-in-out; }
.m4u7-urca { animation: m4u7-urca 0.9s ease-in-out both; }
@keyframes m4u7-urca { from { transform: translateY(0); } }
.m4u7-cerc-anim { stroke-dasharray: var(--l); stroke-dashoffset: var(--l); animation: m4u7-traseaza 1.4s ease-in-out forwards; }
@keyframes m4u7-traseaza { to { stroke-dashoffset: 0; } }

/* desfășurările care se pliază */
.m4u7-scena-loc { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 220px; padding: 10px 0 20px; perspective: 1000px; overflow: hidden; }
.m4u7-scena { position: relative; transform-style: preserve-3d; transition: transform 1.3s ease-in-out; }
.m4u7-fata { position: absolute; display: grid; place-items: center; box-sizing: border-box; border: 3px solid #12245a; transform-style: preserve-3d; transition: transform 1.3s ease-in-out, background 0.3s; font-size: 0.95rem; font-weight: 900; color: #12245a; cursor: pointer; }
.m4u7-fata > span { pointer-events: none; text-align: center; line-height: 1.1; }
.m4u7-fata--ales { outline: 4px solid #f0a500; outline-offset: -7px; }
.m4u7-scena--pliat .m4u7-fata > span { opacity: 0.85; }

/* volumul: fundul cutiei văzut de sus */
.m4u7-volum__rand { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px; width: 100%; }
.m4u7-fund { display: grid; grid-template-columns: repeat(var(--c), 50px); gap: 4px; padding: 8px; border: 3px solid #c4d6ee; border-radius: 14px; background: #f3f7fd; }
.m4u7-fund__casuta { width: 50px; height: 50px; border: 3px solid #9fb3d8; border-radius: 8px; background: #fff; font: inherit; font-size: 1.3rem; font-weight: 900; color: #12245a; cursor: pointer; }
.m4u7-fund__casuta:hover { border-color: #2f6fde; }
.m4u7-fund__casuta--plin { background: #dff3e4; border-color: #4bb35a; cursor: default; }

@media (max-width: 520px) {
  .m4u7-fund { grid-template-columns: repeat(var(--c), 40px); }
  .m4u7-fund__casuta { width: 40px; height: 40px; }
  .m4u7-sageata { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .m4u7-scena, .m4u7-fata, .m4u7-aluneca { transition: none; }
  .m4u7-cerc-anim, .m4u7-urca { animation: none; stroke-dashoffset: 0; }
}

/* /jocuri/matematica-clasa-4/u8.css */
/* Aspectul modelelor unității 8 (clasele încep cu m4u8-). */

.m4u8 { max-width: 100%; }

/* treptele unităților */
.m4u8-scara-loc { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.m4u8-scara { display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: min(760px, 100%); }
.m4u8-treapta { flex: 1 1 0; min-width: 0; max-width: 96px; height: calc(74px + var(--h) * 12px); display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 2px 4px; border: 3px solid #12245a; border-bottom-width: 5px; border-radius: 10px 10px 0 0; background: #e7f3ff; color: #12245a; font: inherit; }
button.m4u8-treapta { cursor: pointer; }
button.m4u8-treapta:hover { background: #d2e8ff; }
.m4u8-treapta__simbol { font-size: clamp(0.95rem, 2vw, 1.35rem); font-weight: 900; }
.m4u8-treapta__nume { font-size: clamp(0.55rem, 1vw, 0.75rem); font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; text-align: center; }
.m4u8-treapta__factor { margin-top: auto; font-size: clamp(0.6rem, 1.1vw, 0.8rem); font-weight: 900; color: #b45309; }
.m4u8-treapta--baza .m4u8-treapta__simbol { color: #d62828; }
.m4u8-treapta--acum { background: #ffd9a8; border-color: #c2410c; }
.m4u8-treapta--tinta { outline: 4px dashed #2f9e44; outline-offset: 2px; }
.m4u8-scara__lege { margin: 0; text-align: center; font-weight: 700; max-width: 640px; }
.m4u8-transforma__zona { width: 100%; display: flex; justify-content: center; }
.m4u8-transforma__valoare { margin: 4px 0; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; color: #1d4fb8; text-align: center; }

/* vasele gradate */
/* Vasul de sticlă: pereți albăstrui, umbră sub el, buză sus; luciul
   vine din biblioteca de obiecte (vasGradat, .m4u8-vas__sticla). */
.m4u8-vas { position: relative; width: 110px; height: 220px; margin: 10px auto; border: 4px solid #3c5a7a; border-top: none; border-radius: 0 0 18px 18px; background: linear-gradient(90deg, #e3f1fc, #f8fcff 45%, #d2e7f7); box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.25), inset 0 -5px 0 rgba(159, 195, 222, 0.6); }
.m4u8-vas::before { content: ''; position: absolute; left: -8px; right: -8px; top: -2px; height: 4px; border-radius: 2px; background: #3c5a7a; z-index: 2; }
.m4u8-vas--bidon { width: 150px; }
.m4u8-vas--mic { width: 64px; height: 120px; margin: 0 auto; }
.m4u8-vas__apa { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(90deg, #8fd0ff, #4aa3ff 45%, #2a7fd6); box-shadow: inset 0 3px 0 #cfeaff; border-radius: 0 0 14px 14px; transition: height 0.5s ease-out; }
.m4u8-vas__sticla { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.m4u8-vas__semn { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed rgba(37, 50, 77, 0.65); padding-left: calc(100% + 8px); line-height: 0; white-space: nowrap; font-size: 0.8rem; font-weight: 800; color: #25324d; }
.m4u8-vas--mic .m4u8-vas__semn { font-size: 0.6rem; padding-left: calc(100% + 4px); }

/* paharele */
.m4u8-imparte__scena { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-end; justify-content: center; }
.m4u8-imparte__scena .m4u8-vas { margin: 10px 60px 10px 0; }
.m4u8-pahare { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 440px; }
.m4u8-pahar { position: relative; width: 48px; height: 64px; padding: 0; border: 3px solid #25324d; border-top: none; border-radius: 0 0 10px 10px; background: #fff; cursor: pointer; overflow: hidden; font: inherit; }
.m4u8-pahar__apa { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: #ffb347; transition: height 0.4s ease-out; }
.m4u8-pahar[data-plin] .m4u8-pahar__apa { height: 85%; }
.m4u8-pahar__eticheta { position: absolute; left: 0; right: 0; bottom: 3px; font-size: 0.6rem; font-weight: 900; color: #25324d; }

/* ceasul și durata */
.m4u8-ceas__rand { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: center; }
.m4u8-digital { font: 900 clamp(2rem, 5vw, 3.2rem) / 1 ui-monospace, Consolas, monospace; background: #12245a; color: #7cf29c; padding: 8px 18px; border-radius: 12px; letter-spacing: 0.05em; }
.m4u8-ceas__zi { margin: 0; text-align: center; font-weight: 800; color: #5a6b8c; }
.m4u8-salturi { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.m4u8-salt { padding: 4px 10px; border-radius: 999px; background: #ffe8cc; color: #7a3d00; font-weight: 800; }
.m4u8-salt--start { background: #12245a; color: #fff; }

/* mileniul și secolul */
.m4u8-secol__zona { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.m4u8-secol__zona--secole { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(720px, 100%); }
.m4u8-mileniu, .m4u8-secol__b { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 12px; border: 3px solid #cfd8ea; border-radius: 14px; background: #fff; font: inherit; cursor: pointer; color: #12245a; }
.m4u8-mileniu b, .m4u8-secol__b b { font-size: 1.15rem; }
.m4u8-mileniu span, .m4u8-secol__b span { font-size: 0.8rem; font-weight: 700; color: #5a6b8c; }
.m4u8-secol__b--bun { border-color: #2f9e44; background: #e6f7ea; }

/* banii */
.m4u8-pret { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 8px 16px; border: 3px solid #12245a; border-radius: 14px; background: #fffbe6; font-weight: 800; }
.m4u8-pret__e { font-size: 2.2rem; }
.m4u8-pret b { font-size: 1.3rem; }
.m4u8-pret__platit { padding: 2px 10px; border-radius: 10px; background: #e6f7ea; color: #1b5e20; }
.m4u8-suma { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 520px; }

@media (max-width: 520px) {
  .m4u8-treapta { height: calc(50px + var(--h) * 10px); border-width: 2px; border-bottom-width: 4px; padding: 4px 1px 3px; }
  .m4u8-treapta__nume { display: none; }
  .m4u8-secol__zona--secole { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m4u8-imparte__scena .m4u8-vas { margin-right: 60px; }
}