/* aplicatie.css — stiluri proprii lecției „Conversii între unități de timp” (doar variabile de culoare). */

/* ---------- planșe desenate ---------- */
.plate .sc-card,.plate .ck,.plate .cl-card,.plate .lu,.plate .bd,.plate .cp,.plate .cm-pl,.plate .dc,.plate .sl{
  background:var(--card);color:var(--ink);border-radius:12px;padding:14px 16px;font-weight:800}

/* scara timpului (copertă, stațiile 1 și 6): trepte de înălțimi diferite, factorul pe fiecare treaptă */
.sc-svg{display:block;width:100%;height:auto}
.sc-r{stroke:var(--line);stroke-width:2;transition:fill .3s}
.sc-r.r0{fill:var(--sky-tint)} .sc-r.r1{fill:var(--leaf-tint)} .sc-r.r2{fill:var(--sun-tint)} .sc-r.r3{fill:var(--berry-tint)} .sc-r.r4{fill:var(--sky-tint)}
.sc-ab{font-family:"Baloo 2",system-ui,sans-serif;font-size:26px;font-weight:800;fill:var(--ink);text-anchor:middle}
.sc-nm{font-size:15px;font-weight:700;fill:var(--muted);text-anchor:middle}
.sc-fp{fill:var(--sun);stroke:var(--sun-edge);stroke-width:2;transition:transform .3s}
.sc-ft{font-size:18px;font-weight:800;fill:var(--on-sun);text-anchor:middle}
.sc-baza{stroke:var(--ink);stroke-width:3}
.sc-anim .sc-tr.on .sc-r{fill:var(--sun);stroke:var(--sun-edge)}
.sc-anim .sc-f.on .sc-fp{fill:var(--berry);stroke:var(--berry)}
.sc-anim .sc-f.on .sc-ft{fill:var(--card)}
.sc-cap{margin:8px 0 0;text-align:center;font-size:calc(22px * var(--fs));min-height:1.5em;color:var(--ink)}
.sc-cap b{color:var(--berry)}
.sc-cap b.nou{display:inline-block;animation:pop .4s ease-out}
.sc-anim.card-ink .sc-cap{font-size:calc(20px * var(--fs))}
.sc-leg{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:8px 0 0;font-size:calc(16px * var(--fs))}
.sc-leg span{border-radius:999px;padding:3px 12px}
.sc-jos{background:var(--leaf-tint);color:var(--leaf-deep)}
.sc-sus{background:var(--sky-tint);color:var(--sky)}

/* stația 2: ceasul cu cadran (acele sunt rotite din js/aplicatie.js) */
.ck{display:flex;align-items:center;gap:16px}
.ck-svg{flex:0 0 48%;max-width:230px;height:auto}
.ck-fata{fill:var(--card);stroke:var(--ink);stroke-width:5}
.ck-t{stroke:var(--muted);stroke-width:1.5}
.ck-T{stroke:var(--ink);stroke-width:3.5}
.ck-n{font-size:19px;font-weight:800;fill:var(--ink);text-anchor:middle}
.ck-h{stroke:var(--ink);stroke-width:8;stroke-linecap:round}
.ck-m{stroke:var(--sky);stroke-width:6;stroke-linecap:round}
.ck-s{stroke:var(--berry);stroke-width:2.5;stroke-linecap:round}
.ck-c{fill:var(--berry)}
.ck-info{flex:1;min-width:0}
.ck-rand{margin:0 0 12px;font-size:calc(18px * var(--fs))}
.ck-el{display:inline-block;color:var(--berry)}
.ck-pop{display:inline-block;margin-left:4px;background:var(--leaf);color:var(--on-leaf);border-radius:999px;padding:0 10px;opacity:0;transform:scale(.7);transition:opacity .2s,transform .2s}
.ck-pop.on{opacity:1;transform:none}
.ck.static .ck-pop,.ck.static .ck-pre{display:none}
.ck-leg{display:flex;flex-direction:column;gap:6px;margin:0;font-size:calc(16px * var(--fs))}
.ck-leg span{display:flex;align-items:center;gap:8px}
.ck-leg span::before{content:"";flex:0 0 30px;border-radius:4px}
.ck-ls::before{height:3px;background:var(--berry)} .ck-lm::before{height:6px;background:var(--sky)} .ck-lh::before{height:8px;background:var(--ink)}

