/* aplicatie.css — stiluri proprii lecției „Două cifre împărțite la o cifră” (doar variabile de culoare). */

/* ---------- planșe desenate ---------- */
.plate .bk-card,.plate .tm,.plate .po,.plate .sp,.plate .ds,.plate .rs,.plate .cl,.plate .rg,.plate .pr,.plate .sc-card,.plate .sf,.plate .bl-scena{
  background:var(--card);color:var(--ink);border-radius:12px;padding:14px;font-weight:800}

/* ---------- blocurile: bețe de zeci și cubulețe ---------- */
.bk-card,.bl-scena{--u:11px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.bk-t,.rs-t,.pr-t,.po-t,.sc-t,.cl-t{margin:0;font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(26px * var(--fs));line-height:1.15;color:var(--ink)}
.bk-t small,.rs-t small,.pr-t small,.sc-tail small,.tm-o.mic{font-size:.62em;color:var(--muted)}
.bk-masa{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 14px;border-radius:12px;background:var(--leaf-tint);min-width:60%}
.bk-et{font-size:calc(13px * var(--fs));font-weight:800;color:var(--leaf-deep)}
.bk-gol{font-size:calc(14px * var(--fs));color:var(--muted);min-height:calc(var(--u) * 3);display:flex;align-items:center}
.bk-st{display:inline-flex;align-items:flex-end;gap:6px}
.bk-zs{display:inline-flex;gap:3px;align-items:flex-end}
.bk-us{display:inline-grid;grid-auto-flow:column;grid-template-rows:repeat(5,var(--u));gap:2px;align-content:end}
.bk-z{display:block;width:var(--u);height:calc(var(--u) * 10);box-sizing:border-box;border:1.5px solid var(--sky);border-radius:2px;
  background:repeating-linear-gradient(to bottom,var(--sky) 0 calc(var(--u) - 1.5px),var(--sky-tint) calc(var(--u) - 1.5px) var(--u))}
.bk-u{display:block;width:var(--u);height:var(--u);box-sizing:border-box;background:var(--sun);border:1.5px solid var(--sun-edge);border-radius:2px}
.bk-sag{color:var(--muted);font-size:calc(18px * var(--fs));line-height:1}
.bk-gr{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.bk-g{display:flex;flex-direction:column;align-items:center;gap:4px;border:2.5px dashed var(--muted);border-radius:12px;padding:8px 10px 4px;min-width:calc(var(--u) * 5);background:var(--card)}
.bk-gc{min-height:var(--gh,calc(var(--u) * 10));display:flex;align-items:flex-end}
.bk-gl{font-size:calc(12px * var(--fs));font-weight:800;color:var(--muted);min-height:1.2em}
/* animația împărțirii: ceasul din aplicatie.js repornește clasa „joaca”; --k = ordinea pieselor */
.bk-anim.joaca .bk-g :is(.bk-z,.bk-u){animation:bk-in .35s calc(var(--k) * .14s + .3s) both}
.bk-anim.joaca .bk-masa :is(.bk-z,.bk-u){animation:bk-out .35s calc(var(--k) * .14s + .3s) both}
.bl-scena .vine{animation:bk-in .4s both}
.bl-scena .din-zece{animation:bk-pop .45s both}
@keyframes bk-in{from{opacity:0;transform:translateY(-18px) scale(.5)}}
@keyframes bk-out{to{opacity:.22}}
@keyframes bk-pop{from{opacity:0;transform:scale(.3)}60%{transform:scale(1.25)}}

/* stația 2: termenii, cu numele exact sub fiecare număr */
.tm{text-align:center}
.tm-r{display:flex;justify-content:center;align-items:flex-start;gap:8px;flex-wrap:wrap}
.tm-x,.tm-o{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(46px * var(--fs));line-height:1.1}
.tm-x{display:inline-flex;flex-direction:column;align-items:center;border-radius:12px;padding:2px 10px 6px}
.tm-x small{font-family:inherit;font-size:calc(13px * var(--fs));line-height:1.2;font-weight:800}
.tm-o{color:var(--muted)}
.tm-o.mic{align-self:center;font-size:calc(20px * var(--fs))}
.t1{background:var(--sky-tint)} .t1 small{color:var(--sky)}
.t2{background:var(--sun-tint)} .t2 small{color:var(--sun-ink)}
.t3{background:var(--leaf-tint)} .t3 small{color:var(--leaf-deep)}
.t4{background:var(--berry-tint)} .t4 small{color:var(--berry)}
.tm-n{margin:16px 0 0;font-size:calc(18px * var(--fs));color:var(--muted)}
.tm-n b{color:var(--ink)}

/* stația 3: pe ordine */
.po{display:flex;flex-direction:column;gap:10px;--u:9px}
.po-r{display:grid;grid-template-columns:6.5em auto 1fr;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;background:var(--paper)}
.po-k{border-radius:999px;padding:3px 10px;text-align:center;font-size:calc(15px * var(--fs))}
.po-k.z{background:var(--sky-tint);color:var(--sky)} .po-k.u{background:var(--sun-tint);color:var(--sun-ink)}
.bk-mini{display:inline-flex;min-height:calc(var(--u) * 10);align-items:flex-end}
.po-e{font-size:calc(21px * var(--fs));text-align:left}
.po-f{margin:2px 0 0;text-align:center;font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(30px * var(--fs))}
.po-f b,.po-e b,.sp-ex b,.ds-r,.rs-n b,.cl-n b{color:var(--leaf-deep)}

/* stația 5: zecea se desface (ceasul comută „sparta”) */
.sp{--u:16px;text-align:center}
.sp-r{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.sp-z{display:inline-flex;flex-direction:column;align-items:center;gap:6px}
.sp-z small,.sp-l{font-size:calc(14px * var(--fs));color:var(--muted)}
.sp-eq{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(34px * var(--fs));color:var(--muted)}
.sp-anim{position:relative;display:inline-block;width:calc((var(--u) + 6px) * 5);height:calc(var(--u) * 10)}
.sp-anim .bk-u{position:absolute;left:0;top:0;transition:transform .7s ease,background-color .7s;background:var(--sky);border-color:var(--sky);border-radius:0;
  transform:translate(calc((var(--u) + 6px) * 2),calc(var(--u) * var(--i)))}
.sp.sparta .sp-anim .bk-u{background:var(--sun);border-color:var(--sun-edge);border-radius:2px;
  transform:translate(calc((var(--u) + 6px) * var(--c)),calc((var(--u) + 8px) * var(--r) + var(--u) * 3))}
.sp-ex{margin-top:12px;display:grid;gap:6px;font-size:calc(18px * var(--fs))}
.sp-ex p{margin:0;background:var(--paper);border-radius:10px;padding:6px 10px}

/* stația 6 și 7: arborele descompunerii */
.ds{display:flex;flex-direction:column;gap:14px}
.ds-arb{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-items:center;gap:6px 8px;padding:8px;border-radius:12px;background:var(--paper)}
.ds-n{grid-column:1/-1;font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(30px * var(--fs));line-height:1}
.ds-ram{grid-column:1/-1;display:flex;gap:70px;height:20px}
.ds-ram i{display:block;width:3px;height:22px;background:var(--muted);border-radius:2px;transform:rotate(40deg)}
.ds-ram i+i{transform:rotate(-40deg)}
.ds-p{font-size:calc(21px * var(--fs));border:3px solid var(--sky);background:var(--sky-tint);border-radius:12px;padding:4px 12px;white-space:nowrap}
.ds-p.acum{border-color:var(--sun-edge);background:var(--sun-tint)}
.ds-p.gol{border-style:dashed;background:var(--card);color:var(--muted)}
.ds-plus{font-size:calc(26px * var(--fs));color:var(--muted)}
.ds-tot{grid-column:1/-1;font-size:calc(21px * var(--fs))}
.ds-tot b{color:var(--leaf-deep);font-size:1.2em}
.ds-ok{margin:0;text-align:center;color:var(--leaf-deep);font-size:calc(18px * var(--fs))}

/* stația 8: restul */
.rs{--u:15px;--gh:auto;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.rs .bk-g{padding:8px}
.rs .bk-g .bk-us{grid-template-rows:repeat(3,var(--u))}
.rs-rest{display:flex;align-items:center;gap:10px;padding:6px 14px;border:3px dashed var(--berry);border-radius:12px;background:var(--berry-tint);color:var(--berry);font-size:calc(17px * var(--fs))}
.rs-rest .bk-us{grid-template-rows:var(--u)}
.rs-n{margin:0;font-size:calc(19px * var(--fs))}

/* stația 9: resturile se repetă */
.cl{display:flex;flex-direction:column;gap:5px}
.cl-r{margin:0;display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;padding:4px 12px;border-radius:10px;background:var(--paper);font-size:calc(20px * var(--fs))}
.cl-r span:first-child{text-align:right}
.cl-r b{justify-self:start;background:var(--sun-tint);color:var(--sun-ink);border-radius:999px;padding:0 10px}
.cl-r.z b{background:var(--leaf-tint);color:var(--leaf-deep)}
.cl-n{margin:6px 0 0;text-align:center;font-size:calc(19px * var(--fs))}

/* stația 10: reguli; stația 13: pașii */
.rg,.sf{display:flex;flex-direction:column;gap:10px}
.rg-x{margin:0;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--sun-tint);font-size:calc(21px * var(--fs))}
.rg-x span{flex:0 0 auto;width:1.6em;height:1.6em;border-radius:50%;display:grid;place-items:center;background:var(--sun);color:var(--on-sun)}
.rg-e{margin:4px 0 0;text-align:center;color:var(--leaf-deep);font-size:calc(19px * var(--fs))}
.sf p{margin:0;display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:12px;background:var(--paper);font-size:calc(20px * var(--fs))}
.sf span{font-size:1.2em}

/* stația 11: banda probei */
.pr{display:flex;flex-direction:column;gap:10px;text-align:center;min-height:190px;justify-content:center}
.pr-b{display:flex;gap:0;height:calc(40px * var(--fs));border-radius:10px;overflow:hidden;border:2px solid var(--line)}
.pr-s{display:grid;place-items:center;background:var(--sky-tint);color:var(--sky);border-right:2px solid var(--sky);font-size:calc(17px * var(--fs));min-width:0;overflow:hidden}
.pr-s.rest{background:var(--berry-tint);color:var(--berry);border-right:0}
.pr-n{border-color:var(--leaf)}
.pr-n span{display:grid;place-items:center;background:var(--leaf-tint);color:var(--leaf-deep);font-size:calc(17px * var(--fs))}
.pr-e{margin:0;font-size:calc(20px * var(--fs))}
.pr-f{margin:0;padding:6px 12px;border-radius:10px;background:var(--sun-tint);font-size:calc(17px * var(--fs))}
.pr-e .da{color:var(--leaf-deep);font-size:1.3em} .pr-e .nu{color:var(--berry);font-size:1.3em}

/* stațiile 12 și 14: împărțirea în scris (modelul românesc) */
.sc-card{display:flex;flex-direction:column;align-items:center;gap:8px}
.sc{display:grid;grid-template-columns:1.15ch 1.15ch 1.15ch auto;font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(36px * var(--fs));line-height:1.2;font-variant-numeric:tabular-nums;color:var(--ink)}
.sc-c{text-align:center}
.sc-s{color:var(--muted);text-align:right;padding-right:2px}
.sc-sub{border-bottom:3px solid var(--ink)}
.sc-r{color:var(--berry)}
.sc-tail{padding-left:12px;white-space:nowrap;text-align:left}
.sc-n{margin:0;color:var(--leaf-deep);font-size:calc(18px * var(--fs))}

/* ---------- laborator 1: împarte blocurile ---------- */
.bl-scena{min-height:300px;justify-content:center}
.bl-top,.dc-top,.pb-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))}
.bl-q,.dc-q{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(26px * var(--fs));color:var(--ink)}
.bl-btns{display:flex;gap:10px;margin-top:8px}
.bl .bl-btns .bl-a{flex:1 1 0;min-width:9em;min-height:calc(52px * var(--fs));font-size:calc(16px * var(--fs));display:inline-flex;align-items:center;justify-content:center;gap:8px}
.bl-a[data-a="s"]{background:var(--berry);box-shadow:0 4px 0 var(--ink);color:var(--card)}
.bl-a[data-a="u"]{background:var(--sun);box-shadow:0 4px 0 var(--sun-edge);color:var(--on-sun)}
.bl-a[data-a="z"]{background:var(--sky);box-shadow:0 4px 0 var(--ink);color:var(--card)}
.bl-ic{display:inline-block;flex:0 0 auto;border:2px solid var(--card);border-radius:2px}
.bl-ic.z{width:8px;height:24px;background:var(--sky-tint)} .bl-ic.u{width:12px;height:12px;background:var(--sun-tint);border-color:var(--sun-edge)}
.bl-msg,.dc-msg,.pb-msg{min-height:1.4em;margin:8px 0 0;font-weight:800;font-size:calc(15px * var(--fs));color:var(--muted)}
.bl-msg.bine,.dc-msg.bine,.pb-msg.bine{color:var(--leaf-deep)} .bl-msg.rau,.dc-msg.rau,.pb-msg.rau{color:var(--berry)}
.bl-rasp{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.bl-rasp[hidden]{display:none}
.bl-st{display:flex;align-items:center;gap:8px;background:var(--paper);border-radius:14px;padding:6px 10px}
.bl-sl{font-weight:800;color:var(--muted);font-size:calc(15px * var(--fs))}
.bl .bl-pm{min-width:44px;min-height:44px;padding:0;font-size:calc(22px * var(--fs))}
.bl-v{min-width:2em;height:44px;display:inline-flex;align-items:center;justify-content:center;font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(28px * var(--fs));color:var(--ink);background:var(--card);border:3px solid var(--sky);border-radius:12px}
.bl-act{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-top:10px;padding-top:8px;border-top:2px dashed var(--line)}
.bl-act .verif{margin-left:auto}
.bl-act .verif:disabled,.bl-a:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}

