@charset "UTF-8";
/* =========================================================================
   Sonor — Puzzle de acorduri V3
   Tokenii sunt copiați din sonor-site/public_html/assets/css/site.css, ca
   modulul să arate deja ca locul în care urmează să stea.
   ========================================================================= */

:root {
  --brand-blue:   #2b7fff;
  --brand-purple: #7c4dff;
  --brand-orange: #ff6a1a;
  --brand-navy:   #0b1533;
  --brand-gradient: linear-gradient(120deg, var(--brand-blue), var(--brand-purple) 45%, var(--brand-orange));
  --brand-orange-ink: #b8480c;

  --bg:        #ffffff;
  --bg-sunken: #f4f6fb;
  --bg-raised: #ffffff;

  --text:       #16203c;
  --text-muted: #5b678a;

  --line:        #dde3f0;
  --line-strong: #c3cce0;

  --accent:      #1f63d6;
  --accent-soft: #eaf1ff;

  --ok:      #0c7150;
  --ok-soft: #e6f6ef;
  --warn:      #8a5a00;
  --warn-soft: #fdf3e0;
  --bad:      #b3261e;
  --bad-soft: #fdeceb;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(11 21 51 / .06), 0 2px 8px rgb(11 21 51 / .05);
  --shadow-md: 0 4px 12px rgb(11 21 51 / .08), 0 12px 32px rgb(11 21 51 / .07);
  --shadow-lift: 0 10px 24px rgb(11 21 51 / .18), 0 24px 60px rgb(11 21 51 / .16);

  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem;

  --wrap: 1180px;
  --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Cifra degetului, scrisă în bulina din diagramă. Nu e „alb”: în tema
     închisă `--accent` e un albastru deschis, iar albul pe el nu se mai
     citește. Se schimbă odată cu tema, ca textul să rămână lizibil pe bulină. */
  --dg-ink: #ffffff;

  color-scheme: light;
}

/* Închis după sistem dacă vizitatorul n-a cerut deschis, iar data-theme bate
   pe amândouă — aceeași regulă ca a site-ului, deci blocul se mută ca atare. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0b1533;
    --bg-sunken: #08102a;
    --bg-raised: #121e42;
    --text:       #e9eefc;
    --text-muted: #a3b0d4;
    --line:        #22305c;
    --line-strong: #35477e;
    --accent:      #7fb0ff;
    --accent-soft: #16224a;
    --ok:      #4fd6a1;
    --ok-soft: #0e2d24;
    --warn:      #f0c26b;
    --warn-soft: #2e2413;
    --bad:      #ff8f86;
    --bad-soft: #331614;
    --brand-orange-ink: #ff8b4d;
    --dg-ink: #0b1533;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / .3), 0 2px 8px rgb(0 0 0 / .25);
    --shadow-md: 0 4px 12px rgb(0 0 0 / .35), 0 12px 32px rgb(0 0 0 / .3);
    --shadow-lift: 0 10px 24px rgb(0 0 0 / .5), 0 24px 60px rgb(0 0 0 / .45);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg:        #0b1533;
  --bg-sunken: #08102a;
  --bg-raised: #121e42;
  --text:       #e9eefc;
  --text-muted: #a3b0d4;
  --line:        #22305c;
  --line-strong: #35477e;
  --accent:      #7fb0ff;
  --accent-soft: #16224a;
  --ok:      #4fd6a1;
  --ok-soft: #0e2d24;
  --warn:      #f0c26b;
  --warn-soft: #2e2413;
  --bad:      #ff8f86;
  --bad-soft: #331614;
  --brand-orange-ink: #ff8b4d;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .3), 0 2px 8px rgb(0 0 0 / .25);
  --shadow-md: 0 4px 12px rgb(0 0 0 / .35), 0 12px 32px rgb(0 0 0 / .3);
  --shadow-lift: 0 10px 24px rgb(0 0 0 / .5), 0 24px 60px rgb(0 0 0 / .45);
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Regula pe care o are `site.css` de la bun început și care lipsea de aici:
   modulul e o pagină de sine stătătoare, cu foaia lui, deci n-a moștenit-o.
   Fără ea, o poză cu `width: 100%` tot poate ieși din ecran, fiindcă lățimea
   ei adevărată (1400px) rămâne mărimea minimă a cutiei în care stă. Se vedea
   pe telefon: textul intra în ecran, poza din antet ieșea prin dreapta — pe
   unele telefoane, nu pe toate, fiindcă browserele nu socotesc la fel. */
