/* aplicatie.css — stiluri proprii lecției „Ordonează fracții asemănătoare” (doar variabile de culoare). */

/* ---------- fracția etajată: numărătorul peste numitor ---------- */
.fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.02;font-weight:800;margin:0 .08em;font-size:.92em}
.fr>b{font-weight:inherit;padding:0 .14em}
.fr>i{font-style:normal;border-top:.11em solid currentColor;padding:.04em .14em 0;align-self:stretch;text-align:center}
.fr .fr-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;text-decoration:none}
.fr.mare{font-size:calc(40px * var(--fs));font-family:var(--f-display)}
.fr u{text-decoration:none;border-radius:6px;padding:0 .12em;background:var(--sun-tint);outline:2px solid var(--sun-ink)}
.chip .fr,.pool-item .fr,.af-rand .fr,.ocard .fr{font-size:1em}
.ans .fr{font-size:1.15em}
.task h3 .fr,.big .fr,.key .fr,.fact .fr,.say .fr,.hint .fr{font-size:.8em}
.task .chips .chip{min-width:3.2em;justify-content:center}
.task .chips .chip .fr{font-size:1.3em}
.task .order .ocard .lab .fr{font-size:calc(22px * var(--fs))}

/* stațiile fără planșă (laboratoarele) folosesc toată lățimea */
.lesson:has(> .work:empty){grid-template-columns:minmax(0,1fr)}
.lesson > .work:empty{display:none}

