/* aplicatie.css — stiluri proprii lecției „Împărțire prin aranjamente” (doar variabile de culoare).
   Clasele proprii au prefixele ia- (planșe), ar- (laboratorul aranjamentelor), ds- (laboratorul cu bețișoare), an- (antrenament). */

/* ---------- planșe desenate ---------- */
.plate :is(.ia-cov,.ia-deal,.ia-doua,.ia-bete,.ia-rz,.ia-dz,.ia-rest,.ar-masa,.ds-masa){
  background:var(--card);color:var(--ink);border-radius:12px;padding:14px;font-weight:800}
.ia-eq{margin:10px 0 0;text-align:center;font-family:var(--f-display);font-size:calc(30px * var(--fs));line-height:1.1;color:var(--ink)}
.ia-et{font-size:calc(13px * var(--fs));font-weight:800;color:var(--muted);white-space:nowrap}
.ia-nr{min-width:2.2em;text-align:center;background:var(--leaf-tint);color:var(--leaf-deep);border-radius:999px;padding:2px 10px;font-size:calc(17px * var(--fs))}

/* bulina (obiect dintr-un aranjament) */
.ia-o{display:inline-block;width:20px;height:20px;border-radius:50%;background:var(--berry);box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--berry) 70%,var(--ink))}
.ia-o.rest{background:var(--sun);box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--sun-edge)}
.ia-rd{display:inline-flex;gap:6px;align-items:center}

/* bețișorul (o unitate) și mănunchiul de 10 (o zece) */
.ia-bt{display:inline-block;flex:none;width:5px;height:32px;border-radius:3px;background:var(--sun);box-shadow:inset 0 0 0 1px var(--sun-edge)}
.ia-z{position:relative;display:inline-flex;gap:1px;padding:0 2px;flex:none}
.ia-leg{position:absolute;left:-3px;right:-3px;top:calc(50% - 4px);height:8px;border-radius:4px;background:var(--berry);transition:opacity .4s}
.ia-grz{display:inline-flex;gap:7px;align-items:center}
.ia-gru{display:inline-flex;gap:4px;align-items:center}

/* copertă și stația 4: 24 de buline care se așază în rânduri (un singur ceas în js/aplicatie.js) */
.ia-cov{text-align:center}
.ia-cov-box{position:relative;width:100%;max-width:420px;aspect-ratio:16/10;margin:0 auto;border-radius:12px;background:var(--leaf-tint)}
.ia-cov-mic .ia-cov-box{max-width:360px}
.ia-cov-o{position:absolute;width:22px;height:22px;border-radius:50%;transform:translate(-50%,-50%);background:var(--berry);box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--berry) 70%,var(--ink));transition:left .8s ease-in-out,top .8s ease-in-out}
.ia-cov.gramada .ia-cov-o:nth-child(3n){background:var(--sky)}
.ia-cov-eq{margin:12px 0 0;font-family:var(--f-display);font-size:calc(38px * var(--fs));line-height:1.1}
.ia-cov-eq .r{color:var(--sky)} .ia-cov-eq .c{color:var(--berry)}
.ia-cov-nota{margin:4px 0 0;color:var(--muted);font-size:calc(17px * var(--fs))}

/* stația 1: bulinele vin pe rând, câte una pe fiecare rând */
.ia-deal{display:grid;gap:10px}
.ia-deal-r{display:flex;align-items:center;gap:12px;padding:6px 10px;border-radius:12px;background:var(--sky-tint)}
.ia-deal-r .ia-et{width:5.5em}
.ia-deal-r .ia-rd{flex:1;gap:10px}
.ia-deal .ia-o{width:28px;height:28px;animation:ia-vine .35s ease-out both;animation-delay:var(--d)}
@keyframes ia-vine{from{opacity:0;transform:translateY(-26px) scale(.4)}}

