/* aplicatie.css — stiluri proprii lecției „Lectură de ficțiune realistă” (doar variabile de culoare). */

/* ---------- planșe ---------- */
.plate .harta,.plate .schema,.plate .fr-plansa,.plate .cit-plansa,.plate .tm-plansa,.plate .pov-slot,.plate .dlg,.plate .ar,.plate .cov-trei{
  background:var(--card);color:var(--ink);border-radius:12px;padding:12px;font-weight:700}
.ilu{display:block;width:100%;height:auto;border-radius:10px}
.plate>.ilu-slot .ilu{border-radius:12px}

/* copertă și stația 11: trei povestiri, trei desene */
.cov-trei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}

/* stația 1: harta povestirii — fiecare parte pe un rând, eticheta și exemplul aliniate */
.harta{display:grid;gap:7px}
.hr-p{display:grid;grid-template-columns:9.5em minmax(0,1fr);align-items:center;gap:10px;border-radius:12px;padding:8px 12px;font-size:calc(17px * var(--fs))}
.hr-p b{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(18px * var(--fs))}
.hr-p span{font-weight:700}
.hr-p.p1{background:var(--sun-tint)} .hr-p.p2{background:var(--sky-tint)} .hr-p.p3{background:var(--berry-tint)}
.hr-p.p4{background:var(--leaf-tint)} .hr-p.p5{background:var(--sun-tint);border:2px dashed var(--sun-edge)}

