@charset "UTF-8";
/* =========================================================================
   Sonor — Darbuka: cursul
   ------------------------------------------------------------------------
   Se încarcă DUPĂ `darbuka.css` și trăiește din tokenii lui. Nu redefinește
   niciun `:root`, nicio clasă `db-*`: modulul de ritmuri trebuie să arate
   exact cum arăta înainte să existe cursul.

   Tot ce e aici e prefixat `dbc-` (darbuka curs). Clasele `db-*` care apar
   în cursul desenat — `db-btn`, `db-chip`, `db-grid`, `db-stroke`,
   `db-transport` — sunt împrumutate ca atare din foaia modulului, nu copiate.
   Dacă se schimbă un buton acolo, se schimbă și aici, și asta e intenția.

   De aceea, la trecerea secțiunii pe închis-și-auriu, aproape tot ce urmează
   s-a schimbat singur: culorile, chenarele, umbrele și razele vin toate din
   tokenii foii comune. Aici s-au atins numai lucrurile care aveau nevoie de
   mai mult decât o culoare nouă — cartonașele, titlurile și cele câteva
   locuri unde forma însăși trebuia să se ridice la restul.
   ========================================================================= */

/* ================================================================ bara de sus */

.dbc-hud {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  background: linear-gradient(180deg, rgb(10 15 32 / .94), rgb(6 9 20 / .9));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 30px rgb(0 0 0 / .35);
  font-size: .82rem;
}

.dbc-hud__level {
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--gold);
}

.dbc-hud__bar {
  flex: 1 1 6rem;
  min-width: 5rem;
  height: .45rem;
  border-radius: var(--r-pill);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  overflow: hidden;
}
.dbc-hud__fill {
  display: block;
  height: 100%;
  background: var(--brand-gradient);
  transition: width .3s ease;
}

.dbc-hud__num { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dbc-hud__xp {
  font-weight: 700;
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}

/* ===================================================================== nivelul */

/* Capul nivelului poartă a doua față a instrumentului: membrana, tăiată pe
   cerc, ca o rozetă orientală în colțul din dreapta. Nu e aceeași fotografie
   ca în hero și nu stă în același loc — brieful cere limpede ca darbuka să nu
   apară peste tot la fel (§7). */
.dbc-level__head {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-bottom: var(--s-6);
  padding: var(--s-6) var(--s-6) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  box-shadow: inset 0 1px 0 rgb(244 236 220 / .07), var(--shadow-md);
}
.dbc-level__head::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -3rem;
  translate: 0 -50%;
  width: min(24rem, 44%);
  aspect-ratio: 1;
  background: var(--decor-membrana) center / cover no-repeat;
  opacity: .55;
  /* Masca e un INEL, nu un disc. Membrana tobei e o suprafață netedă și, tăiată
     rotund, ieșea o pată de muștar fără niciun desen în ea. Frumusețea
     fotografiei stă în cercul de sidef de pe margine — deci se arată numai el,
     iar mijlocul se scoate cu totul. Ce rămâne e o rozetă orientală adevărată.
     Procentele sunt luate din fotografie: inelul începe la 0,80 din rază și se
     termină la 0,98. */
  -webkit-mask-image: radial-gradient(closest-side, transparent 68%, #000 82%, #000 95%, transparent 100%);
  mask-image: radial-gradient(closest-side, transparent 68%, #000 82%, #000 95%, transparent 100%);
  pointer-events: none;
}
.dbc-level__head > * { position: relative; }

@media (max-width: 56rem) {
  .dbc-level__head::after { display: none; }
  .dbc-level__head { padding: var(--s-5) var(--s-4); }
}

.dbc-level__n, .dbc-lesson__n {
  margin: 0 0 var(--s-2);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--gold);
}

.dbc-level__head h1, .dbc-lesson__head h1 {
  font-size: clamp(2rem, 1.4rem + 2.8vw, 3.2rem);
  font-weight: 600;
  margin-bottom: var(--s-3);
  color: var(--text);
}

.dbc-lead {
  color: var(--text-muted);
  max-width: 62ch;
}

.dbc-progress { margin-top: var(--s-4); max-width: 34rem; }

.dbc-progress__track {
  height: .75rem;
  border-radius: var(--r-pill);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgb(0 0 0 / .5);
}
.dbc-progress__fill {
  display: block;
  height: 100%;
  background: var(--brand-gradient);
  box-shadow: 0 0 14px rgb(217 184 118 / .45);
  transition: width .4s ease;
}
.dbc-progress__label {
  margin: var(--s-2) 0 0;
  font-size: .875rem;
  color: var(--text-muted);
}

/* În capul lecției, bara e un reper, nu subiectul paginii: mai subțire și
   mai scurtă decât cea de pe pagina nivelului, care e acolo tocmai ca să fie
   citită. */
.dbc-progress--slim { margin-top: var(--s-3); max-width: 24rem; }
.dbc-progress--slim .dbc-progress__track { height: .5rem; }
.dbc-progress--slim .dbc-progress__label { font-size: .8rem; }

/* ---- ce vei învăța ---- */

.dbc-goals__list, .dbc-check__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}
.dbc-goals__list li, .dbc-check__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
}
.dbc-check__mark {
  flex: none;
  color: var(--ok);
  font-weight: 700;
}

/* Bifa dinaintea unui OBIECTIV („ce vei ști la finalul lecției”) nu spune
   „gata, ai făcut” — spune „asta urmează”. Verdele e culoarea lucrului
   terminat și e nevoie de el în altă parte; aici merge aurul, exact ca `.db-tick`
   de pe pagina de acasă, care ține aceeași listă. §15. */
.dbc-goals__list .dbc-check__mark { color: var(--gold); }

/* ---- lista de lecții ---- */

.dbc-lessons {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
  counter-reset: none;
}

.dbc-lessons__link {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: linear-gradient(165deg, rgb(16 23 46 / .78), rgb(6 9 20 / .8));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgb(244 236 220 / .05), var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: border-color .28s ease, transform .28s ease, box-shadow .28s ease;
}
a.dbc-lessons__link:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgb(244 236 220 / .07), var(--glow-gold), var(--shadow-md);
}
@media (prefers-reduced-motion: reduce) {
  .dbc-lessons__link, a.dbc-lessons__link:hover { transition: none; transform: none; }
}

.dbc-lessons__n {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: var(--medalion);
  border: 1px solid var(--line-strong);
  color: var(--gold);
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgb(242 216 154 / .18);
}
.is-done .dbc-lessons__n {
  background: linear-gradient(145deg, #10352a, #07211a);
  border-color: var(--ok);
  color: var(--ok);
}

.dbc-lessons__mid { flex: 1; min-width: 0; }
.dbc-lessons__title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text);
}
.dbc-lessons__goal {
  display: block;
  font-size: .85rem;
  color: var(--text-muted);
}

.dbc-lessons__meta {
  flex: none;
  font-size: .8rem;
  color: var(--text-muted);
  text-align: right;
  display: grid;
  gap: 2px;
  justify-items: end;
}
.dbc-lessons__time { font-variant-numeric: tabular-nums; }
.dbc-lessons__lock { color: var(--text-faint, var(--text-muted)); }

.dbc-lessons__item.is-locked .dbc-lessons__link {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}

/* ==================================================================== lecția */

.dbc-lesson__head { margin-bottom: var(--s-5); }

.dbc-crumb { margin: 0 0 var(--s-3); font-size: .85rem; }
.dbc-crumb a { color: var(--text-muted); }

.dbc-lesson__meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  font-size: .875rem;
  color: var(--text-muted);
}

.dbc-tag {
  padding: .1em .6em;
  border-radius: var(--r-pill);
  font-size: .78rem;
  font-weight: 700;
}
.dbc-tag--done { background: var(--ok-soft); color: var(--ok); }

.dbc-goal {
  margin-top: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-left: 3px solid var(--gold);
  background: linear-gradient(90deg, rgb(48 37 14 / .55), rgb(10 16 32 / .35));
  border-radius: 0 var(--r-md) var(--r-md) 0;
  max-width: 62ch;
}

/* ---- blocurile ----
   Cartonașul lecției. Aceeași formă ca `.db-panel` din foaia comună, fiindcă
   e același lucru văzut în altă pagină: o cutie închisă, un fir de aur pe
   margine și o umbră care o ridică de pe fundal. */

