/* aplicatie.css — stiluri proprii lecției „Proprietățile adunării” (doar variabile de culoare). */

/* ---------- planșe desenate ---------- */
.plate .pa-card,.plate .pa-cov{background:var(--card);color:var(--ink);border-radius:12px;padding:14px;font-weight:800;text-align:center}
.pa-txt{margin:10px 0 0;font-size:calc(22px * var(--fs));font-family:var(--f-display);line-height:1.25}
.pa-txt b{color:var(--leaf-deep)}
.pa-nota{margin:8px 0 0;color:var(--muted);font-size:calc(15px * var(--fs))}
.pa-nota b{color:var(--leaf-deep)}
.pa-ext{margin:10px 0 0;font-size:calc(14px * var(--fs));color:var(--muted);font-weight:700}
.pa-ext span{display:inline-block;background:var(--sky-tint);color:var(--sky);border:2px solid var(--sky);border-radius:999px;padding:0 8px;margin-right:4px;font-weight:900;font-size:.85em;text-transform:uppercase;letter-spacing:.03em}
.pa-ext b{color:var(--ink)}

/* un singur ceas (js/aplicatie.js) pune „inv” pe .pa-anim: desenul și textul se schimbă în același pas */
.pa-anim .tb,.pa-anim .pa-dup{display:none}
.pa-anim.inv .t0,.pa-anim:not(.inv) .t1{display:none}
.pa-anim.static .t0,.pa-anim.static .t1{display:none}
.pa-anim.static .tb{display:inline}
.pa-anim.static .pa-dup{display:block}
.pa-anim.static .pa-turn.pa-dup{display:block}

/* turnul de cuburi: blocurile își schimbă locul, înălțimea totală rămâne aceeași */
.pa-turnuri{display:flex;justify-content:center;align-items:flex-end;gap:44px}
.pa-turn{--c:calc(20px * var(--fs));position:relative;width:var(--c);height:calc((var(--a) + var(--b)) * var(--c));margin:0 46px 0 34px}
.pa-blk{position:absolute;left:0;width:var(--c);display:flex;flex-direction:column;transition:bottom .9s cubic-bezier(.5,0,.3,1)}
.pa-blk i{display:block;width:var(--c);height:var(--c);box-sizing:border-box;border:2px solid var(--card);border-radius:5px}
.pa-ba{bottom:0} .pa-ba i{background:var(--sky)}
.pa-bb{bottom:calc(var(--a) * var(--c))} .pa-bb i{background:var(--sun)}
.pa-turn.inv .pa-ba,.pa-anim.inv .pa-turn.pa-mob .pa-ba{bottom:calc(var(--b) * var(--c))}
.pa-turn.inv .pa-bb,.pa-anim.inv .pa-turn.pa-mob .pa-bb{bottom:0}
.pa-et{position:absolute;right:calc(100% + 6px);top:50%;transform:translateY(-50%);font-size:calc(17px * var(--fs));font-family:var(--f-display);line-height:1}
.pa-ba .pa-et{color:var(--sky)} .pa-bb .pa-et{color:var(--sun-ink)}
.pa-inalt{position:absolute;left:calc(100% + 6px);top:0;bottom:0;width:12px;border:3px solid var(--leaf);border-left:0;border-radius:0 8px 8px 0}
.pa-inalt b{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--leaf-deep);font-size:calc(20px * var(--fs));font-family:var(--f-display);line-height:1}
.pa-turn.pa-mic{--c:calc(16px * var(--fs));margin:0 40px 0 26px}
.pa-cov .pa-turn{--c:calc(19px * var(--fs))}

/* bara: segmentele își schimbă locul, lungimea totală rămâne aceeași */
.pa-banda{position:relative;height:calc(50px * var(--fs));margin:6px 0 0}
.pa-banda>span{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;border-radius:10px;border:3px solid var(--card);box-sizing:border-box;font-family:var(--f-display);font-size:calc(22px * var(--fs));transition:left .9s cubic-bezier(.5,0,.3,1)}
.pa-sa{left:0;width:var(--pa);background:var(--sky-tint);color:var(--ink);outline:2px solid var(--sky);outline-offset:-5px}
.pa-sb{left:var(--pa);width:var(--pb);background:var(--sun-tint);color:var(--ink);outline:2px solid var(--sun);outline-offset:-5px}
.pa-banda.inv .pa-sa,.pa-anim.inv .pa-banda.pa-mob .pa-sa{left:var(--pb)}
.pa-banda.inv .pa-sb,.pa-anim.inv .pa-banda.pa-mob .pa-sb{left:0}
.pa-acol{margin:4px 0 0;height:16px;border:3px solid var(--leaf);border-top:0;border-radius:0 0 12px 12px;position:relative}
.pa-acol span{position:absolute;left:50%;top:10px;transform:translateX(-50%);background:var(--card);padding:0 8px;color:var(--leaf-deep);font-family:var(--f-display);font-size:calc(20px * var(--fs))}
.pa-card .pa-dup{margin-top:20px}
.pa-card>.pa-acol+.pa-dup,.pa-card>.pa-acol{margin-bottom:22px}

