/* ============================================================
   ATELIERUL LUI BIT — înfățișarea jocului
   ============================================================

   Scena are 1600 x 900 de puncte și atât are oricând; potrivirea la
   ecran se face dintr-un singur loc, mărimea `--scara` din ecran.js.
   Toate mărimile de aici sunt în puncte de-ale scenei.

   AȘEZAREA PE SCENĂ
     sus        — antetul (16–82) și nivelurile (92–148);
     mijloc     — de la 162 la 812: lista din stânga (24–324), carcasa
                  (340–1036) și panoul din dreapta (1054–1576);
     jos        — butoanele (826–884).
   Nivelul 2 nu are carcasă: Bit stă în stânga, variantele în dreapta.
   ============================================================ */

:root {
  --albastru: #2f7ff0;
  --albastru-inchis: #1b5fd0;
  --albastru-deschis: #e8f1ff;
  --bleumarin: #13264a;
  --cerneala: #1f2d45;
  --gri: #5b6b82;
  --verde: #22a45d;
  --verde-deschis: #e3f7ec;
  --rosu: #e0493a;
  --rosu-deschis: #fdeceb;
  --galben: #ffc53d;
  --alb: #ffffff;
  --umbra: 0 10px 28px rgba(19, 38, 74, 0.1), 0 2px 6px rgba(19, 38, 74, 0.06);
  --scara: 1;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--cerneala);
  background: #0e2a63;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.foaie-desene {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

button { font: inherit; color: inherit; }

/* ============================================================
   RAMA ȘI SCENA
   ============================================================ */

.rama {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scena {
  position: relative;
  width: 1600px;
  height: 900px;
  flex: none;
  overflow: hidden;
  transform: scale(var(--scara));
  transform-origin: center center;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.9), transparent 38%),
    radial-gradient(circle at 90% 95%, rgba(197, 222, 255, 0.8), transparent 45%),
    linear-gradient(180deg, #f4f8ff, #e6f0fd);
}

.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
}

/* ============================================================
   ANTETUL
   ============================================================ */

