/* aplicatie.css — stiluri proprii lecției „Model de arie: două cifre × două cifre” (doar variabile de culoare).
   Culorile bucăților: zz = zeci × zeci (leaf), uz = unități × zeci (sky), zu = zeci × unități (sun), uu = unități × unități (berry).
   Rândurile din coloană: rândul 1 (× unități) = berry, rândul 2 (× zeci) = sky. */

/* ---------- culorile bucăților, în SVG și în HTML ---------- */
.ma-czz{color:var(--leaf-deep);fill:var(--leaf-deep)}
.ma-cuz{color:var(--sky);fill:var(--sky)}
.ma-czu{color:var(--sun-ink);fill:var(--sun-ink)}
.ma-cuu{color:var(--berry);fill:var(--berry)}
.ma-q{color:var(--muted);fill:var(--muted)}

/* ---------- planșele desenate ---------- */
.plate .ma-anim,.plate .ma-fisa,.plate .ma-sute,.plate .ma-leg-c{background:var(--card);color:var(--ink);border-radius:12px;padding:12px;font-weight:800;text-align:center}
.ma-svg{display:block;margin:0 auto;max-width:100%;height:auto;overflow:visible}
.ma-svg text{font-family:"Baloo 2",system-ui,sans-serif;font-weight:800;text-anchor:middle;fill:var(--ink)}
.ma-svg .ma-lb{font-size:var(--fl,18px)}
.ma-svg .ma-ls{text-anchor:end}
.ma-svg .ma-ts{text-anchor:start}
.ma-svg .ma-t{font-size:var(--ft,15px)}
.ma-svg .ma-tb{font-size:calc(var(--ft,15px) * 1.12)}
.ma-cap{margin:8px 0 0;font-size:calc(17px * var(--fs));color:var(--ink);font-weight:800;min-height:1.4em}
.ma-cine{margin:0 0 6px;font-size:calc(16px * var(--fs));color:var(--muted)}
.ma-rand{margin:6px 0 0;font-size:calc(17px * var(--fs))}
.ma-rand b{font-family:"Baloo 2",system-ui,sans-serif}

/* bucățile: neutre când dreptunghiul e întreg, colorate după tăiere */
.ma-svg .ma-p rect{fill:var(--card);stroke:none;stroke-width:2;transition:fill .45s}
.ma-svg .ma-p{transition:transform .5s ease;transform-box:view-box}
.ma-col .ma-p rect,.ma-sp .ma-p rect{stroke:var(--ink)}
.ma-col .ma-zz rect{fill:var(--leaf-tint);stroke:var(--leaf)}
.ma-col .ma-uz rect{fill:var(--sky-tint);stroke:var(--sky)}
.ma-col .ma-zu rect{fill:var(--sun-tint);stroke:var(--sun-edge)}
.ma-col .ma-uu rect{fill:var(--berry-tint);stroke:var(--berry)}
.ma-col .ma-zz text{fill:var(--leaf-deep)}
.ma-col .ma-uz text{fill:var(--sky)}
.ma-col .ma-zu text{fill:var(--sun-ink)}
.ma-col .ma-uu text{fill:var(--berry)}
.ma-sp .ma-p{transform:translate(var(--dx),var(--dy))}
.ma-svg .ma-p.ma-hi rect{stroke:var(--ink);stroke-width:4}
.ma-svg .ma-p.ma-dim{opacity:.45}
.ma-svg .ma-gr{fill:none;stroke:var(--ink);stroke-opacity:.16;stroke-width:.8}
.ma-svg .ma-ld{stroke:var(--muted);stroke-width:1.5;stroke-dasharray:3 3}
.ma-svg .ma-out{fill:none;stroke:var(--ink);stroke-width:3;transition:opacity .3s}
.ma-sp .ma-out{opacity:0}
.ma-svg .ma-cut{stroke:var(--berry);stroke-width:3;stroke-dasharray:7 5;opacity:0;transition:opacity .35s}
.ma-cl .ma-cut{opacity:1}
.ma-svg .ma-tot{font-size:calc(var(--fl,18px) * 1.25);fill:var(--ink);opacity:0;transition:opacity .3s;paint-order:stroke;stroke:var(--card);stroke-width:5px}
.ma-wh .ma-tot{opacity:1}
.ma-svg .ma-lw{opacity:0;transition:opacity .3s}
.ma-wh .ma-lw{opacity:1}
.ma-wh .ma-lp{opacity:0}
.ma-svg .ma-lp{transition:opacity .3s}
.ma-svg .ma-te,.ma-svg .ma-tv,.ma-svg .ma-ld{opacity:0;transition:opacity .35s}
.ma-ex .ma-te,.ma-vl .ma-tv,.ma-ex .ma-ld,.ma-vl .ma-ld{opacity:1}
.ma-svg .ma-tv.ma-q{fill:var(--muted)}

