/* aplicatie.css — stiluri proprii lecției „O cifră × două cifre” (doar variabile de culoare).
   Prefixul „mc-” (multiplicare în coloană) evită clasele care există deja în edulogia.css. */

/* ---------- planșe ---------- */
.mc-card{background:var(--card);color:var(--ink);border-radius:12px;padding:12px 14px;text-align:center;font-weight:800}
.mc-t{color:var(--berry);fill:var(--berry)}

/* coloana desenată în SVG */
.mc-svg{display:block;width:100%;max-height:calc(286px * var(--fs));margin:0 auto}
.mc-svg-mic{max-height:calc(190px * var(--fs))}
.mc-svg-lat{max-height:calc(270px * var(--fs))}
.mc-svg text{font-family:var(--f-display);font-weight:800}
.mc-d{font-size:46px;fill:var(--ink)}
.mc-semn{font-size:42px;fill:var(--berry)}
.mc-tm{font-size:28px;fill:var(--berry)}
.mc-rez{fill:var(--leaf-deep)}
.mc-linie{stroke:var(--ink);stroke-width:4;stroke-linecap:round}
.mc-o0{fill:var(--leaf-tint)} .mc-o1{fill:var(--sky-tint)} .mc-o2{fill:var(--berry-tint)}
.mc-ho{font-size:16px} .mc-ho0{fill:var(--leaf-deep)} .mc-ho1{fill:var(--sky)} .mc-ho2{fill:var(--berry)}
.mc-hl{fill:var(--sun-tint);stroke:var(--sun);stroke-width:3;opacity:0;transition:opacity .3s}
.mc-hl-tm{fill:var(--berry-tint);stroke:var(--berry)}
.mc-hl-rez{fill:var(--leaf-tint);stroke:var(--leaf)}
.mc-hl.mc-on{opacity:1}
.mc-sag{fill:none;stroke:var(--sky);stroke-width:3.5;stroke-linecap:round;opacity:0;transition:opacity .3s}
.mc-sag.mc-on,.mc-sag.mc-sag-on,.mc-anim.static .mc-sag{opacity:1}
.mc-varf{fill:var(--sky)}
.mc-anim [data-de]{transition:opacity .35s}
.mc-anim .mc-ascuns{opacity:0}
.mc-zboara{transform-box:fill-box;transform-origin:center;animation:mc-zbor .9s cubic-bezier(.3,.7,.4,1)}
@keyframes mc-zbor{0%{transform:translate(50px,168px) scale(1.7);opacity:.3}100%{transform:none;opacity:1}}
.mc-e{font-size:30px;fill:var(--ink)}
.mc-e-mic{font-size:23px}
.mc-n{fill:var(--sky)} .mc-z{fill:var(--sky)} .mc-u{fill:var(--leaf-deep)}
.mc-fin,.mc-e.mc-rez{fill:var(--leaf-deep)}
.mc-ax{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.mc-ax-mic{stroke-width:2}
.mc-axt{font-size:19px;fill:var(--ink)}
.mc-pct{fill:var(--berry)}

/* textul pasului: o singură propoziție vizibilă, cu înălțime fixă (nu sare pagina) */
.mc-txt{margin:6px 0 0;min-height:2.7em;display:flex;align-items:center;justify-content:center;font-size:calc(17px * var(--fs));line-height:1.3;color:var(--ink)}
.mc-txt span{display:none}
.mc-txt span.on{display:inline}
.mc-txt b{color:var(--leaf-deep)}
.mc-txt b.mc-t{color:var(--berry)}

/* stația 1: adunarea repetată */
.mc-rep{padding:22px 14px}
.mc-rep-r{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.mc-rep-r>b{font-size:calc(28px * var(--fs));color:var(--muted)}
.mc-gr{display:inline-flex;align-items:center;justify-content:center;min-width:2.4em;height:calc(56px * var(--fs));padding:0 10px;border-radius:14px;background:var(--sky-tint);border:3px solid var(--sky);font-family:var(--f-display);font-size:calc(30px * var(--fs))}
.mc-gr-t{background:var(--leaf-tint);border-color:var(--leaf);color:var(--leaf-deep)}
.mc-rep-b{margin:14px 0;font-size:calc(18px * var(--fs));color:var(--muted)}
.mc-rep-b b{color:var(--ink)}
.mc-gr-x{background:var(--sun-tint);border-color:var(--sun);font-size:calc(34px * var(--fs));padding:0 18px}

/* stația 2: așezarea, cu legenda lângă coloană */
.mc-asez{display:flex;align-items:center;gap:12px}
.mc-asez .mc-svg{flex:1 1 55%;min-width:0;max-height:calc(240px * var(--fs))}
.mc-leg{flex:1 1 45%;list-style:none;margin:0;padding:0;display:grid;gap:8px;text-align:left;font-size:calc(15px * var(--fs));line-height:1.25}
.mc-leg li{background:var(--sun-tint);border-radius:10px;padding:6px 10px}

/* stația 6: două coloane mici, una lângă alta */
.mc-doua{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.mc-cap{margin:2px 0;font-size:calc(16px * var(--fs));color:var(--muted)}
.mc-cap.mc-t{color:var(--berry)}

/* ---------- laboratoare: coloana în HTML ---------- */
/* stațiile-laborator nu au planșă: laboratorul ocupă toată lățimea scenei */
html:not(.flow) .view:has(.mc-lab,.an) .lesson{grid-template-columns:minmax(0,1fr)}
.view:has(.mc-lab,.an) .work:empty{display:none}
.mc-lab{display:flex;flex-direction:column;gap:8px}
.mc-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))}
.mc-op{color:var(--sky);font-family:var(--f-display);font-size:calc(20px * var(--fs))}
.mc-row{display:flex;gap:20px;align-items:flex-start;justify-content:center}
.mc-colw{flex:0 0 auto;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:8px 14px;text-align:center}
.mc-side{flex:0 1 620px;min-width:0;display:flex;flex-direction:column;gap:10px;align-self:stretch}
.mc-foaie{margin:0 0 4px;font-weight:800;color:var(--muted);font-size:calc(14px * var(--fs))}
.mc-col{display:inline-grid;grid-template-columns:repeat(4,1.2em);column-gap:4px;row-gap:2px;font-family:var(--f-display);font-weight:800;font-size:calc(34px * var(--fs));line-height:1;color:var(--ink)}
.mc-c{display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:1.2em;border-radius:8px;transition:background .25s,box-shadow .25s}
.mc-h{font-size:.42em;height:1.6em;font-weight:900}
.mc-h0{background:var(--leaf-tint);color:var(--leaf-deep)} .mc-h1{background:var(--sky-tint);color:var(--sky)} .mc-h2{background:var(--berry-tint);color:var(--berry)}
.mc-tmc{font-size:.6em;height:1.3em;color:var(--berry)}
.mc-sx{color:var(--berry)}
.mc-ln{grid-column:1/-1;border-top:4px solid var(--ink);height:0;margin:2px 0}
.mc-r:empty,.mc-pc .mc-tmc:empty{box-shadow:inset 0 0 0 2px var(--line)}
.mc-c.mc-tinta{background:var(--sun-tint);box-shadow:inset 0 0 0 3px var(--sun);outline:2px dashed var(--sun-ink);outline-offset:2px}
.mc-c.mc-lum{background:var(--sky-tint);box-shadow:inset 0 0 0 3px var(--sky)}
.mc-c.mc-tmc.mc-lum{background:var(--berry-tint);box-shadow:inset 0 0 0 3px var(--berry)}
.mc-c.mc-scris{color:var(--leaf-deep)}
.mc-c.mc-tmc.mc-scris{color:var(--berry)}
.mc-c.mc-fin{background:var(--leaf-tint);color:var(--leaf-deep)}
.mc-pop{animation:mc-pop .4s ease-out}
.mc-rau{animation:mc-shake .45s}
@keyframes mc-pop{0%{transform:scale(.5);opacity:.3}70%{transform:scale(1.15)}100%{transform:none;opacity:1}}
@keyframes mc-shake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* cifrele din rezultat ca butoane (laboratorul „Unde e greșeala?”) */
.mc-col .mc-rb{width:100%;padding:0;font:inherit;color:var(--ink);background:var(--card);border:3px dashed var(--sky);cursor:pointer;line-height:1}
.mc-col .mc-rb:hover{border-style:solid;background:var(--sky-tint)}
.mc-col .mc-rb.mc-ales{border-style:solid;border-color:var(--berry);background:var(--berry-tint);color:var(--berry)}
.mc-col .mc-rb.mc-fix{border-style:solid;border-color:var(--leaf);background:var(--leaf-tint);gap:1px}
.mc-rb.mc-fix s{font-size:.45em;color:var(--berry)}
.mc-rb.mc-fix b{color:var(--leaf-deep)}

