/* stil.css — cum arată pagina. Nimic din fișierul ăsta nu FACE ceva;
   doar descrie aspectul. Dacă îl ștergi, aplicația merge la fel, dar urât.

   Direcția: un instrument de exersat, dar cu senzația unui joc care te
   întâmpină cu plăcere — nu un panou de control. Trei idei duc toată
   greutatea vizuală:
     1. Butoane „apăsabile" — o umbră plată dedesubt care se strânge la click,
        ca o tastă fizică. Vine din Duolingo, dar fără desene animate.
     2. Recompensă vizibilă — inelul care se umple, insignele colorate,
        un mic sclipici la finalul unei sesiuni.
     3. Culoare cu rol, nu decor: fiecare culoare nouă înseamnă ceva
        (verde = corect, coral = greșit, auriu = puncte, portocaliu = serie).
   Scris mobil întâi: regulile de bază sunt gândite pentru telefon, iar
   query-ul de la 640px în sus ADAUGĂ spațiu, nu reface totul. */

/* ═══ Variabile ══════════════════════════════════════════════════════ */
:root {
  /* Fundaluri, în straturi: cel mai adânc jos, cel mai ridicat sus.
     Un panou deschis stă pe --fundal-elevat ca să se vadă că e „deasupra". */
  --fundal:         #14161d;
  --fundal-card:    #1c202c;
  --fundal-elevat:  #242a3a;
  --fundal-cod:     #0f1117;
  --linie:          #2c3244;
  --linie-clara:    #3a4258;
  --text:           #eef0f6;
  --text-sters:     #929ab3;

  /* Fiecare culoare are un rol fix — nu le amesteca între ele. */
  --accent:         #6d8dff;  /* interactiv: butonul principal, linkuri */
  --accent-umbra:   #4159c9;  /* umbra „apăsabilă" a accentului */
  --bine:           #4fd671;  /* răspuns corect, nivel terminat */
  --bine-umbra:     #2f9a4c;
  --rau:            #ff6b5e;  /* răspuns greșit */
  --rau-umbra:      #c8493c;
  --aur:            #ffc93c;  /* XP, puncte, câștig */
  --aur-umbra:      #cc9c1c;
  --flacara:        #ff9d4d;  /* seria de zile — distinctă de „greșit" */

  --raza:      16px;
  --raza-mica: 11px;
  --umbra:     0 10px 26px -10px rgba(0, 0, 0, .5);
  --arc:       cubic-bezier(.34, 1.56, .64, 1);  /* revenire cu un mic elastic */

  --mono: "Maple Mono NF", "Cascadia Code", Consolas, monospace;
}

/* Umplerea inelului de progres (.bulina) e un procent ținut în --p.
   Înregistrarea ei ca număr real face tranziția de mai jos posibilă:
   browserul poate interpola 40 → 65, nu doar sări dintr-o dată.
   Unde nu e suportat (Firefox mai vechi), inelul tot funcționează —
   doar sare direct la valoarea nouă, fără animație. */
@property --p {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

* { box-sizing: border-box; }
.ascuns { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fundal);
  color: var(--text);
  font-family: system-ui, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
}

/* O pată caldă, fixă în spatele întregii pagini — motivul pentru care
   fundalul nu mai arată ca un terminal. Nu reacționează la nimic,
   nu se vede de niciun cititor de ecran. */
.fundal-ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(720px 480px at 12% -8%, rgba(109, 141, 255, .16), transparent 60%),
    radial-gradient(620px 420px at 100% 18%, rgba(255, 201, 60, .10), transparent 55%),
    radial-gradient(680px 520px at 15% 115%, rgba(79, 214, 113, .08), transparent 60%);
}

/* ── Bara de sus ─────────────────────────────────────────────────────── */
.bara {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--linie);
  background: rgba(20, 22, 29, .85);
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 5;
}
.marca {
  font-family: var(--mono);
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.06em;
  font-size: 16px;
}
.spatiu { flex: 1; }