/* zeci × zeci: pătrate de 100 */
.ma-sute .ma-s100 rect{fill:var(--leaf-tint);stroke:var(--leaf);stroke-width:2;rx:4}
.ma-sute .ma-s100 text{font-size:14px;fill:var(--leaf-deep)}
.ma-sute .ma-cap b{color:var(--leaf-deep)}

/* modelul legat de coloană */
.ma-leg-svg .ma-cd{font-size:26px}
.ma-leg-svg .ma-sg{fill:var(--muted)}
.ma-leg-svg .ma-cl-l{stroke:var(--ink);stroke-width:2.5}
.ma-leg-svg .ma-r1,.ma-leg-c .ma-cap .ma-r1{fill:var(--berry);color:var(--berry)}
.ma-leg-svg .ma-r2,.ma-leg-c .ma-cap .ma-r2{fill:var(--sky);color:var(--sky)}
.ma-leg-svg .ma-rz{fill:var(--ink)}
.ma-leg-svg .ma-sum-t{font-size:17px;text-anchor:start}
.ma-leg-svg .ma-sum-t .ma-b{fill:var(--ink)}
.ma-leg-svg .ma-cn{font-size:13px;text-anchor:start}
.ma-leg-svg .ma-leg{fill:none;stroke-width:3;stroke-linecap:round}
.ma-leg-svg .ma-leg.ma-l1,.ma-leg-svg .ma-leg-p.ma-l1{stroke:var(--berry);fill:none}
.ma-leg-svg .ma-leg.ma-l2,.ma-leg-svg .ma-leg-p.ma-l2{stroke:var(--sky);fill:none}
.ma-leg-svg .ma-leg-p.ma-l1{fill:var(--berry)} .ma-leg-svg .ma-leg-p.ma-l2{fill:var(--sky)}
.ma-leg-c .ma-cap{font-size:calc(15px * var(--fs));display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px}
.ma-deseneaza .ma-leg{stroke-dasharray:400;stroke-dashoffset:400;animation:ma-draw 1.1s ease-out .2s forwards}
@keyframes ma-draw{to{stroke-dashoffset:0}}