img { max-width: 100%; height: auto; }

/* `display` declarat aici ar bate regula din foaia browserului, iar panoul
   „Acordul ales” s-ar vedea gol de la încărcare. Aceeași capcană ca la
   pagina de test a microfonului. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg-sunken);
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--s-3); }
p { margin: 0 0 var(--s-3); }

.pz-wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-4); }

/* ------------------------------------------------------------------ antet */

.pz-banner {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: .9rem;
  text-align: center;
}
.pz-banner a { color: inherit; }

.pz-head { padding: var(--s-6) 0 var(--s-5); }
.pz-eyebrow {
  margin: 0 0 var(--s-2);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Ilustrația stă lângă titlu, nu peste el: textul rămâne primul lucru citit,
   iar poza spune din prima ce fel de lucru e pagina asta. */
/* `minmax(0, ...)`, nu `1fr` simplu, și `min-width: 0` pe fiecare copil: sunt
   două feluri de a spune același lucru — coloana are voie să se strângă sub
   mărimea conținutului. Altfel, mărimea minimă a unui element de grilă e
   lățimea adevărată a conținutului, adică 1400px pentru poza din antet, și
   coloana se umflă la atât. Nu toate browserele socotesc la fel, de aceea pe
   un telefon poza ieșea din ecran și pe altul nu. Nu le scoate. */
.pz-hero {
  display: grid; gap: var(--s-5); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 860px) {
  .pz-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}
.pz-hero > * { min-width: 0; }
.pz-hero__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

.pz-head h1 { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem); }
.pz-head h1 span {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pz-lead { max-width: 62ch; color: var(--text-muted); }

.pz-alert {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--bad-soft);
  color: var(--bad);
}

/* ----------------------------------------------------------------- panouri */

.pz-panel {
  margin-bottom: var(--s-5);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  box-shadow: var(--shadow-sm);
}
.pz-panel h2 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
}
.pz-step {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .95rem;
  font-weight: 700;
}
.pz-hint { color: var(--text-muted); font-size: .9rem; }

.pz-cols { display: grid; gap: var(--s-5); }
@media (min-width: 900px) {
  .pz-cols { grid-template-columns: 1fr 20rem; align-items: start; }
  .pz-cols > * { margin-bottom: 0; }
  /* Panoul acordului rămâne pe ecran cât timp derulezi tabla — altfel
     diagrama, care e motivul lui de a exista, iese din vedere exact când te
     uiți la piesa care o cere. */
  .pz-panel--picked { position: sticky; top: var(--s-4); }
}

/* --------------------------------------------------------------- filele

   Panoul acordului ales stă în afara filelor, ca diagrama să fie la vedere
   și când compui, și când joci. Filele schimbă doar coloana din stânga. */