.dbc-block {
  position: relative;
  margin-bottom: var(--s-5);
  padding: var(--s-6);
  background: var(--bg-card);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgb(244 236 220 / .07), var(--shadow-md);
}
.dbc-block > h2, .dbc-block > h3 {
  margin-top: 0;
  margin-bottom: var(--s-4);
  font-size: clamp(1.35rem, 1.15rem + 1vw, 1.85rem);
  font-weight: 600;
  color: var(--gold-bright);
}
.dbc-block > *:last-child { margin-bottom: 0; }

/* Aurul e cerneala de subliniat și în lecții, nu doar în antrenament. */
.dbc-block p strong { color: var(--gold); font-weight: 700; }

/* Aceeași socoteală ca la `.db-panel`: pe telefon, sticla mată se scoate și
   fundalul se face aproape opac. O lecție are zece cartonașe din astea. */
@media (max-width: 40rem) {
  .dbc-block {
    padding: var(--s-4);
    border-radius: var(--r-md);
    background: rgb(11 16 34 / .95);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Lățimea de citit se pune pe text, nu pe cartonaș. Pe cartonaș, blocul de
   text s-ar strânge la 68ch și ar ieși din rândul celorlalte blocuri, care
   sunt late cât pagina — se vedea imediat ca o treaptă în coloană. */
.dbc-prose > div { max-width: 68ch; }
.dbc-prose p:last-child { margin-bottom: 0; }

.dbc-meta {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
}

/* ---- materiale care încă nu există ---- */

.dbc-pending {
  padding: var(--s-5);
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  text-align: left;
}
.dbc-pending--photo { padding: var(--s-4); }

.dbc-pending__tag {
  margin: 0 0 var(--s-2);
  font-size: .78rem;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--warn);
}
.dbc-pending__path {
  margin: 0 0 var(--s-3);
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.dbc-pending__lead {
  margin: 0 0 var(--s-2);
  font-size: .875rem;
  color: var(--text-muted);
}
.dbc-pending__list {
  margin: 0;
  padding-left: 1.2em;
  font-size: .875rem;
  color: var(--text-muted);
}
.dbc-pending__list li { margin-bottom: var(--s-1); }

/* ---- filmările și fotografiile lecției -----------------------------------
   Materialul didactic NU se întunecă și NU se decolorează, oricât ar bate
   roșul cămășii cu auriul paginii. Fotografiile astea sunt lecția: din ele se
   vede unde cade mâna și cum stă instrumentul, iar o poză stinsă „ca să se
   potrivească” ar fi design plătit cu înțelesul. §9: nu se sacrifică
   folosința pentru înfățișare.

   Ce se poate face — și se face — e să fie ÎNRĂMATE: un fir de aur, colțuri
   rotunjite și o umbră care le așază în pagină. Așa nu mai par o gaură tăiată
   în cartonaș, dar rămân exact ce sunt. */
.dbc-video,
.dbc-figure img,
.dbc-shot,
.dbc-choice__img {
  border: 1px solid var(--line-strong);
  box-shadow: 0 10px 30px rgb(0 0 0 / .45);
}

.dbc-video { width: 100%; border-radius: var(--r-md); background: #000; }

.dbc-figure { margin-inline: 0; }

/* Fotografiile sunt 3:2 și late cât blocul, adică vreo 670 px înălțime —
   într-un pas cu poză, filmare și butoane, asta înseamnă că nu mai încape
   nimic pe un ecran. Se limitează înălțimea și se lasă lățimea să urmeze:
   nimic nu se taie, se micșorează proporțional. Pe ecran îngust câștigă
   `max-width: 100%` din foaia comună, deci poza umple lățimea. */
.dbc-figure img {
  display: block;
  border-radius: var(--r-md);
  max-height: 420px;
  width: auto;
  margin-inline: auto;
}
.dbc-figure figcaption {
  margin-top: var(--s-2);
  font-size: .85rem;
  color: var(--text-muted);
}

/* ====================================================== toba interactivă */

.dbc-drum__wrap {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  align-items: center;
}
@media (max-width: 40rem) {
  .dbc-drum__wrap { grid-template-columns: minmax(0, 1fr); }
}

.dbc-drum__svg { width: 100%; height: auto; display: block; }

/* Părțile instrumentului. Se aleg din butoanele de alături, dar desenul e și
   el apăsabil — de aceea cursorul e de mână peste el. */
.dbc-part {
  cursor: pointer;
  stroke: var(--line-strong);
  stroke-width: 2;
  transition: fill .16s ease, stroke .16s ease;
}

[data-part="corp"]     { fill: var(--bg-sunken); }
[data-part="membrana"] { fill: var(--gold-soft); }
[data-part="centru"]   { fill: var(--db-doum-soft); }

/* Marginea nu e o suprafață, e o buză: se desenează ca inel, nu ca pată. */
.dbc-part--ring {
  fill: none;
  stroke: var(--db-tek);
  stroke-width: 7;
  opacity: .45;
}

.dbc-part:hover { stroke: var(--text-muted); }

.dbc-part.is-on {
  stroke: var(--db-on);
  stroke-width: 4;
}
.dbc-part--ring.is-on { opacity: 1; stroke: var(--db-on); stroke-width: 8; }

.dbc-drum__picker { margin-bottom: var(--s-4); }

.dbc-drum__name {
  margin: 0 0 var(--s-2);
  font-weight: 700;
  font-size: 1.1rem;
}
.dbc-drum__how { margin: 0; color: var(--text-muted); }

/* ================================================== exercițiu / provocare */

.dbc-player { margin-top: var(--s-4); }
.dbc-player .db-grid,
.dbc-player .db-count {
  grid-template-columns: repeat(var(--cols, 4), minmax(3rem, 5rem));
  justify-content: start;
}

.dbc-challenge {
  border-color: var(--brand-orange-ink);
  background: linear-gradient(var(--db-doum-soft), var(--bg-raised) 40%);
}
.dbc-challenge__tag {
  margin: 0 0 var(--s-1);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-orange-ink);
}

.dbc-verdict {
  margin: var(--s-4) 0 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  font-weight: 600;
}
.dbc-verdict:empty { display: none; }
.dbc-verdict.is-win  { background: var(--ok-soft); color: var(--ok); }
.dbc-verdict.is-miss { background: var(--warn-soft); color: var(--warn); }
.dbc-verdict [aria-hidden] { font-size: 1.3rem; letter-spacing: .1em; }

.dbc-honest {
  margin: var(--s-3) 0 0;
  font-size: .82rem;
  color: var(--text-muted);
}

/* ================================================= bifare, răsplată, nav */

.dbc-done { text-align: left; }

.dbc-reward {
  margin: var(--s-3) 0 0;
  font-weight: 600;
}
.dbc-reward:empty { display: none; }
.dbc-reward.is-win { color: var(--ok); }

.dbc-locked {
  margin: var(--s-3) 0 0;
  font-size: .875rem;
  color: var(--text-muted);
}

.dbc-nav {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin-top: var(--s-5);
}

.dbc-nav__link {
  display: block;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgb(16 23 46 / .78), rgb(6 9 20 / .8));
  box-shadow: inset 0 1px 0 rgb(244 236 220 / .05);
  color: inherit;
  text-decoration: none;
  transition: border-color .28s ease, box-shadow .28s ease;
}
.dbc-nav__link:hover { border-color: var(--gold); box-shadow: inset 0 1px 0 rgb(244 236 220 / .07), var(--glow-gold); }
.dbc-nav__link--next { text-align: right; }

.dbc-nav__dir {
  display: block;
  margin-bottom: var(--s-1);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
}
.dbc-nav__title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
}

/* ============================================================ lecția cu flux */

.dbc-lesson__sub {
  margin-top: calc(var(--s-2) * -1);
  margin-bottom: var(--s-3);
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  color: var(--text-muted);
  max-width: 52ch;
}

.dbc-steps {
  margin: 0 0 var(--s-4);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
}

/* Un pas apare întreg, nu se strecoară pe sub. Mișcarea e scurtă și numai la
   intrare — cine a cerut mai puțină mișcare n-o primește deloc. */
.dbc-step { animation: dbc-step-in .28s ease both; }
.dbc-step[hidden] { display: none; }

@keyframes dbc-step-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.dbc-step__next {
  display: inline-flex;
  margin: calc(var(--s-5) * -1 + var(--s-1)) 0 var(--s-5) 0;
}
/* Butonul pasului stă lipit sub cartonașul lui, nu la distanță de el. */
.dbc-step > .dbc-block + .dbc-step__next { margin-top: calc(var(--s-4) * -1); }

.dbc-intro .dbc-lead { margin-bottom: 0; font-size: 1.05rem; }

