/* aplicatie.css — stiluri proprii lecției „Ficțiune realistă ilustrată” (doar variabile de culoare).
   Ilustrațiile SVG au culorile lor (ca o imagine): cerul de zi albastru, cel de noapte închis. */

/* ---------- ilustrațiile ---------- */
svg.ilu{display:block;width:100%;height:auto;border-radius:10px}
.ilu-wrap{position:relative;background:var(--card);border-radius:12px;padding:6px}
.work .ilu-wrap svg.ilu{width:min(100%,480px);margin:0 auto}
.ilu-txt{margin:8px 2px 0;font-weight:700;line-height:1.35;color:var(--ink);font-size:calc(16px * var(--fs));background:var(--sun-tint);border-left:5px solid var(--sun);border-radius:10px;padding:6px 12px}
.ilu-txt b{color:var(--leaf-deep)}

/* animații din desen (se opresc cu „fără animații” și la mișcare redusă) */
.ilu .ilu-ploaie{animation:ilu-cade 0.7s linear infinite}
.ilu .ilu-fulgi{animation:ilu-ninge 4s linear infinite}
.ilu .ilu-fr{transform-box:view-box;animation:ilu-frunza 4.2s ease-in-out infinite}
.ilu .ilu-raze{transform-box:view-box;transform-origin:48px 128px;animation:ilu-roteste 14s linear infinite}
.ilu .ilu-stea{transform-box:fill-box;transform-origin:center;animation:ilu-clipeste 1.8s ease-in-out infinite}
.ilu .ilu-foc{transform-box:fill-box;transform-origin:50% 100%;animation:ilu-flacara .5s ease-in-out infinite alternate}
.ilu .ilu-flacara{transform-box:fill-box;transform-origin:50% 100%;animation:ilu-flacara .4s ease-in-out infinite alternate}
.ilu .ilu-coada{transform-box:fill-box;transform-origin:0% 100%;animation:ilu-coada .35s ease-in-out infinite alternate}
.ilu .ilu-zbor{animation:ilu-pluteste 2.4s ease-in-out infinite}
.ilu .ilu-z{animation:ilu-clipeste 2s ease-in-out infinite}
.ilu .ilu-unda{transform-box:fill-box;transform-origin:center;animation:ilu-unda 1.6s ease-out infinite}
@keyframes ilu-cade{from{transform:translate(0,0)}to{transform:translate(-6px,20px)}}
@keyframes ilu-ninge{from{transform:translate(0,-12px)}to{transform:translate(4px,12px)}}
@keyframes ilu-frunza{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(6px,14px) rotate(90deg)}100%{transform:translate(0,28px) rotate(180deg);opacity:.2}}
@keyframes ilu-roteste{to{transform:rotate(360deg)}}
@keyframes ilu-clipeste{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes ilu-flacara{from{transform:scale(1,1)}to{transform:scale(.92,1.12)}}
@keyframes ilu-coada{from{transform:rotate(-10deg)}to{transform:rotate(12deg)}}
@keyframes ilu-pluteste{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-8px)}}
@keyframes ilu-unda{from{transform:scale(.4);opacity:1}to{transform:scale(1.3);opacity:0}}

/* ---------- lupa ---------- */
.lupa-btn{position:absolute;top:12px;right:12px;z-index:3;border:3px solid var(--ink);background:var(--card);color:var(--ink);border-radius:999px;padding:4px 12px;font:inherit;font-weight:900;font-size:calc(14px * var(--fs));cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.lupa-btn:hover{transform:translateY(-1px)}
.ilu-wrap.lupa-on .lupa-btn{background:var(--sun);color:var(--on-sun);border-color:var(--sun-edge);box-shadow:0 3px 0 var(--sun-edge)}
.ilu-wrap.lupa-on svg.ilu{cursor:zoom-in;touch-action:none}
.lupa-lens{position:absolute;z-index:2;width:130px;height:130px;border-radius:50%;overflow:hidden;pointer-events:none;border:5px solid var(--ink);box-shadow:0 6px 16px var(--line);background:var(--card);display:none}
.lupa-lens.on{display:block}
.lupa-lens svg.ilu{position:absolute;max-width:none!important;max-height:none!important;border-radius:0}

/* zonele din desen (laboratorul „Indiciul din desen”) */
.ilu .hs{cursor:pointer;outline:none}
.ilu .hs:hover,.ilu .hs:focus-visible{stroke:var(--sky);stroke-width:2;stroke-dasharray:5 4}
.ilu .hs.gasit{fill:var(--sun);fill-opacity:.28;stroke:var(--sun-edge);stroke-width:3;stroke-dasharray:none}
.ilu .hs.gresit{stroke:var(--berry);stroke-width:3;stroke-dasharray:none}

/* ---------- banda desenată (copertă și stația 2) ---------- */
.fr-banda{display:grid;grid-template-columns:1fr 1fr;gap:10px;background:var(--card);border-radius:12px;padding:10px}
.fr-panou{position:relative;margin:0;border:3px solid var(--line);border-radius:12px;padding:4px;background:var(--card);opacity:.42;filter:grayscale(.75);transition:opacity .45s,filter .45s,transform .45s,border-color .45s,box-shadow .45s}
.fr-panou figcaption{margin:3px 0 0;text-align:center;font-weight:800;font-size:calc(14px * var(--fs));color:var(--ink)}
.fr-nr{position:absolute;top:-10px;left:-8px;z-index:1;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--card);font-weight:900;font-size:calc(14px * var(--fs))}
.fr-panou.citit{opacity:.8;filter:grayscale(.2)}
.fr-panou.aprins{opacity:1;filter:none;border-color:var(--sun);box-shadow:0 0 0 4px var(--sun-tint),0 8px 18px var(--line);transform:scale(1.03);z-index:1}
.fr-panou.aprins .fr-nr{background:var(--sun);color:var(--on-sun)}
.fr-panou:not(.aprins) .ilu *{animation-play-state:paused}
.fr-banda.static .fr-panou{opacity:1;filter:none;transform:none;border-color:var(--line);box-shadow:none}
.fr-cap{margin:8px 0 0;text-align:center;font-weight:800;color:var(--ink);font-size:calc(17px * var(--fs))}
.fr-cap b{color:var(--leaf-deep)}
.cover .fr-banda svg.ilu{max-height:150px}
.work .fr-banda svg.ilu{max-height:158px}