/* parantezele „prind” doi termeni și se mută */
.pa-rand{position:relative;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;max-width:360px;margin:6px auto 34px;padding:0 6px;font-family:var(--f-display);font-size:calc(30px * var(--fs));line-height:1.2}
.pa-n{text-align:center;color:var(--ink)}
.pa-op{text-align:center;color:var(--muted)}
.pa-las{position:absolute;top:-4px;bottom:-4px;left:0;width:60%;transition:left .9s cubic-bezier(.5,0,.3,1)}
.pa-las::before,.pa-las::after{position:absolute;top:50%;transform:translateY(-54%);font-size:1.45em;color:var(--berry);line-height:1}
.pa-las::before{content:"(";left:-6px}
.pa-las::after{content:")";right:-6px}
.pa-rand.inv .pa-las,.pa-anim.inv .pa-rand.pa-mob .pa-las{left:40%}
.pa-sub{position:absolute;left:50%;top:100%;transform:translateX(-50%);background:var(--berry);color:var(--card);border-radius:999px;padding:0 10px;font-size:calc(17px * var(--fs));line-height:1.5}
.pa-rand .pa-sub.t1{display:none}
.pa-rand.inv .pa-sub.t0,.pa-anim.inv .pa-rand.pa-mob .pa-sub.t0{display:none}
.pa-rand.inv .pa-sub.t1,.pa-anim.inv .pa-rand.pa-mob .pa-sub.t1{display:inline}
.pa-anim.static .pa-rand .pa-sub{display:inline}
.pa-anim.static .pa-rand:not(.inv) .pa-sub.t1,.pa-anim.static .pa-rand.inv .pa-sub.t0{display:none}
.pa-par .pa-txt{font-size:calc(19px * var(--fs))}

/* stația 3: zero */
.pa-z-r{display:flex;align-items:flex-end;justify-content:center;gap:6px}
.pa-z-op{font-family:var(--f-display);font-size:calc(30px * var(--fs));color:var(--muted);align-self:center}
.pa-gol{display:flex;align-items:center;justify-content:center;width:calc(36px * var(--fs));height:calc(96px * var(--fs));border:3px dashed var(--muted);border-radius:8px;color:var(--muted);font-family:var(--f-display);font-size:calc(22px * var(--fs));margin:0 8px}

/* stația 4: perechea prietenă */
.pa-arc{display:block;width:100%;max-width:300px;margin:0 auto -6px;overflow:visible}
.pa-arc path{fill:none;stroke:var(--berry);stroke-width:3;stroke-dasharray:6 5}
.pa-arc text{fill:var(--berry);font-size:16px;font-weight:900;text-anchor:middle}
.pa-pri-r{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;max-width:300px;margin:0 auto;font-family:var(--f-display);font-size:calc(32px * var(--fs))}
.pa-p1{background:var(--berry-tint);border-radius:12px;color:var(--berry)}
.pa-zece{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px}
.pa-zece span{background:var(--leaf-tint);color:var(--leaf-deep);border-radius:8px;padding:2px 8px;font-size:calc(14px * var(--fs))}

/* stația 6: două drumuri */
.pa-dr{display:grid;gap:10px;text-align:left!important}
.pa-dr-r{display:grid;grid-template-columns:5.2em 1fr;row-gap:2px;align-items:center;border-radius:12px;padding:10px 12px;font-family:var(--f-display);font-size:calc(21px * var(--fs))}
.pa-dr-r em{grid-row:span 2;font-style:normal;font-family:var(--f-body);font-size:calc(14px * var(--fs));font-weight:900;text-transform:uppercase}
.pa-greu{background:var(--line)} .pa-greu em{color:var(--muted)}
.pa-usor{background:var(--leaf-tint)} .pa-usor em{color:var(--leaf-deep)}
.pa-usor b{color:var(--leaf-deep)}