.pz-tabs {
  display: flex;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  border-bottom: 2px solid var(--line);
}
.pz-tab {
  margin-bottom: -2px;
  padding: var(--s-3) var(--s-5);
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}
.pz-tab[aria-selected="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.pz-tab:hover { color: var(--text); }
.pz-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

/* Numai pentru cititoarele de ecran: locul gol trebuie anunțat, dar „?” nu
   spune nimic cu voce tare. */
.pz-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ tabla

   Chenarul e „tabla de puzzle”: adâncit, cu marginea punctată, ca să se vadă
   din prima că e un loc în care se pun lucruri. */

.pz-board {
  min-height: 8.5rem;
  padding: var(--s-4);
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background:
    linear-gradient(var(--bg-sunken), var(--bg-sunken)) padding-box,
    var(--bg-sunken);
  transition: border-color .16s ease, background-color .16s ease;
}
.pz-board.is-target {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.pz-board.is-playing { border-style: solid; border-color: var(--accent); }
.pz-board.is-full { animation: pz-shake .3s ease; }

@keyframes pz-shake {
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.pz-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--s-3);
  /* Mai larg pe verticală decât pe orizontală: însemnele ies din piesă cu
     9 px în sus (durata) și în jos (×2), iar pe un ecran îngust rândul se
     rupe des. Cu spațiul orizontal, cele două s-ar atinge. */
  row-gap: var(--s-5);
  min-height: 5.5rem;
}

.pz-empty {
  margin: 0;
  color: var(--text-muted);
  font-size: .95rem;
}
.pz-empty span { display: block; font-size: .85rem; }

/* ------------------------------------------------------------------ piese */

.pz-piece {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 5.5rem;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  color: var(--text);
  font-family: inherit;
  cursor: grab;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;

  /* Fără asta, pe telefon browserul înțelege mișcarea degetului ca derulare a
     paginii și piesa nu se poate muta deloc. E singurul lucru care face
     tragerea posibilă pe touch. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.pz-piece__name { font-size: 1.15rem; font-weight: 700; line-height: 1.1; }
.pz-piece__ro   { font-size: .72rem; color: var(--text-muted); white-space: nowrap; }

.pz-piece:hover { border-color: var(--accent); transform: translateY(-1px); }
.pz-piece:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.pz-piece:active { cursor: grabbing; }

/* piesa așezată pe tablă: puțin mai apăsată, cu o crestătură de puzzle */
.pz-piece--placed {
  border-color: var(--accent);
  background: linear-gradient(var(--bg-raised), var(--accent-soft));
}
.pz-piece--placed::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translateY(-50%) rotate(45deg);
  border-left: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  background: var(--bg-sunken);
  border-radius: 2px;
}

.pz-slot { position: relative; }

/* --------------------------------------------------------- durata piesei

   Piesa e lată cât ține acordul. E singurul fel în care durata se citește
   dintr-o privire, fără să se numere etichete — exact ca într-o partitură,
   unde nota lungă ocupă mai mult loc pe rând. */

.pz-slot[data-bars="0.5"] .pz-piece { min-width: 4.2rem; }
.pz-slot[data-bars="1"]   .pz-piece { min-width: 5.5rem; }
.pz-slot[data-bars="2"]   .pz-piece { min-width: 8rem; }
.pz-slot[data-bars="4"]   .pz-piece { min-width: 11rem; }

/* Eticheta stă pe muchia de sus, la mijloc: colțul din dreapta e al butonului
   de scos, iar laturile sunt ale barelor de repetiție. */
.pz-slot__bars {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 .4rem;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.55;
  white-space: nowrap;
  pointer-events: none;
}

/* ---------------------------------------------------- bare de repetiție

   Desenate din CSS, nu scrise cu glifele muzicale 𝄆 𝄇: fonturile de sistem
   nu le au aproape nicăieri și ar ieși pătrățele. O bară e o linie groasă,
   una subțire și două puncte — la fel ca pe hârtie. */

.pz-slot.is-rep-start { margin-left: 14px; }
.pz-slot.is-rep-end   { margin-right: 14px; }

/* crestătura de puzzle ar cădea exact peste bara de deschidere */
.pz-slot.is-rep-start .pz-piece--placed::before { display: none; }

.pz-bar {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 8px;
  pointer-events: none;
}
.pz-bar::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
.pz-bar::after {
  content: "";
  position: absolute;
  top: calc(50% - 6px);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--brand-purple);
  box-shadow: 0 9px 0 var(--brand-purple);
}

.pz-bar--open  { left: -14px; }
.pz-bar--open::before {
  border-left: 3px solid var(--brand-purple);
  border-right: 1px solid var(--brand-purple);
}
.pz-bar--open::after { right: 0; }

.pz-bar--close { right: -14px; }
.pz-bar--close::before {
  border-right: 3px solid var(--brand-purple);
  border-left: 1px solid var(--brand-purple);
}
.pz-bar--close::after { left: 0; }

.pz-slot__rep {
  position: absolute;
  right: 2px;
  bottom: -9px;
  padding: 0 .4rem;
  border-radius: var(--r-pill);
  background: var(--brand-purple);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.55;
  pointer-events: none;
}

.pz-slot__remove {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--bg-raised);
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease;
}
.pz-slot:hover .pz-slot__remove,
.pz-slot:focus-within .pz-slot__remove { opacity: 1; }
.pz-slot__remove:hover { border-color: var(--bad); color: var(--bad); }
.pz-slot__remove:focus-visible { opacity: 1; outline: 3px solid var(--accent); outline-offset: 2px; }

/* Pe touch nu există „hover”, deci butonul de scos ar fi invizibil pentru
   exact utilizatorii care nu pot trage piesa afară comod. */
@media (hover: none) {
  .pz-slot__remove { opacity: 1; }
}

/* acordul care se cântă acum */
.pz-slot.is-playing .pz-piece {
  border-color: var(--brand-orange);
  background: linear-gradient(var(--bg-raised), var(--warn-soft));
  transform: translateY(-3px);
  box-shadow: 0 0 0 3px rgb(255 106 26 / .25), var(--shadow-md);
}
.pz-slot.is-playing .pz-piece__name { color: var(--brand-orange-ink); }

