/* aplicatie.css — stiluri proprii lecției „Alege multiplii până la 10” (doar variabile de culoare).
   Toate clasele proprii au prefix (mp-, ms-, tb-, si-, ul-, it-, an- …) ca să nu se lovească de edulogia.css. */

/* ---------- planșe desenate: fundal de card, lizibile și în stilul Cald (card-ink) ---------- */
.plate :is(.mp-sita,.mp-tabla,.mp-trio,.mp-grupe,.mp-uc,.mp-reg,.mp-noua,.mp-axa,.mp-grila,.mp-pasi){
  background:var(--card);color:var(--ink);border-radius:12px;padding:14px 16px;font-weight:800}

/* ---------- sita multiplilor (copertă, stația 2) — animată din js/aplicatie.js ---------- */
.ms-cap{display:flex;align-items:center;gap:10px;min-height:34px}
.ms-tit{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(22px * var(--fs));white-space:nowrap}
.ms-tit b{color:var(--berry)}
.ms-coada{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;flex:1}
.ms-coada i{font-style:normal;font-size:calc(13px * var(--fs));color:var(--muted);border:2px solid var(--line);border-radius:999px;padding:0 7px}
.ms-corp{position:relative}
.ms-cad{height:56px}
.ms-sus,.ms-jos{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow:hidden}
.ms-sus{height:46px;justify-content:flex-start;padding:0 4px}
.ms-jos{height:54px;justify-content:center;background:var(--leaf-tint);border-radius:0 0 14px 14px;margin:0 10px}
.ms-b,.ms-bila{width:42px;height:42px;flex:0 0 42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:calc(17px * var(--fs));box-sizing:border-box}
.ms-sus .ms-b{background:var(--berry-tint);color:var(--berry);border:3px solid var(--berry)}
.ms-jos .ms-b{background:var(--leaf);color:var(--on-leaf);border:3px solid var(--leaf-deep)}
.ms-b.nou{animation:mp-pop .35s ease-out}
.ms-plasa{height:20px;border-radius:6px;position:relative;
  background:repeating-linear-gradient(90deg,var(--muted) 0 6px,transparent 6px 20px),var(--line);transition:box-shadow .3s}
.ms-plasa span{position:absolute;right:8px;top:100%;margin-top:2px;font-size:calc(11px * var(--fs));color:var(--muted);z-index:1}
.ms-plasa.deschisa{box-shadow:0 0 0 3px var(--leaf)}
.ms-bila{position:absolute;left:calc(50% - 21px);top:6px;background:var(--sun);color:var(--on-sun);border:3px solid var(--sun-edge);z-index:2}
.ms-bila.trece{animation:ms-trece 1.1s ease-in forwards}
.ms-bila.ramane{animation:ms-ramane 1.1s ease-out forwards}
/* 56 (cădere) + 46 (rândul de pe sită) − 42 (bila) − 6 = 54px până pe sită; 56 + 46 + 20 + 6 = 128px până în tavă */
@keyframes ms-trece{0%{transform:translateY(-30px);opacity:0}15%{opacity:1}60%{transform:translateY(54px)}100%{transform:translateY(128px);opacity:.15}}
@keyframes ms-ramane{0%{transform:translateY(-30px);opacity:0}15%{opacity:1}55%{transform:translateY(54px)}68%{transform:translateY(40px)}80%{transform:translateY(54px)}100%{transform:translateY(54px);background:var(--berry-tint);color:var(--berry);border-color:var(--berry)}}

/* ---------- tabla care se aprinde (stația 1) ---------- */
.tb-rows{display:grid;grid-auto-flow:column;grid-template-rows:repeat(5,auto);gap:6px 12px}
.tb-r{border:2px solid var(--line);border-radius:10px;padding:5px 10px;font-size:calc(19px * var(--fs));color:var(--muted);transition:background .3s,color .3s,border-color .3s;display:flex;align-items:center;gap:6px}
.tb-r b{margin-left:auto;min-width:2em;text-align:right;color:inherit}
.tb-r.on{background:var(--sun-tint);border-color:var(--sun-edge);color:var(--ink)}
.tb-r.on b{color:var(--berry)}
.tb-r.acum{animation:mp-pop .4s ease-out;box-shadow:0 0 0 3px var(--sun)}
.tb-sir{margin:12px 0 0;font-size:calc(16px * var(--fs));color:var(--muted);min-height:2.6em}
.tb-sir b{color:var(--berry);display:inline-block}
.tb-sir b.nou{animation:mp-pop .4s ease-out}

