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

/* ---------- jetoanele: monede și bancnote ---------- */
.mb-p{display:inline-block;vertical-align:middle;flex:none;height:auto;overflow:visible}
.mb-m{width:calc(46px * var(--fs) * var(--mbz,1))}
.mb-b{width:calc(var(--w) * 1px * var(--fs) * var(--mbz,1))}
.mb-p text{font-family:var(--f-display);font-weight:800;text-anchor:middle;fill:var(--ink)}
.mb-m .mb-v{font-size:14px} .mb-m .mb-u{font-size:6.5px;letter-spacing:.3px}
.mb-m50 .mb-v{font-size:16px} .mb-m50 .mb-u{font-size:7.5px}
.mb-b .mb-v{font-size:22px} .mb-b .mb-u{font-size:9px;letter-spacing:1px}
.mb-p.mare{--mbz:1.8}
/* bancnote: 1 leu verde, 5 lei mov, 10 lei roșiatic, 20 de lei verde-oliv, 50 de lei galben,
   100 de lei albastru, 200 de lei maro-portocaliu, 500 de lei violet închis */
.mb-b1{--c:var(--leaf)}
.mb-b5{--c:color-mix(in srgb,var(--berry) 50%,var(--sky))}
.mb-b10{--c:var(--berry)}
.mb-b20{--c:color-mix(in srgb,var(--leaf) 55%,var(--sun))}
.mb-b50{--c:var(--sun)}
.mb-b100{--c:var(--sky)}
.mb-b200{--c:color-mix(in srgb,color-mix(in srgb,var(--sun) 50%,var(--berry)) 75%,var(--ink))}
.mb-b500{--c:color-mix(in srgb,color-mix(in srgb,var(--sky) 45%,var(--berry)) 70%,var(--ink))}
.mb-b .mb-f{fill:color-mix(in srgb,var(--c) 24%,var(--card));stroke:var(--c);stroke-width:2.2}
.mb-b .mb-s{fill:var(--c)}
.mb-b .mb-o{fill:none;stroke:var(--c);stroke-width:2;opacity:.75}
/* monede: 1 ban alămiu, 5 bani arămiu, 10 bani argintiu, 50 de bani auriu */
.mb-m1{--c:color-mix(in srgb,var(--sun) 70%,var(--ink))}
.mb-m5{--c:color-mix(in srgb,var(--berry) 55%,var(--sun))}
.mb-m10{--c:color-mix(in srgb,var(--muted) 75%,var(--card))}
.mb-m50{--c:var(--sun)}
.mb-m .mb-f{fill:color-mix(in srgb,var(--c) 38%,var(--card));stroke:var(--c);stroke-width:2.2}
.mb-m .mb-r{fill:none;stroke:var(--c);stroke-width:1.2;stroke-dasharray:2.5 2.5}

/* portofelul */
.mb-wal{width:calc(96px * var(--fs));height:auto;flex:none}
.mb-wal-back{fill:color-mix(in srgb,var(--sun-edge) 50%,var(--ink))}
.mb-wal-front{fill:color-mix(in srgb,var(--sun-edge) 80%,var(--berry))}
.mb-wal-flap{fill:color-mix(in srgb,var(--sun-edge) 55%,var(--ink))}
.mb-wal-btn{fill:var(--sun)}
.mb-wal-st{fill:none;stroke:var(--sun-tint);stroke-width:1.6;stroke-dasharray:4 3}
.mb-wal-in1{fill:color-mix(in srgb,var(--leaf) 35%,var(--card));stroke:var(--leaf);stroke-width:1.5}
.mb-wal-in2{fill:color-mix(in srgb,var(--sky) 35%,var(--card));stroke:var(--sky);stroke-width:1.5}

/* ---------- planșe ---------- */
.plate :is(.mb-cov,.mb-mb,.mb-toate,.mb-leu,.mb-ord,.mb-teancuri,.mb-feluri,.mb-lab-pl,.mb-capcana,.mb-tava){background:var(--card);color:var(--ink);border-radius:12px;padding:14px;font-weight:800}
.mb-tt{margin:2px 0 6px;font-size:calc(17px * var(--fs));color:var(--ink)}
.mb-tt small{color:var(--muted);font-weight:700}
.mb-sfat{margin:8px 0 0;font-weight:700;color:var(--muted);font-size:calc(15px * var(--fs))}
.mb-semn{font-family:var(--f-display);font-size:calc(30px * var(--fs));color:var(--muted);line-height:1}
.mb-rand{display:inline-flex;flex-wrap:wrap;gap:5px;align-items:center}
.mb-rand.mic{--mbz:.62;gap:3px}
.mb-cel{display:inline-flex;flex-direction:column;align-items:center;gap:3px}
.mb-cel small{font-size:calc(13px * var(--fs));color:var(--muted);font-weight:800;white-space:nowrap}

