/* aplicatie.css — stiluri proprii lecției „Probleme cu monede și bancnote” (doar variabile de culoare).
   Culorile bancnotelor sunt aproximative și se amestecă din culorile stilului (color-mix). */

/* ---------- piesele: bancnote și monede ---------- */
.bn-p{display:block;height:calc(40px * var(--fs));width:auto;flex:0 0 auto;overflow:visible}
.bn-m{height:calc(40px * var(--fs))}
.bn-b{aspect-ratio:92/48}
.bn-m{aspect-ratio:1}
.bn-b1{--c:var(--leaf)}
.bn-b5{--c:color-mix(in srgb,var(--berry) 45%,var(--sky))}
.bn-b10{--c:var(--berry)}
.bn-b20{--c:color-mix(in srgb,var(--leaf) 50%,var(--sun))}
.bn-b50{--c:color-mix(in srgb,var(--sun) 80%,var(--berry))}
.bn-b100{--c:var(--sky)}
.bn-b200{--c:color-mix(in srgb,color-mix(in srgb,var(--sun) 45%,var(--berry)) 70%,var(--ink))}
.bn-b500{--c:color-mix(in srgb,color-mix(in srgb,var(--sky) 40%,var(--berry)) 65%,var(--ink))}
.bn-b .bn-f{fill:color-mix(in srgb,var(--c) 22%,var(--card));stroke:var(--c);stroke-width:2.4}
.bn-b .bn-in{fill:none;stroke:var(--c);stroke-width:.9;stroke-dasharray:2 2;opacity:.7}
.bn-b .bn-med{fill:color-mix(in srgb,var(--c) 30%,var(--card));stroke:var(--c);stroke-width:1.6}
.bn-b .bn-om{fill:var(--c);opacity:.75}
.bn-p text{font-family:"Baloo 2",system-ui,sans-serif;font-weight:800;text-anchor:middle;fill:var(--ink)}
.bn-b .bn-v{font-size:21px}
.bn-b500 .bn-v,.bn-b200 .bn-v,.bn-b100 .bn-v{font-size:18px}
.bn-b .bn-u{font-size:8.5px;letter-spacing:1px;fill:var(--muted)}
.bn-b .bn-c{font-size:7px;text-anchor:end;fill:var(--c)}
.bn-m1{--c:color-mix(in srgb,var(--sun) 65%,var(--ink))}
.bn-m5{--c:color-mix(in srgb,var(--berry) 55%,var(--sun))}
.bn-m10{--c:color-mix(in srgb,var(--muted) 70%,var(--card))}
.bn-m50{--c:var(--sun)}
.bn-m .bn-f{fill:color-mix(in srgb,var(--c) 40%,var(--card));stroke:var(--c);stroke-width:2.2}
.bn-m .bn-r{fill:none;stroke:var(--c);stroke-width:1;stroke-dasharray:1.5 1.5}
.bn-m .bn-v{font-size:13px}
.bn-m50 .bn-v{font-size:15px}
.bn-m .bn-u{font-size:6px;fill:var(--muted)}

/* portofelul */
.bn-wal{width:calc(92px * var(--fs));height:auto;flex:0 0 auto}
.bn-wal-back{fill:color-mix(in srgb,var(--berry) 45%,var(--ink))}
.bn-wal-front{fill:color-mix(in srgb,var(--berry) 70%,var(--sun))}
.bn-wal-st{fill:none;stroke:var(--card);stroke-width:1.6;stroke-dasharray:4 3;opacity:.75}
.bn-wal-tab{fill:color-mix(in srgb,var(--berry) 55%,var(--ink))}
.bn-wal-btn{fill:var(--sun)}
.bn-wal-b1{fill:color-mix(in srgb,var(--leaf) 35%,var(--card));stroke:var(--leaf);stroke-width:1.5}
.bn-wal-b2{fill:color-mix(in srgb,var(--sky) 35%,var(--card));stroke:var(--sky);stroke-width:1.5}

