/* aplicatie.css — stiluri proprii lecției „Estimează și compară câturi” (doar variabile de culoare). */

/* Butonul „Verifică” din bara de jos este ascuns; verificarea se deschide din cuprins sau după ultima stație. */
.bottom #checkBtn{display:none!important}

/* ---------- planșe desenate (fond de card, lizibile și în stilul Cald) ---------- */
.plate .cv-anim,.plate .cb-card,.plate .bl-card,.plate .sc-card,.plate .rg-card,.plate .pt-card,.plate .tb-card{
  background:var(--card);color:var(--ink);border-radius:12px;padding:14px;font-weight:800}
.cb-svg,.ax-svg,.cv-svg,.bl-svg{display:block;width:100%;height:auto;overflow:visible}

/* benzi împărțite în părți egale */
.cb-band{fill:var(--card);stroke:var(--ink);stroke-width:2.5}
.cb-hi{stroke:var(--ink);stroke-width:2.5}
.cb-hi.a{fill:var(--sun)} .cb-hi.b{fill:var(--sky)}
.cb-cut{stroke:var(--ink);stroke-width:2.5}
.cb-v{fill:var(--ink);font:800 20px "Baloo 2",system-ui,sans-serif;text-anchor:middle}
.cb-v.tare{font-size:22px}
.cb-t{fill:var(--ink);font:800 22px "Baloo 2",system-ui,sans-serif}
.cb-r{font:800 18px system-ui,sans-serif;text-anchor:end}
.cb-r.a{fill:var(--sun-ink)} .cb-r.b{fill:var(--sky)}
.cb-cmp{stroke:var(--berry);stroke-width:3;stroke-dasharray:6 5}
.cb-n{fill:var(--berry);font:800 17px system-ui,sans-serif}
.cb-dif{fill:var(--berry)}
.cb-ar{stroke:var(--berry);stroke-width:3;fill:none;stroke-linecap:round}
/* semnele din stațiile 2, 5 și 11: plăcuțe mari */
#task-s2 .chip,#task-s5 .chip,#task-s11 .chip{min-width:calc(64px * var(--fs));min-height:calc(50px * var(--fs));font-size:calc(28px * var(--fs));font-family:"Baloo 2",system-ui,sans-serif;display:inline-flex;align-items:center;justify-content:center}
/* stația 1: partea din 6 coboară peste banda tăiată în 8 și se vede că e mai mare */
.cb-ghost{fill:var(--sun);fill-opacity:.55;stroke:var(--berry);stroke-width:3;stroke-dasharray:7 4;animation:cbGhost 5s ease-in-out infinite}
@keyframes cbGhost{0%,20%{transform:translateY(0)}28%,88%{transform:translateY(110px)}96%,100%{transform:translateY(0)}}
html.a-still .cb-ghost{animation:none;transform:translateY(110px)}

/* copertă: un singur ceas schimbă banda și textele odată */
.cv-anim{text-align:center;padding:18px 14px!important}
.cv-eq{margin:0 0 8px;font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(40px * var(--fs));line-height:1.1}
.cv-eq .cv-d{color:var(--berry)} .cv-eq .cv-q{color:var(--sun-ink)}
.cv-note{margin:8px 0 0;color:var(--muted);font-size:calc(17px * var(--fs))}
.cv-note b{color:var(--ink)}
.cv-rule{margin:6px 0 0;display:inline-block;background:var(--leaf-tint);color:var(--leaf-deep);border-radius:999px;padding:3px 14px;font-size:calc(16px * var(--fs))}
.cv-anim.nou .cv-g{animation:cvIn .45s ease-out}
@keyframes cvIn{0%{opacity:.25}100%{opacity:1}}