/* tastatura cu cifre: plăcuțe mari, la fel */
.mc-pas{margin:0;min-height:3em;font-weight:800;font-size:calc(17px * var(--fs));line-height:1.3;color:var(--ink)}
.mc-pas b{color:var(--leaf-deep)}
.mc-pnr{display:block;font-size:calc(13px * var(--fs));color:var(--muted)}
.mc-keys.chips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 10px;padding-bottom:4px}
.mc-keys .chip.mc-key{min-height:calc(50px * var(--fs));font-family:var(--f-display);font-size:calc(24px * var(--fs));justify-content:center}
.mc-keys .chip.mc-key:disabled{opacity:.45;cursor:default}
.mc-log{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;min-height:1.6em}
.mc-log li{background:var(--leaf-tint);color:var(--leaf-deep);border-radius:999px;padding:2px 10px;font-weight:800;font-size:calc(13px * var(--fs))}
/* butoanele de jos: separate de plăcuțe */
.mc-act{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px;border-top:2px dashed var(--line)}
.mc-act .btn.sun{margin-left:auto}
.gr-cauze{flex-direction:column;align-items:stretch;gap:8px}
.gr-cauze .chip{text-align:left;min-height:calc(42px * var(--fs));font-size:calc(16px * var(--fs))}

/* laboratorul „Estimează și verifică” */
.es-pasi{display:flex;gap:8px;flex-wrap:wrap}
.es-p{border:2px solid var(--line);border-radius:999px;padding:3px 12px;font-weight:800;font-size:calc(14px * var(--fs));color:var(--muted);background:var(--card)}
.es-p.on{border-color:var(--sun);background:var(--sun-tint);color:var(--ink)}
.es-p.facut{border-color:var(--leaf);background:var(--leaf-tint);color:var(--leaf-deep)}
.es-cer{min-height:1.4em}
.es-var{gap:12px}
.es-var .chip{min-width:9em;min-height:calc(50px * var(--fs));font-size:calc(20px * var(--fs))}
.es-card{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:8px 14px}
.es-svg{display:block;width:100%;max-height:calc(120px * var(--fs))}
.es-svg text{font-family:var(--f-display);font-weight:800}
.es-t{font-size:12px;fill:var(--muted)}
.es-te{font-size:17px;fill:var(--sun-ink)} .es-tx{font-size:17px;fill:var(--leaf-deep)}
.es-pe{fill:var(--sun)} .es-px{fill:var(--leaf)}
.es-msg{margin:4px 0 0;font-weight:800;font-size:calc(16px * var(--fs));color:var(--ink);text-align:center}
.es-ke{color:var(--sun-ink)} .es-kx{color:var(--leaf-deep)}