/* ---------- stația 3: multiplu ↔ înmulțire ↔ împărțire ---------- */
.mp-trio{display:grid;gap:12px;text-align:center}
.tr-n{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(54px * var(--fs));line-height:1;color:var(--berry)}
.tr-rand{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tr-c{border-radius:12px;padding:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.tr-c small{font-size:calc(13px * var(--fs));color:var(--muted)}
.tr-c b{font-size:calc(22px * var(--fs))}
.tr-c i{font-style:normal;font-size:calc(13px * var(--fs));color:var(--leaf-deep)}
.tr-x{background:var(--sky-tint)} .tr-d{background:var(--sun-tint)} .tr-m{background:var(--leaf-tint)}

/* ---------- stația 4: grupe de câte 4 ---------- */
.mp-grupe{display:grid;gap:14px}
.gr-caz p{margin:0 0 6px;font-size:calc(19px * var(--fs));display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gr-caz .ok{color:var(--leaf-deep);font-size:.85em} .gr-caz .no{color:var(--berry);font-size:.85em}
.gr-pct{display:flex;flex-wrap:wrap;gap:8px}
.gr-pct .gp{display:inline-grid;grid-template-columns:repeat(2,14px);gap:3px;padding:4px;border:2px solid var(--sky);border-radius:8px}
.gr-pct .gp i{width:14px;height:14px;border-radius:50%;background:var(--sky)}
.gr-pct .gp.rest{border-color:var(--berry);border-style:dashed}
.gr-pct .gp.rest i{background:var(--berry)}

/* ---------- stația 6: ultima cifră ---------- */
.mp-uc{display:grid;gap:10px}
.uc-r{display:grid;grid-template-columns:3em 1fr;gap:4px 10px;align-items:center}
.uc-r em{font-style:normal;font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(22px * var(--fs));color:var(--sky);grid-row:span 2}
.uc-n{display:flex;flex-wrap:wrap;gap:4px}
.uc-n span{background:var(--sun-tint);border-radius:8px;padding:1px 6px;font-size:calc(16px * var(--fs))}
.uc-n b{color:var(--berry)}
.uc-r strong{font-size:calc(14px * var(--fs));color:var(--berry)}
.uc-r strong::before{content:"ultima cifră: ";color:var(--muted);font-weight:700}

/* ---------- stația 7: regulile ---------- */
.mp-reg{display:grid;gap:10px}
.rg{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 14px;background:var(--sun-tint);border-radius:12px;padding:8px 14px}
.rg-n{grid-row:span 2;width:56px;height:56px;border-radius:50%;background:var(--sky);color:var(--card);display:flex;align-items:center;justify-content:center;font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(26px * var(--fs))}
.rg-c{font-size:calc(24px * var(--fs));color:var(--berry);letter-spacing:.04em}
.rg small{font-size:calc(14px * var(--fs));color:var(--muted)}

/* ---------- stația 8: trucul lui 9 ---------- */
.nv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.nv-grid span{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:1px;background:var(--sun-tint);border-radius:10px;padding:4px 6px}
.nv-grid i{grid-column:1/-1;font-style:normal;font-size:calc(12px * var(--fs));color:var(--muted);text-align:center}
.nv-grid b{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(28px * var(--fs));line-height:1.05}
.nv-grid small{grid-column:1/-1;font-size:calc(12px * var(--fs));text-align:center;color:var(--ink)}
.mp-noua .z{color:var(--sky)} .mp-noua .u{color:var(--berry)}
.nv-leg{margin:10px 0 0;text-align:center;font-size:calc(15px * var(--fs))}

/* ---------- stația 9: axa numerelor ---------- */
.mp-axa svg{display:block}
.ax-a{stroke:var(--ink);stroke-width:3}
.ax-t{stroke:var(--ink);stroke-width:2}
.ax-m{fill:var(--leaf);stroke:var(--leaf-deep);stroke-width:2}
.ax-l{fill:var(--ink);font-size:13px;font-weight:800;text-anchor:middle}
.ax-s{fill:none;stroke:var(--sky);stroke-width:2.5}
.ax-c{stroke:var(--berry);stroke-width:2.5;stroke-dasharray:4 3}
.ax-cl{fill:var(--berry);font-size:15px;font-weight:900;text-anchor:middle}
.ax-nota{margin:6px 0 0;text-align:center;font-size:calc(15px * var(--fs))}
.ax-nota b{color:var(--berry)}

/* ---------- stația 10: tabla înmulțirii cu 24 aprins ---------- */
.gl{display:grid;grid-template-columns:repeat(11,1fr);gap:2px;font-size:calc(12px * var(--fs))}
.gl span{text-align:center;padding:3px 0;border-radius:5px;background:var(--paper);color:var(--muted)}
.gl span.gh{background:transparent;color:var(--sky);font-weight:900}
.gl span.on{background:var(--sun);color:var(--on-sun);font-weight:900;box-shadow:0 0 0 2px var(--sun-edge)}
.gl-nota{margin:8px 0 0;text-align:center;font-size:calc(15px * var(--fs))}
.gl-nota b{color:var(--berry)}

/* ---------- stația 5: pașii sitei ---------- */
.mp-pasi{display:grid;gap:10px}
.ps-r{display:flex;align-items:center;gap:12px;background:var(--sun-tint);border-radius:12px;padding:8px 12px;font-size:calc(17px * var(--fs))}
.ps-r span{flex:0 0 34px;height:34px;border-radius:50%;background:var(--leaf);color:var(--on-leaf);display:flex;align-items:center;justify-content:center}
.ps-r p{margin:0}
.ps-r b{color:var(--berry)}

/* ---------- laborator 1: sita ---------- */
.si-top,.ul-top,.it-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))}
.si-tit{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(22px * var(--fs));color:var(--ink)}
.si-tit b{color:var(--berry)}
.si-bile{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;justify-items:center;margin:6px 0 4px}
.si-b{width:calc(54px * var(--fs));height:calc(54px * var(--fs));border-radius:50%;border:3px solid var(--sky);background:var(--sky-tint);color:var(--ink);font:inherit;font-weight:900;font-size:calc(19px * var(--fs));box-shadow:0 4px 0 var(--sky);cursor:pointer;transition:transform .15s}
.si-b:hover{transform:translateY(-2px)}
.si-b.ales{background:var(--sun);border-color:var(--sun-edge);color:var(--on-sun);box-shadow:0 4px 0 var(--sun-edge);transform:translateY(-3px)}
.si-b.cade{animation:si-cade .6s ease-in both;background:var(--leaf);border-color:var(--leaf-deep);color:var(--on-leaf)}
.si-b.ramas{opacity:.45;box-shadow:none}
.si-b:disabled{cursor:default}
@keyframes si-cade{0%{transform:translateY(0)}60%{transform:translateY(14px)}100%{transform:translateY(0)}}
.si-plasa{height:16px;border-radius:6px;margin:6px 0 0;position:relative;background:repeating-linear-gradient(90deg,var(--muted) 0 6px,transparent 6px 18px),var(--line)}
.si-plasa span{display:none}
.si-plasa.deschisa{box-shadow:0 0 0 3px var(--leaf)}
.si-tava{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;min-height:52px;background:var(--leaf-tint);border-radius:0 0 14px 14px;margin:0 8px;padding:4px 8px}
.si-gol{color:var(--muted);font-weight:700;font-size:calc(14px * var(--fs))}
.si-c{display:inline-flex;flex-direction:column;align-items:center;line-height:1.05;background:var(--leaf);color:var(--on-leaf);border-radius:12px;padding:3px 9px;font-weight:900;font-size:calc(17px * var(--fs));animation:mp-pop .35s ease-out both}
.si-c small{font-size:calc(11px * var(--fs));font-weight:800}
/* butoanele de jos: separate de bile, cu roluri diferite care se văd */
.si-act,.it-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)}
.si-act .verif,.it-act .verif{margin-left:auto}
.si-act .verif:disabled,.it-act .verif:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}

