/* aplicatie.css — stiluri proprii lecției „Probleme: două cifre × două cifre” (doar variabile de culoare).
   Prefixul „pb-” (probleme) ține clasele departe de cele din edulogia.css. */

/* ---------- planșe desenate ---------- */
.plate .pb-plansa,.plate .pb-anim,.plate .pb-est,.plate .pb-pasi{background:var(--card);color:var(--ink);border-radius:12px;padding:12px 14px;font-weight:800;text-align:center}
.pb-sub,.pb-anim-t{margin:6px 0 0;font-size:calc(18px * var(--fs));color:var(--ink);min-height:1.4em}
.pb-sub b,.pb-anim-t b{color:var(--berry)}

/* ---------- tabloul de locuri (SVG) ---------- */
.pb-sala{display:block;width:100%;height:auto;max-height:calc(300px * var(--fs));margin:0 auto;overflow:visible}
.pb-sala .pb-seat{fill:var(--muted);opacity:.5;transition:fill .45s,opacity .45s}
.pb-sala .pb-scena{fill:var(--sun-tint);stroke:var(--line);stroke-width:1.5}
.pb-sala .pb-scena-t{font:800 10px var(--f-body,system-ui);fill:var(--muted);text-anchor:middle;letter-spacing:.08em;text-transform:uppercase}
.pb-sala .pb-lb{font:800 17px var(--f-display,system-ui);fill:var(--ink);text-anchor:middle;transition:opacity .4s}
.pb-sala .pb-rw,.pb-sala .pb-rp{text-anchor:end}
.pb-sala .pb-lp,.pb-sala .pb-rp{opacity:0}
.pb-sala.pb-cv .pb-lp,.pb-sala.pb-ch .pb-rp{opacity:1}
.pb-sala.pb-cv .pb-lw,.pb-sala.pb-ch .pb-rw{opacity:0}
.pb-sala .pb-tz{fill:var(--sky)} .pb-sala .pb-tu{fill:var(--berry)}
.pb-sala .pb-cut{stroke:var(--berry);stroke-width:3.5;stroke-dasharray:7 4;stroke-linecap:round;opacity:0;transition:opacity .4s}
.pb-sala.pb-cv .pb-cut-v,.pb-sala.pb-ch .pb-cut-h{opacity:1}
/* zonele: zeci × zeci, zeci × unități, unități × zeci, unități × unități */
.pb-sala.pb-col .pb-seat{opacity:.95}
.pb-sala.pb-col .pb-zz{fill:var(--sky)}
.pb-sala.pb-col .pb-zu{fill:var(--sun)}
.pb-sala.pb-col .pb-uz{fill:var(--leaf)}
.pb-sala.pb-col .pb-uu{fill:var(--berry)}
.pb-sala .pb-zv{font:900 19px var(--f-display,system-ui);fill:var(--ink);text-anchor:middle;paint-order:stroke;stroke:var(--card);stroke-width:5px;stroke-linejoin:round;opacity:0;transition:opacity .4s}
.pb-sala.pb-col .pb-zv{opacity:1}
/* în laborator: zona de calculat rămâne aprinsă, celelalte se estompează */
.pb-sala[data-act="zz"] .pb-seat:not(.pb-zz),.pb-sala[data-act="zu"] .pb-seat:not(.pb-zu),
.pb-sala[data-act="uz"] .pb-seat:not(.pb-uz),.pb-sala[data-act="uu"] .pb-seat:not(.pb-uu){opacity:.22}
.pb-sala.pb-taie{cursor:crosshair}
.pb-sala.pb-taie-v .pb-cut-v,.pb-sala.pb-taie-h .pb-cut-h{stroke:var(--sun-ink);stroke-dasharray:none}

/* textul animat: se vede doar pasul curent (fără JS: starea finală) */
.pb-anim-t span{display:none}
.pb-anim-t span.on,.pb-anim:not([data-f]) .pb-anim-t [data-f="3"]{display:inline}