/* ---------- 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:mc-pop .4s ease-out}
.an-q{font-family:var(--f-display);font-size:calc(30px * var(--fs));font-weight:800;margin:14px 0;color:var(--ink);text-align:center;line-height:1.25}
.an-q .gol{display:inline-block;min-width:2.6em;border-bottom:3px dashed var(--leaf);text-align:center;color:var(--muted)}
.an-q .gol.plin{border-bottom-style:solid;color:var(--leaf-deep);animation:mc-pop .35s}
.an-var{justify-content:center;gap:12px}
.an-var .chip{font-size:calc(20px * var(--fs));min-width:5.5em;min-height:calc(50px * var(--fs))}
.an-msg{min-height:2.6em;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:mc-pop .5s}

/* telefon: coloana deasupra tastaturii */
html.flow .mc-row{flex-direction:column;align-items:stretch}
html.flow .mc-colw{align-self:center}
html.flow .mc-asez{flex-direction:column}
html.flow .mc-leg{width:100%}

/* mișcare redusă (sistem) și „fără animații”: starea e completă și statică (ceasul din js/aplicatie.js se oprește) */
@media (prefers-reduced-motion: reduce){
  .mc-zboara,.mc-pop,.mc-rau,.an-q .gol,.an-scor,.an-serie{animation:none!important}
  .mc-hl,.mc-sag,.mc-anim [data-de]{transition:none!important}
}
html.a-still .mc-zboara,html.a-still .mc-pop,html.a-still .an-scor{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}