/* copertă: piesele ies pe rând din portofel; contorul are lățime fixă, ca să nu sară */
.mb-cov{padding:20px 14px!important}
.mb-cov-top{display:flex;align-items:center;justify-content:center;gap:18px}
.mb-cov-top .mb-wal{width:calc(120px * var(--fs))}
.mb-ctr{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:calc(270px * var(--fs));max-width:60%}
.mb-ctr small{color:var(--muted);font-size:calc(15px * var(--fs))}
.mb-ctr-v{font-family:var(--f-display);font-size:calc(26px * var(--fs));line-height:1.1;color:var(--leaf-deep)}
.mb-ctr-plus{color:var(--berry);font-size:calc(17px * var(--fs));min-height:1.3em}
.mb-ctr-plus.ascuns{visibility:hidden}
html.flow .mb-ctr-v{min-height:2.2em}
.mb-cov-row{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:18px;--mbz:.92}
.mb-out{opacity:0;transform:translate(-60px,-70px) scale(.3);transition:opacity .45s,transform .45s}
.mb-out.on{opacity:1;transform:none}

/* stația 1 */
.mb-mb{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:center}
.mb-mb-c{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px}
.mb-mb-c b{font-family:var(--f-display);font-size:calc(22px * var(--fs))}
.mb-mb-c small{color:var(--muted);font-size:calc(15px * var(--fs))}
.mb-et{background:var(--sun-tint);color:var(--sun-ink);border-radius:999px;padding:2px 14px;font-size:calc(17px * var(--fs))}

/* stația 2 */
.mb-tr{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-end;justify-content:center;margin-bottom:8px}
.mb-tr-b{--mbz:.86}

/* stația 3 */
.mb-eq{display:flex;align-items:center;gap:10px;margin:8px 0}
.mb-sute{display:grid;grid-template-columns:repeat(10,calc(7px * var(--fs)));gap:2px}
.mb-sute i{width:calc(7px * var(--fs));height:calc(7px * var(--fs));border-radius:50%;background:color-mix(in srgb,var(--sun) 70%,var(--ink))}
.mb-sute-t{font-family:var(--f-display);font-size:calc(20px * var(--fs));color:var(--leaf-deep)}

/* stația 4 */
.mb-ord-r{display:flex;align-items:flex-end;gap:8px;margin:6px 0 10px;--mbz:.86}
.mb-ord-e{width:2.8em;flex:none;color:var(--muted);font-size:calc(15px * var(--fs));align-self:center}
.mb-ord .mb-cel small{font-size:calc(17px * var(--fs));color:var(--leaf-deep)}
.mb-ord-t{margin:6px 0 0;text-align:center;font-family:var(--f-display);font-size:calc(22px * var(--fs));color:var(--leaf-deep)}

/* teancuri: piesele la fel una peste alta */
.mb-teanc{position:relative;display:inline-grid;padding:calc((var(--n) - 1) * 4px) calc((var(--n) - 1) * 4px + 12px) 10px 0;line-height:0}
.mb-tc{grid-area:1/1;transform:translate(calc(var(--i) * 4px),calc(var(--i) * -4px))}
.mb-x{position:absolute;right:0;bottom:0;background:var(--ink);color:var(--card);border-radius:999px;padding:3px 7px;font-size:calc(13px * var(--fs));line-height:1;font-weight:900}
.mb-tn{display:flex;align-items:center;gap:18px;margin:10px 0 14px}
.mb-tn .mb-teanc{min-width:calc(100px * var(--fs))}
.mb-tn-t{font-size:calc(18px * var(--fs))}
.mb-tn-t b{color:var(--leaf-deep)}

/* stațiile 8, 9, 10 */
.mb-fel{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;border:2px dashed var(--line);border-radius:12px;margin:6px 0}
.mb-fel.bun{border:2px solid var(--leaf);background:var(--leaf-tint)}
.mb-nr{color:var(--muted);white-space:nowrap}
.mb-fel.bun .mb-nr{color:var(--leaf-deep)}

/* stația 5 */
.mb-lab-pl{display:flex;align-items:center;gap:16px}
.mb-lab-pl .mb-wal{width:calc(130px * var(--fs))}
.mb-pasi{margin:0;padding-left:1.3em;display:grid;gap:8px;font-size:calc(17px * var(--fs))}

/* stația 11 */
.mb-capcana{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px}
.mb-capcana .mb-sfat{flex-basis:100%;text-align:center}