/* ---------- laborator 2 și 3: plăcuțe mari, pas cu pas ---------- */
.dc-cer,.pb-cer{margin:10px 0;font-weight:800;font-size:calc(19px * var(--fs));color:var(--ink);line-height:1.3}
.pb-lucr{margin:10px 0 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:calc(17px * var(--fs));color:var(--muted)}
.pb-lucr b{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(28px * var(--fs));color:var(--ink);background:var(--sun-tint);border-radius:12px;padding:0 12px}
.dc-var,.pb-var{display:flex;gap:12px;justify-content:center}
.dc .dc-var .chip,.pb .pb-var .chip{min-width:5.5em;min-height:calc(54px * var(--fs));padding:4px 14px;font-size:calc(22px * var(--fs));font-weight:900;color:var(--ink);border:3px solid var(--stripe);border-radius:14px;box-shadow:0 5px 0 var(--stripe);cursor:pointer}
.dc .dc-var .chip:hover:not(:disabled),.pb .pb-var .chip:hover:not(:disabled){transform:translateY(-2px)}
.dc .dc-var .chip.good,.pb .pb-var .chip.good{border-color:var(--leaf);box-shadow:0 5px 0 var(--leaf-deep)}
.dc .dc-var .chip.bad,.pb .pb-var .chip.bad{border-color:var(--berry);box-shadow:none;opacity:.7}
.dc-again,.pb-again{margin-top:10px}