.dbc-outro {
  text-align: center;
  border-color: var(--ok);
  background: linear-gradient(var(--ok-soft), var(--bg-raised) 60%);
}
.dbc-outro h3 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); }
.dbc-outro p { max-width: 52ch; margin-inline: auto; margin-bottom: 0; }

/* Semnul de la capătul nivelului. E singurul loc din curs unde ne permitem
   ceva mai mare decât un ✓ — momentul chiar merită. */
.dbc-outro__mark {
  font-size: clamp(2.5rem, 2rem + 3vw, 4rem);
  line-height: 1;
  margin-bottom: var(--s-3);
  animation: dbc-pop .5s ease both;
}

.dbc-outro__actions {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--s-5) !important;
}
.dbc-outro__note { margin-top: var(--s-4) !important; }

@media (prefers-reduced-motion: reduce) {
  .dbc-outro__mark { animation: none; }
}

.dbc-backlink {
  grid-column: 1 / -1;
  text-align: center;
  font-size: .875rem;
  color: var(--text-muted);
  padding-top: var(--s-1);
}

/* Răsplata, în clipa în care se întâmplă. */
.dbc-reward.is-fresh { animation: dbc-pop .45s ease both; }
@keyframes dbc-pop {
  0%   { opacity: 0; transform: scale(.9); }
  60%  { transform: scale(1.04); }
  100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dbc-step, .dbc-reward.is-fresh { animation: none; }
}

/* ================================================== puncte pe fotografie */

/* Scena e fotografia însăși. Punctele stau peste ea la procente, deci se mută
   odată cu poza pe orice ecran — nicio coordonată în pixeli, nicăieri. */
/* Desenul era înalt și îngust, deci 18rem îi ajungeau. O fotografie de
   instrument e lată — strânsă în aceeași coloană, punctele ajung unul în
   altul și nu mai poți nimeri niciunul cu degetul. */
.dbc-drum--shot .dbc-drum__wrap {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}
@media (max-width: 46rem) {
  .dbc-drum--shot .dbc-drum__wrap { grid-template-columns: minmax(0, 1fr); }
}

.dbc-shot {
  position: relative;
  line-height: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.dbc-shot__img { width: 100%; height: auto; display: block; }

.dbc-spot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 2.4rem; height: 2.4rem;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 3px solid var(--bg-raised);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 10px rgb(0 0 0 / .45);
  transition: transform .16s ease, background .16s ease;
}
.dbc-spot__n { font-size: .9rem; line-height: 1; }

.dbc-spot:hover { transform: translate(-50%, -50%) scale(1.12); }
.dbc-spot.is-seen { background: var(--accent-soft); color: var(--accent); }
.dbc-spot.is-on {
  background: var(--db-on);
  color: #fff;
  transform: translate(-50%, -50%) scale(1.18);
}
.dbc-spot:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .dbc-spot, .dbc-spot:hover, .dbc-spot.is-on { transition: none; transform: translate(-50%, -50%); }
}

/* ======================================================= puncte pe desen */

.dbc-dot { cursor: pointer; }

.dbc-dot__halo {
  fill: var(--accent);
  opacity: .16;
  transition: opacity .16s ease, r .16s ease;
}
.dbc-dot__core {
  fill: var(--bg-raised);
  stroke: var(--accent);
  stroke-width: 3;
  transition: fill .16s ease, stroke .16s ease;
}
.dbc-dot__n {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  fill: var(--accent);
  pointer-events: none;
}

.dbc-dot:hover .dbc-dot__halo { opacity: .3; }

.dbc-dot.is-seen .dbc-dot__core { fill: var(--accent-soft); }

.dbc-dot.is-on .dbc-dot__halo { opacity: .34; }
.dbc-dot.is-on .dbc-dot__core { fill: var(--db-on); stroke: var(--db-on); }
.dbc-dot.is-on .dbc-dot__n    { fill: var(--bg-raised); }

.dbc-dot:focus-visible { outline: none; }
.dbc-dot:focus-visible .dbc-dot__core { stroke: var(--accent); stroke-width: 5; }

.dbc-drum__partname {
  font-weight: 800;
  letter-spacing: .06em;
}
.dbc-drum__badge {
  margin-left: var(--s-2);
  padding: .1em .6em;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: 0;
}

.dbc-drum__count {
  margin: var(--s-3) 0 0;
  font-size: .82rem;
  color: var(--text-muted);
}
.dbc-drum__count.is-done { color: var(--ok); font-weight: 700; }

.dbc-drum__note { margin: var(--s-4) 0 0; }
.dbc-drum__note code {
  font-family: var(--font-mono);
  font-size: .85em;
  overflow-wrap: anywhere;
}

/* ======================================================= ascultă diferența */

.dbc-compare__row {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-bottom: var(--s-5);
}

.dbc-compare__card {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-sunken);
  text-align: center;
}
/* Culoarea vine din literă, nu dintr-o clasă scrisă de mână: așa un al
   patrulea sunet pus alături nu cere nicio regulă nouă. */
.dbc-compare__card[data-key="D"] { border-color: var(--db-doum); background: var(--db-doum-soft); }
.dbc-compare__card[data-key="T"] { border-color: var(--db-tek);  background: var(--db-tek-soft); }
.dbc-compare__card[data-key="K"] { border-color: var(--db-ka);   background: var(--db-ka-soft); }
.dbc-compare__card[data-key="A"] { border-color: var(--db-accent); background: var(--db-accent-soft); }

.dbc-compare__name {
  margin-bottom: var(--s-2);
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: .06em;
}
[data-key="D"] .dbc-compare__name { color: var(--db-doum); }
[data-key="T"] .dbc-compare__name { color: var(--db-tek); }
[data-key="K"] .dbc-compare__name { color: var(--db-ka); }
[data-key="A"] .dbc-compare__name { color: var(--db-accent); }

.dbc-compare__how {
  margin-bottom: var(--s-4);
  font-size: .875rem;
  color: var(--text-muted);
}

/* Cartonașul pulsează scurt când sună — reacția care spune „da, tu ai făcut
   asta”. Fără ea, la un sunet de 40 ms nu e limpede că s-a întâmplat ceva. */
.dbc-compare__card.is-hit { animation: dbc-hit .35s ease; }
@keyframes dbc-hit {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .dbc-compare__card.is-hit { animation: none; }
}

.dbc-compare__try {
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.dbc-compare__try h4 {
  margin: 0 0 var(--s-2);
  font-size: 1.05rem;
}

.dbc-compare__tally {
  margin: var(--s-3) 0 0;
  font-size: .9rem;
  color: var(--text-muted);
  min-height: 1.4em;
}
.dbc-compare__tally.is-done { color: var(--ok); font-weight: 600; }

/* =================================================================== pulsul */

.dbc-pulse__row {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  justify-content: center;
  margin: var(--s-5) 0;
}

.dbc-pulse__beat {
  width: 4.5rem; height: 4.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: var(--bg-sunken);
  transition: background .08s ease, border-color .08s ease, transform .08s ease;
}
.dbc-pulse__n {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.dbc-pulse__beat.is-on {
  background: var(--db-on-soft);
  border-color: var(--db-on);
  transform: scale(1.08);
  box-shadow: 0 0 22px rgb(255 239 201 / .35);
}
.dbc-pulse__beat.is-on .dbc-pulse__n { color: var(--db-on); }

/* Bătaia unu se vede altfel și când tace: acolo se întoarce măsura. */
.dbc-pulse__beat.is-accent { border-color: var(--brand-orange); }
.dbc-pulse__beat.is-accent.is-on {
  background: var(--db-doum-soft);
  border-color: var(--brand-orange);
}
.dbc-pulse__beat.is-accent.is-on .dbc-pulse__n { color: var(--brand-orange-ink); }

@media (prefers-reduced-motion: reduce) {
  .dbc-pulse__beat { transition: none; }
  .dbc-pulse__beat.is-on { transform: none; }
}

.dbc-pulse .db-transport,
.dbc-pulse .db-controls { justify-content: center; }

/* ==================================================== puntea către altceva */

.dbc-link {
  border-color: var(--accent);
  background: linear-gradient(var(--accent-soft), var(--bg-raised) 60%);
}
.dbc-link .dbc-lead { max-width: 58ch; }

/* =============================================================== o lovitură */

/* Bara colorată din stânga spune din prima despre care sunet e vorba, fără
   să mai fie nevoie să citești titlul. Culoarea vine din literă. */
.dbc-tech { border-left: 4px solid var(--line-strong); }
.dbc-tech[data-key="D"] { border-left-color: var(--db-doum); }
.dbc-tech[data-key="T"] { border-left-color: var(--db-tek); }
.dbc-tech[data-key="K"] { border-left-color: var(--db-ka); }
.dbc-tech[data-key="A"] { border-left-color: var(--db-accent); }

.dbc-tech__name {
  font-size: clamp(1.8rem, 1.4rem + 2vw, 2.6rem) !important;
  letter-spacing: .06em;
  margin-bottom: var(--s-1);
}
.dbc-tech[data-key="D"] .dbc-tech__name { color: var(--db-doum); }
.dbc-tech[data-key="T"] .dbc-tech__name { color: var(--db-tek); }
.dbc-tech[data-key="K"] .dbc-tech__name { color: var(--db-ka); }

.dbc-tech__sub {
  margin-bottom: var(--s-4);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-muted);
}

.dbc-tech__speeds { margin-top: var(--s-3); }

.dbc-tech__bar {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--s-4);
}