/* axe numerice */
.ax-l{stroke:var(--ink);stroke-width:3}
.ax-k{stroke:var(--ink);stroke-width:2} .ax-k.m{stroke-width:3.5}
.ax-n{fill:var(--muted);font:800 15px system-ui,sans-serif;text-anchor:middle}
.ax-p{stroke:var(--ink);stroke-width:2}
.ax-p.a{fill:var(--sun)} .ax-p.b{fill:var(--sky)} .ax-p.c{fill:var(--leaf)}
.ax-lb{font:800 17px system-ui,sans-serif;text-anchor:middle}
.ax-lb.a{fill:var(--sun-ink)} .ax-lb.b{fill:var(--sky)} .ax-lb.c{fill:var(--leaf-deep)}
.ax-bra{fill:var(--berry-tint);stroke:var(--berry);stroke-width:2;stroke-dasharray:5 4}
.rp-zj{fill:var(--sky-tint)} .rp-zs{fill:var(--sun-tint)}
.rp-700{fill:var(--berry);font:800 19px "Baloo 2",system-ui,sans-serif;text-anchor:middle}
.rp-z{font:800 17px system-ui,sans-serif;text-anchor:middle}
.rp-z.a{fill:var(--sun-ink)} .rp-z.b{fill:var(--sky)}

/* stația 3: regulile */
.rg-card{display:grid;gap:8px}
.rg{border-radius:12px;padding:8px 12px;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:10px}
.rg b{font-size:calc(17px * var(--fs))}
.rg-ex{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(19px * var(--fs));text-align:right}
.rg small{grid-column:1/-1;color:var(--muted);font-size:calc(14px * var(--fs))}
.rg.r1{background:var(--sun-tint)} .rg.r2{background:var(--sky-tint)} .rg.r3{background:var(--leaf-tint)}

/* stația 7: scara câturilor */
.sc-card{display:flex;align-items:flex-end;justify-content:space-around;gap:8px;min-height:200px}
.sc-col{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1}
.sc-e{font-size:calc(17px * var(--fs));color:var(--sun-ink)}
.sc-bar{display:block;width:70%;max-width:56px;background:var(--sun);border:2px solid var(--ink);border-radius:8px 8px 0 0;transform-origin:bottom;animation:scUp 4s ease-out infinite;animation-delay:calc(var(--i) * .25s)}
@keyframes scUp{0%{transform:scaleY(.1)}25%,100%{transform:none}}
html.a-still .sc-bar{animation:none}
.sc-d{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(17px * var(--fs));white-space:nowrap}

/* stația 10: etichete de preț */
.pt-card{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pt{display:flex;flex-direction:column;align-items:center;gap:4px;border:3px solid var(--line);border-radius:14px;padding:10px 6px;text-align:center}
.pt.ok{border-color:var(--leaf);background:var(--leaf-tint)}
.pt-e{font-size:calc(18px * var(--fs));letter-spacing:-2px}
.pt-p{background:var(--sun);color:var(--on-sun);border-radius:999px;padding:2px 12px}
.pt-q{font-size:calc(14px * var(--fs));color:var(--muted)}
.pt-q b{color:var(--ink)}

/* stația 11: tabel cu sute */
.tb{width:100%;border-collapse:separate;border-spacing:4px;font-size:calc(18px * var(--fs))}
.tb th{color:var(--muted);font-size:calc(14px * var(--fs))}
.tb td{background:var(--leaf-tint);border-radius:8px;padding:6px 8px;text-align:center;white-space:nowrap}
.tb td.a{background:var(--sun-tint);color:var(--sun-ink)} .tb td.b{background:var(--sky-tint)}
.tb-c{margin:10px 0 0;text-align:center}

/* ---------- comun laboratoarelor ---------- */
.cq-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 6px;font-weight:800;color:var(--muted);font-size:calc(15px * var(--fs))}
.cq-top b{color:var(--ink)}
.cq-ch{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;min-height:calc(52px * var(--fs))}
.cq-ch .chip.cq-t{min-width:calc(84px * var(--fs));min-height:calc(48px * var(--fs));padding:4px 14px;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}
.cq-ch .chip.cq-t:hover{transform:translateY(-2px)}
.cq-ch .chip.cq-t.ales{background:var(--berry);border-color:var(--berry);color:var(--card);box-shadow:0 5px 0 var(--ink);transform:translateY(-3px)}
.cq-ch .chip.cq-t:disabled{opacity:.5;transform:none}
.cq-ch .chip.cq-semn{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(28px * var(--fs))}
.cq-act{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:10px;padding-top:8px;border-top:2px dashed var(--line)}
.cq-act .verif,.cq-act .bl-next,.cq-act .pk-next,.cq-act .or-alt{margin-left:auto}
.cq-act .verif:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
.cq-msg{font-weight:800;color:var(--muted);flex:1 1 180px;min-width:0}
.cq-msg.bine{color:var(--leaf-deep)}
.cq-rau{animation:cqShake .45s}
@keyframes cqShake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes cqPop{0%{transform:scale(.6)}70%{transform:scale(1.12)}100%{transform:none}}

