/* motor.css — completări pentru motoarele de lecție și joc, în stilul edulogia.
   Doar variabile de culoare, ca să funcționeze în toate stilurile și modurile de accesibilitate.
   NU modifica acest fișier într-o aplicație; stilurile proprii merg în css/aplicatie.css. */

/* ---------- planșe și miniaturi cu emoji ---------- */
.emoji-plansa{font-size:7.5em;line-height:1.15;text-align:center;padding:18px 0;user-select:none}
.station .ph{display:grid;place-items:center;overflow:hidden}
.ph-emoji{font-size:2.6em;line-height:1}
.oc-emoji{font-size:3.4em;line-height:1.1;display:block;padding:10px 0}
.order.four .oc-emoji{font-size:3em}

/* ---------- exerciții ---------- */
.chip.ales{border-color:var(--leaf);background:var(--leaf-tint);color:var(--leaf-deep)}
.fraza .gol{display:inline-block;min-width:3.5em;border-bottom:3px dashed var(--leaf);text-align:center;color:var(--muted)}
.fraza .gol.plin{border-bottom-style:solid;color:var(--leaf-deep)}
.af-lista{display:grid;gap:8px}
.af-rand{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;background:var(--card);border:2px solid var(--line);border-radius:12px;padding:6px 8px 6px 12px;font-weight:700;font-size:.95em;color:var(--ink)}
.af-rand .chips{flex-wrap:nowrap}
.af-rand .chip{min-height:36px;padding:4px 10px}
.pool{display:flex;flex-wrap:wrap;gap:7px;min-height:44px;margin-bottom:8px}
.pool-item.pus{padding:5px 12px}
.pool-item.wrong{animation:shake .4s;border-color:var(--berry)}
.bin-in{display:flex;flex-wrap:wrap;gap:6px}
.perechi{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px}
.perechi .col{display:grid;gap:8px;align-content:start}
.perechi .chip{justify-content:flex-start;text-align:left;width:100%}
.perechi .chip[data-p]::after{content:attr(data-p);margin-left:auto;font-size:.8em;background:var(--leaf);color:var(--on-leaf);border-radius:50%;width:22px;height:22px;display:grid;place-items:center}
.ans.good{border-color:var(--leaf);background:var(--leaf-tint)}
.ans.bad{border-color:var(--berry);background:var(--berry-tint)}
.ans:disabled{cursor:default}
.station{cursor:pointer;font:inherit}

/* ---------- joc: bara de stare (HUD) ---------- */
.hud{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hud .pill{font-size:.9em}
.hud .vieti{font-size:1.25em;letter-spacing:2px;line-height:1}
.hud .vieti .pierduta{filter:grayscale(1);opacity:.3}
.hud .scor{font-family:var(--f-display);font-weight:800;font-size:1.5em;color:var(--leaf-deep);font-variant-numeric:tabular-nums;margin-left:auto}
.timp{height:12px;border-radius:999px;background:var(--leaf-tint);border:1px solid var(--line);overflow:hidden;flex:1;min-width:120px}
.timp i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--leaf),var(--sun));transition:width .25s linear}
.timp.putin i{background:var(--berry)}
.serie{font-weight:800;color:var(--kick);font-size:.9em}
.joc-card{max-width:900px;margin:0 auto;width:100%}

/* ---------- joc: niveluri ---------- */
.nivele{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.nivel{position:relative;display:grid;gap:4px;justify-items:center;text-align:center;background:var(--card);border:2px solid var(--line);border-radius:18px;padding:14px 10px;box-shadow:var(--shadow);color:var(--ink);font:inherit;cursor:pointer}
.nivel .nr{font-family:var(--f-display);font-size:2.2em;font-weight:800;color:var(--leaf-deep);line-height:1}
.nivel h3{font-size:1.1em}
.nivel small{color:var(--muted);font-size:.8em}
.nivel .stele{font-size:1.3em;letter-spacing:2px}
.nivel .stele .gol{filter:grayscale(1);opacity:.3}
.nivel.blocat{opacity:.55;cursor:not-allowed}
.nivel.blocat::after{content:"🔒";position:absolute;top:8px;right:10px;font-size:1.1em}
.stele-mari{font-size:3em;letter-spacing:6px;line-height:1}
.stele-mari .gol{filter:grayscale(1);opacity:.3}

/* ---------- joc: clasament ---------- */
.clasament{width:100%;border-collapse:collapse}
.clasament td,.clasament th{padding:7px 10px;border-bottom:1px solid var(--line);text-align:left}
.clasament th{font-family:var(--f-display);background:var(--leaf-tint);color:var(--leaf-deep)}
.clasament tr.eu td{background:var(--sun-tint);font-weight:800}
.clasament td.loc{font-family:var(--f-display);font-weight:800;width:3em}
.reguli{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.reguli li{background:var(--card);border:2px solid var(--line);border-radius:12px;padding:8px 12px;font-weight:700;color:var(--ink)}

/* ---------- telefon ---------- */
html.flow .perechi{grid-template-columns:1fr 1fr;gap:8px}
html.flow .af-rand{grid-template-columns:minmax(0,1fr)}
html.flow .emoji-plansa{font-size:5em}

/* ---------- cuprins compact pentru lecții lungi (> 8 stații), ca în lecțiile edulogia mari ---------- */
.trail.compact{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.trail.compact .station{grid-template-columns:58px minmax(0,1fr);justify-items:start;align-items:center;text-align:left;padding:8px 10px;column-gap:10px;row-gap:0}
.trail.compact .station .ph{width:58px;height:58px;grid-row:1/4;border-width:3px}
.trail.compact .ph-emoji{font-size:1.7em}
.trail.compact .station h3{font-size:.98em;line-height:1.1}
.trail.compact .station small{font-size:.72em}
.trail.compact .station .stamp{font-size:10px;top:5px;right:6px}
.trail.compact.foarte{grid-template-columns:repeat(5,minmax(0,1fr))}
.trail.compact.foarte .station small{display:none}
html.flow .trail.compact,html.flow .trail.compact.foarte{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:520px){html.flow .trail.compact,html.flow .trail.compact.foarte{grid-template-columns:minmax(0,1fr)}}