.dbc-tip {
  margin: var(--s-4) 0 0;
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .9rem;
  font-weight: 600;
}

/* ========================================================= ce ai auzit? */

.dbc-ear { text-align: center; }
.dbc-ear .dbc-lead { margin-inline: auto; max-width: 48ch; }

.dbc-ear__play { margin-bottom: var(--s-5); }

.dbc-ear__opts {
  justify-content: center;
  margin-bottom: var(--s-3);
}
.dbc-ear__opts .db-chip { min-width: 5.5rem; font-weight: 700; }

.dbc-ear .dbc-q__verdict { text-align: center; }
.dbc-ear .db-btn--ghost { margin-top: var(--s-2); }

.dbc-ticks__after { margin-top: var(--s-4); margin-bottom: 0; }
.dbc-compare__note { margin: var(--s-4) 0 0; }

/* ================================================================== repere */

.dbc-points__grid {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.dbc-point {
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: linear-gradient(90deg, rgb(48 37 14 / .4), rgb(10 16 32 / .3));
}
.dbc-point__name {
  margin: 0 0 var(--s-2);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--gold);
}
.dbc-point__text { margin: 0; }

/* ================================================================ alegerea */

.dbc-choice__row {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin-bottom: var(--s-4);
}

.dbc-choice__card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-sunken);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease;
}
.dbc-choice__card:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: var(--glow-gold);
}

.dbc-choice__label {
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  font-weight: 800;
}

.dbc-choice__name { font-weight: 700; }
.dbc-choice__text { color: var(--text-muted); font-size: .9rem; }

.dbc-choice__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
}

.dbc-choice__photo {
  display: block;
  padding: var(--s-3);
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-raised);
}
.dbc-choice__photo .dbc-pending__tag,
.dbc-choice__photo .dbc-pending__path { display: block; margin: 0; }

.dbc-choice__card.is-right {
  border-color: var(--ok);
  background: var(--ok-soft);
}
.dbc-choice__card.is-right .dbc-choice__label {
  background: var(--ok); border-color: var(--ok); color: var(--bg-raised);
}
.dbc-choice__card.is-wrong {
  border-color: var(--warn);
  background: var(--warn-soft);
}
.dbc-choice__card.is-wrong .dbc-choice__label {
  background: var(--warn); border-color: var(--warn); color: var(--bg-raised);
}

@media (prefers-reduced-motion: reduce) {
  .dbc-choice__card:hover { transform: none; }
}

/* ============================================================= cronometrul */

.dbc-timer { text-align: center; }
.dbc-timer .dbc-lead { margin-inline: auto; max-width: 46ch; }

.dbc-timer__dial {
  margin: var(--s-5) auto var(--s-4);
  width: 6.5rem; height: 6.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: radial-gradient(circle at 50% 35%, rgb(28 38 68 / .8), rgb(6 9 20 / .9));
  font-size: 2.4rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.dbc-timer__dial.is-running {
  border-color: var(--gold);
  color: var(--gold-bright);
  box-shadow: 0 0 26px rgb(217 184 118 / .3);
}
.dbc-timer__dial.is-done {
  border-color: var(--ok);
  color: var(--ok);
  box-shadow: 0 0 26px rgb(94 211 166 / .25);
}

/* ============================================== figura cu indicații */

.dbc-figure__labels {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin: var(--s-3) 0 0;
}
.dbc-figure__extra { margin: var(--s-3) 0 0; }
.dbc-figure__extra code {
  font-family: var(--font-mono);
  font-size: .85em;
  overflow-wrap: anywhere;
}

/* ============================================================== chestionar */

.dbc-q + .dbc-q { margin-top: var(--s-4); }
.dbc-q__rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s-4) 0;
}
.dbc-q__text { font-weight: 600; margin-bottom: var(--s-3); }

.dbc-q__opts { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.dbc-q__opt.is-right {
  background: var(--ok-soft);
  border-color: var(--ok);
  color: var(--ok);
  font-weight: 700;
}
.dbc-q__opt.is-wrong {
  background: var(--warn-soft);
  border-color: var(--warn);
  color: var(--warn);
}

.dbc-q__verdict {
  margin: var(--s-3) 0 0;
  font-size: .9rem;
}
.dbc-q__verdict:empty { display: none; }
.dbc-q__verdict.is-right { color: var(--ok); }
.dbc-q__verdict.is-wrong { color: var(--warn); }

/* =============================================================== verifică */

.dbc-check__row { display: block; }
.dbc-check__label {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  cursor: pointer;
}
.dbc-check__box {
  flex: none;
  width: 1.15rem; height: 1.15rem;
  margin-top: .2rem;
  accent-color: var(--ok);
  cursor: pointer;
}
.dbc-check__label:hover { color: var(--text); }

.dbc-check .db-btn { margin-top: var(--s-4); }

/* ================================================= nivel completat (§26) */

.dbc-level-done {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin: var(--s-4) 0 0;
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--db-doum-soft);
  border: 1px solid var(--brand-orange-ink);
}
.dbc-level-done__stars { font-size: 1.2rem; letter-spacing: .1em; color: var(--gold); }
.dbc-level-done strong { letter-spacing: .06em; }
.dbc-level-done__medie {
  color: var(--text-muted);
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}
.dbc-level-done__xp {
  font-weight: 700;
  color: var(--brand-orange-ink);
}

/* ================================================== capul cursului (§8) */

/* Eticheta de secțiune din capul cursului. Aceeași liniuță de aur ca la
   `.db-eyebrow` din foaia comună — e același fel de semn. */
.dbc-curs__section {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-7) 0 var(--s-4);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
}
.dbc-curs__section::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgb(200 165 96 / .4), transparent);
}

.dbc-levelcard .dbc-progress__track { margin-top: var(--s-4); max-width: 26rem; }
.dbc-levelcard .db-btn { margin-top: var(--s-4); }

/* Nivelul terminat poartă AUR, nu verde. Verdele rămâne unde e o bifă mică
   („✓ completată”, semnul unei lecții): acolo e un punct, se citește din
   formă și nu ia pagina. Dar opt cartonașe mari, unul sub altul, cu chenar
   verde, fac dintr-un curs premium o listă de bifat — iar în secțiunea asta
   aurul e chiar culoarea lucrului dus la capăt: tot așa arată foaia
   examenului, stelele și rangul. */
.dbc-levelcard.is-done {
  border-color: var(--gold);
  box-shadow: inset 0 1px 0 rgb(244 236 220 / .07), var(--glow-gold), var(--shadow-md);
}

.dbc-curs__soon { margin-top: var(--s-5); }

/* ======================================================== progresul (§30) */

.dbc-stats {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin-bottom: var(--s-5);
}
.dbc-stat {
  padding: var(--s-5) var(--s-4);
  background: linear-gradient(165deg, rgb(16 23 46 / .78), rgb(6 9 20 / .8));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgb(244 236 220 / .05), var(--shadow-sm);
  text-align: center;
}
.dbc-stat__val {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dbc-stat__lab {
  display: block;
  margin-top: var(--s-2);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.dbc-track {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-1);
}
.dbc-track__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
}
.dbc-track__row:last-child { border-bottom: 0; }

.dbc-track__mark {
  flex: none;
  width: 1.4rem;
  text-align: center;
  color: var(--text-faint, var(--text-muted));
  font-weight: 700;
}
.dbc-track__row.is-done .dbc-track__mark { color: var(--ok); }