/* Fiecare insignă e o pastilă cu o tentă subtilă din culoarea ei — puțin
   colorat, nu un banner. Diferența dintre „serie" și „xp" trebuie să se
   simtă dintr-o privire, fără să citești eticheta. */
.insigna {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-sters);
  white-space: nowrap;
  background: var(--fundal-card);
  border: 1px solid var(--linie);
  animation: apare-sus .3s var(--arc) both;
}
.insigna b { font-weight: 800; }
#insigna-serie {
  background: linear-gradient(135deg, rgba(255, 157, 77, .16), var(--fundal-card));
  border-color: rgba(255, 157, 77, .32);
}
#insigna-serie b { color: var(--flacara); }
#insigna-xp {
  background: linear-gradient(135deg, rgba(255, 201, 60, .16), var(--fundal-card));
  border-color: rgba(255, 201, 60, .32);
}
#insigna-xp b { color: var(--aur); }

.bara-progres {
  flex: 1;
  max-width: 320px;
  height: 8px;
  background: var(--fundal-cod);
  border-radius: 99px;
  overflow: hidden;
}
.bara-progres-umplere {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), #93a9ff);
  border-radius: 99px;
  transition: width 0.35s var(--arc);   /* creșterea se face lin, nu dintr-un salt */
}

/* Butoane mici din bara de sus — ținta de atins e ≥44px, chiar dacă
   vizual par mici. Padding-ul face diferența, nu fontul. */
.btn-mic {
  background: none;
  border: 1px solid var(--linie);
  color: var(--text-sters);
  border-radius: 10px;
  min-width: 40px;
  min-height: 40px;
  padding: 4px 10px;
  font-size: 15px;
  cursor: pointer;
  transition: color .15s, border-color .15s, transform .1s;
}
.btn-mic:hover { color: var(--text); border-color: var(--linie-clara); }
.btn-mic:active { transform: scale(.94); }

/* ── Scena ───────────────────────────────────────────────────────────── */
#scena {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 18px 12px 48px;
}
.card {
  width: 100%;
  max-width: 720px;
  background: var(--fundal-card);
  border: 1px solid var(--linie);
  border-radius: var(--raza);
  padding: 18px 16px;
  box-shadow: var(--umbra);
  animation: intra .3s var(--arc) both;
}
.fara-rama {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

@keyframes intra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes apare-sus {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══ HARTA PARCURSULUI ══════════════════════════════════════════════ */

.harta-titlu { margin: 2px 0 16px; font-size: 21px; font-weight: 800; }
.harta-sub { color: var(--text-sters); margin: 0 0 22px; font-size: 14.5px; }

/* Obiectivul zilei — mic, deasupra hărții. Pe telefon bara și textul stau
   unul sub altul, ca să nu se înghesuie. */
.tinta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--fundal-card);
  border: 1px solid var(--linie);
  border-radius: var(--raza-mica);
  padding: 12px 14px;
  margin: 0 0 18px;
}
.tinta-bara {
  height: 10px;
  background: var(--fundal-cod);
  border-radius: 99px;
  overflow: hidden;
}
.tinta-umplere {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--aur));
  border-radius: 99px;
  transition: width .5s var(--arc);
}
.tinta-text { font-size: 13.5px; color: var(--text-sters); }
.tinta-text b { color: var(--text); font-weight: 800; }
.tinta-gata {
  border-color: rgba(79, 214, 113, .4);
  background: linear-gradient(135deg, rgba(79, 214, 113, .12), var(--fundal-card));
}
.tinta-gata .tinta-text { color: var(--bine); font-weight: 600; }

/* Rândul unui nivel — un „bilet" apăsabil, cu greutate (umbră jos,
   se strânge la click). Comportamentul e identic cu un .btn-primar,
   doar mai discret ca să nu concureze cu butonul de acțiune. */