/* ---------- desenele: pizza, ciocolată, borcan ---------- */
.pz{display:block;width:100%;height:auto}
.pz-crusta{fill:var(--sun-tint);stroke:var(--sun-ink);stroke-width:2}
.pz path,.pz circle:not(.pz-crusta){stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.pz-0{fill:var(--card)}
.pz-a{fill:var(--sun)}
.pz-b{fill:var(--sky)}
.pz-c{fill:var(--berry)}
.pz-mini{width:1.5em;height:1.5em;display:inline-block;vertical-align:middle}
.cc{display:block;width:100%;height:auto}
.cc rect{stroke:var(--ink);stroke-width:1.2}
.cc-0{fill:var(--card)} .cc-a{fill:var(--sun)} .cc-b{fill:var(--sky)} .cc-c{fill:var(--berry)}
.bc{display:block;width:100%;height:auto}
.bc-sticla{fill:none;stroke:var(--ink);stroke-width:2.6}
.bc-cap{fill:var(--sun-ink)}
.bc-lichid{fill:var(--sky)}
.bc-linii line{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 2;opacity:.55}

/* ---------- planșele ---------- */
.plate .card-ink{background:var(--card);color:var(--ink);border-radius:12px;padding:14px;font-weight:800}
.p1{display:flex;align-items:center;justify-content:center;gap:18px}
.p1 .pz{width:calc(170px * var(--fs));flex:0 0 auto}
.p1-fr{display:grid;grid-template-columns:auto auto;grid-template-rows:1fr 1fr;align-items:center;column-gap:8px}
.p1-fr .fr{grid-row:1/3}
.p1-sus{color:var(--sun-ink);font-size:calc(16px * var(--fs))}
.p1-jos{color:var(--sky);font-size:calc(16px * var(--fs))}
.p2{display:grid;gap:8px}
.p2-r{display:flex;align-items:center;gap:14px;justify-content:center}
.p2-r .cc{width:calc(190px * var(--fs))}
.p2-r>span{font-size:calc(24px * var(--fs));min-width:2em;text-align:center}
.p2-ord,.p6-ord{margin:4px 0 0;text-align:center;font-size:calc(24px * var(--fs))}
.p2-ord b,.p6-ord b,.p8-semn,.p14-r b{color:var(--berry);margin:0 .2em}
.p5-r{display:flex;justify-content:center;gap:8px}
.p5-c{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;border-radius:12px;border:3px solid transparent;font-size:calc(20px * var(--fs))}
.p5-c .pz{width:calc(70px * var(--fs))}
.p5-c.min{border-color:var(--sky);background:var(--sky-tint)}
.p5-c.max{border-color:var(--berry);background:var(--berry-tint)}
.p5-et{display:flex;justify-content:space-between;margin-top:6px;font-size:calc(15px * var(--fs))}
.p5-et .min{color:var(--sky)} .p5-et .max{color:var(--berry)}
.p6{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px}
.p6-c{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:calc(24px * var(--fs))}
.p6-c .pz{width:calc(120px * var(--fs))}
.p6-ord{flex-basis:100%}
.p8{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px}
.p8-semn{font-size:calc(44px * var(--fs))}
.p8-not{flex-basis:100%;margin:2px 0 0;text-align:center;color:var(--berry);font-size:calc(18px * var(--fs))}
.p10{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.p10-c{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;border-radius:12px;padding:10px;background:var(--leaf-tint)}
.p10-c+.p10-c{background:var(--sky-tint)}
.p10-fr{display:flex;gap:10px;font-size:calc(28px * var(--fs))}
.p10-c>b{font-size:calc(19px * var(--fs))}
.p10-c>span:last-child{font-size:calc(15px * var(--fs));color:var(--muted)}
.p12{display:flex;align-items:center;justify-content:center;gap:18px}
.p12 .pz{width:calc(170px * var(--fs))}
.p12-l{display:flex;flex-direction:column;gap:8px;margin:0;font-size:calc(22px * var(--fs))}
.p12-l span{border-radius:10px;padding:4px 12px;border:3px solid}
.p12-l .pa{border-color:var(--sun);background:var(--sun-tint)}
.p12-l .pb{border-color:var(--sky);background:var(--sky-tint)}
.p12-l .pc{border-color:var(--berry);background:var(--berry-tint)}
.p14-t{margin:0;color:var(--muted);text-align:center;font-size:calc(15px * var(--fs));text-transform:uppercase;letter-spacing:.05em}
.p14-r{display:flex;justify-content:center;align-items:center;gap:6px;margin:4px 0 10px;font-size:calc(22px * var(--fs))}
.p14-r span{display:inline-flex;align-items:center;gap:4px}

/* ---------- turnurile care se așază după înălțime (un singur ceas în js/aplicatie.js) ---------- */
.tw-scena{position:relative;height:calc(200px * var(--fs))}
.tw{position:absolute;top:0;bottom:0;left:calc(var(--p) * 100% / var(--n));width:calc(100% / var(--n));display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;transition:left .9s ease-in-out}
.tw-anim.ord .tw{left:calc(var(--s) * 100% / var(--n))}
.tw-tub{display:flex;flex-direction:column-reverse;width:calc(46px * var(--fs));height:calc(130px * var(--fs));border:3px solid var(--ink);border-radius:6px;overflow:hidden;background:var(--card);flex:0 0 auto}
.tw-tub i{flex:1 1 0;border-top:1.5px solid var(--line)}
.tw-tub i:last-child{border-top:0}
.tw-tub i.on{background:var(--leaf);border-top-color:var(--leaf-deep)}
.tw-tub.gol{border-style:dashed;border-color:var(--berry);background:var(--berry-tint)}
.tw-tub.gol i{border-top-color:transparent}
.tw-et{font-size:calc(22px * var(--fs));min-height:2.3em;display:flex;align-items:center}
.tw-semn{position:absolute;bottom:calc(14px * var(--fs));left:calc(var(--i) * 100% / var(--n));transform:translateX(-50%);font-size:calc(26px * var(--fs));color:var(--berry);opacity:0;transition:opacity .4s .7s}
.tw-anim.ord .tw-semn{opacity:1}
.tw-not{margin:8px 0 0;text-align:center;font-size:calc(17px * var(--fs));min-height:1.4em}
.tw-a{color:var(--muted)} .tw-b{color:var(--leaf-deep)}
.tw-anim.ord .tw-a,.tw-anim:not(.ord) .tw-b{display:none}
.tw-anim.static .tw,.tw-anim.static .tw-semn{transition:none}

/* ---------- laborator: raftul cu borcane ---------- */
.bj-top,.bm-top,.sr-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))}
.bj-tip,.sr-tip{color:var(--sky)}
.bj-raft{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:10px;align-items:end;padding:8px 10px 0;margin-top:6px;border-bottom:10px solid var(--sun-ink);border-radius:0 0 6px 6px}
.bj-b{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px 8px;background:var(--card);color:var(--ink);border:3px solid var(--line);border-radius:14px;cursor:pointer;font:inherit;font-weight:800;transition:transform .2s,border-color .2s}
.bj-b:hover{border-color:var(--sky)}
.bj-b .bc{width:calc(76px * var(--fs))}
.bj-et{font-size:calc(22px * var(--fs))}
.bj-b.ales{border-color:var(--berry);background:var(--berry-tint);transform:translateY(-8px);box-shadow:0 6px 0 var(--berry)}
.bj-b.mutat{animation:coboara .35s ease-out}
@keyframes coboara{0%{transform:translateY(-14px);opacity:.6}100%{transform:none;opacity:1}}
.bj-b.rau{animation:shake .45s}
.bj-b.bun{border-color:var(--leaf);background:var(--leaf-tint)}
.bj-b:disabled{cursor:default}
.bj-scara{display:flex;justify-content:space-between;font-weight:800;color:var(--muted);font-size:calc(14px * var(--fs));margin-top:4px}
.bj-act,.bm-act,.sr-act{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:10px;padding-top:8px;border-top:2px dashed var(--line)}
.bj-act .verif,.bm-act .verif,.sr-act .verif{margin-left:auto}
.bj-act .verif:disabled,.bm-act .verif:disabled,.sr-act .verif:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
.bj-gata,.sr-gata{display:flex;gap:6px;flex-wrap:wrap}
.bj-ok,.sr-ok{background:var(--leaf-tint);color:var(--leaf-deep);border:2px solid var(--leaf);border-radius:999px;padding:2px 10px;font-weight:800;font-size:calc(14px * var(--fs));animation:pop .35s ease-out}