/* rânduri și celule (eticheta stă exact sub piesa ei) */
.bn-rand{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap}
.bn-rand.mic .bn-p{height:calc(30px * var(--fs))}
.bn-rand.mic2 .bn-p{height:calc(22px * var(--fs))}
.bn-cel{display:flex;flex-direction:column;align-items:center;gap:3px}
.bn-cel small{font-weight:800;font-size:calc(13px * var(--fs));color:var(--muted);line-height:1}
.bn-tt{margin:0 0 6px;font-weight:800;font-size:calc(17px * var(--fs));color:var(--ink)}
.bn-tt small{color:var(--muted);font-weight:700}
.bn-sfat{margin:10px 0 0;font-weight:800;font-size:calc(15px * var(--fs));color:var(--leaf-deep);text-align:center}
.bn-sag{font-weight:900;font-size:calc(24px * var(--fs));color:var(--muted)}

.plate :is(.bn-seq,.bn-toate,.bn-sar,.bn-fel-p,.bn-tab,.bn-sch,.bn-lac,.bn-leu,.bn-lab-pl){background:var(--card);color:var(--ink);border-radius:12px;padding:14px;font-weight:800}

/* ---------- numărarea animată (copertă, stația 2, stația 4) — un singur ceas în js ---------- */
.bn-seq-top{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:12px}
.bn-ctr{display:flex;flex-direction:column;align-items:center;background:var(--sun-tint);border:3px solid var(--sun);border-radius:14px;padding:6px 14px;min-width:10.5em}
.bn-ctr small{font-weight:800;color:var(--sun-ink);font-size:calc(13px * var(--fs))}
.bn-ctr-v{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(26px * var(--fs));line-height:1.15;color:var(--ink);white-space:nowrap}
.bn-seq.final .bn-ctr{border-color:var(--leaf);background:var(--leaf-tint)}
.bn-seq-r{display:flex;justify-content:center;align-items:flex-end;gap:8px;flex-wrap:wrap}
.bn-seq .bn-k{transition:opacity .3s}
.bn-seq .bn-k:not(.on){opacity:.18}
.bn-seq .bn-k.nou{animation:bn-iese .45s ease-out}
.bn-seq .bn-k small{color:var(--leaf-deep);font-size:calc(14px * var(--fs))}
.bn-cov .bn-p{height:calc(46px * var(--fs))}
@keyframes bn-iese{0%{transform:translateY(-22px) scale(.8);opacity:0}100%{transform:none;opacity:1}}

/* model-bandă */
.bn-banda-svg{display:block;width:100%;height:auto}
.bn-tot{fill:var(--sun-tint);stroke:var(--sun);stroke-width:2.5}
.bn-tot-t{font-family:"Baloo 2",system-ui,sans-serif;font-weight:800;font-size:18px;text-anchor:middle;fill:var(--ink)}
.bn-acol{fill:none;stroke:var(--muted);stroke-width:1.5}
.bn-seg{fill:color-mix(in srgb,var(--berry) 22%,var(--card));stroke:color-mix(in srgb,var(--berry) 45%,var(--sky));stroke-width:2}
.bn-seg-t{font-weight:800;font-size:15px;text-anchor:middle;fill:var(--ink)}
.bn-seg-s{font-weight:800;font-size:13px;text-anchor:middle;fill:var(--leaf-deep)}
.bn-banda .bn-k.nou{animation:pop .35s ease-out;transform-box:fill-box;transform-origin:center}
.bn-ctr-lin{margin:10px auto 0;width:max-content;max-width:100%}

/* stația 1: toate piesele */
.bn-tr{display:grid;grid-template-columns:repeat(4,auto);justify-content:center;gap:10px 12px;margin-bottom:12px}
.bn-tr-m{margin-bottom:0}
.bn-tr .bn-p{height:calc(36px * var(--fs))}

/* stația 3: din n în n */
.bn-sar-r{display:flex;align-items:center;gap:10px;margin:6px 0;padding:6px 8px;border-radius:12px;background:var(--leaf-tint)}
.bn-sar-r:nth-child(2){background:var(--sky-tint)}
.bn-sar-r:nth-child(3){background:var(--sun-tint)}
.bn-sar-e{width:4.6em;flex:0 0 auto;font-size:calc(13px * var(--fs));color:var(--muted);line-height:1.15}
.bn-sar-p{display:flex;gap:5px;flex:1;flex-wrap:wrap}
.bn-sar-p .bn-p{height:calc(30px * var(--fs))}
.bn-sar-r>b{white-space:nowrap;font-size:calc(17px * var(--fs))}