.cq-n{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em;border-radius:50%;background:var(--sky);color:var(--card);font-weight:900;margin-right:4px}
.cq-ch:empty{display:none}
html.flow .or-rand{grid-template-columns:repeat(2,minmax(0,1fr))}
.or-rand .or-c{padding-top:26px}

/* stația 8: copii și bomboane */
.cp-card{display:grid;gap:8px}
.cp{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;border-radius:12px;padding:8px 12px;font-size:calc(19px * var(--fs))}
.cp.r1{background:var(--sun-tint)} .cp.r2{background:var(--sky-tint)}
.cp-n{font-family:"Baloo 2",system-ui,sans-serif;white-space:nowrap}
.cp-k{font-size:calc(20px * var(--fs));letter-spacing:-2px;text-align:center}
.cp b{white-space:nowrap}
.cp-c{margin:4px 0 0;text-align:center;color:var(--leaf-deep)}

/* ---------- laborator: balanța ---------- */
.bl-scena{display:flex;justify-content:center}
.bl .bl-svg{max-width:290px}
.bl-card .bl-svg{max-width:400px;margin:0 auto}
.bl-st{fill:var(--line);stroke:var(--ink);stroke-width:2}
.bl-base{fill:var(--ink)}
.bl-bar{fill:var(--ink)}
.bl-piv{fill:var(--sun);stroke:var(--ink);stroke-width:2}
.bl-str{stroke:var(--ink);stroke-width:2.5}
.bl-plate{fill:var(--sky-tint);stroke:var(--sky);stroke-width:3}
.bl-pan.plin .bl-plate{fill:var(--sun-tint);stroke:var(--sun-edge)}
.bl-tx{fill:var(--ink);font:800 27px "Baloo 2",system-ui,sans-serif;text-anchor:middle}
.bl-es{fill:var(--berry);font:800 25px system-ui,sans-serif;text-anchor:middle}
.bl-sg{fill:var(--berry);font:800 40px "Baloo 2",system-ui,sans-serif;text-anchor:middle}
.bl-beam{transform-origin:200px 59px;transform:rotate(calc(var(--t) * -7deg));transition:transform .8s cubic-bezier(.3,1.5,.5,1)}
.bl-l{transform:translateY(calc(var(--t) * 17px));transition:transform .8s cubic-bezier(.3,1.5,.5,1)}
.bl-r{transform:translateY(calc(var(--t) * -17px));transition:transform .8s cubic-bezier(.3,1.5,.5,1)}
html.a-still .bl-beam,html.a-still .bl-l,html.a-still .bl-r{transition:none}