.dbc-track__name { flex: 1; min-width: 0; }
/* Numele lecțiilor din progres sunt legături, dar sunt înainte de toate o
   listă de citit. Albastrul de legătură, repetat de șaizeci și șase de ori pe
   o pagină aurie, era singurul lucru care nu ținea de paletă. Rămân scrise cu
   cerneala paginii, cu sublinierea aurie — și se fac aurii de tot la trecerea
   mausului, ca să se vadă că sunt de apăsat. */
.dbc-track__name a {
  color: var(--text);
  text-decoration-color: var(--gold-line);
  text-underline-offset: 3px;
}
.dbc-track__name a:hover { color: var(--gold-bright); text-decoration-color: var(--gold); }
.dbc-track__meta {
  flex: none;
  font-size: .8rem;
  color: var(--text-muted);
}

/* ============================================================ mărunțișuri */

/* Fotografia dintr-un card de lovitură vine prin același randor ca figurile
   de sine stătătoare, deci sosește îmbrăcată în `.dbc-block`. Într-un card,
   cartonașul din cartonaș arată ca o greșeală — se dezbracă aici. */
/* `backdrop-filter` se scoate odată cu fundalul: pe un element fără fundal el
   tot lucrează, și ar rămâne o pată tulbure exact acolo unde tocmai am spus
   că nu mai e nicio cutie. */
.db-stroke .dbc-block {
  margin: 0 0 var(--s-3);
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.db-stroke .dbc-pending { padding: var(--s-3); }

.dbc-reset { margin-top: var(--s-6); font-size: .85rem; }
.dbc-reset__note { color: var(--text-muted); }

.dbc-missing { text-align: left; }
.dbc-missing h1 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); }
.dbc-missing__links { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ==================================================== Nivelul 1 și de aici

   Grile scrise în text, ritmuri puse alături, ritmuri legate cap la cap, și
   bătutul pulsului cu degetul. Toate patru au apărut odată cu Nivelul 1; nu
   sunt legate de el, dar de acolo au venit. */

/* Rândurile de tipar fix din explicații: „D – – – T – – –” cu numărătoarea
   sub el. Se aliniază numai dacă literele au aceeași lățime, deci fontul
   mono nu e o alegere de stil, ci singurul care ține coloanele drepte. */
.dbc-mono {
  font-family: var(--font-mono);
  font-size: clamp(.95rem, .85rem + .5vw, 1.15rem);
  line-height: 1.7;
  letter-spacing: .04em;
  margin: var(--s-4) 0;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  color: var(--gold-bright);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / .4);
  overflow-x: auto;
  white-space: nowrap;
}

/* ---- două ritmuri alături ---- */

.dbc-ab__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-4);
}

.dbc-ab__card {
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-sunken);
}

.dbc-ab__name {
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 2px;
}
.dbc-ab__how {
  margin-bottom: var(--s-3);
  font-size: .85rem;
  color: var(--text-muted);
}

/* Playerul dintr-un card e deja într-o cutie; a doua ramă ar fi de prisos. */
.dbc-ab__card .dbc-player { margin: 0; }

.dbc-ab__ask {
  margin-top: var(--s-4);
  padding-left: var(--s-3);
  border-left: 3px solid var(--accent);
  color: var(--text-muted);
}

/* ---- ritmuri legate cap la cap ---- */

/* Panglica de deasupra grilei. Fiecare bucată e lată cât ține partea ei, iar
   `flex-grow` primește chiar numărul de căsuțe — deci lățimile de pe ecran
   sunt proporționale cu timpul, nu cu lungimea numelui. */
.dbc-medley__strip {
  display: flex;
  gap: 2px;
  margin: var(--s-4) 0 var(--s-2);
  overflow: hidden;
  border-radius: var(--r-sm);
}

.dbc-medley__tag {
  flex-basis: 0;
  min-width: 0;
  padding: var(--s-2) var(--s-1);
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--bg-sunken);
  color: var(--text-muted);
  border: 1px solid var(--line);
  transition: background .15s, color .15s;
}

.dbc-medley__tag.is-on {
  background: var(--db-on-soft);
  border-color: var(--db-on);
  color: var(--db-on);
}

.dbc-medley__now {
  min-height: 1.4em;
  font-size: .85rem;
  font-weight: 600;
  color: var(--db-on);
}

@media (prefers-reduced-motion: reduce) {
  .dbc-medley__tag { transition: none; }
}

/* ---- bate pulsul ---- */

.dbc-tap { text-align: center; }
.dbc-tap .dbc-lead { text-align: left; }

/* Buton mare dinadins: se apasă de opt ori la rând, în tempo. Un buton cât
   un link s-ar rata tocmai când tempoul urcă. */
.dbc-tap__btn {
  min-width: 12rem;
  padding: var(--s-4) var(--s-6);
  font-size: 1.15rem;
  letter-spacing: .08em;
}
.dbc-tap__btn:disabled { opacity: .5; }

.dbc-tap .db-btn--ghost { margin-left: var(--s-2); }
.dbc-tap .dbc-honest { text-align: left; }

/* ---- ce ritm ai auzit? ---- */

.dbc-rquiz { text-align: center; }
.dbc-rquiz .dbc-lead { text-align: left; }

.dbc-rquiz__scor {
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-3);
}

.dbc-rquiz .db-transport { justify-content: center; }

.dbc-rquiz__q {
  margin: var(--s-5) 0 var(--s-3);
  font-weight: 700;
  font-size: 1.05rem;
}

.dbc-rquiz__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  justify-content: center;
}

/* Pastile mari: se apasă în grabă, imediat după ce s-a terminat sunetul, iar
   pe telefon degetul n-are timp să caute. */
.dbc-rquiz__pick {
  padding: var(--s-3) var(--s-5);
  font-size: 1rem;
}
.dbc-rquiz__pick:disabled { opacity: .5; cursor: default; }

.dbc-rquiz .dbc-q__verdict { margin-top: var(--s-4); }
.dbc-rquiz .db-btn--ghost { margin-top: var(--s-4); }

/* ---- soloul ---- */

.dbc-solo__q {
  margin: var(--s-4) 0 var(--s-3);
  font-weight: 700;
  font-size: 1.05rem;
}

.dbc-solo__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

.dbc-solo__pick {
  padding: var(--s-3) var(--s-5);
  font-size: 1rem;
}
/* Aceeași pastilă apăsată ca peste tot în secțiune. Înainte avea albastrul
   accentului, dar atunci era singura pastilă din curs care nu semăna cu
   celelalte — iar §15 cere exact pe dos. */
.dbc-solo__pick[aria-pressed="true"] {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgb(58 44 16 / .8), rgb(30 23 8 / .8));
  color: var(--gold-bright);
  font-weight: 700;
}

/* Fraza apare abia după alegere — până atunci locul stă gol dinadins, ca să
   se vadă că întâi se alege. */
.dbc-solo__scena:empty { display: none; }

/* ---- un nivel încă închis ---- */

.dbc-levelcard.is-locked { opacity: .6; }
.dbc-levelcard.is-locked .dbc-lessons__lock {
  display: inline-block;
  margin-top: var(--s-4);
}
.dbc-block.is-locked { opacity: .6; }

/* =========================================================== NIVELUL 4 ===
   Exercițiul notat și tot ce ține de el. Nu are culori noi și nici forme
   noi: aceleași pastile, aceleași butoane, aceiași tokeni ca restul
   cursului. Un joc în care înveți să cânți la darbuka, nu un aparat de
   măsură — vezi brieful, §34.
   ========================================================================= */

/* ---- mini-misiunea ---- */

.dbc-mission {
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--text);
  font-size: .95rem;
}
.dbc-mission__tag {
  display: inline-block;
  margin-right: var(--s-2);
  padding: .1em .6em;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--bg-raised);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ---- treptele: bronz, argint, aur ---- */

.dbc-trepte {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

.dbc-treapta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--s-2) var(--s-4);
  line-height: 1.2;
}
.dbc-treapta__nume { font-weight: 700; letter-spacing: .04em; }
.dbc-treapta__bpm  { font-size: .75rem; color: var(--text-muted); }
.dbc-treapta__stele {
  font-size: .8rem;
  color: var(--gold);
  letter-spacing: .08em;
  min-height: 1em;
}
.dbc-treapta[aria-pressed="true"] .dbc-treapta__bpm { color: inherit; opacity: .8; }

/* Culoarea treptei se vede numai când e aleasă: trei pastile colorate
   deodată ar arăta ca trei butoane apăsate. */