/* stația 8 și laboratorul 2: stive de cuburi pentru scădere */
.pa-sc-r{display:flex;justify-content:space-around;align-items:flex-end;gap:12px}
.pa-sc-c{display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--f-display);font-size:calc(20px * var(--fs))}
.pa-stiva{--c:calc(17px * var(--fs));display:flex;flex-direction:column;align-items:center}
.pa-stiva i{display:block;position:relative;width:var(--c);height:var(--c);box-sizing:border-box;border:2px solid var(--card);border-radius:5px;background:var(--sky);transition:background .6s,border-color .6s,opacity .6s}
.pa-stiva i.x{background:var(--berry-tint);border-color:var(--berry)}
.pa-stiva i.x::after{content:"×";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--berry);font-weight:900;font-size:calc(14px * var(--fs));line-height:1}
.pa-stiva i.lipsa{background:transparent;border:2px dashed var(--muted)}
.pa-stiva i.lipsa::after{content:"?";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:900;font-size:calc(12px * var(--fs))}

/* stația 9: proba în coloană — semnul la dreapta primului număr, linia sub al doilea */
.pa-pr-r{display:flex;justify-content:center;align-items:center;gap:16px}
.pa-pr-eq{font-family:var(--f-display);font-size:calc(30px * var(--fs));color:var(--muted)}
.pa-col{--w:1.05em;display:inline-grid;grid-template-columns:repeat(var(--n),var(--w)) var(--w);font-family:var(--f-display);font-weight:800;font-size:calc(32px * var(--fs));line-height:1.12;font-variant-numeric:tabular-nums;color:var(--ink)}
.pa-col>span{display:flex;align-items:center;justify-content:center}
.pa-ch{font-size:.42em;font-weight:900;border-radius:6px 6px 0 0}
.pa-ch.pa-o0{color:var(--leaf-deep);background:var(--leaf-tint)}
.pa-ch.pa-o1{color:var(--sky);background:var(--sky-tint)}
.pa-ch.pa-o2{color:var(--berry);background:var(--berry-tint)}
.pa-ch.pa-o3{color:var(--sun-ink);background:var(--sun-tint)}
.pa-semn{color:var(--berry)}
.pa-cr{border-top:4px solid var(--ink);color:var(--leaf-deep)}

/* laboratoarele primesc mai mult loc; planșa rămâne îngustă în dreapta */
html:not(.flow) .view:has(.pp,.so,.an) .lesson{grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr)}