.nivel {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: var(--fundal-card);
  border: 1px solid var(--linie);
  border-radius: var(--raza);
  padding: 13px 14px;
  margin-bottom: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--linie);
  transition: border-color .15s, box-shadow .15s, transform .1s, margin .15s, border-radius .15s;
  animation: intra .3s var(--arc) both;
}
.nivel:nth-of-type(1) { animation-delay: .02s; }
.nivel:nth-of-type(2) { animation-delay: .05s; }
.nivel:nth-of-type(3) { animation-delay: .08s; }
.nivel:nth-of-type(4) { animation-delay: .11s; }
.nivel:nth-of-type(5) { animation-delay: .14s; }
.nivel:hover:not(:disabled) { border-color: var(--accent); }
.nivel:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--linie); }
.nivel:disabled { cursor: default; opacity: 0.42; box-shadow: none; }

/* Nivelul desfăcut — se „lipește" de panoul lui: colțurile de jos devin
   drepte, ca cele două bucăți să arate ca un singur obiect. */
.nivel-activ {
  border-color: var(--accent);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
  box-shadow: none;
}
.nivel-terminat { border-color: rgba(79, 214, 113, .35); }

/* Bulina din stânga — inelul se umple pe măsură ce înveți nivelul.
   `conic-gradient` desenează exact asta: o umplere în cerc, ca un ceas.
   Procentul vine din JavaScript, prin variabila --p. Peste el punem un cerc
   mai mic, opac, care lasă la vedere doar marginea — adică inelul.
   `transition: --p` (posibilă doar după @property de mai sus) face
   umplerea să crească lin, nu să sară direct la valoarea nouă. */
.bulina {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--bine) calc(var(--p) * 1%), var(--linie) 0);
  transition: --p .6s var(--arc);
}
.bulina-fata {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--fundal-card);
  display: grid;
  place-items: center;
  font-size: 22px;
}
.nivel-terminat .bulina-fata { background: #17301f; }

.nivel-text { flex: 1; min-width: 0; }
.nivel-nume { font-weight: 700; }
/* Durata stă pe rândul ei, nu lipită de nume: pe telefon, „HTML + CSS 4
   săptămâni" se rupea între „4" și „săptămâni", ceea ce arăta ca o greșeală. */
.nivel-nume small {
  display: block;
  font-weight: 400;
  color: var(--text-sters);
  margin-top: 1px;
}
.nivel-scurt {
  color: var(--text-sters);
  font-size: 13.5px;
  line-height: 1.45;
  margin-top: 2px;
}
.nivel-stare {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-family: var(--mono);
  color: var(--text-sters);
  text-align: right;
}
.stare-acum { color: var(--accent); }
.stare-gata { color: var(--bine); }

/* Firul care leagă un nivel de următorul — mai gros și cu un mic gradient,
   ca să se simtă că e un drum, nu doar un separator uitat între rânduri. */
.linie-drum {
  width: 3px;
  height: 14px;
  background: linear-gradient(var(--linie), var(--linie-clara));
  border-radius: 3px;
  margin: -6px 0 -6px 45px;
}

/* ── Panoul unui nivel desfăcut ──────────────────────────────────────── */
.panou {
  background: var(--fundal-elevat);
  border: 1px solid var(--accent);
  border-top: 1px dashed var(--linie-clara);
  border-radius: 0 0 var(--raza) var(--raza);
  padding: 6px 12px 12px;
  margin: 0 0 10px;
  animation: desfasoara .22s var(--arc) both;
}
@keyframes desfasoara {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lectie-rand {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--fundal-card);
  border: 1px solid var(--linie);
  border-radius: var(--raza-mica);
  padding: 11px 12px;
  margin: 8px 0;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.lectie-rand:hover:not(:disabled) { border-color: var(--accent); }
.lectie-rand:active { transform: scale(.98); }

.lectie-nr {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--fundal-cod);
  border: 1px solid var(--linie);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-sters);
}
.lectie-facuta .lectie-nr {
  background: rgba(79, 214, 113, .14);
  border-color: var(--bine);
  color: var(--bine);
}
.lectie-facuta .lectie-titlu { color: var(--text-sters); }

