/* aplicatie.css — stiluri proprii lecției „Tipare de înmulțire pe poziții” (doar variabile de culoare).
   Culorile cifrelor: sămânța pe galben (.ti-s), zerourile din factori roșu-violet (.ti-zf),
   zeroul care e deja în sămânță verde, subliniat (.ti-zs). */

/* ---------- comune: cifre colorate după sursă ---------- */
.ti-n{white-space:nowrap}
.ti-n i,.ti-su-box i,.ti-rg i{font-style:normal}
.ti-zf{color:var(--berry);font-weight:900}
.ti-zs{color:var(--leaf-deep);font-weight:900;text-decoration:underline 3px;text-underline-offset:4px}
.ti-s{color:var(--sun-ink)}
.ti-f{color:inherit}
.plate .ti-sc,.plate .ti-pl,.plate .ti-pl-box,.plate .ti-rg{background:var(--card);color:var(--ink);border-radius:12px;padding:12px 14px;font-weight:800}

/* ---------- scara zerourilor: tabel pe poziții, cifrele urcă spre stânga ---------- */
.ti-sc{display:grid;gap:5px;--cw:calc(31px * var(--fs))}
.ti-sc-r{display:grid;grid-template-columns:minmax(0,1fr) auto 2.6em;align-items:center;gap:10px;border-radius:12px;padding:4px 8px;
  font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(24px * var(--fs));line-height:1.2;transition:opacity .35s,background .35s}
.ti-sc-f{text-align:right;white-space:nowrap}
.ti-sc-g{display:grid;grid-template-columns:repeat(var(--n),var(--cw))}
.ti-c{display:block;text-align:center;border-left:2px solid var(--line);overflow:visible}
.ti-c:last-child{border-right:2px solid var(--line)}
.ti-c i{display:block;font-style:normal}
.ti-c i.ti-s{background:var(--sun-tint);border-radius:6px;margin:0 2px}
.ti-sc-u{display:flex;justify-content:center}
.ti-sc-r[data-i] .ti-sc-u{min-width:1.8em;height:1.6em;border-radius:999px;background:var(--berry-tint);color:var(--berry);align-items:center;font-size:.72em;font-weight:900}
.ti-sc-r[data-i="0"] .ti-sc-u{background:var(--leaf-tint)}
.ti-sc-h{font-family:inherit;font-size:calc(12px * var(--fs));color:var(--muted);letter-spacing:.02em;padding-top:0;padding-bottom:0}
.ti-sc-h .ti-c{border-color:transparent}
.ti-sc-h .ti-sc-g span{text-align:center;font-weight:900;color:var(--sky)}
.ti-sc-h .ti-sc-u{font-size:calc(11px * var(--fs))}
.ti-sc-r.ascuns{opacity:.12}
.ti-sc-r.acum{background:var(--leaf-tint);box-shadow:inset 0 0 0 3px var(--leaf)}
.ti-sc-r.acum .ti-s,.ti-sc-r.acum .ti-zs{animation:tiUrca .8s ease-out}
.ti-sc-r.acum .ti-zf{animation:tiPop .45s .55s ease-out both}
.ti-sc.static .ti-sc-r{opacity:1}
html.flow .ti-sc-r{font-size:calc(18px * var(--fs));gap:6px;padding:3px 4px;grid-template-columns:minmax(0,1fr) auto 2.2em}
html.flow .ti-sc{--cw:calc(21px * var(--fs))}

/* ---------- sămânța care crește în trepte ---------- */
.ti-pl{display:flex;flex-direction:column}
.ti-pl-r{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:52px;transition:opacity .4s}
.ti-pl-g{position:relative;align-self:stretch}
.ti-pl-g::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:6px;margin-left:-3px;background:var(--leaf-deep);border-radius:3px}
.ti-pl-0 .ti-pl-g::before{bottom:50%}
.ti-fr{position:absolute;top:calc(50% - 10px);width:30px;height:18px;background:var(--leaf);border:2px solid var(--leaf-deep)}
.ti-fr.st{right:calc(50% + 2px);border-radius:100% 0}
.ti-fr.dr{left:calc(50% + 2px);border-radius:0 100%}
.ti-sam{position:absolute;left:calc(50% - 15px);top:calc(50% - 6px);width:30px;height:20px;border-radius:50%;background:var(--sun);border:3px solid var(--ink)}
.ti-pl-t{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(24px * var(--fs));line-height:1.2;white-space:nowrap}
.ti-pl-0 .ti-pl-t{background:var(--sun-tint);border-radius:10px;padding:0 8px;justify-self:start}
.ti-pl-z{font-size:calc(14px * var(--fs));border-radius:999px;padding:2px 10px;background:var(--berry-tint);color:var(--berry);white-space:nowrap}
.ti-pl-0 .ti-pl-z{background:var(--leaf-tint);color:var(--leaf-deep)}
.ti-pl-sol{height:12px;margin-top:2px;border-top:4px solid var(--sun);background:var(--sun-tint);border-radius:0 0 10px 10px}
.ti-pl-r.ascuns{opacity:.1}
.ti-pl-r.acum .ti-fr{animation:tiCreste .7s ease-out}
.ti-pl-r.acum .ti-pl-t{animation:tiPop .45s ease-out}
.ti-pl.static .ti-pl-r{opacity:1}
html.flow .ti-pl-t{font-size:calc(18px * var(--fs))}
html.flow .ti-pl-r{grid-template-columns:44px minmax(0,1fr) auto;gap:6px}