/* stația 3: schema problemă → încercări → rezolvare; pașii se aprind în ordine (un singur ceas, js) */
.schema{display:grid;gap:4px;text-align:center}
.sc-rand{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sc-pas{border:3px solid var(--line);border-radius:14px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;justify-content:center;min-height:calc(66px * var(--fs));opacity:.35;transition:opacity .4s,transform .4s}
.sc-pas b{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(18px * var(--fs))}
.sc-pas span{font-size:calc(16px * var(--fs))}
.sc-pas.on{opacity:1}
.sc-pas[data-k="0"]{background:var(--berry-tint);border-color:var(--berry)}
.sc-pas[data-k="1"],.sc-pas[data-k="2"]{background:var(--sky-tint);border-color:var(--sky)}
.sc-pas.rez{background:var(--leaf-tint);border-color:var(--leaf)}
.sc-sag{font-size:calc(22px * var(--fs));line-height:1;color:var(--muted)}
.schema.static .sc-pas{opacity:1}

/* fragment din povestire */
.fr-plansa{display:grid;gap:8px}
.fr-plansa .ilu-slot{width:100%;max-width:340px;margin:0 auto}
.fr-titlu{margin:0;font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(18px * var(--fs));color:var(--leaf-deep)}
.fr-text{margin:0;font-size:calc(16px * var(--fs));line-height:1.45;font-weight:700}

/* citire și termometru: desenul + termometrul pe același rând, de aceeași înălțime */
.cit-plansa,.tm-plansa{display:grid;gap:8px}
.cp-sus{display:grid;grid-template-columns:minmax(0,300px) auto;justify-content:center;gap:12px;align-items:stretch}
.cp-scena{display:flex;align-items:center}
.cp-dov{margin:0;font-size:calc(15px * var(--fs));line-height:1.35;background:var(--sun-tint);border-radius:10px;padding:6px 10px}
.tp-titlu{margin:0;font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(17px * var(--fs));color:var(--leaf-deep)}

/* termometrul: tubul și etichetele împart aceleași 5 rânduri, deci fiecare etichetă e la nivelul ei */
.tm{display:grid;grid-template-columns:26px auto;grid-template-rows:minmax(0,1fr) 26px;column-gap:8px}
.tm-tub{grid-row:1;grid-column:1;position:relative;border:3px solid var(--line);border-bottom:0;border-radius:14px 14px 0 0;background:var(--paper)}
.tm-tub i{position:absolute;left:3px;right:3px;bottom:0;border-radius:8px 8px 0 0;background:var(--berry);transition:height .5s ease,background .5s}
.tm-bulb{grid-row:2;grid-column:1;border-radius:50%;background:var(--berry);border:3px solid var(--line);transform:scale(1.25);transition:background .5s}
.tm[data-n="0"] .tm-bulb{background:var(--line)}
.tm[data-n="1"] i,.tm[data-n="1"] .tm-bulb,.tm[data-n="2"] i,.tm[data-n="2"] .tm-bulb{background:var(--sky)}
.tm[data-n="3"] i,.tm[data-n="3"] .tm-bulb{background:var(--leaf)}
.tm[data-n="4"] i,.tm[data-n="4"] .tm-bulb,.tm[data-n="5"] i,.tm[data-n="5"] .tm-bulb{background:var(--sun)}
.tm-et{grid-row:1;grid-column:2;display:grid;grid-template-rows:repeat(5,minmax(0,1fr))}
.tm-et span{display:flex;align-items:center;gap:6px;font-size:calc(14px * var(--fs));font-weight:800;color:var(--muted);white-space:nowrap;border-radius:8px;padding:0 6px;transition:background .3s,color .3s}
.tm-et span b{font-size:1.15em}
.tm-et span.on{background:var(--sun-tint);color:var(--ink);outline:2px solid var(--sun-edge)}
.tm.mic{min-height:calc(150px * var(--fs))}

/* drumul sentimentelor: etichetele stau exact sub puncte (4 coloane egale = 4 puncte) */
.dr{display:grid;gap:2px;width:100%;max-width:380px;margin:0 auto}
.dr-svg{display:block;width:100%;height:auto}
.dr-g{stroke:var(--line);stroke-width:1.5;stroke-dasharray:4 5}
.dr-l{fill:none;stroke:var(--berry);stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.dr-p{stroke:var(--card);stroke-width:3}
.dr-p.n1,.dr-p.n2{fill:var(--sky)} .dr-p.n3{fill:var(--leaf)} .dr-p.n4,.dr-p.n5{fill:var(--sun)}
.dr-t{font-size:11px;font-weight:900;text-anchor:middle;fill:var(--ink)}
.dr-et{display:grid;text-align:center;font-size:calc(13px * var(--fs));font-weight:800;color:var(--muted)}
.dr-et span{overflow-wrap:anywhere;line-height:1.2}

/* povestirea întreagă (laboratorul cu schema) */
.pov-slot{display:grid;gap:8px}
.pv-sus{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center}
.pv-titlu{margin:0;font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(20px * var(--fs));color:var(--leaf-deep)}
.pv-text{max-height:calc(350px * var(--fs));overflow-y:auto;padding-right:4px;scrollbar-width:thin}
.pv-text p{margin:0 0 3px;font-size:calc(14px * var(--fs));line-height:1.34;font-weight:700}
.pv-text p.rep,.lc-txt p.rep,.an-ctx p.rep{padding-left:12px;color:var(--sky)}

/* stația 8: dialogul cu semnele explicate; eticheta vorbitorului la capătul rândului */
.dlg{display:grid;gap:8px}
.dl-r{margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:calc(18px * var(--fs));line-height:1.35;padding:6px 10px;border-radius:10px}
.dl-r.pov{background:var(--paper)} .dl-r.io{background:var(--berry-tint)} .dl-r.ca{background:var(--sky-tint)}
.dl-e{margin-left:auto;font-size:calc(13px * var(--fs));font-weight:900;border-radius:999px;padding:2px 10px;background:var(--card);border:2px solid var(--line);color:var(--muted)}
.dl-l{color:var(--berry);font-size:1.15em}
.dl-m{color:var(--leaf-deep);text-decoration:underline;text-decoration-thickness:3px}
.dl-s{color:var(--berry);font-size:1.2em}
.dl-r u{text-decoration-color:var(--sun-edge);text-decoration-thickness:3px}
.dl-leg{display:flex;gap:8px;flex-wrap:wrap;font-size:calc(14px * var(--fs))}
.dl-leg span{background:var(--sun-tint);border-radius:999px;padding:3px 10px}

/* stația 13: ce cauți */
.ar p{margin:8px 0;font-size:calc(19px * var(--fs));display:flex;align-items:center;gap:10px}
.ar-i{font-size:1.4em}

/* ---------- citire pe episoade ---------- */
.lc-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:800;color:var(--muted);font-size:calc(14px * var(--fs))}
.lc-pct{display:flex;gap:5px}
.lc-pct i{display:block;width:26px;height:7px;border-radius:9px;background:var(--line)}
.lc-pct i.citit{background:var(--leaf)} .lc-pct i.acum{background:var(--sun)}
.lc-titlu{margin:6px 0 4px;font-size:calc(19px * var(--fs));color:var(--leaf-deep)}
.lc-txt p{margin:0 0 5px;font-size:calc(16.5px * var(--fs));line-height:1.42;font-weight:700;color:var(--ink)}
.lc-txt.nou{animation:apare .4s ease-out}
.lc-act{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-top:8px;border-top:2px dashed var(--line)}
@keyframes apare{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- laborator: schema problemă și rezolvare ---------- */
.sm-schema{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sm-loc{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:3px;min-height:calc(56px * var(--fs));text-align:left;border:3px dashed var(--line);border-radius:14px;background:var(--card);color:var(--ink);padding:6px 10px;font:inherit;cursor:pointer}
.sm-loc b{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(15px * var(--fs));line-height:1.1}
.sm-c{font-size:calc(14px * var(--fs));font-weight:700;color:var(--muted);line-height:1.25}
.sm-loc[data-l="0"]{border-color:var(--berry)} .sm-loc[data-l="1"],.sm-loc[data-l="2"]{border-color:var(--sky)} .sm-loc[data-l="3"]{border-color:var(--leaf)}
.sm-loc.plin{border-style:solid}
.sm-loc.plin .sm-c{color:var(--ink)}
.sm-loc[data-l="0"].plin{background:var(--berry-tint)} .sm-loc[data-l="1"].plin,.sm-loc[data-l="2"].plin{background:var(--sky-tint)} .sm-loc[data-l="3"].plin{background:var(--leaf-tint)}
.sm-loc.bun{border-color:var(--leaf);box-shadow:0 0 0 3px var(--leaf-tint)}
.sm-loc.rau{animation:scutura .45s}
.sm-loc:disabled{cursor:default}
.sm-pool{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;min-height:calc(44px * var(--fs))}
.sm-carte{border:3px solid var(--stripe,var(--muted));background:var(--card);color:var(--ink);border-radius:12px;box-shadow:0 4px 0 var(--stripe,var(--muted));padding:4px 9px;font:inherit;font-weight:800;font-size:calc(14px * var(--fs));line-height:1.25;text-align:left;cursor:pointer;max-width:100%}
.sm-carte:hover{transform:translateY(-2px)}
.sm-carte.ales{background:var(--berry);border-color:var(--berry);color:var(--card);box-shadow:0 4px 0 var(--ink);transform:translateY(-2px)}
.sm-act,.dg-act,.tl-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)}
.sm-act .verif,.dg-act .verif,.tl-act .verif{margin-left:auto}
.verif:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}

