/* aplicatie.css — stiluri proprii lecției „Puncte, drepte, segmente, semidrepte și unghiuri” (doar variabile de culoare). */

/* ---------- desenele (SVG) ---------- */
.pd-svg{display:block;width:100%;height:auto;overflow:visible}
.pd-foaie{fill:var(--card);stroke:var(--line);stroke-width:2}
.pd-l{stroke-width:4.5;stroke-linecap:round;fill:none}
.pd-c1{stroke:var(--sky);fill:var(--sky)}
.pd-c2{stroke:var(--berry);fill:var(--berry)}
.pd-c3{stroke:var(--leaf-deep);fill:var(--leaf-deep)}
.pd-c4{stroke:var(--sun-ink);fill:var(--sun-ink)}
line.pd-l{fill:none}
.pd-sag{stroke-width:1.5;stroke-linejoin:round}
.pd-pt{fill:var(--ink);stroke:var(--card);stroke-width:2}
.pd-lit{fill:var(--ink);font-family:"Baloo 2",system-ui,sans-serif;font-weight:800;font-size:20px}
.pd-lit.mic{font-style:italic;font-size:19px;fill:var(--muted)}
.pd-arc{fill:none;stroke:var(--sun-ink);stroke-width:2.5}
.pd-mult{fill:var(--muted);font-weight:800;font-size:15px}
.pd-mult.mic{font-size:13px}

/* planșele: fond de card, text lizibil în toate stilurile */
.plate .pd-film,.plate .pd-harta,.plate .pd-prel,.plate .pd-duo,.plate .pd-taie,.plate .pd-deschide,.plate .pd-obiecte,
.plate .pd-tipar,.plate .pd-arce,.plate .pd-tabel,.plate .pd-tabla{background:var(--card);color:var(--ink);border-radius:12px;padding:12px;font-weight:800}

/* ---------- copertă: un singur ceas (js/aplicatie.js) schimbă figura și numele ei odată ---------- */
.pd-cadre{display:grid}
.pd-cadru{grid-area:1/1;opacity:0;transition:opacity .45s}
.pd-cadru.on{opacity:1}
.pd-fnume{margin:8px 0 0;text-align:center;display:flex;flex-direction:column;gap:2px}
.pd-fn{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(28px * var(--fs));color:var(--ink);line-height:1.1}
.pd-fs{font-size:calc(15px * var(--fs));color:var(--muted)}
.pd-static{display:none;grid-template-columns:repeat(3,1fr);gap:8px}
.pd-static figure{margin:0;text-align:center}
.pd-static figcaption{font-size:calc(13px * var(--fs));color:var(--ink)}
/* fără animații: toate cele cinci figuri, nemișcate */
.pd-film.static .pd-live{display:none}
.pd-film.static .pd-static{display:grid}
:root.a-still .pd-film .pd-live{display:none}
:root.a-still .pd-film .pd-static{display:grid}

/* ---------- stația 1: harta ---------- */
.pd-tara{fill:var(--leaf-tint);stroke:var(--leaf);stroke-width:2.5}
.pd-rau{fill:none;stroke:var(--sky);stroke-width:5;stroke-linecap:round;opacity:.7}
.pd-scriem{display:flex;gap:10px;justify-content:center;margin:10px 0 0}
.pd-scriem span{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:3.2em;height:calc(40px * var(--fs));border-radius:12px;font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(22px * var(--fs));border:3px solid}
.pd-scriem .da{border-color:var(--leaf);background:var(--leaf-tint);color:var(--leaf-deep)}
.pd-scriem .da::after{content:"✓";font-size:.75em}
.pd-scriem .nu{border-color:var(--berry);background:var(--berry-tint);color:var(--berry);text-decoration:line-through}

/* ---------- stațiile 2 și 5: linia crește, apoi „curge” mai departe ---------- */
.pd-cresc{stroke-dasharray:var(--L) 2000;stroke-dashoffset:0;animation:pd-cresc 4.5s ease-in-out infinite}
.pd-prel .pd-cresc{--s:40px}
@keyframes pd-cresc{0%,12%{stroke-dashoffset:calc(var(--L) - var(--s,0px))}60%,100%{stroke-dashoffset:0}}
.pd-varf{animation:pd-varf 4.5s ease-in-out infinite}
@keyframes pd-varf{0%,52%{opacity:0}62%,100%{opacity:1}}
.pd-flux{stroke:var(--card);stroke-width:2.5;stroke-dasharray:3 15;animation:pd-flux .9s linear infinite}
@keyframes pd-flux{from{stroke-dashoffset:18}to{stroke-dashoffset:0}}
.pd-orig{fill:var(--sun-tint);stroke:var(--sun-edge);stroke-width:2}