/* ---------- de unde vin zerourile: sămânța + zerourile factorilor ---------- */
.ti-pl-box{display:grid;gap:10px}
.ti-su{text-align:center}
.ti-su-top{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(32px * var(--fs));line-height:1.1}
.ti-su-row{display:flex;justify-content:center;align-items:stretch;gap:8px;margin:8px 0}
.ti-su-box{display:flex;flex-direction:column;justify-content:center;gap:2px;border-radius:12px;padding:6px 12px;font-size:calc(20px * var(--fs))}
.ti-su-box small{font-size:calc(12px * var(--fs));color:var(--muted);font-weight:800}
.ti-su-box.s{background:var(--sun-tint);border:2px solid var(--sun)}
.ti-su-box.z{background:var(--berry-tint);border:2px solid var(--berry)}
.ti-su-plus{display:flex;align-items:center;color:var(--muted);font-size:calc(24px * var(--fs))}
.ti-su-res{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(32px * var(--fs));line-height:1.1}
.ti-su-res .ti-s{background:var(--sun-tint);border-radius:6px}
.ti-su-nota{margin:4px 0 0;color:var(--muted);font-size:calc(15px * var(--fs))}
.ti-dublu .ti-su-top{font-size:calc(24px * var(--fs))}
.ti-dublu .ti-su-res{font-size:calc(24px * var(--fs))}
.ti-dublu .ti-su-box{font-size:calc(17px * var(--fs));padding:3px 10px}
.ti-dublu .ti-su-row{margin:4px 0}
.ti-dublu .ti-su-nota{font-size:calc(13px * var(--fs))}
.ti-dublu .ti-su + .ti-su{border-top:2px dashed var(--line);padding-top:8px}

/* ---------- stația 4: regula scării ---------- */
.ti-rg{text-align:center}
.ti-rg p{margin:0}
.ti-rg-t{font-size:calc(19px * var(--fs));background:var(--sky-tint);border-radius:10px;padding:4px 10px}
.ti-rg-s{font-size:calc(22px * var(--fs));color:var(--muted)}
.ti-rg-e{margin-top:12px!important;font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(26px * var(--fs));line-height:1.35}