/* ---------- laborator 1: perechi prietene ---------- */
.pp-top,.so-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:800;color:var(--muted);font-size:calc(14px * var(--fs))}
.pp-pct{display:flex;gap:6px}
.pp-pct i{width:26px;height:8px;border-radius:99px;background:var(--line)}
.pp-pct i.gata{background:var(--leaf)} .pp-pct i.acum{background:var(--sun)}
.pp-titlu{margin:4px 0 6px;font-weight:800;color:var(--ink);font-size:calc(17px * var(--fs))}
.pp-masa{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:26px 8px;min-height:calc(84px * var(--fs));padding:8px 8px 22px;border:2px dashed var(--line);border-radius:14px}
.pp-plus{font-family:var(--f-display);font-size:calc(28px * var(--fs));color:var(--muted)}
.pp .pp-masa .chip.pp-nr{font-family:var(--f-display);font-weight:800;font-size:calc(28px * var(--fs));min-width:calc(76px * var(--fs));height:calc(56px * var(--fs));display:inline-flex;align-items:center;justify-content:center;padding:0 12px;color:var(--ink);background:var(--card);border:3px solid var(--stripe);border-radius:14px;box-shadow:0 5px 0 var(--stripe);cursor:pointer}
.pp .pp-masa .chip.pp-nr:hover{transform:translateY(-2px)}
.pp .pp-masa .chip.pp-nr.ales{background:var(--berry);border-color:var(--berry);color:var(--card);box-shadow:0 5px 0 var(--ink);transform:translateY(-3px)}
.pp .pp-masa .chip.pp-nr:disabled{cursor:default;transform:none;opacity:.85}
.pp-nr.rau{animation:shake .45s}
.pp-gr{position:relative;display:inline-flex;align-items:center;gap:6px;height:calc(56px * var(--fs));padding:0 4px;border-radius:14px;background:var(--leaf-tint)}
.pp-gr.nou .pp-par{animation:prinde .6s ease-out both}
.pp-par{font-family:var(--f-display);font-size:calc(46px * var(--fs));line-height:1;color:var(--berry)}
.pp-t{font-family:var(--f-display);font-size:calc(28px * var(--fs));color:var(--ink);display:inline-block}
.pp-gr i{font-style:normal;color:var(--muted);font-family:var(--f-display);font-size:calc(24px * var(--fs))}
.pp-bula{position:absolute;left:50%;top:calc(100% - 6px);transform:translateX(-50%);background:var(--leaf);color:var(--on-leaf);border-radius:999px;padding:0 10px;font-style:normal;font-weight:900;font-size:calc(15px * var(--fs));white-space:nowrap}
.pp-gr.nou .pp-bula{animation:pop .5s .35s ease-out both}
.pp-scr{margin:8px 0 4px;text-align:center;font-family:var(--f-display);font-size:calc(20px * var(--fs));color:var(--ink);line-height:1.3}
.pp-gol{display:inline-block;min-width:2.6em;border-bottom:3px dashed var(--leaf);color:var(--leaf-deep)}
.pp-info{margin:4px 0 0;text-align:center;color:var(--muted);font-weight:800}
.pp-var{justify-content:center}
.pp .pp-var .chip.pp-s{min-width:5em;font-size:calc(20px * var(--fs))}
.pp .pp-var .chip.pp-s.ales,.so .so-var .chip.so-c.ales{background:var(--berry);border-color:var(--berry);color:var(--card);box-shadow:0 5px 0 var(--ink);transform:translateY(-3px)}
.pp-act,.so-act{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:2px dashed var(--line)}
.pp-act .verif,.pp-act .pp-next,.so-act .verif,.so-act .so-next{margin-left:auto}
.pp-act .verif:disabled,.so-act .verif:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
@keyframes prinde{0%{transform:scale(1.8);opacity:0}100%{transform:none;opacity:1}}
@keyframes pop{0%{transform:translateX(-50%) scale(.6)}70%{transform:translateX(-50%) scale(1.15)}100%{transform:translateX(-50%)}}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ---------- laborator 2: schimbă ordinea ---------- */
.so-main{display:flex;align-items:center;gap:18px;margin-top:6px}
.so-scena{flex:0 0 calc(150px * var(--fs));display:flex;justify-content:center;align-items:flex-end;min-height:calc(215px * var(--fs));padding:4px 0}
.so-scena .pa-turn,.so-scena .pa-stiva{--c:calc(19px * var(--fs))}
.so-dr{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.so-expr{margin:0;font-family:var(--f-display);font-size:calc(36px * var(--fs));line-height:1.1;color:var(--ink)}
.so-expr b{color:var(--leaf-deep)} .so-expr .so-nu{color:var(--berry)}
.so-gol{display:inline-block;min-width:1.4em;border-bottom:3px dashed var(--leaf);color:var(--muted);text-align:center}
.so-nota{margin:0;color:var(--muted);font-weight:800;font-size:calc(16px * var(--fs))}
.so-q{margin:4px 0 0;font-weight:800;color:var(--ink)}
.so .so-var .chip.so-c{font-size:calc(17px * var(--fs));min-height:calc(46px * var(--fs))}
.so-jos{margin-top:4px}
.so-jurnal{display:flex;flex-wrap:wrap;gap:6px;min-height:calc(28px * var(--fs))}
.so-jurnal span{border-radius:999px;padding:2px 12px;font-weight:800;font-size:calc(15px * var(--fs));border:2px solid}
.so-jurnal .da{background:var(--leaf-tint);color:var(--leaf-deep);border-color:var(--leaf)}
.so-jurnal .nu{background:var(--berry-tint);color:var(--berry);border-color:var(--berry)}

/* ---------- laborator 3: 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)}
.an-q{font-size:calc(26px * var(--fs));font-weight:800;margin:14px 0;color:var(--ink);text-align:center;font-family:var(--f-display)}
.an-var{justify-content:center}
.an-var .chip{font-size:calc(19px * var(--fs));min-width:5.5em}
.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)}

/* mișcare redusă (sistem): planșele sunt oprite din js/aplicatie.js; aici oprim și tranzițiile */
@media (prefers-reduced-motion: reduce){
  .pa-blk,.pa-banda>span,.pa-las,.pa-stiva i,.pp-gr.nou .pp-par,.pp-gr.nou .pp-bula,.pp-nr.rau{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}