/* stația 6: trei feluri */
.bn-fel{display:flex;align-items:center;justify-content:space-between;gap:10px;border:2px dashed var(--line);border-radius:12px;padding:8px 10px;margin:6px 0}
.bn-fel .bn-p{height:calc(32px * var(--fs))}
.bn-fel .bn-rand.mic .bn-p{height:calc(28px * var(--fs))}
.bn-nr{white-space:nowrap;color:var(--muted);font-size:calc(14px * var(--fs))}

/* stația 7: tabelul felurilor */
.bn-tab-g{display:grid;grid-template-columns:auto repeat(3,1fr) auto;gap:4px;text-align:center;align-items:center}
.bn-tab-g>span{border-radius:8px;padding:5px 8px;font-size:calc(18px * var(--fs));display:flex;align-items:center;justify-content:center;min-height:calc(36px * var(--fs))}
.bn-tab-g .h{background:var(--sky-tint);font-size:calc(13px * var(--fs));color:var(--muted)}
.bn-tab-g .h .bn-p{height:calc(32px * var(--fs))}
.bn-tab-g .nr{color:var(--muted);font-size:calc(14px * var(--fs))}
.bn-tab-g .da{background:var(--sun-tint);color:var(--ink);font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(22px * var(--fs))}
.bn-tab-g .nu{color:var(--muted);opacity:.6}
.bn-tab-g .t{background:var(--leaf-tint);color:var(--leaf-deep);font-size:calc(14px * var(--fs));white-space:nowrap}

/* stația 8: schimbul */
.bn-sch-r{display:flex;align-items:center;justify-content:center;gap:10px;margin:8px 0;padding:6px;border-radius:12px;background:var(--sky-tint)}
.bn-sch-r .bn-sag{color:var(--sky)}

/* stația 9: cea mai mare care încape */
.bn-lac-r{display:flex;align-items:center;gap:14px;margin:6px auto;width:max-content;max-width:100%}
.bn-lac-r span{font-size:calc(17px * var(--fs));color:var(--muted);min-width:6.5em}
.bn-lac-r b{color:var(--ink);font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(22px * var(--fs))}
.bn-lac .bn-tt{text-align:center;font-size:calc(22px * var(--fs))}

/* stația 10: 1 leu */
.bn-eq{display:flex;align-items:center;gap:10px;margin:8px 0}
.bn-eq>.bn-p{height:calc(34px * var(--fs))}
.bn-eq .bn-rand{flex:1}
.bn-eq .bn-rand .bn-p{height:calc(30px * var(--fs))}
.bn-eq .bn-rand.mic .bn-p{height:calc(26px * var(--fs))}
.bn-eq .bn-rand.mic2{display:grid;grid-template-columns:repeat(10,auto);justify-content:start;gap:3px}
.bn-eq .bn-rand.mic2 .bn-p{height:calc(24px * var(--fs))}
.bn-semn{font-weight:900;font-size:calc(24px * var(--fs));color:var(--muted)}