.antet {
  position: absolute;
  top: 14px;
  left: 24px;
  right: 24px;
  height: 70px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.antet__bit {
  width: auto;
  height: 68px;
}

.antet__titlu { flex: 1; }

.antet__joc {
  margin: 0;
  font-size: 34px;
  font-weight: 800;
  color: var(--bleumarin);
  line-height: 1.05;
}

.antet__nivel {
  margin: 2px 0 0;
  font-size: 21px;
  color: var(--gri);
}

.antet__dreapta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pastila {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 22px;
  border-radius: 28px;
  background: var(--alb);
  box-shadow: var(--umbra);
  font-size: 23px;
  font-weight: 700;
  color: var(--bleumarin);
  white-space: nowrap;
}

.pastila .semn { width: 30px; height: 30px; }

.rotund {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--alb);
  color: var(--albastru);
  box-shadow: var(--umbra);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.rotund svg { width: 28px; height: 28px; }
.rotund[aria-pressed="false"] { color: #9aa7b8; }
.rotund[aria-pressed="false"] .unde { display: none; }

/* ============================================================
   NIVELURILE
   ============================================================ */

.trepte {
  position: absolute;
  top: 92px;
  left: 24px;
  right: 24px;
  height: 56px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.treapta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px 0 8px;
  border: 2px solid transparent;
  border-radius: 28px;
  background: var(--alb);
  box-shadow: var(--umbra);
  font-size: 21px;
  font-weight: 600;
  color: var(--bleumarin);
  cursor: pointer;
  text-align: left;
}

.treapta__nr {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--albastru-deschis);
  color: var(--albastru-inchis);
  font-weight: 800;
}

.treapta__nume { flex: 1; }

.treapta__stele {
  color: var(--galben);
  font-size: 20px;
  letter-spacing: -2px;
  text-shadow: 0 1px 0 #d08b00;
}

.treapta[aria-current="step"] {
  background: linear-gradient(180deg, #4b95ff, var(--albastru));
  color: var(--alb);
}

.treapta[aria-current="step"] .treapta__nr {
  background: var(--alb);
  color: var(--albastru-inchis);
}

/* Nivel închis: lacătul ia locul cifrei. */
.treapta:disabled {
  cursor: default;
  color: #8a97aa;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.6);
}

.treapta:disabled .treapta__nr {
  color: transparent;
  background: #eef2f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='10' width='14' height='10' rx='2' fill='%238a97aa'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3' fill='none' stroke='%238a97aa' stroke-width='2.2'/%3E%3C/svg%3E") center / 22px no-repeat;
}

/* ============================================================
   LISTA DIN STÂNGA — meniul (nivelul 1) și tava (nivelul 3)
   ============================================================ */

.lista-piese {
  position: absolute;
  top: 162px;
  left: 24px;
  width: 300px;
  height: 650px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lista-piese li { flex: 1; display: flex; }

.piesa {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px 0 10px;
  border: 3px solid transparent;
  border-radius: 18px;
  background: var(--alb);
  box-shadow: var(--umbra);
  font-size: 23px;
  font-weight: 600;
  color: var(--bleumarin);
  text-align: left;
  cursor: pointer;
  touch-action: none;
}

.piesa__desen {
  flex: none;
  width: 92px;
  height: 58px;
}

.piesa__nume { flex: 1; }

.piesa__bifa {
  display: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--verde);
  color: var(--alb);
  place-items: center;
}

.piesa__bifa svg { width: 18px; height: 18px; }

.piesa[aria-pressed="true"],
.piesa[aria-current="true"] {
  border-color: var(--albastru);
  background: var(--albastru-deschis);
  color: var(--albastru-inchis);
}

/* Nivelul 1: componenta deja văzută primește bifa. */
.piesa.vazuta .piesa__bifa { display: grid; }

/* Nivelul 3: piesa montată rămâne pe listă, stinsă și bifată. */
.piesa.montata {
  cursor: default;
  opacity: 0.55;
  box-shadow: none;
}

.piesa.montata .piesa__bifa { display: grid; }

.piesa.tremura { animation: tremura 0.4s; }

@keyframes tremura {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

/* ============================================================
   CARCASA
   ============================================================ */

.carcasa {
  position: absolute;
  top: 162px;
  left: 340px;
  width: 696px;
  height: 650px;
}

.carcasa__desen {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 18px 24px rgba(19, 38, 74, 0.22));
}

.parte {
  transition: opacity 0.25s;
}

.parte.lipsa { display: none; }

body[data-nivel="1"] .parte { cursor: pointer; }
.parte.estompat { opacity: 0.4; }
.parte.ascuns { opacity: 0.07; }

.parte.apare {
  transform-box: fill-box;
  transform-origin: center;
  animation: apare 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes apare {
  from { transform: scale(1.18); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.contur {
  fill: none;
  stroke: var(--albastru);
  stroke-width: 7;
  pointer-events: none;
  animation: clipeste 1.4s ease-in-out infinite;
}

.zona-indiciu {
  fill: rgba(47, 127, 240, 0.22);
  stroke: #7fb4ff;
  stroke-width: 7;
  stroke-dasharray: 22 14;
  pointer-events: none;
  animation: clipeste 1s ease-in-out infinite;
}

.contur.gol, .zona-indiciu.gol { display: none; }

@keyframes clipeste {
  0%, 100% { stroke-opacity: 1; }
  50% { stroke-opacity: 0.35; }
}

.zone {
  position: absolute;
  inset: 0;
}

.zona {
  position: absolute;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
}

.zona:focus-visible {
  outline: 4px dashed var(--albastru);
  outline-offset: -4px;
}

/* ============================================================
   PANOUL DIN DREAPTA
   ============================================================ */

.panou-dreapta {
  position: absolute;
  top: 162px;
  left: 1054px;
  width: 522px;
  height: 650px;
  padding: 22px 26px;
  border-radius: 26px;
  background: var(--alb);
  box-shadow: var(--umbra);
}

.info__nume {
  margin: 0;
  font-size: 38px;
  font-weight: 800;
  color: var(--bleumarin);
  line-height: 1.1;
}

.info__descriere {
  margin: 8px 0 0;
  font-size: 23px;
  line-height: 1.3;
  color: var(--gri);
}

.info__desen {
  display: block;
  width: 100%;
  height: 118px;
  margin: 12px 0;
  filter: drop-shadow(0 8px 10px rgba(19, 38, 74, 0.18));
}

.info__randuri {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info__rand {
  display: flex;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 12px;
  background: #f1f6fd;
  font-size: 20px;
  line-height: 1.25;
}

.info__rand dt { font-weight: 700; color: var(--bleumarin); white-space: nowrap; }
.info__rand dd { margin: 0; }

.montaj__progres {
  margin: 26px 0 10px;
  font-size: 26px;
  color: var(--bleumarin);
}

.bara-progres {
  height: 16px;
  border-radius: 8px;
  background: #e5edf8;
  overflow: hidden;
}

.bara-progres span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, #4bc07e, var(--verde));
  transition: width 0.4s;
}

/* ============================================================
   NIVELUL 2
   ============================================================ */

.ghicitoare {
  position: absolute;
  top: 162px;
  left: 580px;
  right: 24px;
  height: 650px;
  display: flex;
  flex-direction: column;
}

.ghicitoare__nr {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 700;
  color: var(--gri);
}

.variante {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
}

.varianta {
  position: relative;
  border: 4px solid transparent;
  border-radius: 26px;
  background: var(--alb);
  box-shadow: var(--umbra);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px;
  transition: transform 0.15s;
}

.varianta:hover:not(:disabled) { transform: translateY(-3px); }

.varianta svg {
  width: 84%;
  height: 190px;
  filter: drop-shadow(0 8px 10px rgba(19, 38, 74, 0.18));
}

.varianta__nume {
  font-size: 26px;
  font-weight: 700;
  color: var(--bleumarin);
  visibility: hidden;
}

.varianta.gresita {
  border-color: var(--rosu);
  background: var(--rosu-deschis);
  cursor: default;
  animation: tremura 0.4s;
}

.varianta.gresita .varianta__nume,
.varianta.corecta .varianta__nume { visibility: visible; }

.varianta.corecta {
  border-color: var(--verde);
  background: var(--verde-deschis);
}

.varianta:disabled { cursor: default; }

/* ============================================================
   BIT
   Locul lui se schimbă după nivel. Bula de vorbă și poza se așază
   separat, fiecare cu marginea ei.
   ============================================================ */

.bit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.bit__pozitii {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.bit__poza {
  display: none;
  width: auto;
  height: 100%;
  filter: drop-shadow(0 12px 14px rgba(19, 38, 74, 0.2));
}

.bit[data-poza="arata"] [data-pentru-poza="arata"],
.bit[data-poza="bucurie"] [data-pentru-poza="bucurie"],
.bit[data-poza="gandeste"] [data-pentru-poza="gandeste"],
.bit[data-poza="mira"] [data-pentru-poza="mira"],
.bit[data-poza="bravo"] [data-pentru-poza="bravo"] { display: block; }

.bit__vorba {
  position: absolute;
  margin: 0;
  padding: 16px 20px;
  border-radius: 22px;
  background: #eef5ff;
  border: 2px solid #cfe0fb;
  font-size: 21px;
  line-height: 1.35;
  color: var(--cerneala);
}

.bit__vorba:empty { display: none; }

.bit__vorba::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  background: #eef5ff;
  border: 2px solid #cfe0fb;
  border-top: 0;
  border-left: 0;
}

.bit__nota {
  display: block;
  margin: 14px -8px -4px;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.85em;
}

.bit__nota.bine { background: var(--verde-deschis); color: #13673a; }
.bit__nota.rau { background: #fff1dc; color: #8a4b00; }

.bit__vorba.bine { background: var(--verde-deschis); border-color: #a9e2c1; }
.bit__vorba.bine::after { background: var(--verde-deschis); border-color: #a9e2c1; }
.bit__vorba.rau { background: #fff5e6; border-color: #ffd699; }
.bit__vorba.rau::after { background: #fff5e6; border-color: #ffd699; }

/* Nivelul 1: Bit în colțul panoului, cu bula în stânga lui. */
body[data-nivel="1"] .bit__pozitii { right: 34px; bottom: 96px; height: 196px; width: 160px; }
body[data-nivel="1"] .bit__vorba { left: 1074px; width: 324px; bottom: 102px; }
body[data-nivel="1"] .bit__vorba::after { right: -13px; bottom: 34px; transform: rotate(-45deg); }

/* Nivelul 2: Bit mare, în stânga, cu ghicitoarea deasupra lui. */
body[data-nivel="2"] .bit__pozitii { left: 24px; width: 530px; bottom: 92px; height: 320px; }
body[data-nivel="2"] .bit__vorba { left: 24px; width: 530px; top: 162px; font-size: 29px; padding: 24px 28px; }
body[data-nivel="2"] .bit__vorba::after { left: 250px; bottom: -13px; transform: rotate(45deg); }

/* Nivelul 3: Bit jos, în panoul din dreapta, cu bula deasupra lui. */
body[data-nivel="3"] .bit__pozitii { right: 44px; bottom: 96px; height: 250px; width: 220px; }
body[data-nivel="3"] .bit__vorba { left: 1074px; width: 482px; bottom: 362px; }
body[data-nivel="3"] .bit__vorba::after { right: 120px; bottom: -13px; transform: rotate(45deg); }

/* ============================================================
   BARA DE JOS ȘI BUTOANELE
   ============================================================ */

.jos {
  position: absolute;
  top: 826px;
  left: 24px;
  right: 24px;
  height: 58px;
}

.jos__grup {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
}

.jos__intins { flex: 1; }

.jos__progres {
  font-size: 21px;
  color: var(--gri);
  margin-right: 8px;
}

.buton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 58px;
  padding: 0 28px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #4b95ff, var(--albastru));
  color: var(--alb);
  font-size: 23px;
  font-weight: 700;
  box-shadow: 0 6px 0 var(--albastru-inchis), 0 12px 22px rgba(47, 127, 240, 0.28);
  cursor: pointer;
  white-space: nowrap;
}

.buton:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--albastru-inchis); }
.buton svg { width: 26px; height: 26px; }

.buton--alb {
  background: var(--alb);
  color: var(--bleumarin);
  box-shadow: 0 5px 0 #d5e0ef, var(--umbra);
}

.buton--alb:active { box-shadow: 0 2px 0 #d5e0ef; }
.buton--alb svg { color: var(--albastru); }

.buton--galben {
  background: linear-gradient(180deg, #ffd45e, var(--galben));
  color: #5a3a00;
  box-shadow: 0 6px 0 #d79a00, 0 12px 22px rgba(255, 197, 61, 0.3);
}

.buton--galben:active { box-shadow: 0 3px 0 #d79a00; }

.buton--mare {
  height: 72px;
  padding: 0 48px;
  font-size: 30px;
  border-radius: 22px;
}

.buton:disabled { opacity: 0.5; cursor: default; }

/* Butonul „Ascultă" cât timp Bit vorbește. */
.buton--asculta.vorbeste {
  background: var(--albastru-deschis);
  color: var(--albastru-inchis);
  box-shadow: 0 5px 0 #b9d3fb;
}

.buton--asculta.vorbeste svg { animation: clipeste-semn 0.9s ease-in-out infinite; }

@keyframes clipeste-semn {
  50% { opacity: 0.35; }
}

/* ============================================================
   PIESA TRASĂ CU DEGETUL
   ============================================================ */

.fantoma {
  position: absolute;
  left: 0;
  top: 0;
  width: 170px;
  height: 120px;
  display: none;
  pointer-events: none;
  z-index: 30;
  transform: translate(-50%, -50%) rotate(-4deg);
  filter: drop-shadow(0 16px 18px rgba(19, 38, 74, 0.35));
}

.fantoma.vizibila { display: block; }
.fantoma svg { width: 100%; height: 100%; }

/* ============================================================
   PANOURILE — începutul și sfârșitul unui nivel
   ============================================================ */

.panou {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  /* Fără `backdrop-filter`: pe scena mărită din `transform`, estomparea
     ieșea peste marginile scenei, în benzile de pe laturi. */
  background: rgba(14, 42, 99, 0.55);
}

body[data-stare="start"] .panou--start,
body[data-stare="final"] .panou--final { display: flex; }

/* Ecranul de început acoperă tot: în spatele lui nu e încă un joc. */
.panou--start {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.95), transparent 45%),
    linear-gradient(180deg, #f4f8ff, #dceafd);
}

.panou__cutie {
  width: 1140px;
  display: flex;
  align-items: center;
  gap: 50px;
  padding: 44px 56px;
  border-radius: 36px;
  background: var(--alb);
  box-shadow: 0 30px 60px rgba(19, 38, 74, 0.25);
}

.panou__cutie--final { width: 1100px; }
.panou__cutie--final .panou__bit { height: 360px; }
.panou__butoane .buton--mare { padding: 0 32px; }

.panou__bit {
  flex: none;
  width: auto;
  height: 420px;
  filter: drop-shadow(0 16px 18px rgba(19, 38, 74, 0.2));
}

.panou__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.titlu-joc {
  margin: 0;
  font-size: 68px;
  font-weight: 800;
  line-height: 1;
  color: var(--bleumarin);
}

.titlu-joc--mic { font-size: 52px; }

.panou__subtitlu {
  margin: 0;
  font-size: 27px;
  line-height: 1.35;
  color: var(--gri);
}

.panou__unelte {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.panou__nota {
  margin: -6px 0 0;
  font-size: 19px;
  color: var(--gri);
}

.panou__butoane {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 6px;
}

.panou__legaturi {
  display: flex;
  gap: 28px;
  align-items: center;
}

.comutator {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 18px 0 12px;
  border: 2px solid #d5e0ef;
  border-radius: 26px;
  background: var(--alb);
  font-size: 21px;
  font-weight: 600;
  cursor: pointer;
}

.comutator__buton {
  position: relative;
  width: 48px;
  height: 28px;
  border-radius: 14px;
  background: #cfd8e5;
  transition: background 0.2s;
}

.comutator__buton::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--alb);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s;
}

.comutator[aria-pressed="true"] .comutator__buton { background: var(--albastru); }
.comutator[aria-pressed="true"] .comutator__buton::after { transform: translateX(20px); }

.buton-mic {
  height: 52px;
  padding: 0 20px;
  border: 2px solid #d5e0ef;
  border-radius: 26px;
  background: var(--alb);
  font-size: 21px;
  font-weight: 600;
  cursor: pointer;
}

.inapoi, .legatura {
  font-size: 21px;
  color: var(--albastru-inchis);
  text-decoration: none;
  font-weight: 600;
}

.legatura {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-decoration: underline;
  color: var(--gri);
}

.stele-mari {
  display: flex;
  gap: 10px;
}

.stele-mari svg {
  width: 84px;
  height: 84px;
}

.stele-mari .stea-plina { animation: apare 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.stele-mari .stea-plina:nth-child(2) { animation-delay: 0.15s; }
.stele-mari .stea-plina:nth-child(3) { animation-delay: 0.3s; }

button:focus-visible, a:focus-visible {
  outline: 4px solid rgba(47, 127, 240, 0.55);
  outline-offset: 3px;
}

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