/* ---------- calculul în coloană ---------- */
.pb-col{--w:1.05em;display:inline-grid;font-family:var(--f-display);font-weight:800;line-height:1.12;font-size:calc(32px * var(--fs));color:var(--ink);font-variant-numeric:tabular-nums;vertical-align:middle;text-align:center}
.pb-col>span{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;min-height:1.15em}
.pb-col .pb-mii{padding-right:.12em}
.pb-col .pb-sg{color:var(--berry)}
.pb-col .pb-ln{border-top:4px solid var(--ink)}
.pb-col .pb-nt{justify-content:flex-start;padding-left:.5em;font-size:.48em;white-space:nowrap;min-width:6.4em}
.pb-col .pb-r1{color:var(--leaf-deep)} .pb-col .pb-r2{color:var(--sky)}
.pb-col .pb-rez{color:var(--ink)}
.pb-col .pb-gol{display:block;width:.62em;height:.86em;border:2px dashed var(--muted);border-radius:5px;box-sizing:border-box}
.pb-col>span.pb-tinta:not(.pb-nt),.pb-col.pb-tinta-s .pb-rez{background:var(--sun-tint)}
.pb-col>span.pb-tinta .pb-gol,.pb-col.pb-tinta-s .pb-rez .pb-gol{border-color:var(--sun-ink)}
.pb-col.pb-gata .pb-rez{color:var(--leaf-deep)}
/* stația 5: rândurile apar pe rând, odată cu textul de sub coloană */
.pb-colanim .pb-col>span{transition:opacity .4s}
.pb-colanim[data-f="0"] .pb-col>[data-r="1"],.pb-colanim[data-f="0"] .pb-col>[data-r="2"],.pb-colanim[data-f="0"] .pb-col>[data-r="s"],
.pb-colanim[data-f="1"] .pb-col>[data-r="2"],.pb-colanim[data-f="1"] .pb-col>[data-r="s"],
.pb-colanim[data-f="2"] .pb-col>[data-r="s"]{opacity:0}

/* stația 9: estimarea */
.pb-est p{margin:8px 0;font-size:calc(20px * var(--fs))}
.pb-est .pb-est-e{font-size:calc(24px * var(--fs))}
.pb-est .pb-est-e b{color:var(--sky)}
.pb-est-r{display:flex;align-items:center;justify-content:center;gap:10px}
.pb-est-r span{border-radius:10px;padding:2px 12px;min-width:4.2em}
.pb-est .pb-ok span{background:var(--leaf-tint);color:var(--leaf-deep)}
.pb-est .pb-nu span{background:var(--berry-tint);color:var(--berry)}

/* stația 10: doi pași */
.pb-pasi{display:grid;gap:10px}
.pb-pasi p{margin:0;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px;text-align:left;border-radius:12px;padding:8px 12px;font-size:calc(22px * var(--fs))}
.pb-pasi small{grid-column:2;font-size:calc(14px * var(--fs));color:var(--muted)}
.pb-pasi span{grid-row:span 2;background:var(--card);border:2px solid var(--line);border-radius:999px;padding:2px 10px;font-size:calc(14px * var(--fs))}
.pb-pasi .pb-pas1{background:var(--sky-tint)} .pb-pasi .pb-pas2{background:var(--sun-tint)}