/* ---------- laboratoare: comune ---------- */
.ti-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))}
.ts-made,.tz-made{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ti-gata{background:var(--leaf-tint);color:var(--leaf-deep);border:2px solid var(--leaf);border-radius:999px;padding:1px 10px;font-weight:800;font-size:calc(13px * var(--fs));white-space:nowrap;animation:tiPop .35s ease-out}
.ti-ex{text-align:center;font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(34px * var(--fs));line-height:1.15;margin:4px 0 8px;color:var(--ink)}
.ti-act{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:2px dashed var(--line)}
.ti-act .verif{margin-left:auto}
.ti-act .verif:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
.ts .chip.ts-t,.tz .chip.tz-t{min-height:calc(46px * var(--fs));padding:4px 12px;font-size:calc(20px * 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}
.ts .chip.ts-t{min-width:calc(76px * var(--fs));min-height:calc(40px * var(--fs));padding:2px 9px;font-size:calc(18px * var(--fs));box-shadow:0 4px 0 var(--stripe)}
.tz .chip.tz-t{min-width:calc(52px * var(--fs))}
.ts .chip.ts-t:hover,.tz .chip.tz-t:hover{transform:translateY(-2px)}
.ts .chip.ts-t.ales,.tz .chip.tz-t.ales{background:var(--sky);border-color:var(--sky);color:var(--card);box-shadow:0 5px 0 var(--ink);transform:translateY(-3px)}
.ts .chip.ts-t:disabled,.tz .chip.tz-t:disabled{opacity:.6;transform:none}
.ts .chip.ts-t.ales:disabled,.tz .chip.tz-t.ales:disabled{opacity:1}

/* ---------- laborator 1: scara înmulțirilor (treptele urcă spre dreapta) ---------- */
.ts-sc{display:flex;flex-direction:column;gap:5px;margin-top:4px}
.ts-r{display:flex;align-items:center;gap:6px;border:3px solid transparent;border-radius:14px;padding:3px 6px 6px;background:var(--sun-tint);transition:background .3s,border-color .3s}
.ts-r[data-r="1"]{margin-left:8px}.ts-r[data-r="2"]{margin-left:16px}.ts-r[data-r="3"]{margin-left:24px}
.ts-0{background:var(--leaf-tint)}
.ts-nr{flex:0 0 auto;width:calc(32px * var(--fs));height:calc(32px * var(--fs));border-radius:999px;background:var(--card);border:2px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-weight:900;color:var(--muted);font-size:calc(15px * var(--fs))}
.ts-ex{min-width:5.3em;text-align:right;font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(21px * var(--fs));line-height:1.1;white-space:nowrap}
.ts-eq{color:var(--muted);font-size:calc(22px * var(--fs));font-weight:900}
.ts-val{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(21px * var(--fs))}
.ts-val .ti-s{background:var(--card);border-radius:6px}
.ts-var{display:flex;gap:6px;flex-wrap:nowrap;margin:0}
.ts-r.rau{border-color:var(--berry);background:var(--berry-tint);animation:tiScutura .45s}
.ts-r.bun{border-color:var(--leaf);background:var(--leaf-tint)}
html.flow .ts-r{margin-left:0!important;flex-wrap:wrap}
html.flow .ts-var{flex-wrap:wrap}
html.flow .ts-ex{min-width:0}

/* ---------- laborator 2: numără zerourile ---------- */
.tz-rand{display:flex;flex-direction:column;align-items:center;gap:8px;margin:4px 0}
.tz-et{font-weight:900;color:var(--ink);font-size:calc(17px * var(--fs))}
.tz-var{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:0}
.tz-res{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:calc(64px * var(--fs));margin:10px 0 0;padding:6px 10px;border:3px dashed var(--line);border-radius:14px}
.tz-res span{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(28px * var(--fs));line-height:1.15}
.tz-res span.tz-gol{font-family:inherit;font-size:calc(15px * var(--fs));color:var(--muted)}
.tz-res .ti-s{background:var(--sun-tint);border-radius:6px}
.tz-res small{font-size:calc(14px * var(--fs));color:var(--muted);font-weight:800}
.tz-res.bun{border-style:solid;border-color:var(--leaf);background:var(--leaf-tint)}

/* ---------- 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);animation:tiPop .4s ease-out}
.an-q{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(30px * var(--fs));font-weight:800;margin:12px 0;color:var(--ink);text-align:center;line-height:1.2}
.an-q.lung{font-size:calc(23px * var(--fs))}
.an-var{justify-content:center;display:flex;gap:10px}
.an-var .chip{font-size:calc(20px * var(--fs));min-width:5.5em;min-height:calc(46px * var(--fs));justify-content:center}
.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-scor{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(54px * var(--fs));color:var(--leaf-deep);animation:tiPop .5s}

@keyframes tiUrca{from{transform:translateX(calc(var(--pas,1) * 100%))}to{transform:none}}
@keyframes tiPop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.15);opacity:1}100%{transform:none;opacity:1}}
@keyframes tiCreste{from{transform:scale(0)}to{transform:none}}
@keyframes tiScutura{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* mișcare redusă (sistem) sau „fără animații”: animațiile se opresc; scara și sămânța sunt oprite din js/aplicatie.js */
@media (prefers-reduced-motion: reduce){
  .ti-sc-r,.ti-sc-r *,.ti-pl-r,.ti-pl-r *,.ti-gata,.ts-r,.an-scor,.an-serie,.an-bar i{animation:none!important;transition:none!important}
}
html.a-still .ti-sc-r,html.a-still .ti-sc-r *,html.a-still .ti-pl-r,html.a-still .ti-pl-r *,html.a-still .ti-gata,html.a-still .ts-r,html.a-still .an-scor,html.a-still .an-serie,html.a-still .an-bar i{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}