/* ---------- laborator 4: 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:bk-pop .4s ease-out}
.an-q{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(36px * var(--fs));font-weight:800;margin:14px 0;color:var(--ink);text-align:center;line-height:1.15}
.an-q.lung{font-size:calc(26px * var(--fs))}
.an-var{justify-content:center;gap:12px}
.an .an-var .chip{font-size:calc(22px * var(--fs));min-width:4.5em;min-height:calc(52px * var(--fs));font-weight:900;border:3px solid var(--stripe);border-radius:14px;box-shadow:0 5px 0 var(--stripe)}
.an .an-var .chip.good{border-color:var(--leaf);box-shadow:0 5px 0 var(--leaf-deep)}
.an .an-var .chip.bad{border-color:var(--berry);box-shadow:none}
.an-msg{min-height:1.5em;margin:10px 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-scor{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(54px * var(--fs));color:var(--leaf-deep);animation:bk-pop .5s}

/* telefon (pagina se derulează): rândurile planșelor se rup, ca nimic să nu iasă din card */
html.flow .po-r{grid-template-columns:auto 1fr}
html.flow .po-r .po-e{grid-column:1/-1;text-align:center}
html.flow .bl .bl-btns .bl-a{min-width:100%}
html.flow .ds-p{white-space:normal}

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