/* golul care arată unde ar cădea piesa */
.pz-gap {
  width: 5.5rem;
  height: 4.1rem;
  border: 2px dashed var(--accent);
  border-radius: var(--r-md);
  background: var(--accent-soft);
}

/* piesa care se târăște după deget */
.pz-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  pointer-events: none;
  cursor: grabbing;
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
  opacity: .95;
}
.pz-ghost.is-out { border-color: var(--bad); opacity: .55; }

body.pz-dragging { cursor: grabbing; }
body.pz-dragging .pz-piece { cursor: grabbing; }

/* ----------------------------------------------------------------- cutia */

.pz-palette {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

/* -------------------------------------------------------------- transport */

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

.pz-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: filter .16s ease, border-color .16s ease;
}
.pz-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pz-btn:hover { filter: brightness(1.06); }
.pz-btn[disabled] { opacity: .5; cursor: not-allowed; filter: none; }

.pz-btn--primary { background: var(--brand-gradient); color: #fff; }
.pz-btn--stop    { background: var(--bad); color: #fff; }
.pz-btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
}

/* Tempo-ul stă pe rândul lui, sub transport: e un reglaj, nu o comandă, și
   la 390 px un cursor lipit de PLAY ar fi fost apucat din greșeală. */
.pz-tempo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px dashed var(--line);
}
.pz-tempo__label { font-size: .85rem; color: var(--text-muted); }
.pz-tempo__slider {
  flex: 1 1 11rem;
  max-width: 22rem;
  accent-color: var(--accent);
}
.pz-tempo__slider:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.pz-tempo__out {
  min-width: 5.2rem;
  font-family: var(--font-mono);
  font-size: .9rem;
  color: var(--accent);
}

.pz-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-width: 2.6rem;
  min-height: 2.25rem;   /* cât să se nimerească și cu degetul */
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
}
.pz-chip[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}
.pz-chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.pz-status {
  margin: var(--s-4) 0 0;
  font-size: .9rem;
  color: var(--text-muted);
}

/* ------------------------------------------------------ progresiile mele */

/* Ascunde de ochi, nu și de cititorul de ecran — aceeași regulă ca în
   site.css, adusă aici fiindcă modulul are foaia lui. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pz-save { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-3); }
.pz-save__field { flex: 1 1 14rem; min-width: 0; }
.pz-save__field input {
  width: 100%;
  padding: .6rem .8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
.pz-save__field input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }

.pz-saved { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.pz-saved__item { display: flex; gap: var(--s-2); align-items: stretch; }

/* Numele e butonul: toată suprafața deschide progresia, ca să fie ușor de
   nimerit cu degetul. Ștersul stă separat, mai mic, la capăt. */
.pz-saved__open {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  padding: .55rem .8rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg); color: var(--text);
  font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.pz-saved__open:hover { border-color: var(--accent); }
.pz-saved__meta { font-size: .78rem; font-weight: 400; color: var(--text-muted); }
.pz-saved__del {
  flex: none; width: 2.4rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--bg); color: var(--text-muted);
  font: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.pz-saved__del:hover { color: var(--bad); border-color: var(--bad); }

.pz-saved__foot {
  display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: baseline;
  margin: var(--s-4) 0 0;
}
.pz-saved__note { font-size: .8rem; color: var(--text-muted); }

.pz-link {
  padding: 0; border: 0; background: none;
  color: var(--text-muted); font: inherit; font-size: .85rem;
  text-decoration: underline; cursor: pointer;
}
.pz-link:hover { color: var(--text); }
.pz-link.is-armed { color: var(--bad); font-weight: 700; }

/* scorul blând din fila de joc */
.pz-game__score {
  margin: var(--s-2) 0 0;
  font-size: .85rem;
  color: var(--text-muted);
}
.pz-game__score.is-done { color: var(--ok); font-weight: 700; }

/* ---------------------------------------------------------- acordul ales */

.pz-panel--picked { text-align: center; }
.pz-picked__name  { margin: 0; font-size: 2.4rem; font-weight: 700; line-height: 1.1; }
.pz-picked__ro    { margin: 0 0 var(--s-4); color: var(--text-muted); }
.pz-picked__label {
  margin: 0 0 var(--s-1);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pz-picked__notes {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--accent);
}
.pz-picked__sub {
  margin: 0 0 var(--s-2);
  font-size: .82rem;
  color: var(--text-muted);
}