.lectie-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lectie-titlu { font-weight: 600; font-size: 15px; }
.lectie-durata { font-size: 12px; color: var(--text-sters); font-family: var(--mono); }

.lectie-sageata {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-sters);
  transition: transform .15s, color .15s;
}
.lectie-rand:hover .lectie-sageata { transform: translateX(3px); color: var(--accent); }

.panou-gol {
  border: 1px dashed var(--linie-clara);
  border-radius: var(--raza-mica);
  padding: 14px;
  margin: 8px 0;
  color: var(--text-sters);
  font-size: 13.5px;
  text-align: center;
}
.panou-actiuni { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

/* ═══ LECȚIA — pașii de citit ════════════════════════════════════════ */

.lectie-text-bloc p { margin: 0 0 14px; line-height: 1.7; font-size: 15.5px; }
.lectie-text-bloc p:last-child { margin-bottom: 0; }
.lectie-text-bloc b { color: var(--text); font-weight: 700; }
.lectie-text-bloc i {
  font-style: normal;
  font-weight: 600;
  color: var(--aur);
}

/* Legenda scurtă de deasupra unui bloc de cod — se lipește vizual de el,
   ca o etichetă, nu ca un paragraf separat. */
.cod-intro {
  color: var(--text-sters);
  font-size: 14px;
  margin: 0 0 6px;
}

/* Adnotările de sub un bloc de cod: „linia X face Y". Săgeata din stânga
   trage ochiul spre ele fără să le transforme într-o listă cu buline. */
.note {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.note li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  color: var(--text-sters);
  line-height: 1.55;
}
.note li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.note code, .lectie-text-bloc code, .cheie code {
  font-family: var(--mono);
  font-size: .9em;
  background: var(--fundal-cod);
  border: 1px solid var(--linie);
  padding: 1px 6px;
  border-radius: 5px;
  color: var(--aur);
}

/* Concluzia lecției — caseta „Ce rămâne". E ultimul lucru citit, deci
   trebuie să arate ca un lucru de reținut, nu ca încă un paragraf. */
.cheie {
  margin-top: 18px;
  padding: 15px 17px;
  border-radius: var(--raza-mica);
  background: linear-gradient(135deg, rgba(255, 201, 60, .12), var(--fundal-cod));
  border: 1px solid var(--aur-umbra);
  font-size: 14.5px;
  line-height: 1.6;
}
.cheie b { color: var(--aur); }

/* ═══ CARDUL — întrebarea ════════════════════════════════════════════ */

.eticheta {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-sters);
  margin-bottom: 14px;
}
.intrebare { font-size: 18px; margin: 0 0 18px; font-weight: 600; line-height: 1.45; }

/* `white-space: pre` păstrează spațiile și rândurile exact cum sunt scrise —
   fără asta, codul s-ar aduna într-un singur rând. */
.cod {
  background: var(--fundal-cod);
  border: 1px solid var(--linie);
  border-radius: var(--raza-mica);
  padding: 14px 15px;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.65;
  white-space: pre;
  overflow-x: auto;
  margin: 0 0 12px;
}
.ancora {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-sters);
  margin: 0 0 18px;
}