/* ---------- stația 3: printr-un punct trec oricâte drepte ---------- */
.pd-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pd-duo figure{margin:0;text-align:center}
.pd-duo figcaption{margin-top:6px;font-size:calc(15px * var(--fs));color:var(--ink)}
.pd-fan{stroke:var(--muted);stroke-width:2;stroke-dasharray:5 6;opacity:.55}
.pd-roti{transform-box:view-box;transform-origin:85px 78px;animation:pd-roti 7s linear infinite}
@keyframes pd-roti{from{transform:rotate(0deg)}to{transform:rotate(-180deg)}}

/* ---------- stația 4: segmentul tăiat și pus pe riglă (starea de bază = sfârșitul animației) ---------- */
.pd-mij{stroke-dasharray:6 7;opacity:.4}
.pd-foarfeca text{font-size:22px;fill:var(--berry)}
.pd-rigla rect{fill:var(--sun-tint);stroke:var(--sun-edge);stroke-width:2}
.pd-rigla line{stroke:var(--sun-ink);stroke-width:2}
.pd-rigla line.mm{stroke-width:1.3}
.pd-rigla text{fill:var(--sun-ink);font-weight:800;font-size:13px}
.pd-bucata{transform:translateY(95px);animation:pd-muta 7s ease-in-out infinite}
@keyframes pd-muta{0%,28%{transform:none}58%,100%{transform:translateY(95px)}}
.pd-foarfeca{animation:pd-taie 7s infinite}
@keyframes pd-taie{0%,8%{opacity:0}18%,100%{opacity:1}}
.pd-masura{fill:var(--berry);font-family:"Baloo 2",system-ui,sans-serif;font-weight:800;font-size:22px;animation:pd-apare-t 7s infinite}
@keyframes pd-apare-t{0%,60%{opacity:0}70%,100%{opacity:1}}

/* ---------- stația 7: unghiul se deschide (starea de bază: 60°, cu arc) ---------- */
.pd-rot{transform-box:view-box;transform-origin:150px 165px;transform:rotate(-60deg);animation:pd-deschide 6.5s ease-in-out infinite}
@keyframes pd-deschide{0%{transform:rotate(-6deg)}45%{transform:rotate(-125deg)}70%,100%{transform:rotate(-60deg)}}
.pd-arc-u,.pd-litb{animation:pd-apare-u 6.5s infinite}
@keyframes pd-apare-u{0%,70%{opacity:0}78%,100%{opacity:1}}
.pd-deschide .pd-mult{font-family:"Baloo 2",system-ui,sans-serif;font-size:24px;fill:var(--ink)}
.pd-deschide .pd-mult.mic{font-family:inherit;font-size:14px;fill:var(--muted)}