/* ---------- laborator: termometrul sentimentelor ---------- */
.tl-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:800;color:var(--muted);font-size:calc(14px * var(--fs))}
.tl-pers{color:var(--berry)}
.tl-pas{display:flex;align-items:center;gap:8px;margin:8px 0 5px;font-weight:800;font-size:calc(15px * var(--fs));color:var(--ink)}
.tl-nr{flex:0 0 auto;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--sun);color:var(--on-sun);font-size:calc(13px * var(--fs))}
.tl-seg{display:grid;gap:6px}
.tl-s{text-align:left;border:3px solid var(--line);background:var(--card);color:var(--ink);border-radius:12px;padding:7px 12px;font:inherit;font-weight:700;font-size:calc(15px * var(--fs));line-height:1.3;cursor:pointer}
.tl-s:hover{border-color:var(--sky)}
.tl-s.ales{border-color:var(--sun-edge);background:var(--sun-tint)}
.tl-s.ales::before{content:"🔍 Dovada: ";font-weight:900;color:var(--sun-ink)}
.tl-s.rau{animation:scutura .45s}
.tl-niv{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.tl-n{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:calc(58px * var(--fs));border:3px solid var(--stripe,var(--muted));background:var(--card);color:var(--ink);border-radius:12px;box-shadow:0 4px 0 var(--stripe,var(--muted));padding:4px 2px;font:inherit;font-weight:800;font-size:calc(12.5px * var(--fs));line-height:1.1;cursor:pointer;overflow-wrap:anywhere}
.tl-n b{font-size:calc(22px * var(--fs))}
.tl-n:hover{transform:translateY(-2px)}
.tl-n.ales{background:var(--berry);border-color:var(--berry);color:var(--card);box-shadow:0 4px 0 var(--ink);transform:translateY(-2px)}
.tl-final .dr{margin-top:6px}

/* ---------- laborator: cine vorbește? ---------- */
.dg-ctx{margin:0 0 6px;font-weight:800;color:var(--muted);font-size:calc(14px * var(--fs))}
.dg-v{display:flex;gap:8px;flex-wrap:wrap}
.dg-p{border:3px solid;border-radius:999px;padding:5px 14px;font:inherit;font-weight:900;font-size:calc(15px * var(--fs));background:var(--card);color:var(--ink);cursor:pointer;box-shadow:0 3px 0 var(--stripe,var(--muted))}
.dg-p.c0,.dg-loc.c0{border-color:var(--sun-edge)} .dg-p.c1,.dg-loc.c1{border-color:var(--sky)} .dg-p.c2,.dg-loc.c2{border-color:var(--leaf)}
.dg-p.ales{transform:translateY(-2px);box-shadow:0 4px 0 var(--ink);color:var(--card)}
.dg-p.c0.ales{background:var(--sun-ink)} .dg-p.c1.ales{background:var(--sky)} .dg-p.c2.ales{background:var(--leaf-deep)}
.dg-lista{display:grid;gap:5px;margin-top:8px}
.dg-r{display:grid;grid-template-columns:calc(118px * var(--fs)) minmax(0,1fr);align-items:center;gap:8px}
.dg-loc{min-height:calc(36px * var(--fs));border:2px dashed var(--line);border-radius:10px;background:var(--paper);color:var(--muted);font:inherit;font-weight:900;font-size:calc(13px * var(--fs));line-height:1.1;padding:2px 6px;cursor:pointer;overflow-wrap:anywhere}
.dg-loc.plin{border-style:solid;color:var(--ink)}
.dg-loc.plin.c0{background:var(--sun-tint)} .dg-loc.plin.c1{background:var(--sky-tint)} .dg-loc.plin.c2{background:var(--leaf-tint)}
.dg-loc.bun{box-shadow:0 0 0 3px var(--leaf-tint)}
.dg-loc.rau{animation:scutura .45s}
.dg-loc:disabled{cursor:default}
.dg-t{font-size:calc(15px * var(--fs));font-weight:700;line-height:1.3;color:var(--ink)}

/* ---------- 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-fel{display:inline-block;margin-top:8px;background:var(--sun-tint);color:var(--sun-ink);border-radius:999px;padding:2px 12px;font-weight:900;font-size:calc(13px * var(--fs))}
.an-ctx{margin-top:6px;background:var(--paper);border-radius:12px;padding:6px 12px}
.an-ctx p{margin:2px 0;font-weight:700;font-size:calc(15.5px * var(--fs));line-height:1.35;color:var(--ink)}
.an-q{font-size:calc(20px * var(--fs));font-weight:800;margin:8px 0;color:var(--ink)}
.an-var{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.an-var .chip{justify-content:flex-start;text-align:left;font-size:calc(15px * var(--fs));line-height:1.25;min-height:calc(44px * var(--fs));white-space:normal}
.an-msg{min-height:1.4em;margin:8px 0 0;font-weight:800;font-size:calc(14px * var(--fs))}
.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}
html.flow .pv-text{max-height:none;overflow:visible}
html.flow .an-var{grid-template-columns:minmax(0,1fr)}
html.flow .tl-niv{grid-template-columns:repeat(3,minmax(0,1fr))}
html.flow .hr-p{grid-template-columns:minmax(0,1fr)}

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

/* mișcare redusă (sistem): animațiile decorative se opresc; schema din stația 3 e oprită din js/aplicatie.js */
@media (prefers-reduced-motion: reduce){
  .lc-txt,.an-scor,.an-serie,.sm-loc,.tl-s,.dg-loc{animation:none!important}
  .tm-tub i,.tm-bulb,.sc-pas,.an-bar i{transition:none!important}
}

/* exercițiul „multi”: butonul Verifică stă separat de opțiuni */
.ex-zona>.chips+.grp{margin-top:12px;padding-top:10px;border-top:2px dashed var(--line);justify-content:flex-end}

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