/* ---------- laboratoarele (sala, coloana) ---------- */
html:not(.flow) .view:has(.pb-lab,.an) .lesson{grid-template-columns:minmax(0,1.55fr) minmax(0,.45fr)}
html:not(.flow) .view:has(.pb-lab,.an) .plate .emoji-plansa{font-size:5em;padding:10px 0}
.pb-lab{display:grid;gap:8px;color:var(--ink)}
.pb-pb{margin:0;font-weight:700;font-size:calc(17px * var(--fs));line-height:1.3}
.pb-pb b{color:var(--berry)}
.pb-main{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center}
.pb-sv .pb-sala{height:calc(236px * var(--fs));width:auto;max-width:100%}
.pb-colw{display:flex;justify-content:center;align-items:center;min-width:calc(250px * var(--fs));min-height:calc(205px * var(--fs));box-sizing:border-box;border:2px solid var(--line);border-radius:12px;padding:6px 12px;background:var(--card)}
.pb-dr{display:grid;gap:8px;min-width:0}
.pb-pas{margin:0;font-weight:800;font-size:calc(15px * var(--fs));line-height:1.3;min-height:2.6em}
.pb-pas b{color:var(--berry)}
.pb-mut{display:flex;align-items:center;justify-content:center;gap:10px}
.pb-mut .btn.pb-m{min-width:calc(52px * var(--fs));min-height:calc(44px * var(--fs));padding:0 10px;font-size:calc(18px * var(--fs))}
.pb-cnt{flex:1;text-align:center;font-weight:800;font-size:calc(16px * var(--fs));color:var(--sky)}
.ascuns{visibility:hidden}
.pb-ec{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;font-family:var(--f-display);font-weight:800;font-size:calc(24px * var(--fs));min-height:1.5em;text-align:center}
.pb-ec b{color:var(--leaf-deep)}
.pb-ec .pb-rasp{flex-basis:100%;font-size:calc(21px * var(--fs));color:var(--leaf-deep)}
.pb-ec small{flex-basis:100%;font-family:var(--f-body,inherit);font-size:calc(13px * var(--fs));color:var(--muted)}
.pb-in{display:inline-flex;align-items:center;justify-content:center;min-width:3.4em;height:1.5em;border:3px dashed var(--berry);border-radius:10px;color:var(--muted);background:var(--card)}
.pb-in.plin{border-style:solid;color:var(--berry);background:var(--berry-tint)}
.pb-stk{display:grid;align-items:center}
.pb-stk>*{grid-area:1/1}
.pb-stk>.pb-pad{align-self:start}
.pb-stk>.pb-ec{pointer-events:none}
.pb-pad{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.pb-lab .pb-pad .chip.pb-key{display:flex;align-items:center;justify-content:center;min-height:calc(44px * var(--fs));padding:0;font-family:var(--f-display);font-size:calc(22px * var(--fs));color:var(--ink);border:3px solid var(--line);border-radius:12px;box-shadow:0 4px 0 var(--line);cursor:pointer}
.pb-lab .pb-pad .chip.pb-key:hover{border-color:var(--sky)}
.pb-lab .pb-pad .chip.pb-key:active{transform:translateY(2px);box-shadow:0 2px 0 var(--line)}
.pb-lab .pb-pad .chip.pb-key:disabled{opacity:.4;transform:none;cursor:default}
/* plăcuțele cu operații: mari, la fel, cu starea „ales” clară */
.pb-ops{display:flex;flex-direction:column;gap:10px;align-items:stretch;align-self:start}
.pb-lab .pb-ops .chip.pb-op{display:flex;align-items:center;justify-content:center;min-height:calc(46px * var(--fs));font-family:var(--f-display);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);cursor:pointer}
.pb-lab .pb-ops .chip.pb-op:hover{transform:translateY(-2px)}
.pb-lab .pb-ops .chip.pb-op.ales{background:var(--berry);border-color:var(--berry);color:var(--card);box-shadow:0 5px 0 var(--ink);transform:translateY(-3px)}
/* butoanele de jos: separate de plăcuțe */
.pb-act{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding-top:8px;border-top:2px dashed var(--line)}
.pb-act .verif{margin-left:auto}
.pb-act .btn:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
html.flow .pb-main{grid-template-columns:minmax(0,1fr)}
html.flow .pb-sv .pb-sala{width:100%;height:auto}

/* ---------- 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{transition:transform .2s}
.an-serie.aprinsa{color:var(--berry);animation:pb-pop .4s ease-out}
.an-q{font-size:calc(21px * var(--fs));font-weight:800;margin:12px 0;color:var(--ink);text-align:center;line-height:1.3}
.an-var{justify-content:center}
.an-var .chip{font-family:var(--f-display);font-size:calc(21px * var(--fs));min-width:5.5em;min-height:calc(48px * var(--fs))}
.an-msg{min-height:2.6em;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-scor{font-family:var(--f-display);font-size:calc(54px * var(--fs));color:var(--leaf-deep);animation:pb-pop .5s}
@keyframes pb-pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:none}}

/* fără animații (accesibilitate) sau mișcare redusă: starea completă, fără tranziții */
html.a-still .pb-sala *,html.a-still .pb-anim *,html.a-still .pb-lab *,html.a-still .an *{animation:none!important;transition:none!important}
@media (prefers-reduced-motion: reduce){
  .pb-sala *,.pb-anim *,.pb-lab *,.an *{animation:none!important;transition:none!important}
}

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