/* ---------- laboratoarele: zona lată, planșa mică ---------- */
html:not(.flow) .view:has(.ma-lab,.an) .lesson{grid-template-columns:minmax(0,1.6fr) minmax(0,.4fr)}
html:not(.flow) .view:has(.ma-lab,.an) .emoji-plansa{font-size:4.2em;padding:8px 0}
html.flow .lesson .work:has(.ma-anim,.ma-fisa,.ma-sute,.ma-leg-c){order:-1}
.ma-lab{display:flex;flex-direction:column;gap:8px}
.ma-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-weight:800;color:var(--muted);font-size:calc(14px * var(--fs))}
.ma-tit{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(22px * var(--fs));color:var(--ink)}
.ma-main{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.ma-fig{flex:0 0 auto}
.ma-act{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding-top:8px;border-top:2px dashed var(--line)}
.ma-act .verif{margin-left:auto}
.ma-act .verif:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
.ma-msg{min-height:1.5em;margin:4px 0 0;font-weight:800;font-size:calc(15px * var(--fs));color:var(--muted)}
.ma-msg.rau{color:var(--berry)} .ma-msg.bine{color:var(--ink)}

/* plăcuțe mari, cu starea „ales” clară */
.ma-lab .chip.ma-o{min-width:calc(84px * var(--fs));min-height:calc(46px * var(--fs));padding:4px 14px;font-size:calc(19px * var(--fs));font-weight:800;color:var(--ink);border:3px solid var(--stripe);border-radius:14px;box-shadow:0 5px 0 var(--stripe);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.ma-lab .chip.ma-o:hover{transform:translateY(-2px)}
.ma-lab .chip.ma-o.ales{background:var(--berry);border-color:var(--berry);color:var(--card);box-shadow:0 5px 0 var(--ink);transform:translateY(-3px)}
.ma-lab .chip.ma-o.bad{animation:ma-shake .45s}
.ma-lab .chip.ma-o:disabled{opacity:.6;transform:none}
.ma-lab .chip.ma-o.ales:disabled{opacity:1}
.ma-ctl{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:6px}
.ma-et{margin:0;font-weight:800;font-size:calc(15px * var(--fs));color:var(--ink)}
.ma-opt{gap:10px}

/* suma care se face animat */
.ma-sum,.ma-taie .ma-msg.bine{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin:0;min-height:calc(40px * var(--fs));font-weight:800;font-size:calc(20px * var(--fs))}
.ma-term{font-family:"Baloo 2",system-ui,sans-serif;border-radius:10px;padding:0 8px;background:var(--card);border:2px solid currentColor;animation:ma-pop .4s ease-out both}
.ma-term.ma-czz{background:var(--leaf-tint)} .ma-term.ma-cuz{background:var(--sky-tint)} .ma-term.ma-czu{background:var(--sun-tint)} .ma-term.ma-cuu{background:var(--berry-tint)}
.ma-plus{color:var(--muted)}
.ma-tot-h{font-family:"Baloo 2",system-ui,sans-serif;font-size:1.25em;min-width:3.2em;text-align:left;color:var(--ink)}
.ma-tot-h.gata{color:var(--leaf-deep);animation:ma-pop .4s ease-out}
.ma-muted{color:var(--muted)}

/* Cele 4 produse: căsuțe pe 2 rânduri, la fel ca bucățile */
.ma-cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;flex:1 1 320px;max-width:460px}
.ma-cell{display:flex;align-items:center;justify-content:space-between;gap:8px;border:3px solid var(--line);border-radius:14px;padding:8px 10px;font-weight:800;font-size:calc(18px * var(--fs));min-height:calc(58px * var(--fs))}
.ma-cell.ma-bzz{border-color:var(--leaf);background:var(--leaf-tint);color:var(--leaf-deep)}
.ma-cell.ma-buz{border-color:var(--sky);background:var(--sky-tint);color:var(--sky)}
.ma-cell.ma-bzu{border-color:var(--sun-edge);background:var(--sun-tint);color:var(--sun-ink)}
.ma-cell.ma-buu{border-color:var(--berry);background:var(--berry-tint);color:var(--berry)}
.ma-ce{white-space:nowrap}
.ma-in{width:4.2em;height:calc(40px * var(--fs));font:inherit;font-size:calc(20px * var(--fs));text-align:center;color:var(--ink);background:var(--card);border:2px solid var(--line);border-radius:10px;padding:0 4px}
.ma-in:focus{outline:3px solid var(--sun);outline-offset:1px}
.ma-cell.bun .ma-in{border-color:var(--leaf);background:var(--leaf-tint);color:var(--leaf-deep)}
.ma-cell.rau .ma-in{border-color:var(--berry);background:var(--berry-tint);color:var(--berry);animation:ma-shake .45s}

/* De la arie la coloană */
.ma-pcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;flex:1 1 300px;max-width:400px}
.ma-pc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:3px solid var(--line);border-radius:14px;padding:8px 6px;font:inherit;font-weight:800;font-size:calc(17px * var(--fs));min-height:calc(66px * var(--fs));cursor:pointer;box-shadow:0 4px 0 var(--line)}
.ma-pc b{font-family:"Baloo 2",system-ui,sans-serif;font-size:1.15em}
.ma-pc small{font-size:calc(13px * var(--fs));color:var(--muted)}
.ma-pc.ma-bzz{border-color:var(--leaf);background:var(--leaf-tint);color:var(--leaf-deep);box-shadow:0 4px 0 var(--leaf)}
.ma-pc.ma-buz{border-color:var(--sky);background:var(--sky-tint);color:var(--sky);box-shadow:0 4px 0 var(--sky)}
.ma-pc.ma-bzu{border-color:var(--sun-edge);background:var(--sun-tint);color:var(--sun-ink);box-shadow:0 4px 0 var(--sun-edge)}
.ma-pc.ma-buu{border-color:var(--berry);background:var(--berry-tint);color:var(--berry);box-shadow:0 4px 0 var(--berry)}
.ma-pc.ales{outline:4px solid var(--ink);outline-offset:2px;transform:translateY(-3px)}
.ma-pc.pus small{color:var(--ink)}
.ma-pc.bad{animation:ma-shake .45s}
.ma-colh{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 0 auto;font-family:"Baloo 2",system-ui,sans-serif;font-weight:800}
.ma-crow{display:flex;align-items:center;font:inherit;font-size:calc(24px * var(--fs));line-height:1;color:var(--ink);background:transparent;border:3px solid transparent;border-radius:12px;padding:4px 6px;margin:0}
.ma-cc{width:1.05em;height:1.25em;display:inline-flex;align-items:center;justify-content:center}
.ma-sgn{color:var(--muted)}
.ma-tag{width:2.2em;display:inline-flex;gap:4px;align-items:center;justify-content:flex-start;padding-left:4px}
.ma-csep{display:block;height:3px;background:var(--ink);border-radius:2px;font-size:calc(24px * var(--fs));width:5.25em;margin:0 calc(2.2em + 9px) 0 0}
.ma-rb{cursor:pointer;background:var(--card);border-color:var(--line)}
.ma-rb.ma-r1{color:var(--berry);border-color:var(--berry)}
.ma-rb.ma-r2{color:var(--sky);border-color:var(--sky)}
.ma-rb.asteapta{border-style:dashed;background:var(--sun-tint)}
.ma-rb:hover{transform:translateY(-1px)}
.ma-dot{width:14px;height:14px;border-radius:50%;display:inline-block;border:2px solid var(--ink)}
.ma-dzz{background:var(--leaf)} .ma-duz{background:var(--sky)} .ma-dzu{background:var(--sun)} .ma-duu{background:var(--berry)}
.ma-in-lab{background:var(--card);border-radius:12px;padding:6px;text-align:center}
.ma-in-lab .ma-svg{width:auto;max-height:calc(205px * var(--fs))}
.ma-in-lab .ma-cap{margin-top:4px}