/* ---------- laborator: ordonează ---------- */
.or-rand{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.or-c{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;min-width:0;border:3px solid var(--sky);background:var(--card);color:var(--ink);border-radius:14px;box-shadow:0 5px 0 var(--sky);padding:10px 4px 8px;cursor:pointer;font:inherit}
.or-c:hover:not(:disabled){transform:translateY(-2px)}
.or-c.ales{border-color:var(--berry);background:var(--berry-tint);box-shadow:0 5px 0 var(--berry)}
.or-c:disabled{cursor:default}
.or-b{position:absolute;top:5px;left:5px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--berry);color:var(--card);font-weight:900;font-size:15px;visibility:hidden}
.or-c.ales .or-b{visibility:visible;animation:cqPop .35s ease-out}
.or-d{font-family:"Baloo 2",system-ui,sans-serif;font-weight:800;font-size:calc(22px * var(--fs));white-space:nowrap}
.or-e{font-weight:800;color:var(--sun-ink);font-size:calc(16px * var(--fs));visibility:hidden}
.or-e.vede{visibility:visible}
.or-g{display:flex;align-items:flex-end;justify-content:center;width:100%;height:56px;visibility:hidden}
.or-g i{display:block;width:44%;background:var(--sun);border:2px solid var(--ink);border-radius:6px 6px 0 0;transform-origin:bottom}
.or-rand.gata .or-g{visibility:visible}
.or-rand.gata .or-g i{animation:orUp .7s ease-out both}
.or-rand.gata .or-c{border-color:var(--leaf);background:var(--leaf-tint);box-shadow:0 5px 0 var(--leaf)}
@keyframes orUp{0%{transform:scaleY(0)}100%{transform:none}}

/* ---------- laborator: pachete ---------- */
.pk-rand{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px}
.pk-c{display:flex;flex-direction:column;align-items:center;gap:4px;border:3px solid var(--line);background:var(--card);color:var(--ink);border-radius:16px;box-shadow:0 5px 0 var(--line);padding:10px 6px;font:inherit;cursor:pointer;min-width:0}
.pk-c:disabled{cursor:default;opacity:1}
.pk-c.acum{border-color:var(--sky);box-shadow:0 5px 0 var(--sky);background:var(--sky-tint)}
.pk-c:not(:disabled){border-color:var(--sky);box-shadow:0 5px 0 var(--sky)}
.pk-c.ales{border-color:var(--berry);background:var(--berry-tint);box-shadow:0 5px 0 var(--berry)}
.pk-c.castiga{border-color:var(--leaf);background:var(--leaf-tint);box-shadow:0 5px 0 var(--leaf)}
.pk-l{font-weight:900;color:var(--muted);font-size:calc(14px * var(--fs));text-transform:uppercase;letter-spacing:.04em}
.pk-b{font-size:calc(19px * var(--fs));text-align:center}
.pk-p{background:var(--sun);color:var(--on-sun);border-radius:999px;padding:2px 14px;font-weight:800;font-size:calc(18px * var(--fs))}
.pk-q{font-weight:700;color:var(--muted);font-size:calc(15px * var(--fs))}
.pk-q b{color:var(--muted)}
.pk-q.plin b{color:var(--leaf-deep);display:inline-block;animation:cqPop .35s ease-out}

/* ---------- 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:cqPop .4s ease-out}
.an-q{font-size:calc(28px * var(--fs));font-weight:800;margin:14px 0;color:var(--ink);text-align:center;display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
.an-q.lung{display:block;font-size:calc(21px * var(--fs))}
.an-q .gol{display:inline-flex;align-items:center;justify-content:center;min-width:1.8em;height:1.6em;border:3px dashed var(--leaf);border-radius:12px;color:var(--muted)}
.an-q .gol.plin{border-style:solid;color:var(--leaf-deep);background:var(--leaf-tint);animation:cqPop .35s}
.an-var{justify-content:center}
.an-var .chip{font-size:calc(19px * var(--fs));min-width:4.5em;min-height:calc(48px * var(--fs));font-weight:800}
.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:cqPop .5s}

/* mișcare redusă (sistem): animațiile se opresc pe starea completă; coperta e oprită din js/aplicatie.js */
@media (prefers-reduced-motion: reduce){
  .cb-ghost{animation:none!important;transform:translateY(110px)}
  .sc-bar,.or-rand.gata .or-g i,.an-scor,.an-serie,.an-q .gol,.pk-q.plin b,.or-b,.cv-anim .cv-g,.cq-rau{animation:none!important}
  .bl-beam,.bl-l,.bl-r{transition: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}