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