.dbc-treapta[data-treapta="BRONZ"][aria-pressed="true"] {
  border-color: var(--db-doum); background: var(--db-doum-soft); color: var(--db-doum);
}
.dbc-treapta[data-treapta="ARGINT"][aria-pressed="true"] {
  border-color: var(--line-strong); background: var(--bg-sunken); color: var(--text);
}
.dbc-treapta[data-treapta="AUR"][aria-pressed="true"] {
  border-color: var(--gold-line); background: var(--gold-soft); color: var(--gold);
}

.dbc-play__ce {
  margin: 0 0 var(--s-3);
  color: var(--text-muted);
  font-size: .9rem;
}

/* Grila unui exercițiu notat are aceeași măsură ca a celorlalte: căsuțe de
   cel mult 5rem, nu întinse pe toată lățimea. Un tipar de patru căsuțe lăsat
   să umple ecranul ar face din patru pătrimi patru pancarte — iar la opt
   căsuțe, aceeași grilă ar arăta cu totul altfel. Aceeași regulă ca la
   `.dbc-player`, ca cele două să nu se despartă. */
.dbc-play .db-grid,
.dbc-play .db-count,
.dbc-cr .db-grid,
.dbc-cr .db-count,
.dbc-varq .db-grid,
.dbc-varq .db-count {
  grid-template-columns: repeat(var(--cols, 4), minmax(2.6rem, 4rem));
  justify-content: start;
}

/* ---- cum bate elevul ---- */

.dbc-moduri {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-4) 0 var(--s-3);
}

/* ---- suprafața de bătut ---- */

.dbc-pad { margin-bottom: var(--s-3); text-align: center; }
.dbc-pad[hidden] { display: none; }

.dbc-pad__tap {
  width: 100%;
  max-width: 22rem;
  padding: var(--s-6) var(--s-5);
  font-size: 1.4rem;
  letter-spacing: .06em;
  touch-action: manipulation;
  user-select: none;
}
.dbc-pad__tap.is-hit { transform: scale(.97); filter: brightness(1.15); }

.dbc-pad__row {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  flex-wrap: wrap;
}

.dbc-pad__key {
  flex: 1 1 6rem;
  max-width: 10rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-5) var(--s-3);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  transition: transform .08s ease, background .12s ease;
}
.dbc-pad__key[data-key="D"] { border-color: var(--db-doum); color: var(--db-doum); }
.dbc-pad__key[data-key="T"] { border-color: var(--db-tek);  color: var(--db-tek); }
.dbc-pad__key[data-key="K"] { border-color: var(--db-ka);   color: var(--db-ka); }
.dbc-pad__key.is-hit { transform: scale(.95); background: var(--db-on-soft); }

.dbc-pad__nume { font-weight: 800; font-size: 1.15rem; letter-spacing: .04em; }
.dbc-pad__tasta {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--text-muted);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0 .4em;
}

.dbc-pad__hint { margin: var(--s-3) auto 0; max-width: 46ch; text-align: center; }

/* ---- microfonul ---- */

.dbc-mic__stare { margin: 0 0 var(--s-3); font-size: .95rem; }

.dbc-mic__bara {
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  overflow: hidden;
  margin-bottom: var(--s-3);
}
.dbc-mic__fill {
  height: 100%;
  width: 0;
  background: var(--db-on);
  transition: width .06s linear;
}
.dbc-pad--mic .db-chips { justify-content: center; }

/* ---- toba care răspunde (§35) ----
   Mică dinadins: e un reper de colțul ochiului în timp ce se cântă, nu
   subiectul paginii. Subiectul e grila de deasupra ei. */

.dbc-toba {
  margin: var(--s-4) auto 0;
  width: 8rem;
  text-align: center;
}
.dbc-toba__svg { width: 100%; height: auto; display: block; }

.dbc-toba__piele {
  fill: var(--bg-raised);
  stroke: var(--line);
  stroke-width: 2;
  transition: fill .12s ease, stroke .12s ease, stroke-width .12s ease;
}
/* Lovitura auzită la microfon, dar nerecunoscută: pulsează toată membrana, în
   nicio culoare de lovitură. Un semn neutru, fiindcă exact atât știm. */
.dbc-toba__piele.is-aprins {
  fill: var(--db-tek-soft);
  stroke: var(--text);
  stroke-width: 5;
}

/* Zonele se văd și în repaus, fiecare în culoarea loviturii ei. Așa toba e o
   hartă înainte să fie o animație: cine se uită la ea o dată știe unde cade
   doum-ul și de care parte stă fiecare mână. Stinsă cu totul, ar fi fost o
   gaură în pagină care se aprinde din când în când. */
.dbc-toba__zona {
  fill: none;
  stroke-width: 9;
  opacity: .4;
  transition: stroke-width .12s ease, fill .12s ease, opacity .12s ease;
}
.dbc-toba__zona--dreapta { stroke: var(--db-tek); }
.dbc-toba__zona--stanga  { stroke: var(--db-ka); }
.dbc-toba__zona--centru {
  fill: var(--db-doum-soft);
  stroke: var(--db-doum);
  stroke-width: 2;
}

.dbc-toba__zona.is-aprins { opacity: 1; }
.dbc-toba__zona--centru.is-aprins { stroke-width: 4; }

/* Ce bate elevul se vede altfel decât ce cântă site-ul: linie mai groasă,
   nu altă culoare. Culoarea spune deja CARE lovitură e, și n-are voie să
   spună două lucruri deodată. */
.dbc-toba__zona.is-aprins.is-mine { stroke-width: 13; }
.dbc-toba__zona--centru.is-aprins.is-mine { stroke-width: 6; }

.dbc-toba__nume {
  margin: var(--s-2) 0 0;
  min-height: 1.4em;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .dbc-toba__piele, .dbc-toba__zona { transition: none; }
}

/* ---- ce se spune pe loc ---- */

.dbc-play__zice {
  margin: var(--s-3) 0 0;
  min-height: 1.6em;
  font-weight: 700;
  text-align: center;
  color: var(--text-muted);
}
.dbc-play__zice.is-perfect { color: var(--ok); }
.dbc-play__zice.is-devreme,
.dbc-play__zice.is-tarziu  { color: var(--warn); }
.dbc-play__zice.is-gresit,
.dbc-play__zice.is-gol,
.dbc-play__zice.is-inplus  { color: var(--brand-orange-ink); }

/* ---- când sunetul nu pornește (§38) ---- */

.dbc-eroare {
  margin-top: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--warn);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  text-align: center;
}
.dbc-eroare[hidden] { display: none; }
.dbc-eroare__text { margin: 0 0 var(--s-3); font-weight: 700; }
.dbc-eroare .db-btn[hidden] { display: none; }

/* ---- foaia de rezultat ---- */

.dbc-scor {
  margin-top: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
}
.dbc-scor[hidden] { display: none; }

.dbc-scor__cap {
  margin: 0 0 var(--s-2);
  font-size: 1.2rem;
  text-align: center;
}
.dbc-scor__cap strong { font-size: 1.6rem; }

.dbc-stele {
  margin: 0 0 var(--s-2);
  text-align: center;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--gold);
  letter-spacing: .12em;
}

.dbc-scor__mesaj {
  margin: 0 0 var(--s-4);
  text-align: center;
  color: var(--text-muted);
}

.dbc-scor__list { list-style: none; margin: 0; padding: 0; }

.dbc-scor__row {
  display: grid;
  grid-template-columns: 8rem 1fr 3.2rem;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.dbc-scor__nume { font-size: .9rem; color: var(--text-muted); }

.dbc-scor__bara {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  overflow: hidden;
}
.dbc-scor__fill {
  display: block;
  height: 100%;
  background: var(--brand-gradient);
}
.dbc-scor__val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: .9rem;
}
.dbc-scor__val--nu { color: var(--text-muted); font-weight: 400; cursor: help; }

.dbc-scor__amanunte {
  margin: var(--s-3) 0 0;
  font-size: .85rem;
  color: var(--text-muted);
}
.dbc-scor .db-btn { margin-top: var(--s-4); margin-right: var(--s-2); }

@media (max-width: 30rem) {
  .dbc-scor__row { grid-template-columns: 6.2rem 1fr 2.8rem; gap: var(--s-2); }
  .dbc-scor__nume { font-size: .82rem; }
}

/* ---- foaia lecției ---- */

.dbc-foaie__list { list-style: none; margin: 0 0 var(--s-4); padding: 0; }

.dbc-foaie__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
}
.dbc-foaie__titlu { flex: 1; min-width: 0; }
.dbc-foaie__stele { color: var(--gold); letter-spacing: .08em; }
.dbc-foaie__pct {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  min-width: 3rem;
  text-align: right;
}
.dbc-foaie__medie { margin: 0 0 var(--s-2); font-size: 1.05rem; }