/* stația 5: planșa laboratorului */
.bn-lab-pl{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.bn-tava-mini{border:3px dashed var(--leaf);border-radius:12px;padding:8px;background:var(--leaf-tint)}
.bn-lab-pl .bn-sfat{flex-basis:100%}

/* ---------- laboratoare: jetoanele (butoane mari, starea „ales” clară) ---------- */
.bn-tok{display:inline-flex;align-items:center;justify-content:center;padding:2px;border:3px solid transparent;border-radius:10px;background:transparent;cursor:grab;touch-action:none;transition:transform .15s;line-height:0}
.bn-tok:hover{transform:translateY(-2px)}
.bn-tok:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.bn-tok .bn-p{height:calc(36px * var(--fs))}
.pl .bn-tok .bn-p{height:calc(33px * var(--fs))}
.bn-tok.trag{position:relative;z-index:30;cursor:grabbing;transition:none;filter:drop-shadow(0 6px 6px var(--shadow))}
.bn-tok.ales{border-color:var(--berry);background:var(--berry-tint);transform:translateY(-4px);box-shadow:0 4px 0 var(--berry)}
.bn-tok.nou{animation:pop .4s ease-out}
.bn-loc{display:inline-block;height:calc(33px * var(--fs) + 10px);aspect-ratio:92/48;border:2px dashed var(--line);border-radius:10px;opacity:.6}

.pl-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-weight:800;color:var(--muted);font-size:calc(14px * var(--fs));margin-bottom:6px}
.pl-pret{display:flex;align-items:center;gap:8px}
.pl-ob{color:var(--ink);font-size:calc(14px * var(--fs))}
.pl-suma{background:var(--sun);color:var(--on-sun);border-radius:12px;padding:2px 12px;font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(22px * var(--fs));box-shadow:0 4px 0 var(--sun-edge);white-space:nowrap}
.pl-zona{border:3px dashed var(--line);border-radius:14px;padding:4px 8px 6px;margin:6px 0;background:var(--card)}
.pl-port{background:color-mix(in srgb,var(--berry) 8%,var(--card));border-color:color-mix(in srgb,var(--berry) 40%,var(--line))}
.pl-tava{background:var(--leaf-tint);border-color:var(--leaf);transition:background .2s}
.pl-tava.peste{background:color-mix(in srgb,var(--leaf) 30%,var(--card));border-style:solid}
.pl-tava.bun,.pu-gr.bun{border-style:solid;border-color:var(--leaf);background:color-mix(in srgb,var(--leaf) 25%,var(--card))}
.pl-tava.rau{animation:shake .45s}
.pl-et{display:block;font-weight:800;font-size:calc(13px * var(--fs));color:var(--muted)}
.pl-et b{color:var(--ink)}
.pl-p{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;min-height:calc(44px * var(--fs))}
.pl-gol-t{color:var(--muted);font-weight:700;font-size:calc(14px * var(--fs))}
.pl-act{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:2px dashed var(--line)}
.pl-act .verif{margin-left:auto}
.pl-act .btn:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}

.pu-info{color:var(--ink)}
.pu-info b{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(18px * var(--fs))}
.pu-gr{background:var(--sky-tint);border-color:var(--sky)}
.pu-gr .pl-p{min-height:calc(108px * var(--fs));align-content:center}
.pu-gr .bn-tok{cursor:pointer;touch-action:manipulation}
.pu-msg{margin:4px 0 0;min-height:1.4em;text-align:center;font-weight:800;color:var(--ink);font-size:calc(15px * var(--fs))}
.pu-msg.rau{color:var(--berry);animation:shake .45s}

@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:none}}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ---------- 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:pop .4s ease-out}
.an-q{font-size:calc(20px * var(--fs));font-weight:800;margin:10px 0;color:var(--ink);text-align:center;line-height:1.3}
.an-viz{display:flex;justify-content:center;flex-wrap:wrap;gap:4px;margin:-2px 0 10px}
.an-viz .bn-p{height:calc(30px * var(--fs))}
.an-var{justify-content:center}
.an-var .chip{font-size:calc(18px * var(--fs));min-width:5.5em}
.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:pop .5s}

/* fără animații (accesibilitate) sau mișcare redusă: totul aprins, suma finală, nimic nu se mișcă */
.bn-seq.static .bn-k{opacity:1!important;animation:none!important}
html.a-still .bn-tok,html.a-still .pl-tava,html.a-still .pu-msg{animation:none!important}
@media (prefers-reduced-motion: reduce){
  .bn-seq .bn-k,.bn-tok,.pl-tava,.pu-msg,.an-scor,.an-serie{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}
/* stația 1: titlurile centrate peste grilă, piese mai mari */
.bn-toate .bn-tt{text-align:center}
.bn-toate .bn-tr .bn-p{height:calc(42px * var(--fs))}
/* „Verifică” de la bifat: separat de variante, aliniat la dreapta */
.ex-zona > .chips + .grp{display:flex;justify-content:flex-end;margin-top:12px;padding-top:10px;border-top:2px dashed var(--line)}