/* ---------- stația 1: realist / fantastic ---------- */
.fr-comp{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:var(--card);border-radius:12px;padding:10px}
.fr-comp figure{margin:0;display:grid;gap:6px}
.fr-comp figcaption{font-weight:900;text-align:center;border-radius:999px;padding:3px 8px;font-size:calc(15px * var(--fs))}
.fr-comp .fc-r{background:var(--leaf-tint);color:var(--leaf-deep)}
.fr-comp .fc-f{background:var(--berry-tint);color:var(--berry)}
.fr-comp p{margin:0;text-align:center;font-weight:800;color:var(--ink);font-size:calc(15px * var(--fs))}

/* ---------- stația 6: fețele ---------- */
.ft{background:var(--card);border-radius:12px;padding:12px;color:var(--ink)}
.ft-mare{position:relative;height:250px}
.ft-st{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;opacity:0;transform:scale(.92);transition:opacity .4s,transform .4s}
.ft-st.on{opacity:1;transform:none}
.ft-st svg.ilu{width:190px;height:190px}
.ft-st p{margin:0;font-weight:800;font-size:calc(17px * var(--fs));text-align:center}
.ft-mare.static{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ft-mare.static .ft-st{position:static;opacity:1;transform:none}
.ft-mare.static .ft-st svg.ilu{width:92px;height:92px}
.ft-mare.static .ft-st p{font-size:calc(13px * var(--fs))}
.ft-legenda{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.ft-legenda span{background:var(--sky-tint);border-radius:999px;padding:3px 12px;font-weight:800;font-size:calc(14px * var(--fs))}

/* ---------- stația 8: indicii de timp ---------- */
.tm{background:var(--card);border-radius:12px;padding:16px;color:var(--ink)}
.tm-r{display:flex;align-items:center;justify-content:center;gap:12px;margin:10px 0;font-size:calc(40px * var(--fs))}
.tm-r span{display:flex;flex-direction:column;align-items:center;min-width:2.6em;background:var(--sky-tint);border-radius:14px;padding:6px 8px;line-height:1.1}
.tm-r small{font-size:calc(14px * var(--fs));font-weight:800;margin-top:4px}
.tm-r b{color:var(--muted);font-size:calc(26px * var(--fs))}
.tm-b1{font-size:.6em}

/* ---------- stația 12: ghid ---------- */
.ar{background:var(--card);border-radius:12px;padding:14px 18px;color:var(--ink);display:grid;gap:12px}
.ar p{margin:0;display:flex;align-items:center;gap:12px;font-size:calc(19px * var(--fs));font-weight:700}
.ar b{color:var(--leaf-deep)}
.ar-i{flex:0 0 auto;width:54px;height:54px;border-radius:14px;display:grid;place-items:center;background:var(--sun-tint);font-size:calc(30px * var(--fs))}

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

/* ---------- laborator: lectura ---------- */
.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:6px}
.lc-pct i{width:26px;height:8px;border-radius:99px;background:var(--line)}
.lc-pct i.citit{background:var(--leaf)}
.lc-pct i.acum{background:var(--sun)}
.lc-titlu{margin:6px 0 4px;color:var(--leaf-deep);font-size:calc(19px * var(--fs))}
.lc-txt{margin:0;min-height:4.2em;font-weight:700;line-height:1.45;color:var(--ink);font-size:calc(18px * var(--fs))}
.lc-txt.nou{animation:lc-apare .5s ease-out}
@keyframes lc-apare{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lc-act{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px;padding-top:8px;border-top:2px dashed var(--line)}
.lc-act .btn:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}

/* ---------- laborator: indiciul din desen ---------- */
.ic-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:800;color:var(--muted);font-size:calc(14px * var(--fs))}
.ic-ep{color:var(--sky)}
.ic-q{margin:8px 0 4px;font-size:calc(24px * var(--fs));font-weight:900;color:var(--ink);font-family:"Baloo 2",system-ui,sans-serif;line-height:1.15}
.ic-sfat{margin:0;color:var(--muted);font-weight:700;font-size:calc(15px * var(--fs))}
.ic-msg{min-height:2.7em;margin:8px 0 0;font-weight:800;line-height:1.3;font-size:calc(16px * var(--fs))}
.ic-msg.bine{color:var(--leaf-deep)} .ic-msg.rau{color:var(--berry)}
.ic-act{display:flex;justify-content:flex-end}