/* portofelul cu piese (stația 6, 13, verificarea) */
.mb-tava{display:flex;align-items:center;gap:12px}
.mb-tava .mb-wal{width:calc(80px * var(--fs))}
.mb-tava-p{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.qgrid .mb-tava{flex-direction:column}
.qgrid .mb-tava-p{justify-content:center;--mbz:.9}

/* ---------- laborator: numără din portofel ---------- */
.nm{display:grid;gap:7px}
.nm-top{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:1.5em}
.nm-step{font-weight:800;color:var(--muted);font-size:calc(14px * var(--fs))}
.nm-plus{color:var(--berry);font-weight:900;font-size:calc(17px * var(--fs))}
.nm-ctr{display:flex;align-items:baseline;gap:10px;background:var(--leaf-tint);border:2px solid var(--leaf);border-radius:12px;padding:4px 12px;color:var(--ink)}
.nm-ctr small{color:var(--muted);font-weight:800;font-size:calc(14px * var(--fs));white-space:nowrap}
.nm-v{font-family:var(--f-display);font-size:calc(23px * var(--fs));line-height:1.15;color:var(--leaf-deep)}
.nm-port{display:flex;align-items:center;gap:10px;background:color-mix(in srgb,var(--sun-edge) 14%,var(--card));border:2px solid var(--line);border-radius:14px;padding:6px 8px}
.nm-port .mb-wal{width:calc(62px * var(--fs))}
.nm-pcs{display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-height:calc(52px * var(--fs));--mbz:.86}
.nm-pc{border:3px solid transparent;background:none;padding:2px;border-radius:10px;cursor:pointer;line-height:0;transition:opacity .3s,transform .3s}
.nm-pc:hover{border-color:var(--sky);transform:translateY(-2px)}
.nm-pc.luat{opacity:0;transform:translateY(24px) scale(.5);pointer-events:none}
.nm-teancuri{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;min-height:calc(56px * var(--fs));padding:6px 4px 8px;border-top:2px dashed var(--line);--mbz:.72}
.nm-gol,.fs-gol-t{color:var(--muted);font-weight:700;font-size:calc(14px * var(--fs));align-self:center}
.nm-msg,.fs-msg{margin:0;font-weight:800;min-height:1.4em;font-size:calc(15px * var(--fs));color:var(--ink)}
.nm-msg.bine,.fs-msg.bine{color:var(--leaf-deep)} .nm-msg.rau,.fs-msg.rau{color:var(--berry)}
.nm-act,.fs-act{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding-top:6px;border-top:2px dashed var(--line)}
.nm-act{min-height:calc(46px * var(--fs))}
.nm-act .nm-next{margin-left:auto}
.nm-plus{margin-left:auto}
.fs-act .verif{margin-left:auto}
.fs-act .verif:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}

/* ---------- laboratoare: formează suma / cât mai puține piese ---------- */
.fs{display:grid;gap:7px}
.fs-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.fs-step{font-weight:800;color:var(--muted);font-size:calc(14px * var(--fs))}
.fs-tinta{font-weight:800;color:var(--ink);font-size:calc(16px * var(--fs))}
.fs-tinta b{display:inline-block;background:var(--sun);color:var(--on-sun);border-radius:10px;padding:2px 12px;font-family:var(--f-display);font-size:calc(21px * var(--fs));box-shadow:0 3px 0 var(--sun-edge)}
.fs-tray{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;padding:6px;border:2px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--sky) 8%,var(--card));--mbz:.8}
.fs-pc{border:3px solid var(--line);background:var(--card);border-radius:12px;padding:3px 4px;cursor:pointer;line-height:0;box-shadow:0 3px 0 var(--line)}
.fs-pc:hover{border-color:var(--sky);transform:translateY(-2px)}
.fs-pc:active{transform:translateY(2px);box-shadow:none}
.fs-pc:disabled{opacity:.5;transform:none;cursor:default}
.fs-mana-c{border:2px dashed var(--leaf);border-radius:14px;padding:4px 8px 8px;background:var(--leaf-tint)}
.fs-info{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-weight:800;color:var(--ink);font-size:calc(14px * var(--fs))}
.fs-ctr{font-family:var(--f-display);font-size:calc(20px * var(--fs));color:var(--leaf-deep)}
.fs-nr{color:var(--muted)}
.fs-mana{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end;min-height:calc(54px * var(--fs));padding-top:6px;--mbz:.7}
.mb-teanc-b{border:0;background:none;padding:calc((var(--n) - 1) * 4px) calc((var(--n) - 1) * 4px + 12px) 10px 0;cursor:pointer;border-radius:8px}
.mb-teanc-b:hover{outline:3px solid var(--berry);outline-offset:2px}

/* animații scurte (oprite cu „fără animații” și la mișcare redusă) */
.pop{animation:mbpop .35s ease-out}
.scut{animation:shake .45s}
@keyframes mbpop{0%{transform:scale(.7)}70%{transform:scale(1.12)}100%{transform:none}}

/* ---------- 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:mbpop .4s ease-out}
.an-q{font-size:calc(21px * var(--fs));font-weight:800;margin:10px 0 8px;color:var(--ink);text-align:center}
.an-piese{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;margin-bottom:10px;--mbz:.82}
.an-var{justify-content:center}
.an-var .chip{font-size:calc(16px * var(--fs));min-width:8em}
.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:var(--f-display);font-size:calc(54px * var(--fs));color:var(--leaf-deep);animation:mbpop .5s}

@media (prefers-reduced-motion: reduce){
  .mb-out,.nm-pc,.an-bar i{transition:none!important}
  .pop,.scut,.an-scor,.an-serie.aprinsa{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}