/* ---------- stația 8: obiecte din jur ---------- */
.pd-obiecte{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.pd-obiecte figure{margin:0;display:flex;align-items:center;gap:10px;background:var(--sky-tint);border-radius:12px;padding:10px}
.pd-obiecte span{font-size:calc(38px * var(--fs));line-height:1}
.pd-obiecte figcaption{display:flex;flex-direction:column;font-size:calc(14px * var(--fs));color:var(--muted)}
.pd-obiecte b{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(20px * var(--fs));color:var(--ink)}

/* ---------- stația 9: tiparul ---------- */
.pd-tipar{display:grid;gap:5px}
.pd-tr{display:grid;grid-template-columns:5.5em 6em 1fr;align-items:center;gap:8px;border-radius:10px;padding:5px 10px;background:var(--sun-tint);font-size:calc(17px * var(--fs))}
.pd-tr.h{background:none;color:var(--muted);font-size:calc(13px * var(--fs))}
.pd-tr b{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(22px * var(--fs));color:var(--berry)}
.pd-tr small{color:var(--muted);font-size:calc(15px * var(--fs))}

/* ---------- stația 10 și laboratorul 2: arcele segmentelor ---------- */
.pd-arcs{fill:none;stroke-width:3;stroke-linecap:round}
.pd-arcs.a,.pd-arcs.c0{stroke:var(--berry)}
.pd-arcs.b,.pd-arcs.c1{stroke:var(--sky)}
.pd-arcs.c,.pd-arcs.c2{stroke:var(--leaf-deep)}
.pd-lab .pd-arcs{stroke-dasharray:600;stroke-dashoffset:0;animation:pd-arc-d .7s ease-out both}
@keyframes pd-arc-d{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}
.pd-suma{margin:8px 0 0;text-align:center;font-size:calc(22px * var(--fs))}
.pd-suma b{font-family:"Baloo 2",system-ui,sans-serif}
.pd-suma .a{color:var(--berry)} .pd-suma .b{color:var(--sky)} .pd-suma .c{color:var(--leaf-deep)}

/* ---------- stația 13: tabelul figurilor ---------- */
.pd-tabel{display:grid;gap:5px}
.pd-tl{display:grid;grid-template-columns:1.3fr .8fr 1.1fr 1fr;align-items:center;gap:6px;border-radius:10px;padding:6px 10px;background:var(--leaf-tint);font-size:calc(16px * var(--fs))}
.pd-tl.h{background:none;color:var(--muted);font-size:calc(13px * var(--fs))}
.pd-tl b{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(19px * var(--fs));color:var(--berry)}
.pd-tl .da{color:var(--leaf-deep)}

/* ---------- stația 6: tabla laboratorului „Trasează” ---------- */
.pd-tabla{min-height:200px;display:flex;flex-direction:column;justify-content:center;gap:8px;text-align:center}
.pd-tb-et{margin:0;color:var(--muted);font-size:calc(14px * var(--fs));text-transform:uppercase;letter-spacing:.06em}
.pd-tb-n{margin:0;font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(34px * var(--fs));color:var(--ink);line-height:1.15}
.pd-tb-i{margin:0;color:var(--sky);font-size:calc(17px * var(--fs))}
.pd-tb-r{display:flex;justify-content:space-between;gap:12px;background:var(--leaf-tint);border-radius:10px;padding:6px 12px;font-size:calc(17px * var(--fs))}
.pd-tb-r span{color:var(--muted)} .pd-tb-r b{color:var(--leaf-deep)}
.pd-tb-leg{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:6px;font-size:calc(14px * var(--fs));color:var(--muted)}
.pd-tb-leg span{display:inline-flex;align-items:center;gap:6px}
.pd-tb-leg .cap{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--ink)}
.pd-tb-leg .sag{font-style:normal;color:var(--sky)}

/* ---------- laboratoarele: partea comună ---------- */
.pd-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))}
.pd-facute{display:flex;gap:6px;flex-wrap:wrap}
.pd-gata{background:var(--leaf-tint);color:var(--leaf-deep);border:2px solid var(--leaf);border-radius:999px;padding:0 10px;font-weight:800;font-size:calc(13px * var(--fs));animation:pd-pop .35s ease-out}
.pd-sarcina{margin:4px 0 6px;font-weight:700;font-size:calc(17px * var(--fs));line-height:1.3;color:var(--ink)}
.pd-sarcina b{color:var(--berry)}
.pd-desen{border-radius:10px}
.pd-lab-svg{max-height:calc(150px * var(--fs))}
.pd-grila{fill:var(--line)}
.pd-act{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:6px;padding-top:6px;border-top:2px dashed var(--line)}
.pd-act .verif,.pd-act .pd-mai{margin-left:auto}
.pd-act .verif:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
@keyframes pd-pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:none}}