/* butoanele piesei de pe tablă — apar numai când e aleasă una */
.pz-edit {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  text-align: center;
}
.pz-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.pz-chip--wide {
  width: 100%;
  margin-bottom: var(--s-4);
}

/* ------------------------------------------------------ diagrama de chitară

   Desenul vine din puzzle-diagram.js și nu conține nicio culoare: tot ce se
   vede se hotărăște aici, ca diagrama să se poarte singură în ambele teme. */

.pz-picked__diagram {
  display: flex;
  justify-content: center;
  margin-bottom: var(--s-4);
}
.pz-dg {
  width: 150px;
  max-width: 100%;
  height: auto;
}
.pz-dg__grid  { stroke: var(--line-strong); stroke-width: 1.4; }
.pz-dg__nut   { fill: var(--text); }
.pz-dg__mark  { stroke: var(--text-muted); stroke-width: 1.8; fill: none; stroke-linecap: round; }
.pz-dg__dot,
.pz-dg__barre { fill: var(--accent); }
.pz-dg__finger { fill: var(--dg-ink); font-family: var(--font-sans); font-weight: 700; }
.pz-dg__fret   { fill: var(--text-muted); font-family: var(--font-sans); font-weight: 700; }

/* ---------------------------------------------------------- modul de joc */

/* Banda e desenată ca banner, în raport 2:1, cu titlul lipit de marginea de
   sus și butoanele de cea de jos. Se arată întreagă, fără `object-fit: cover`:
   orice decupare i-ar tăia exact capetele care contează. */
.pz-game__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-bottom: var(--s-4);
  border-radius: var(--r-md);
}

.pz-game__meta { margin-bottom: var(--s-1); font-size: 1.05rem; }
.pz-game__count {
  margin-left: var(--s-2);
  font-size: .85rem;
  color: var(--text-muted);
}

/* Tiparul cerut, scris cu litere mari: e enunțul problemei, deci trebuie să
   se citească de la distanța de la care se uită omul la tablă. */
.pz-game__target {
  margin: var(--s-4) 0 var(--s-3);
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, .9rem + .8vw, 1.5rem);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--accent);
}

.pz-chips--levels { justify-content: flex-start; margin-bottom: var(--s-4); }
.pz-chip.is-solved { border-color: var(--ok); color: var(--ok); }
.pz-chip.is-solved::after { content: "✓"; margin-left: .15em; }

.pz-verdict { margin: var(--s-4) 0 0; font-size: 1.05rem; font-weight: 600; }
.pz-verdict.is-ok   { color: var(--ok); }
.pz-verdict.is-bad  { color: var(--bad); }
.pz-verdict.is-info { color: var(--text-muted); font-weight: 400; }

/* Tabla jocului n-are goluri de inserare: locurile sunt fixe, deci nici
   rândul nu trebuie să respire la fel de mult. */
.pz-board--game { min-height: 6.5rem; }

/* locul gol din tipar */
.pz-hole {
  display: grid;
  place-items: center;
  min-width: 5.5rem;
  height: 4.1rem;
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  color: var(--text-muted);
  font-size: 1.4rem;
  font-weight: 700;
}

/* locul pe care ar cădea piesa trasă */
.pz-slot.is-drop .pz-hole {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.pz-slot.is-drop .pz-piece {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* acordul dat de nivel: se aude și se vede în diagramă, dar nu se mută */
.pz-piece--locked {
  border-color: var(--line-strong);
  background: var(--bg-sunken);
  cursor: pointer;
}
.pz-piece--locked::before { display: none; }   /* fără crestătura de puzzle */
.pz-piece--locked .pz-piece__name { color: var(--text-muted); }

/* ------------------------------------------------------------------ restul */

.pz-help { margin-top: var(--s-4); font-size: .9rem; }
.pz-help summary { cursor: pointer; color: var(--accent); }
.pz-help ul { margin: var(--s-3) 0; padding-left: 1.2rem; color: var(--text-muted); }
.pz-help li { margin-bottom: var(--s-1); }
.pz-help p { color: var(--text-muted); }
kbd {
  padding: 1px 6px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  font-family: var(--font-mono);
  font-size: .82em;
  color: var(--text);
}

.pz-foot {
  padding: var(--s-5) 0 var(--s-7);
  font-size: .85rem;
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}