.dbc-foaie__sub {
  margin: var(--s-4) 0 var(--s-2);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
}
.dbc-foaie__xp {
  margin: var(--s-3) 0 0;
  color: var(--brand-orange-ink);
}
.dbc-foaie__actiuni { margin: var(--s-4) 0 0; }

/* ---- unde e accentul? ---- */

.dbc-accq { text-align: center; }
.dbc-accq .dbc-lead { margin-inline: auto; max-width: 48ch; }
.dbc-accq__row {
  display: flex;
  gap: var(--s-2);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.dbc-accq__pick {
  min-width: 3.6rem;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
}
.dbc-accq .dbc-q__verdict { text-align: center; }
.dbc-accq .db-transport { justify-content: center; }

/* ---- găsește variația ---- */

.dbc-varq__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.dbc-varq__card {
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
}
.dbc-varq__eticheta {
  margin: 0 0 var(--s-2);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dbc-varq__pick { margin-bottom: var(--s-3); }
.dbc-varq__buton { min-width: 5rem; font-weight: 700; }

/* ---- întrebare și răspuns ---- */

.dbc-cr__optiuni { margin: var(--s-4) 0; align-items: center; }
.dbc-cr__optiuni .db-chip { font-family: var(--font-mono); letter-spacing: .1em; }

/* Ce se cere de la degete e mai mare pe telefon decât pe calculator: acolo
   nu se bate cu mausul, se bate cu degetul mare. */
@media (max-width: 40rem) {
  .dbc-pad__tap { padding: var(--s-7) var(--s-5); font-size: 1.6rem; }
  .dbc-pad__key { padding: var(--s-6) var(--s-2); }
  .dbc-trepte, .dbc-moduri { gap: var(--s-1); }
}

@media (prefers-reduced-motion: reduce) {
  .dbc-pad__tap.is-hit, .dbc-pad__key.is-hit { transform: none; }
  .dbc-mic__fill { transition: none; }
}

/* =========================================================== NIVELUL 5 ===
   Brieful (§22): „interfața trebuie să rămână curată. Nu încărca ecranul cu
   prea multe elemente.” De aceea tot ce urmează e mic și se sprijină pe ce
   există: aceleași pastile, aceiași tokeni, aceleași raze. Singurul lucru
   care ocupă loc nou pe ecran e capacul de la memorie — și el ocupă exact
   locul grilei pe care o ascunde, ca pagina să nu sară sub deget.
   ========================================================================= */

/* ---- insignele de treaptă (🟢🔵🟣🔴) ----
   O pastilă mică deasupra blocului, nu un banner. Culoarea o poartă bulina,
   nu fundalul: patru fundaluri tari, unul sub altul, ar fi făcut din lecție
   un semafor. */

.dbc-insigna {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
  padding: .15em .7em .15em .5em;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-sunken);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--text-muted);
}
.dbc-insigna__semn { font-size: .8em; line-height: 1; }
.dbc-insigna--core      { border-color: var(--ok);       color: var(--ok); }
.dbc-insigna--advanced  { border-color: var(--db-tek);   color: var(--db-tek); }
.dbc-insigna--progress  { border-color: var(--db-ka);    color: var(--db-ka); }
.dbc-insigna--challenge { border-color: var(--db-doum);  color: var(--db-doum); }

/* Cele două ale Nivelului 6 (🏆 ⚫). Apar o singură dată în tot nivelul, la
   proba de final, și au voie să fie pline — nu contrazic regula de mai sus,
   ci se sprijină pe ea: patru pastile colorate una sub alta ar fi un semafor,
   dar una plină văzută de două ori în zece lecții spune „aici e altceva”.
   Culorile vin din tokenii temei, deci se întorc singure pe întuneric. */
.dbc-insigna--performance {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--bg);
}
.dbc-insigna--master {
  border-color: var(--text);
  background: var(--text);
  color: var(--bg);
}

/* ---- memorează și cântă (🧠) ----
   Capacul stă peste grilă, în locul ei exact. Nu o șterge: dacă ar dispărea,
   pagina de sub ea ar urca cu vreo sută de pixeli fix în clipa în care
   elevul se pregătește să bată. */

.dbc-memorie { position: relative; }

/* Fundalul e scris cu o culoare plină, nu cu un token care s-ar putea face
   străveziu într-o zi: capacul ăsta chiar trebuie să ASCUNDĂ grila de sub el,
   altfel exercițiul de memorie se rezolvă uitându-te prin capac. */
.dbc-memorie__capac {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: #0a1020;
  color: var(--gold);
}
.dbc-memorie__capac[hidden] { display: none; }
.dbc-memorie__semn { font-size: 1.6rem; line-height: 1; }
.dbc-memorie__text {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.dbc-memorie__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-4) 0 var(--s-3);
}
.dbc-memorie__stare {
  flex: 1 1 16rem;
  margin: 0;
  font-size: .88rem;
  color: var(--text-muted);
}

/* ---- ritmul surpriză (🔥) ---- */

.dbc-surpriza {
  border-color: var(--db-doum);
  background: var(--db-doum-soft);
}
.dbc-surpriza__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-2);
  padding: .15em .7em;
  border-radius: var(--r-pill);
  background: var(--db-doum);
  color: var(--bg-raised);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.dbc-surpriza__cerinta {
  margin: var(--s-3) 0 var(--s-2);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}
.dbc-surpriza__hint { margin: 0 0 var(--s-3); }
.dbc-surpriza__hint[hidden] { display: none; }
.dbc-surpriza__alta { margin-bottom: var(--s-4); }
.dbc-surpriza__facut { margin-top: var(--s-4); }
.dbc-surpriza__facut.is-on {
  border-color: var(--ok);
  background: var(--ok-soft);
  color: var(--ok);
}
/* Blocul dinăuntru nu-și mai poartă chenarul: e deja înăuntrul unuia. */
.dbc-surpriza .dbc-block {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---- viețile (❤️) ---- */

.dbc-vieti {
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
}
.dbc-vieti__inimi {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: .18em;
  line-height: 1.2;
}
.dbc-vieti__spus {
  margin: var(--s-2) 0 0;
  font-size: .85rem;
  color: var(--text-muted);
}
.dbc-vieti__spus:empty { display: none; }

/* ---- perfect run (🏆) ---- */

.dbc-verdict.is-perfect { border-color: var(--gold-line); background: var(--gold-soft); }
.dbc-perfect { display: block; font-size: 2rem; line-height: 1.1; }
.dbc-perfect__text {
  display: inline-block;
  margin-top: var(--s-1);
  font-size: 1.05rem;
  letter-spacing: .14em;
  color: var(--gold);
}

/* ---- sfatul de sub notă (§18) ----
   Stă peste rândurile de procente, nu sub ele: e singurul lucru de acolo
   care spune ce e de FĂCUT, iar cifrele sunt amănuntele lui. */

.dbc-scor__sfat {
  margin: var(--s-3) 0;
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--accent-soft);
  font-size: .95rem;
  line-height: 1.5;
  color: var(--text);
}

/* ---- înlănțuirea cu surpriză ----
   Partea încă nespusă se vede că e acolo, dar nu se poate citi. Ștearsă cu
   totul, panglica s-ar fi lungit sub ochi pe măsură ce apar părțile, iar
   elevul n-ar mai fi știut nici măcar câte urmează. */

.dbc-medley__tag.is-ascuns {
  color: var(--text-muted);
  border-style: dashed;
  font-weight: 800;
  letter-spacing: .2em;
}
.dbc-medley__tag.is-descoperit { animation: dbc-apare .35s ease; }