/* laborator 1: punctele se ating; primul ales = galben, al doilea = roz */
.pd-nod{cursor:pointer;outline:none}
.pd-hit{fill:transparent}
.pd-inel{fill:none;stroke:transparent;stroke-width:3}
.pd-nod:hover .pd-inel,.pd-nod:focus-visible .pd-inel{stroke:var(--sky)}
.pd-nod.a1 .pd-inel{fill:var(--sun-tint);stroke:var(--sun-edge);stroke-width:4}
.pd-nod.a2 .pd-inel{fill:var(--berry-tint);stroke:var(--berry);stroke-width:4}
.pd-trasat.anim .pd-l{stroke-dasharray:1200;animation:pd-traseaza .7s ease-out both}
.pd-trasat.anim .pd-sag{animation:pd-sag .9s ease-out both}
@keyframes pd-traseaza{from{stroke-dashoffset:1200}to{stroke-dashoffset:0}}
@keyframes pd-sag{0%,60%{opacity:0}100%{opacity:1}}
/* plăcuțele cu unelte: mari, egale, cu starea „ales” clară */
.pd-unelte{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.pd-lab .pd-unelte .chip.pd-ul{display:inline-flex;align-items:center;gap:8px;min-height:calc(48px * var(--fs));padding:4px 14px;font-size:calc(17px * 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}
.pd-lab .pd-unelte .chip.pd-ul:hover:not(:disabled){transform:translateY(-2px)}
.pd-lab .pd-unelte .chip.pd-ul.ales{background:var(--sky);border-color:var(--sky);color:var(--card);box-shadow:0 5px 0 var(--ink);transform:translateY(-3px)}
.pd-lab .pd-unelte .chip.pd-ul:disabled{opacity:.45;transform:none;cursor:not-allowed}
.pd-ic{font-size:1.05em;color:var(--sky);letter-spacing:-1px}
.pd-ul.ales .pd-ic{color:var(--card)}

/* laborator 2: locurile de pe dreaptă și numărătorul */
.pd-loc{cursor:pointer;outline:none}
.pd-liber{fill:var(--card);stroke:var(--muted);stroke-width:2;stroke-dasharray:3 3}
.pd-loc:hover .pd-liber,.pd-loc:focus-visible .pd-liber{stroke:var(--sky);fill:var(--sky-tint)}
.pd-num{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.pd-cnt{font-weight:800;color:var(--muted);font-size:calc(16px * var(--fs))}
.pd-cnt.ok b{color:var(--leaf-deep)} .pd-cnt.prea b{color:var(--berry)}
.pd-step{display:inline-flex;align-items:center;gap:8px}
.pd-step-et{font-weight:800;color:var(--ink);font-size:calc(16px * var(--fs))}
.pd-step .btn{min-width:calc(46px * var(--fs));min-height:calc(44px * var(--fs));padding:0 10px;font-size:calc(22px * var(--fs));line-height:1}
.pd-val{display:inline-flex;align-items:center;justify-content:center;min-width:2.4em;height:calc(44px * var(--fs));border:3px solid var(--sky);border-radius:12px;background:var(--sky-tint);font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(24px * var(--fs));color:var(--ink)}
.pd-lista{font-weight:800;color:var(--leaf-deep);font-size:calc(15px * var(--fs));word-spacing:3px}

/* pe telefon desenul se micșorează: punctele, literele și zonele de atins cresc */
html.flow .pd-lab-svg .pd-lit{font-size:28px}
html.flow .pd-lab-svg .pd-pt{r:9px}
html.flow .pd-lab-svg .pd-inel{r:19px}
html.flow .pd-lab-svg .pd-hit{r:38px}
html.flow .pd-lab-svg .pd-liber{r:12px}
html.flow .pd-lab-svg .pd-l{stroke-width:6}

/* ---------- 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:pd-pop .4s ease-out}
.an-q{font-size:calc(21px * var(--fs));font-weight:800;margin:10px 0;color:var(--ink);text-align:center;line-height:1.3}
.pd-an-fig{max-width:330px;margin:0 auto 8px}
.an-var{justify-content:center}
.an-var .chip{font-size:calc(17px * var(--fs));min-width:4.5em}
.an-msg{min-height:1.4em;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:pd-pop .5s}

/* fără animații (accesibilitate) și mișcare redusă: desenele rămân în starea finală, completă */
:root.a-still .pd-flux{display:none}
@media (prefers-reduced-motion: reduce){
  .pd-cresc,.pd-varf,.pd-roti,.pd-bucata,.pd-foarfeca,.pd-masura,.pd-rot,.pd-arc-u,.pd-litb,.pd-arcs,.pd-trasat .pd-l,.pd-trasat .pd-sag,.pd-gata,.an-serie,.an-scor{animation:none!important}
  .pd-flux{display:none}
  .pd-cadru{transition:none}
}

/* 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}