/* ---------- laborator: potrivire ---------- */
.pt-rows{display:grid;gap:8px}
.pt-row{display:flex;align-items:center;gap:12px;min-height:64px;width:100%;text-align:left;border:3px solid var(--line);background:var(--card);color:var(--ink);border-radius:14px;padding:5px 10px 5px 5px;font:inherit;cursor:pointer}
.pt-row:hover{border-color:var(--sky)}
.pt-slot{flex:0 0 auto;width:84px;height:53px;border:3px dashed var(--sky);border-radius:10px;display:grid;place-items:center;background:var(--sky-tint);overflow:hidden}
.pt-slot svg.ilu{width:100%;height:100%;border-radius:6px}
.pt-q{font-weight:900;color:var(--sky);font-size:calc(22px * var(--fs))}
.pt-txt{font-weight:800;line-height:1.25;font-size:calc(15.5px * var(--fs))}
.pt-row.plin .pt-slot{border-style:solid}
.pt-row.bun{border-color:var(--leaf);background:var(--leaf-tint)}
.pt-row.bun .pt-slot{border-color:var(--leaf)}
.pt-row.rau{border-color:var(--berry);background:var(--berry-tint);animation:ilu-scutura .45s}
.pt-tava{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:var(--card);border-radius:12px;padding:12px}
.pt-pic{position:relative;width:100%;padding:4px;border:4px solid var(--stripe);border-radius:14px;background:var(--card);box-shadow:0 5px 0 var(--stripe);cursor:pointer;transition:transform .15s}
.pt-pic svg.ilu{width:100%;height:auto;border-radius:8px}
.pt-lit{position:absolute;top:8px;left:8px;z-index:1;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--card);font-weight:900}
.pt-pic.ales .pt-lit{background:var(--berry)}
.pt-row.asteapta{border-color:var(--berry);border-style:dashed}
.bz-pic{width:108px;height:72px;padding:3px;border:3px solid var(--stripe);border-radius:12px;background:var(--card);box-shadow:0 4px 0 var(--stripe);cursor:pointer;transition:transform .15s}
.bz-pic svg.ilu{width:100%;height:100%;border-radius:7px}
.pt-pic:hover,.bz-pic:hover{transform:translateY(-2px)}
.pt-pic.ales{border-color:var(--berry);box-shadow:0 5px 0 var(--berry),0 0 0 5px var(--berry-tint);transform:translateY(-4px)}
.pt-pic:disabled{cursor:default}
.pt-pic.folosit,.bz-pic.folosit{opacity:.25;box-shadow:none;transform:none;cursor:default}
.pt-act,.bz-act,.rf-act{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;padding-top:8px;border-top:2px dashed var(--line)}
.pt-sfat,.bz-sfat,.rf-nr{color:var(--muted);font-weight:800;font-size:calc(14px * var(--fs))}
.pt-act .btn:disabled,.bz-act .btn:disabled,.rf-act .btn:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
@keyframes ilu-scutura{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ---------- laborator: ordinea imaginilor ---------- */
.bz-cadre{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bz-cadru{position:relative;height:82px;border:3px dashed var(--sky);border-radius:12px;background:var(--sky-tint);padding:4px;cursor:pointer;font:inherit}
.bz-nr{position:absolute;top:4px;left:4px;z-index:1;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--sky);color:var(--card);font-weight:900;font-size:calc(14px * var(--fs))}
.bz-in{display:block;width:100%;height:100%}
.bz-in svg.ilu{width:100%;height:100%;border-radius:7px}
.bz-cadru.plin{border-style:solid;background:var(--card)}
.bz-cadru.bun{border-color:var(--leaf)} .bz-cadru.bun .bz-nr{background:var(--leaf)}
.bz-cadru.rau{border-color:var(--berry);animation:ilu-scutura .45s} .bz-cadru.rau .bz-nr{background:var(--berry)}
.bz-tava{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}

/* ---------- laborator: realist sau fantastic ---------- */
.rf{display:grid;gap:6px}
.rf-card{display:flex;align-items:center;gap:10px;border:3px solid var(--line);border-radius:14px;padding:4px 6px 4px 8px;background:var(--card);color:var(--ink)}
.rf-e{flex:0 0 auto;font-size:calc(22px * var(--fs));line-height:1;white-space:nowrap;text-align:center}
.rf-t{flex:1;min-width:0;font-weight:800;line-height:1.2;font-size:calc(14.5px * var(--fs))}
.rf-d{display:block;color:var(--berry);font-weight:800;font-size:calc(12.5px * var(--fs))}
.rf-b{flex:0 0 auto;display:flex;gap:6px;align-items:center}
.rf-o{min-height:38px;border:3px solid var(--stripe);background:var(--card);color:var(--ink);border-radius:12px;padding:2px 9px;font:inherit;font-weight:800;font-size:calc(13.5px * var(--fs));cursor:pointer;box-shadow:0 3px 0 var(--stripe);white-space:nowrap}
.rf-o:hover{transform:translateY(-1px)}
.rf-o[data-v="0"].ales{background:var(--leaf);border-color:var(--leaf-deep);color:var(--on-leaf);box-shadow:0 3px 0 var(--leaf-deep)}
.rf-o[data-v="1"].ales{background:var(--berry);border-color:var(--berry);color:var(--card);box-shadow:0 3px 0 var(--ink)}
.rf-o:disabled{cursor:default}
.rf-card.bun{border-color:var(--leaf);background:var(--leaf-tint)}
.rf-card.rau{border-color:var(--berry);animation:ilu-scutura .45s}
.rf-rafturi{display:grid;gap:14px;background:var(--card);border-radius:12px;padding:14px;color:var(--ink)}
.rf-raft h4{margin:0 0 6px;font-size:calc(19px * var(--fs))}
.rf-raft[data-c="0"] h4{color:var(--leaf-deep)} .rf-raft[data-c="1"] h4{color:var(--berry)}
.rf-loc{min-height:76px;display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;padding:8px 10px;border-bottom:10px solid var(--stripe);border-radius:6px;background:var(--sun-tint)}
.rf-raft[data-c="1"] .rf-loc{background:var(--berry-tint)}
.rf-pus{font-size:calc(34px * var(--fs));line-height:1;background:var(--card);border-radius:12px;padding:4px 6px;box-shadow:0 3px 0 var(--line);animation:rf-cade .45s ease-out}
.rf-dov{display:flex;align-items:center;gap:8px}
.rf-dov small{font-size:calc(13px * var(--fs));font-weight:800;color:var(--berry)}
@keyframes rf-cade{from{transform:translateY(-30px);opacity:0}to{transform:none;opacity:1}}

/* ---------- 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:an-pop .4s ease-out}
.an-prop{margin:12px 0 4px;text-align:center;font-weight:800;font-size:calc(20px * var(--fs));line-height:1.3;color:var(--ink);background:var(--sun-tint);border-radius:12px;padding:8px 12px}
.an-scena{display:flex;justify-content:center;gap:6px;margin:10px auto 2px;padding:8px 12px;width:max-content;max-width:100%;background:var(--sky-tint);border:4px solid var(--ink);border-radius:14px;font-size:calc(38px * var(--fs));line-height:1.1}
.an-q{font-size:calc(19px * var(--fs));font-weight:800;margin:8px 0;color:var(--ink);text-align:center}
.an-var{justify-content:center}
.an-var .chip{font-size:calc(18px * var(--fs));min-width:6.5em;min-height:46px}
.an-msg{min-height:1.4em;margin:6px 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:an-pop .5s}
@keyframes an-pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:none}}

/* telefon: planșele cu bandă și laboratoarele se strâng */
html.flow .fr-banda{gap:8px;padding:6px}
html.flow .rf-card{flex-wrap:wrap}
html.flow .rf-b{width:100%;justify-content:flex-end}
html.flow .bz-pic{width:84px;height:58px}
html.flow .lesson .work:has(.pt-tava){order:-1}
html.flow .bz-cadru{height:62px}

/* mișcare redusă (sistem): animațiile se opresc; coperta și fețele sunt oprite din js/aplicatie.js */
@media (prefers-reduced-motion: reduce){
  .ilu *,.lc-txt,.rf-pus,.an-scor,.an-serie,.pt-row,.bz-cadru,.rf-card{animation:none!important}
  .fr-panou,.ft-st{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}