/* ---------- antrenament rapid ---------- */
.an-top{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--muted);font-size:calc(14px * var(--fs))}
.an-bar{flex:1;height:10px;background:var(--line);border-radius:99px;overflow:hidden}
.an-bar i{display:block;height:100%;background:var(--leaf);transition:width .4s}
.an-serie.aprinsa{color:var(--berry);animation:ma-pop .4s ease-out}
.an-corp{display:flex;align-items:center;gap:16px;margin-top:8px}
.an-fig{flex:0 0 auto;background:var(--card);border-radius:12px;padding:6px}
.an-dr{flex:1;min-width:0}
.an-q{font-size:calc(21px * var(--fs));font-weight:800;margin:4px 0 12px;color:var(--ink)}
.an-var{gap:10px}
.an-var .chip{font-size:calc(20px * var(--fs));min-width:5em;min-height:calc(48px * var(--fs));font-weight:800}
.an-msg{min-height:1.5em;margin:8px 0 0;text-align:center;font-weight:800}
.an-msg.bine{color:var(--leaf-deep)} .an-msg.rau{color:var(--berry)}
.an-final{text-align:center}
.an-final .an-q{text-align:center}
.an-scor{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(54px * var(--fs));color:var(--leaf-deep);animation:ma-pop .5s}
html.flow .an-corp{flex-direction:column;align-items:stretch}

@keyframes ma-pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:none;opacity:1}}
@keyframes ma-shake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* fără animații (accesibilitate) și mișcare redusă: stare statică completă, fără tranziții */
html.a-still .ma-svg *,html.a-still .ma-term,html.a-still .ma-tot-h,html.a-still .an-scor,html.a-still .ma-cell .ma-in,html.a-still .ma-pc,html.a-still .chip.ma-o{transition:none!important;animation:none!important}
html.a-still .ma-deseneaza .ma-leg{stroke-dasharray:none;stroke-dashoffset:0}
@media (prefers-reduced-motion: reduce){
  .ma-svg *,.ma-term,.ma-tot-h,.an-scor,.an-serie,.ma-cell .ma-in,.ma-pc,.chip.ma-o{transition:none!important;animation:none!important}
  .ma-deseneaza .ma-leg{stroke-dasharray:none;stroke-dashoffset:0}
}

/* Butonul „Verifică” din bara de jos este ascuns; verificarea se deschide din cuprins sau după ultima stație. */
.bottom #checkBtn{display:none!important}


/* ===== aliniere comună (lecțiile refăcute): fără suprapuneri de butoane și text ===== */
/* plasă de siguranță: dacă o stație e mai înaltă decât scena, se derulează în interior, nu intră sub bara de jos */
html:not(.flow) .view.on{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
/* ordonare: toate cartonașele pe un rând, loc pentru bulina cu numărul, textul rămâne în cartonaș */
.task .order{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none;gap:10px;margin-top:16px}
.task .order .ocard{min-width:0;padding:10px 6px 8px;overflow-wrap:anywhere;hyphens:auto}
.task .order .oc-emoji{font-size:2.1em;line-height:1.1}
.task .order .ocard .lab{font-size:calc(14px * var(--fs));line-height:1.2}
.task .order .ocard .more{font-size:calc(12px * var(--fs));line-height:1.2;color:var(--muted)}
.task .order .ocard .badge{top:-14px;left:-8px}
html.flow .task .order{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
/* perechi: bulina cu numărul stă pe același rând cu textul, deci butonul nu crește după rezolvare */
.perechi .chip{display:flex;align-items:center;gap:8px;min-width:0;overflow-wrap:anywhere}
.perechi .chip[data-p]::after{flex:0 0 22px}
/* rânduri de butoane: se rup pe rândul următor în loc să se calce */
.grp,.chips,.actions{flex-wrap:wrap;row-gap:10px}
.chip,.btn{max-width:100%}
.btn{white-space:normal}