/* stația 2: două întrebări */
.ia-doua{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ia-doua-p{display:flex;flex-direction:column;align-items:center;gap:7px;border-radius:12px;padding:10px 8px;text-align:center}
.ia-doua-p.p1{background:var(--sky-tint)} .ia-doua-p.p2{background:var(--sun-tint)}
.ia-doua-p h4{font-size:calc(17px * var(--fs));color:var(--ink)}
.ia-doua-p p{margin:0;font-size:calc(15px * var(--fs))}
.ia-doua-p p b{color:var(--berry)}
.ia-doua-p .ia-eq{font-size:calc(24px * var(--fs))}
.ia-doua-p.p1 .ia-rd{outline:2px dashed var(--sky);outline-offset:3px;border-radius:999px}
.ia-doua-p.p2 .ia-rd:first-of-type{outline:2px dashed var(--sun-edge);outline-offset:3px;border-radius:999px}

/* stația 5: bețișoare legate în zeci, etichetele exact sub grupuri */
.ia-bete-r{display:flex;align-items:flex-end;justify-content:center;gap:16px;flex-wrap:wrap}
.ia-bete .ia-bt{height:58px;width:6px}
.ia-col{display:flex;flex-direction:column;align-items:center;gap:8px}
.ia-et.z{color:var(--berry);font-size:calc(17px * var(--fs))}
.ia-et.u{color:var(--sun-ink);font-size:calc(17px * var(--fs))}
.ia-plus{font-family:var(--f-display);font-size:calc(30px * var(--fs));color:var(--muted);align-self:center}

/* stația 6 și 13: fiecare rând primește zeci și unități */
.ia-rz{display:grid;gap:8px}
.ia-rz-r{display:flex;align-items:center;gap:12px;padding:6px 10px;border-radius:12px;background:var(--sun-tint)}
.ia-rz-r .ia-et{width:5.5em}
.ia-rz-r .ia-nr{margin-left:auto}

/* stația 7: mănunchiul se desface în 10 bețișoare */
.ia-dz-fig{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;min-height:100px}
.ia-dz-m{position:relative;width:190px;height:96px;flex:none}
.ia-dz-m .ia-bt{position:absolute;top:8px;width:9px;height:80px;left:calc(50% - 4.5px + (var(--i) - 4.5) * 10px);transition:left .7s ease-in-out}
.ia-dz-m .ia-leg{left:calc(50% - 56px);right:auto;width:112px;top:42px;height:12px;border-radius:6px}
.ia-dz-m.desf .ia-bt,.ia-dz.on .ia-dz-m.leg .ia-bt{left:calc(50% - 4.5px + (var(--i) - 4.5) * 19px)}
.ia-dz-m.desf .ia-leg,.ia-dz.on .ia-dz-m.leg .ia-leg{opacity:0}
.ia-dz-eq{font-family:var(--f-display);font-size:calc(34px * var(--fs));color:var(--muted)}
.ia-dz-t1{color:var(--berry)} .ia-dz-t2{color:var(--sun-ink)}
.ia-dz-t1,.ia-dz-t2{transition:opacity .4s}
/* cu animații: un singur mănunchi care se leagă și se desface; textul potrivit se aprinde în același pas */
.ia-dz:not(.static) .ia-dz-eq,.ia-dz:not(.static) .ia-dz-m.desf{display:none}
.ia-dz:not(.static):not(.on) .ia-dz-t2{opacity:.3}
.ia-dz.on .ia-dz-t1{opacity:.3}
/* fără animații: se văd amândouă, unul lângă altul (mănunchi = 10 bețișoare) */

/* stația 9: rânduri pline și rest */
.ia-rest{display:grid;gap:10px;justify-items:center}
.ia-rest-g{display:grid;grid-template-columns:repeat(3,auto);gap:10px 16px}
.ia-rest-g .ia-rd{padding:6px 8px;border-radius:999px;background:var(--leaf-tint)}
.ia-rest-x{display:flex;align-items:center;gap:12px;padding:6px 12px;border:2px dashed var(--sun-edge);border-radius:999px;background:var(--sun-tint)}
.ia-et.rest{color:var(--sun-ink);font-size:calc(17px * var(--fs))}

/* ---------- laboratoare: comune ---------- */
.ar-gol{margin:0;color:var(--muted);text-align:center}
.ar-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))}
.ar-mod{color:var(--sky)}
.ds-op{font-family:var(--f-display);font-size:calc(30px * var(--fs));color:var(--ink);line-height:1}
.ar-cer{margin:0;font-size:calc(19px * var(--fs));font-weight:700;color:var(--ink)}
.ar-cer b{color:var(--berry)}
.ar-act{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.ar-act .btn{font-size:calc(17px * var(--fs));min-height:50px;padding:8px 18px}
.ar-intr{display:grid;gap:8px}
.ar-q{margin:0;font-weight:800;font-size:calc(18px * var(--fs));color:var(--ink);text-align:center}
/* plăcuțele de răspuns: mari, la fel, cu starea „ales” clară */
.ar-var{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.ar .ar-var .chip.ar-t,.ds .ar-var .chip.ar-t{min-width:calc(64px * var(--fs));min-height:calc(48px * var(--fs));padding:4px 14px;font-size:calc(18px * 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}
.ar .ar-var .chip.ar-t:hover,.ds .ar-var .chip.ar-t:hover{transform:translateY(-2px)}
.ar .ar-var .chip.ar-t.ales,.ds .ar-var .chip.ar-t.ales{background:var(--berry);border-color:var(--berry);color:var(--card);box-shadow:0 5px 0 var(--ink);transform:translateY(-3px)}
.ar .ar-var .chip.ar-t.good,.ds .ar-var .chip.ar-t.good{background:var(--leaf-tint);border-color:var(--leaf);color:var(--leaf-deep);box-shadow:0 5px 0 var(--leaf);transform:none}
.ar .ar-var .chip.ar-t.bad,.ds .ar-var .chip.ar-t.bad{animation:ia-scutura .45s}
.ar .ar-var .chip.ar-t:disabled,.ds .ar-var .chip.ar-t:disabled{cursor:default}
.ar-msg{margin:0;min-height:1.4em;text-align:center;font-weight:800;font-size:calc(15px * var(--fs))}
.ar-msg.info{color:var(--ink)} .ar-msg.atent{color:var(--berry)} .ar-msg.bine{color:var(--leaf-deep)}
/* butoanele de jos: separate de plăcuțe */
.ar-jos{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding-top:8px;border-top:2px dashed var(--line)}
.ar-jos .verif{margin-left:auto}
.ar-jos .verif:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
@keyframes ia-scutura{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes ia-pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:none}}

/* ---------- laborator 1: masa cu grămada și rândurile ---------- */
.ar-masa{display:grid;gap:10px;min-height:300px;align-content:start}
.ar-gram{border:2px dashed var(--line);border-radius:12px;padding:6px 10px;display:grid;gap:4px}
.ar-pool{display:flex;flex-wrap:wrap;gap:2px;min-height:30px}
.ar-o{display:inline-block;width:26px;height:28px;line-height:28px;text-align:center;font-style:normal;font-size:20px;border-radius:7px}
.ar-o.rest{background:var(--sun-tint);box-shadow:inset 0 0 0 2px var(--sun-edge)}
.ar-rand-uri{display:grid;gap:4px}
.ar-r{display:flex;align-items:center;gap:8px;min-height:36px;padding:2px 8px;border-radius:10px;background:var(--sky-tint)}
.ar-r .ar-et{width:5.2em;flex:none}
.ar-ob{flex:1;display:flex;flex-wrap:wrap;gap:2px;min-width:0}
.ar-nr{flex:none;min-width:2em;text-align:center;background:var(--card);color:var(--leaf-deep);border-radius:999px;padding:1px 8px;font-size:calc(16px * var(--fs))}
.ar-et{font-size:calc(13px * var(--fs));font-weight:800;color:var(--muted)}

/* ---------- laborator 2: masa cu bețișoare și rândurile ---------- */
.ds-masa{display:grid;gap:8px;min-height:280px;align-content:start}
.ds-pool{display:flex;align-items:center;flex-wrap:wrap;gap:10px;border:2px dashed var(--line);border-radius:12px;padding:8px 10px;min-height:56px}
.ds-pz,.ds-pu,.ds-rz,.ds-ru{display:flex;align-items:center;flex-wrap:wrap}
.ds-pz,.ds-rz{gap:8px}
.ds-pu,.ds-ru{gap:3px}
.ds-zb{border:2px solid transparent;background:none;border-radius:8px;padding:3px 4px;cursor:pointer;line-height:0}
.ds-zb:hover{border-color:var(--berry);background:var(--berry-tint)}
.ds-masa .ia-bt{height:28px}
.ds-masa .ia-bt.nou{animation:ia-desf .5s ease-out both;animation-delay:calc(var(--k) * 45ms)}
.ds-masa .ia-bt.rest{box-shadow:inset 0 0 0 1px var(--sun-edge),0 0 0 2px var(--card),0 0 0 4px var(--berry)}
@keyframes ia-desf{from{opacity:0;transform:translateX(-24px) rotate(-25deg)}}
.ds-rand-uri{display:grid;gap:6px}
.ds-r{display:flex;align-items:center;gap:10px;min-height:36px;padding:4px 10px;border-radius:10px;background:var(--sky-tint)}
.ds-r .ar-et{width:5.2em;flex:none}
.ds-ru{flex:1}
.ds-nr{flex:none;margin-left:auto;min-width:4.2em;text-align:center;background:var(--card);color:var(--leaf-deep);border-radius:999px;padding:1px 8px;font-size:calc(15px * var(--fs))}
.ds-act{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:stretch}
.ds-act .btn{font-size:calc(15px * var(--fs));padding:6px 8px;line-height:1.15;min-height:56px}
.ds-act[hidden],.ar-act[hidden],.ar-intr[hidden]{display:none}
html.flow .ds-act{grid-template-columns:1fr}
.ds{display:grid;gap:8px}
.ar{display:grid;gap:8px}

/* ---------- laborator 3: 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:ia-pop .4s ease-out}
.an-q{font-size:calc(28px * var(--fs));font-weight:800;margin:12px 0;color:var(--ink);text-align:center}
.an-q.lung{font-size:calc(19px * var(--fs));line-height:1.3}
.an-var{justify-content:center}
.an-var .chip{font-size:calc(19px * var(--fs));min-width:5.5em;min-height:calc(48px * var(--fs))}
.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:ia-pop .5s}

/* telefon: planșele se strâng */
html.flow .ia-doua{grid-template-columns:1fr}
/* pe telefon, la laboratoare masa de lucru stă deasupra butoanelor */
html.flow .lesson .work:has(.ar-masa,.ds-masa){order:-1}
html.flow .ia-dz-m{width:170px}
html.flow .ia-rest-g{grid-template-columns:repeat(2,auto)}

/* mișcare redusă (sistem): animațiile decorative se opresc; coperta și stația 7 sunt oprite din js/aplicatie.js */
@media (prefers-reduced-motion: reduce){
  .ia-deal .ia-o,.ds-masa .ia-bt.nou,.an-serie,.an-scor,.ar-var .chip{animation:none!important}
  .ia-cov-o,.ia-dz-m .ia-bt,.ia-leg{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}