/* ---------- laborator 2: ultima cifră ---------- */
.ul-ceas b{color:var(--ink)}
.ul-rand{display:flex;align-items:center;justify-content:center;gap:16px;min-height:calc(66px * var(--fs));margin:6px 0}
.ul-q{margin:0;font-size:calc(21px * var(--fs));font-weight:800;color:var(--ink)}
.ul-q b{color:var(--sky)}
.ul-nr{display:inline-flex;align-items:center;justify-content:center;min-width:calc(84px * var(--fs));height:calc(62px * var(--fs));padding:0 12px;border-radius:16px;background:var(--sun);color:var(--on-sun);box-shadow:0 5px 0 var(--sun-edge);font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(38px * var(--fs));box-sizing:border-box}
.ul-nr.nou{animation:mp-pop .35s ease-out}
.ul-btn{display:flex;justify-content:center;gap:16px}
.ul-btn .btn{min-width:calc(130px * var(--fs));font-size:calc(19px * var(--fs))}
.ul-btn .ul-da{background:var(--leaf);color:var(--on-leaf);border-color:var(--leaf-deep);box-shadow:0 5px 0 var(--leaf-deep)}
.ul-btn .ul-nu{background:var(--berry);color:var(--card);border-color:var(--berry);box-shadow:0 5px 0 var(--ink)}
.ul-btn .btn:disabled{opacity:.5}
.ul-msg{min-height:1.4em;margin:8px 0 6px;text-align:center;font-weight:800;font-size:calc(15px * var(--fs))}
.ul-msg.bine{color:var(--leaf-deep)} .ul-msg.rau{color:var(--berry)}
.ul-cosuri{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ul-c{border:2px dashed var(--line);border-radius:12px;padding:4px 8px 6px;min-height:calc(64px * var(--fs))}
.ul-c h5{margin:0 0 4px;font-size:calc(13px * var(--fs));color:var(--muted)}
.ul-in{display:flex;flex-wrap:wrap;gap:4px}
.ul-cip{display:inline-flex;align-items:baseline;gap:2px;background:var(--leaf-tint);color:var(--leaf-deep);border:2px solid var(--leaf);border-radius:999px;padding:0 8px;font-weight:900;font-size:calc(15px * var(--fs));animation:mp-pop .35s ease-out}
.ul-cip small{font-size:.7em;color:var(--muted)}
.ul-cip.gresit{background:var(--berry-tint);color:var(--berry);border-color:var(--berry)}

/* ---------- laborator 3: „Este în tabla lui…?” ---------- */
.it-rand{display:flex;align-items:center;justify-content:center;gap:14px;margin:8px 0 10px}
.it-nr{display:inline-flex;align-items:center;justify-content:center;min-width:calc(84px * var(--fs));height:calc(62px * var(--fs));padding:0 12px;border-radius:16px;background:var(--sun);color:var(--on-sun);box-shadow:0 5px 0 var(--sun-edge);font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(38px * var(--fs));box-sizing:border-box}
.it-nr.nou{animation:mp-pop .35s ease-out}
.it-sag{font-size:calc(19px * var(--fs));font-weight:800;color:var(--ink)}
.it-tbl{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px}
.it-t{height:calc(52px * var(--fs));border:3px solid var(--muted);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;font-weight:900;font-size:calc(21px * var(--fs));box-shadow:0 4px 0 var(--muted);cursor:pointer;padding:0}
.it-t:hover{transform:translateY(-2px)}
.it-t.ales{background:var(--sky);border-color:var(--sky);color:var(--card);box-shadow:0 4px 0 var(--ink);transform:translateY(-3px)}
.it-t.bun{background:var(--leaf);border-color:var(--leaf-deep);color:var(--on-leaf);box-shadow:0 4px 0 var(--leaf-deep)}
.it-t:disabled{cursor:default}
.it-t:disabled:not(.bun){opacity:.45}
.it-eq{min-height:1.5em;margin:10px 0 0;text-align:center;font-weight:800;font-size:calc(17px * var(--fs));color:var(--ink)}
.it-eq b{color:var(--berry)}
.it-facute{display:flex;gap:6px}
.it-gata{background:var(--leaf-tint);color:var(--leaf-deep);border:2px solid var(--leaf);border-radius:999px;padding:0 10px;animation:mp-pop .35s ease-out}

/* ---------- 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:mp-pop .4s ease-out}
.an-q{font-size:calc(26px * var(--fs));font-weight:800;margin:14px 0;color:var(--ink);text-align:center}
.an-var{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.an-v{min-width:calc(92px * var(--fs));min-height:calc(54px * var(--fs));padding:4px 14px;border:3px solid var(--muted);border-radius:14px;background:var(--card);color:var(--ink);font:inherit;font-weight:900;font-size:calc(21px * var(--fs));box-shadow:0 5px 0 var(--muted);cursor:pointer}
.an-v:hover{transform:translateY(-2px)}
.an-v.bun{background:var(--leaf);border-color:var(--leaf-deep);color:var(--on-leaf);box-shadow:0 5px 0 var(--leaf-deep)}
.an-v.rau{background:var(--berry-tint);border-color:var(--berry);color:var(--berry)}
.an-v:disabled{cursor:default}
.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:mp-pop .5s}

/* comune */
.mp-scutura{animation:mp-shake .45s}
@keyframes mp-pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:none}}
@keyframes mp-shake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* telefon: mai puține coloane, butoane la fel de mari */
html.flow .si-bile{grid-template-columns:repeat(4,1fr)}
html.flow .it-tbl{grid-template-columns:repeat(5,minmax(0,1fr))}
html.flow .ul-rand{flex-direction:column;gap:8px}

/* fără animații (accesibilitate) și mișcare redusă: stare statică completă */
html.a-still :is(.ms-b,.ms-bila,.tb-r,.tb-sir b,.si-b,.si-c,.ul-nr,.ul-cip,.it-nr,.it-gata,.an-scor,.an-serie,.mp-scutura){animation:none!important}
@media (prefers-reduced-motion: reduce){
  :is(.ms-b,.ms-bila,.tb-r,.tb-sir b,.si-b,.si-c,.ul-nr,.ul-cip,.it-nr,.it-gata,.an-scor,.an-serie,.mp-scutura){animation: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}