.optiuni { display: flex; flex-direction: column; gap: 9px; }
.optiune {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  width: 100%;
  background: var(--fundal-cod);
  border: 1.5px solid var(--linie);
  color: var(--text);
  border-radius: var(--raza-mica);
  padding: 13px 14px;
  font-family: inherit;
  font-size: 15.5px;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .08s;
}
.optiune:hover:not(:disabled) { border-color: var(--accent); background: #1a1e2a; }
.optiune:active:not(:disabled) { transform: scale(0.98); }
.optiune:disabled { cursor: default; opacity: 0.45; }
.optiune code { font-family: var(--mono); font-size: 0.92em; }

.tasta {
  flex: 0 0 auto;
  min-width: 23px;
  height: 23px;
  margin-top: 1px;
  border: 1px solid var(--linie);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 21px;
  text-align: center;
  color: var(--text-sters);
}

/* Feedback-ul e mecanica de bază a jocului: bunul se luminează scurt,
   greșitul tremură o clipă — destul cât să se simtă, nu cât să deranjeze. */
.optiune.corect {
  border-color: var(--bine);
  color: var(--bine);
  opacity: 1;
  animation: straluceste .6s ease-out;
}
.optiune.corect .tasta { border-color: var(--bine); color: var(--bine); }
.optiune.gresit {
  border-color: var(--rau);
  color: var(--rau);
  opacity: 1;
  animation: scutura .35s ease-in-out;
}
.optiune.gresit .tasta { border-color: var(--rau); color: var(--rau); }

@keyframes straluceste {
  0%   { box-shadow: 0 0 0 0 rgba(79, 214, 113, .45); }
  100% { box-shadow: 0 0 0 9px rgba(79, 214, 113, 0); }
}
@keyframes scutura {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

.btn-nustiu {
  margin-top: 14px;
  background: none;
  border: 1px dashed var(--linie-clara);
  color: var(--text-sters);
  border-radius: var(--raza-mica);
  padding: 12px;
  width: 100%;
  font-family: inherit;
  font-size: 14.5px;
  cursor: pointer;
  min-height: 44px;
  transition: color .15s, border-color .15s;
}
.btn-nustiu:hover { color: var(--text); border-color: var(--text-sters); }

/* ── Explicația ──────────────────────────────────────────────────────── */
.explicatie {
  margin-top: 20px;
  padding: 15px 17px;
  border-radius: var(--raza-mica);
  background: var(--fundal-cod);
  border-left: 3px solid var(--linie);
  animation: apare .2s var(--arc) both;
}
@keyframes apare {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: scale(1); }
}
.explicatie.bun { border-left-color: var(--bine); }
.explicatie.rau { border-left-color: var(--rau); }
.explicatie code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: #171b26;
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--aur);
}
.verdict-bun { color: var(--bine); font-weight: 700; }
.verdict-rau { color: var(--rau); font-weight: 700; }

/* ── Butoane mari ────────────────────────────────────────────────────── */
.notare { display: flex; gap: 10px; margin-top: 20px; }

/* Toate butoanele mari sunt „apăsabile": o umbră plată dedesubt, care
   dispare aproape complet la click, în timp ce butonul coboară puțin.
   Senzația e de tastă fizică, nu de dreptunghi plat care schimbă culoare. */
.btn {
  flex: 1;
  border: none;
  background: var(--fundal-elevat);
  color: var(--text);
  border-radius: var(--raza-mica);
  padding: 14px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--linie);
  transition: transform .08s, box-shadow .08s, background .15s;
  min-height: 44px;
}
.btn:hover { background: #2a3143; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--linie); }

.btn-primar {
  background: var(--accent);
  color: #0d1020;
  font-weight: 800;
  box-shadow: 0 4px 0 var(--accent-umbra);
}
.btn-primar:hover { background: #7d9aff; }
.btn-primar:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--accent-umbra); }

/* ═══ ECRANE (ajutor, final de lecție) ═══════════════════════════════ */

.ecran { text-align: center; padding: 12px 0 4px; }
.ecran h2 { margin: 0 0 12px; font-size: 22px; font-weight: 800; }
.ecran p { color: var(--text-sters); margin: 0 auto 20px; max-width: 480px; line-height: 1.65; }
.ecran .btn { max-width: 340px; margin: 0 auto; }
.ecran-stanga { text-align: left; }
.ecran-stanga p { margin-left: 0; }

/* Emoji-ul de final „intră" cu un mic salt elastic, plus câteva scântei
   desenate din umbre — nicio bibliotecă de confetti, doar box-shadow. */