@keyframes dbc-apare {
  from { opacity: .3; transform: translateY(-2px); }
  to   { opacity: 1;  transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dbc-medley__tag.is-descoperit { animation: none; }
}


/* =========================================================== NIVELUL 7 ===
   Brieful cere ca ultimul nivel să pară SERIOS · MUZICAL · ELEGANT ·
   PROFESIONAL, și cere pe față ce să nu pară: copilăresc, arcade, joc video,
   supraîncărcat. Cere și să nu se redeseneze ce funcționează deja.

   De aceea tot ce urmează se sprijină pe ce există: aceiași tokeni, aceleași
   pastile, aceleași raze, aceeași tipografie. Singurele lucruri cu adevărat
   noi pe ecran sunt trei, și fiecare are un rost care nu putea fi împlinit
   altfel: banda părților (care spune unde ești în piesă), semaforul
   ASCULTĂ / RĂSPUNDE (care spune al cui e rândul), și foaia examenului
   (care e ultimul lucru din curs și n-are voie să arate ca al șaptelea
   exercițiu dintr-o lecție).
   ========================================================================= */

/* ---- punctele etapelor (● ● ● ● ○ ○ ○ ○) ----
   Bara de progres rămâne, fiindcă ea spune „cât din drum”. Punctele spun
   altceva: câte au mai rămas. La opt etape numărate, a doua întrebare are
   răspuns dintr-o privire; la o bară, nu. */

.dbc-etape {
  display: flex;
  gap: .35em;
  margin: var(--s-2) 0 0;
  font-size: .95rem;
  line-height: 1;
  color: var(--line-strong);
}
.dbc-etape__p { transition: color .2s ease; }
.dbc-etape__p.is-done { color: var(--accent); }
.dbc-etape__p.is-now {
  color: var(--brand-orange-ink);
  transform: scale(1.25);
}

/* ---- banda părților piesei ----
   O bandă, nu butoane: părțile nu se aleg, ele vin. Se citește însă dinainte,
   și tocmai de-aia stă deasupra grilei — un elev care vede scris ce urmează
   știe jumătate din ce înseamnă să acompaniezi. */

.dbc-parti {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin: 0 0 var(--s-3);
}
.dbc-parti__p {
  padding: .2em .7em;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--bg-sunken);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--text-muted);
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dbc-parti__p.is-on {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bg);
}
@media (prefers-reduced-motion: reduce) {
  .dbc-parti__p { transition: none; }
  .dbc-etape__p { transition: none; }
}

/* ---- semaforul ASCULTĂ / RĂSPUNDE, cu numărătoarea 3 – 2 – 1 ----
   Rândul de text de sub grilă era destul pentru o măsură. La patru, elevul
   are ochii pe grilă și nu-l mai vede — deci starea urcă deasupra ei, mare
   cât să se citească din colțul ochiului. */

.dbc-cr__semafor {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  min-height: 2.6rem;
  margin: 0 0 var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
}
.dbc-cr__stare {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--text-muted);
}
.dbc-cr__nr {
  margin: 0;
  min-width: 2.2ch;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--brand-orange-ink);
}
.dbc-cr__semafor.is-asculta {
  border-left-color: var(--db-tek);
  background: var(--db-tek-soft);
}
.dbc-cr__semafor.is-asculta .dbc-cr__stare { color: var(--db-tek); }
.dbc-cr__semafor.is-raspunde {
  border-left-color: var(--ok);
  background: var(--ok-soft);
}
.dbc-cr__semafor.is-raspunde .dbc-cr__stare { color: var(--ok); }
.dbc-cr__semafor.is-gata { border-left-color: var(--line-strong); }

/* ---- ce se spune pe loc, la o măsură liberă ---- */
.dbc-play__zice.is-liber { color: var(--db-ka); }

/* ---- foaia examenului final ----
   Șase capitole și un scor. Arată altfel decât foaia unui exercițiu fiindcă
   ESTE altceva: e ultimul lucru din curs, iar din el iese un rang. */

.dbc-scor.dbc-examen {
  border: 1px solid var(--gold-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  background: var(--gold-soft);
}
.dbc-examen__tag {
  margin: 0 0 var(--s-4);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--gold);
}
.dbc-examen__list { list-style: none; margin: 0; padding: 0; }
.dbc-examen__row {
  display: grid;
  grid-template-columns: 8.5rem 1fr 3.2rem;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--gold-line);
}
.dbc-examen__row:last-child { border-bottom: 0; }
.dbc-examen__nume {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--text-muted);
}
.dbc-examen__bara {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--bg-sunken);
  overflow: hidden;
}
.dbc-examen__fill {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--gold);
}
.dbc-examen__val {
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 800;
  color: var(--text);
}

.dbc-examen__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin: var(--s-5) 0 0;
  padding-top: var(--s-4);
  border-top: 2px solid var(--gold-line);
}
.dbc-examen__total-nume {
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--text-muted);
}
.dbc-examen__total strong {
  font-size: clamp(2rem, 1.4rem + 3vw, 3rem);
  font-family: var(--font-mono);
  line-height: 1;
  color: var(--text);
}

.dbc-examen__drumuri {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: var(--s-5) 0 0;
}
.dbc-examen .db-btn { margin: 0; }

/* ---- rangul ----
   „Rangul trebuie prezentat elegant, nu ca într-o joacă pentru copii”, cere
   brieful. Deci: fără insignă, fără sclipici, fără animație de trofeu. Un
   cuvânt scris mare, cu spațiere largă, și o propoziție sub el. */

.dbc-rang {
  margin: var(--s-5) 0 0;
  padding: var(--s-4) 0 0;
  border-top: 1px solid var(--gold-line);
  text-align: center;
}
.dbc-rang__eticheta {
  margin: 0 0 var(--s-2);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--text-muted);
}
.dbc-rang__nume {
  margin: 0;
  font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.1;
  color: var(--gold);
}
.dbc-rang__spus {
  max-width: 44ch;
  margin: var(--s-3) auto 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ---- insigna examenului (👑) ----
   Plină, ca cele două ale Nivelului 6, și din același motiv: apare o singură
   dată în tot nivelul, iar acolo chiar e altceva. */
.dbc-insigna--examen {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--bg);
}

/* ---- ecranul final al cursului ----
   „Efect foarte subtil de particule sau lumină, dar NU confetti infantil.”
   Deci: trei inele care se destind o dată din membrană, ca rezonanța ultimei
   lovituri, și se opresc. Nimic nu cade, nimic nu explodează. */

.dbc-outro--final {
  border-color: var(--gold-line);
  background: var(--gold-soft);
}
.dbc-final__desen {
  max-width: 190px;
  margin: 0 auto var(--s-4);
}
.dbc-final__svg { width: 100%; height: auto; display: block; }

.dbc-final__corp {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3;
  stroke-linejoin: round;
}
.dbc-final__piele {
  fill: var(--bg-raised);
  stroke: var(--gold);
  stroke-width: 3;
}
.dbc-final__talpa {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3;
  opacity: .55;
}
.dbc-final__unda {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  opacity: 0;
  transform-origin: 100px 50px;
  animation: dbc-rezonanta 2.7s ease-out 3;
}
@keyframes dbc-rezonanta {
  0%   { opacity: .55; transform: scale(.8); }
  100% { opacity: 0;   transform: scale(2.1); }
}
@media (prefers-reduced-motion: reduce) {
  .dbc-final__unda { animation: none; opacity: .18; }
}

/* ---- improvizația liberă ---- */

.dbc-liber .db-controls { margin-top: var(--s-4); }

.dbc-liber__unde {
  margin: var(--s-4) 0 0;
  font-family: var(--font-mono);
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-muted);
}

.dbc-liber--incuiat { text-align: center; }
.dbc-liber__lacat {
  margin: 0 0 var(--s-3);
  font-size: 2.2rem;
  line-height: 1;
}
.dbc-liber__ce {
  display: inline-block;
  margin: var(--s-4) 0;
  padding: 0;
  list-style: none;
  text-align: left;
  color: var(--text-muted);
  font-size: .92rem;
  line-height: 1.9;
}
.dbc-liber__ce li::before {
  content: "·";
  margin-right: .6em;
  color: var(--accent);
  font-weight: 800;
}

.dbc-liber__rang {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-pill);
  background: var(--gold-soft);
}
.dbc-liber__rang-eticheta {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--text-muted);
}
.dbc-liber__rang strong {
  font-size: 1rem;
  letter-spacing: .1em;
  color: var(--gold);
}
.dbc-liber__rang-cifra {
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: 800;
  color: var(--text-muted);
}

/* ---- pe telefon ----
   Numele capitolelor din foaia examenului nu mai încap pe un rând cu bara
   lor. Trec deasupra ei, iar cifra rămâne la dreapta: două rânduri se
   citesc, o coloană de 4 litere tăiate nu. */
@media (max-width: 520px) {
  .dbc-examen__row {
    grid-template-columns: 1fr 3.2rem;
    grid-template-areas: "nume val" "bara bara";
    row-gap: var(--s-1);
  }
  .dbc-examen__nume { grid-area: nume; }
  .dbc-examen__val  { grid-area: val; }
  .dbc-examen__bara { grid-area: bara; }
  .dbc-cr__semafor { flex-wrap: wrap; }
}