/* stațiile 3 și 10: calendarul */
.cl-t{text-align:center;font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(22px * var(--fs));margin-bottom:6px}
.cl-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cl-grid span{display:flex;align-items:center;justify-content:center;height:calc(32px * var(--fs));border-radius:8px;font-size:calc(16px * var(--fs))}
.cl-h{color:var(--muted)}
.cl-z{background:var(--paper);border:1px solid var(--line)}
.cl-grid .cl-z:nth-child(7n){color:var(--berry)}
.cl-rand{background:var(--sun-tint)!important;border-color:var(--sun-edge)!important}
.cl-mark{background:var(--berry)!important;color:var(--card)!important;border-color:var(--berry)!important;transform:scale(1.08)}
.cl-not{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px 0 0;font-size:calc(17px * var(--fs))}
.cl-mini{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:24px;border-radius:6px;border:1px solid var(--sun-edge);font-size:calc(14px * var(--fs))}
b.cl-mini{padding:0 6px}

/* stația 4: lunile anului */
.lu{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.lu-c{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:10px;padding:6px 2px;border:2px solid var(--line)}
.lu-c small{font-size:calc(14px * var(--fs));color:var(--muted)}
.lu-c b{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(22px * var(--fs));line-height:1.1}
.lu .z31{background:var(--leaf-tint)} .lu .z30{background:var(--sky-tint)} .lu .zfeb{background:var(--berry-tint)}
.lu-leg{grid-column:1/-1;display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:6px 0 0;font-size:calc(14px * var(--fs))}
.lu-leg span{border-radius:999px;padding:2px 10px;border:2px solid var(--line)}

/* stațiile 5 și 7: modele-bandă */
.bd-r{display:flex;align-items:center;gap:10px}
.bd-et{flex:0 0 5.2em;text-align:right;font-size:calc(20px * var(--fs));color:var(--sky)}
.bd-s{flex:1;display:flex;border:3px solid var(--sky);border-radius:10px;overflow:hidden}
.bd-s i{flex:1;display:flex;align-items:center;justify-content:center;height:calc(46px * var(--fs));font-style:normal;font-size:calc(16px * var(--fs));background:var(--sky-tint)}
.bd-s i+i{border-left:3px dashed var(--sky)}
.bd-z{border-color:var(--leaf)} .bd-z i{background:var(--leaf-tint)} .bd-z i+i{border-left-color:var(--leaf)}
.bd-gr i+i{border-left-style:solid;margin-left:6px;border-left-width:0}
.bd-gr{border:0;gap:6px} .bd-gr i{border:3px solid var(--sky);border-radius:10px}
.bd-gr.bd-z i{border-color:var(--leaf)}
.bd-eg{margin:6px 0 14px calc(5.2em + 10px);font-size:calc(20px * var(--fs))}
.bd-eg:last-child{margin-bottom:0}
.bd-eg b{color:var(--berry)}

/* stația 8: lungimi față de timp */
.cp-t{margin:0 0 6px;font-size:calc(17px * var(--fs));color:var(--muted)}
.cp-r{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:12px}
.cp-r b{display:inline-flex;align-items:center;justify-content:center;min-width:2.6em;height:calc(44px * var(--fs));border-radius:10px;background:var(--leaf-tint);border:2px solid var(--leaf);font-size:calc(20px * var(--fs))}
.cp-r i{font-style:normal;font-size:calc(15px * var(--fs));color:var(--leaf-deep)}
.cp-tp b{background:var(--sun-tint);border-color:var(--sun-edge)}
.cp-tp i{color:var(--berry);font-size:calc(17px * var(--fs))}
.cp-n{margin:4px 0 0;text-align:center;font-size:calc(22px * var(--fs))}
.cp-n s{color:var(--berry)}

/* stația 9: planșa comparării */
.cm-pr{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px}
.cm-pc{display:inline-flex;align-items:center;justify-content:center;min-width:5.4em;height:calc(54px * var(--fs));border-radius:12px;background:var(--sky-tint);border:3px solid var(--sky);font-size:calc(22px * var(--fs))}
.cm-pv{background:var(--sun-tint);border-color:var(--sun-edge)}
.cm-ps{font-size:calc(30px * var(--fs));color:var(--berry);min-width:1em;text-align:center}
.cm-pn{margin:0;text-align:center;color:var(--muted);font-size:calc(16px * var(--fs))}

/* stația 11: deceniu, secol, mileniu */
.dc{display:grid;gap:12px}
.dc-r{display:grid;grid-template-columns:6.2em 1fr;align-items:center;column-gap:10px;row-gap:2px}
.dc-r b{font-size:calc(18px * var(--fs));text-align:right}
.dc-s{display:grid;grid-template-columns:repeat(10,1fr);gap:3px}
.dc-s i{height:calc(26px * var(--fs));border-radius:5px}
.d1 i{background:var(--sky-tint);border:2px solid var(--sky)}
.d2 i{background:var(--leaf-tint);border:2px solid var(--leaf)}
.d3 i{background:var(--sun-tint);border:2px solid var(--sun-edge)}
.dc-r small{grid-column:2;font-size:calc(14px * var(--fs));color:var(--muted)}

/* stația 12: linia secolelor */
.sl-svg{display:block;width:100%;height:auto}
.sl-a{fill:var(--sky-tint);stroke:var(--sky);stroke-width:2}
.sl-b{fill:var(--sun-tint);stroke:var(--sun-edge);stroke-width:2}
.sl-r{font-family:"Baloo 2",system-ui,sans-serif;font-size:22px;font-weight:800;fill:var(--ink);text-anchor:middle}
.sl-y{font-size:15px;font-weight:700;fill:var(--muted);text-anchor:middle}
.sl-m{fill:var(--berry)}
.sl-mt{font-size:17px;font-weight:800;fill:var(--berry);text-anchor:middle}
.sl-reg{margin:6px 0 0;text-align:center;font-size:calc(20px * var(--fs))}
.sl-reg s{color:var(--berry)}
.sl-reg b{color:var(--leaf-deep)}

/* ---------- laborator: scara ---------- */
.scl-q{margin:0 0 8px;font-weight:800;font-size:calc(17px * var(--fs));color:var(--ink)}
.scl-q b{color:var(--berry)}
.scl-nr{display:inline-block;margin-right:6px;background:var(--sun-tint);color:var(--sun-ink);border-radius:999px;padding:0 10px;font-size:calc(14px * var(--fs))}
.scl-main{display:flex;align-items:flex-end;gap:14px}
.scl-st{flex:1.25;display:flex;align-items:flex-end;gap:3px;border-bottom:3px solid var(--ink);min-width:0}
.scl-tr{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;padding-top:4px;border:2px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;background:var(--paper);box-sizing:border-box;transition:background .25s}
.scl-ab{font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(17px * var(--fs));line-height:1.1;color:var(--ink)}
.scl-f{background:var(--card);border:2px solid var(--line);border-radius:999px;padding:0 5px;font-weight:800;font-size:calc(12px * var(--fs));color:var(--muted);white-space:nowrap}
.scl-tr.tinta{border:3px dashed var(--berry);border-bottom:0;background:var(--berry-tint)}
.scl-tr.tinta .scl-ab::after{content:" 🎯"}
.scl-tr.cur{background:var(--sun);border-color:var(--sun-edge)}
.scl-tr.cur .scl-ab{color:var(--on-sun)}
.scl-side{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.scl-acum{margin:0;font-weight:800;color:var(--muted);font-size:calc(15px * var(--fs))}
.scl-acum b{display:block;font-family:"Baloo 2",system-ui,sans-serif;font-size:calc(26px * var(--fs));line-height:1.1;color:var(--ink)}
.scl-mut{display:flex;flex-direction:column;gap:10px}
.scl-mut .btn{width:100%}
.scl-lant{margin:10px 0 0;min-height:1.5em;font-weight:800;font-size:calc(16px * var(--fs));color:var(--ink);overflow-wrap:anywhere}
.scl-lant i{font-style:normal;background:var(--leaf-tint);color:var(--leaf-deep);border-radius:999px;padding:0 8px}
.scl-msg{margin:4px 0 0;min-height:1.4em;font-weight:800;color:var(--leaf-deep);font-size:calc(15px * var(--fs))}
.scl-act{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-top:6px;padding-top:8px;border-top:2px dashed var(--line)}
.scl-act .verif{margin-left:auto}

/* ---------- laborator: ce durează mai mult? ---------- */
.cmp-top{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--muted);font-size:calc(14px * var(--fs))}
.cmp-bar,.an-bar{flex:1;height:10px;background:var(--line);border-radius:99px;overflow:hidden}
.cmp-bar i,.an-bar i{display:block;height:100%;background:var(--leaf);transition:width .4s}
.cmp-q{margin:10px 0;font-weight:800;font-size:calc(18px * var(--fs));color:var(--ink);text-align:center}
.cmp-row{display:flex;align-items:center;justify-content:center;gap:12px}
.cmp-vs{font-weight:800;color:var(--muted)}
.cmp-c,.cmp-o{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:800;color:var(--ink);background:var(--card);border:3px solid var(--stripe);border-radius:14px;box-shadow:0 5px 0 var(--stripe);cursor:pointer;transition:transform .1s}
.cmp-row .cmp-c{min-width:7em;height:calc(64px * var(--fs));font-size:calc(24px * var(--fs));font-family:"Baloo 2",system-ui,sans-serif}
.cmp-eqr{display:flex;justify-content:center;margin-top:14px}
.cmp-eq{height:calc(46px * var(--fs));padding:0 18px;font-size:calc(17px * var(--fs))}
.cmp-c:hover,.cmp-o:hover{transform:translateY(-2px)}
.cmp-c.ales,.cmp-o.ales{background:var(--berry);border-color:var(--berry);color:var(--card);box-shadow:0 5px 0 var(--ink);transform:translateY(-3px)}
.cmp-c.good,.cmp-o.good{background:var(--leaf-tint);border-color:var(--leaf);color:var(--leaf-deep);box-shadow:0 5px 0 var(--leaf)}
.cmp-c:disabled,.cmp-o:disabled{cursor:default;transform:none}
.cmp-ord{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cmp-o{position:relative;height:calc(54px * var(--fs));font-size:calc(20px * var(--fs))}
.cmp-n{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:calc(15px * var(--fs))}
.cmp-o.ales .cmp-n{background:var(--card);color:var(--berry)}
.cmp-msg{min-height:1.4em;margin:10px 0 0;text-align:center;font-weight:800;font-size:calc(15px * var(--fs))}
.cmp-msg.bine{color:var(--leaf-deep)}
.cmp-act{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-top:6px;padding-top:8px;border-top:2px dashed var(--line)}
.cmp-act .verif,.cmp-act .cmp-next,.cmp-act .cmp-again{margin-left:auto}

/* ---------- 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-serie{transition:transform .2s}
.an-serie.aprinsa{color:var(--berry);animation:pop .4s ease-out}
.an-q{font-size:calc(28px * var(--fs));font-weight:800;margin:14px 0;color:var(--ink);text-align:center}
.an-q .gol{display:inline-block;min-width:3.6em;border-bottom:3px dashed var(--leaf);text-align:center;color:var(--muted)}
.an-q .gol.plin{border-bottom-style:solid;color:var(--leaf-deep);animation:pop .35s}
.an-var{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.an-var .chip{font-size:calc(19px * var(--fs));min-height:calc(50px * var(--fs));justify-content:center;text-align:center}
.an-msg{min-height:1.5em;margin:8px 0 0;text-align:center;font-weight:800;font-size:calc(15px * 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}

@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:none}}

/* telefon: laboratoarele pe o coloană */
html.flow .scl-main{flex-direction:column;align-items:stretch}
html.flow .cmp-row .cmp-c{min-width:0;flex:1}

/* mișcare redusă (sistem): animațiile decorative se opresc; ceasul și coperta sunt oprite din js/aplicatie.js */
@media (prefers-reduced-motion: reduce){
  .sc-cap b.nou,.an-q .gol,.an-scor,.an-serie{animation:none!important}
}
html.a-still .sc-cap b.nou,html.a-still .an-scor{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}