.sarbatoare {
  position: relative;
  display: inline-block;
  font-size: 52px;
  line-height: 1;
  margin-bottom: 10px;
  animation: sarbatoare-apare .5s var(--arc) both;
}
@keyframes sarbatoare-apare {
  0%   { transform: scale(.3) rotate(-12deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}
.sarbatoare::before, .sarbatoare::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aur);
  opacity: 0;
  box-shadow:
    26px -32px 0 -1px var(--accent),
    -30px -22px 0 -1px var(--bine),
    32px 12px 0 -1px var(--rau),
    -32px 16px 0 -1px var(--aur),
    6px -42px 0 -2px var(--bine),
    -10px 36px 0 -2px var(--accent);
  animation: scanteie .7s ease-out .12s both;
}
.sarbatoare::after { animation-delay: .22s; transform: rotate(30deg); }
@keyframes scanteie {
  0%   { opacity: 0; transform: scale(.2) rotate(0deg); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.6) rotate(30deg); }
}

.scor {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 0 22px;
  flex-wrap: wrap;
}
.scor-cutie {
  background: var(--fundal-cod);
  border: 1px solid var(--linie);
  border-radius: var(--raza-mica);
  padding: 12px 18px;
  min-width: 96px;
}
.scor-cutie b { display: block; font-size: 22px; line-height: 1.2; font-weight: 800; }
.scor-cutie span { font-size: 12px; color: var(--text-sters); }
.scor-xp b { color: var(--aur); }
.scor-bun b { color: var(--bine); }

.rezumat {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  text-align: left;
  display: inline-block;
}
.rezumat li { padding: 4px 0; font-size: 14.5px; }
.rezumat li::before { content: "✓ "; color: var(--bine); font-weight: 700; }

.cutii { display: flex; gap: 6px; justify-content: center; margin: 4px 0 20px; }
.cutie-pas {
  flex: 1;
  max-width: 92px;
  border: 1px solid var(--linie);
  border-radius: var(--raza-mica);
  padding: 9px 4px;
  font-size: 12px;
  color: var(--text-sters);
  font-family: var(--mono);
}
.cutie-pas b { display: block; color: var(--text); font-size: 15px; margin-bottom: 2px; }

/* ── Subsolul ────────────────────────────────────────────────────────── */
.subsol {
  padding: 10px 20px;
  border-top: 1px solid var(--linie);
  color: var(--text-sters);
  font-size: 12.5px;
  font-family: var(--mono);
  min-height: 38px;
}

/* ── Desktop ─────────────────────────────────────────────────────────── */
/* De la 640px în sus adăugăm spațiu — nu schimbăm structura, doar o
   lărgim. Sub 640px, regulile de mai sus (gândite pentru telefon) rămân. */
@media (min-width: 640px) {
  body { font-size: 16.5px; }
  .bara { padding: 12px 20px; gap: 10px; }
  .insigna { font-size: 14px; padding: 5px 11px; }
  #scena { padding: 30px 20px 70px; }
  .card { padding: 26px; border-radius: var(--raza); }
  .intrebare { font-size: 19px; }
  .cod { font-size: 14.5px; padding: 15px 17px; }
  .optiune { font-size: 15.5px; padding: 13px 15px; }
  .nivel { padding: 15px 17px; gap: 16px; }
  .bulina { width: 52px; height: 52px; }
  .bulina-fata { width: 44px; height: 44px; font-size: 22px; }
  .linie-drum { margin-left: 45px; }
  .nivel-stare { font-size: 12.5px; }
  .harta-titlu { font-size: 22px; }
  .tinta { flex-direction: row; align-items: center; gap: 14px; }
  .tinta-text { flex: 0 0 auto; white-space: nowrap; }
  .sarbatoare { font-size: 56px; }
  .subsol { display: block; }
}

/* Sub 375px lățime (telefoane vechi) strângem și mai mult spațiul din bară,
   ca insignele și butoanele să nu se lipească unele de altele. */
@media (max-width: 374px) {
  .bara { padding: 8px 10px; gap: 6px; }
  .insigna { padding: 4px 8px; font-size: 12.5px; }
  .marca { font-size: 14px; }
}