/* ---------- laborator: bucăți mai mari, bucăți mai mici ---------- */
.bm-q{margin:6px 0 10px;text-align:center;font-weight:800;font-size:calc(22px * var(--fs));color:var(--ink)}
.bm-q .mare{color:var(--berry)} .bm-q .mica{color:var(--sky)}
.bm-carti{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.bm-c{display:flex;align-items:center;justify-content:center;gap:14px;padding:10px;background:var(--card);color:var(--ink);border:3px solid var(--line);border-radius:16px;cursor:pointer;font:inherit;font-weight:800;box-shadow:0 5px 0 var(--stripe);transition:transform .2s,border-color .2s}
.bm-c:hover{transform:translateY(-2px)}
.bm-c.ales{border-color:var(--berry);background:var(--berry-tint);box-shadow:0 5px 0 var(--berry);transform:translateY(-3px)}
.bm-c.vazut{cursor:default;transform:none}
.bm-c.bun{border-color:var(--leaf);background:var(--leaf-tint);box-shadow:0 5px 0 var(--leaf-deep)}
.bm-c.rau{border-color:var(--berry)}
.bm-model{position:relative;width:calc(96px * var(--fs));height:calc(96px * var(--fs));flex:0 0 auto}
.bm-model .pz{position:absolute;inset:0;opacity:0;transform:scale(.4) rotate(-40deg);transition:opacity .5s,transform .6s cubic-bezier(.3,1.4,.6,1)}
.bm-ascuns{position:absolute;inset:0;display:grid;place-items:center;border:3px dashed var(--line);border-radius:50%;color:var(--muted);font-size:calc(40px * var(--fs));transition:opacity .3s}
.bm-c.vazut .pz{opacity:1;transform:none}
.bm-c.vazut .bm-ascuns{opacity:0}

/* ---------- laborator: șirul cu fracția lipsă ---------- */
.sr-sir{display:flex;justify-content:center;align-items:flex-end;gap:6px;margin:4px 0 8px}
.sr-el{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 8px;border-radius:14px;border:3px solid transparent}
.sr-el .tw-tub{width:calc(34px * var(--fs));height:calc(72px * var(--fs))}
.sr-el.tinta{border-color:var(--berry);border-style:dashed}
.sr-el.bun{border-style:solid;border-color:var(--leaf);background:var(--leaf-tint);animation:pop .4s ease-out}
.sr-fr{font-size:calc(26px * var(--fs));min-height:2.3em;display:flex;align-items:center}
.sr-gol{display:inline-grid;place-items:center;width:1.6em;height:2.2em;border:3px dashed var(--berry);border-radius:10px;color:var(--berry)}
.sr-leg{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:3.6em;padding-bottom:calc(16px * var(--fs))}
.sr-leg b{font-size:calc(28px * var(--fs));color:var(--berry);line-height:1}
.sr-leg small{font-weight:800;color:var(--sky);font-size:calc(14px * var(--fs));white-space:nowrap}
.sr-var{justify-content:center}
.sr .sr-var .chip.sr-o{min-width:calc(72px * var(--fs));min-height:calc(64px * var(--fs));font-size:calc(22px * var(--fs));font-weight:800;color:var(--ink);border:3px solid var(--stripe);border-radius:14px;box-shadow:0 5px 0 var(--stripe)}
.sr .sr-var .chip.sr-o.ales{background:var(--berry);border-color:var(--berry);color:var(--card);box-shadow:0 5px 0 var(--ink);transform:translateY(-3px)}
.sr .sr-var .chip.sr-o.good{background:var(--leaf);border-color:var(--leaf);color:var(--on-leaf)}
.sr .sr-var .chip.sr-o.rau{animation:shake .45s}

/* ---------- laborator: 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:pop .4s ease-out}
.an-q{font-size:calc(24px * var(--fs));font-weight:800;margin:14px 0;color:var(--ink);text-align:center}
.an-var{justify-content:center}
.an-var .chip{font-size:calc(20px * var(--fs));min-width:5em;min-height:calc(60px * var(--fs));justify-content:center}
.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:var(--f-display);font-size:calc(54px * var(--fs));color:var(--leaf-deep);animation:pop .5s}

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

/* fără animații (accesibilitate) și mișcare redusă: stare finală, fără mișcare */
html.a-still .bm-model .pz,html.a-still .bm-ascuns,html.a-still .tw,html.a-still .tw-semn{transition:none!important}
@media (prefers-reduced-motion: reduce){
  .bj-b,.bm-c,.bm-model .pz,.bm-ascuns,.tw,.tw-semn,.an-bar i{transition:none!important}
  .bj-b,.bj-ok,.sr-ok,.sr-el,.sr-o,.an-scor,.an-serie{animation:none!important}
}

/* telefon: cartonașele laboratoarelor se așază unele sub altele */
html.flow .bm-carti{grid-template-columns:minmax(0,1fr)}
html.flow .bj-raft{gap:4px;padding:6px 2px 0}
html.flow .bj-b .bc{width:calc(44px * var(--fs))}
html.flow .bj-et{font-size:calc(18px * var(--fs))}
html.flow .sr-sir{gap:0}
html.flow .sr-leg{min-width:2.4em}
html.flow .sr-el{padding:4px 2px}
html.flow .p10{grid-template-columns:minmax(0,1fr)}

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