/* ============================================================
   Jocurile pentru adunare, scădere, probă și probleme
   (joc-operatii.js). Toate clasele și animațiile încep cu jo-.
   ============================================================ */

.jo-joc { display: flex; flex-direction: column; gap: 12px; }
.jo-pasi { display: flex; justify-content: center; gap: 8px; }
.jo-pas { width: 14px; height: 14px; border-radius: 50%; background: var(--linie); transition: transform 0.2s, background 0.2s; }
.jo-pas[data-stare='acum'] { background: var(--albastru); transform: scale(1.3); }
.jo-pas[data-stare='gata'] { background: var(--verde); }

.jo-scena { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.jo-scena--noua { animation: jo-intra 0.4s ease-out backwards; }
.jo-cerinta { margin: 0; text-align: center; font-size: clamp(1.15rem, 3vw, 1.5rem); font-weight: 800; line-height: 1.35; }
.jo-calcul {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
  margin: 0; color: var(--albastru-inchis); font-size: clamp(1.7rem, 5.5vw, 2.6rem); font-weight: 900; text-align: center;
}
.jo-calcul--mic { font-size: clamp(1.25rem, 3.8vw, 1.7rem); color: var(--cerneala); }
.jo-calcule { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.jo-mesaj { min-height: 1.4em; margin: 0; color: #a35a00; font-size: clamp(1rem, 2.8vw, 1.25rem); font-weight: 800; text-align: center; }
.jo-indiciu { margin: 0; color: var(--cerneala-slaba); font-weight: 700; }
.jo-joc .jt-trage--acum { animation: none; }
/* Scuturarea la greșeală trece înaintea animațiilor de intrare. */
.jo-joc .scutura { animation: scutura 0.4s; }
.jo-joc .jt-tinta--gresit { animation: jt-scutura 0.4s; }

/* ---------- cartonașe și căsuțe ---------- */

.jo-carti { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.jo-carte {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 64px; min-height: 64px; padding: 6px 14px;
  border: 3px solid var(--albastru); border-radius: 16px; background: #fff;
  box-shadow: 0 4px 0 var(--albastru-inchis);
  color: var(--cerneala); font-size: clamp(1.6rem, 5vw, 2.2rem); font-weight: 900;
  animation: jo-sari-in 0.45s ease-out backwards;
}
.jo-carte--semn { border-color: #e0a800; background: #fff6d6; box-shadow: 0 4px 0 #b88a00; }
.jo-carte--pusa { visibility: hidden; }
.jo-carte--text {
  width: 100%; max-width: 640px; justify-content: flex-start;
  font-size: clamp(1rem, 2.8vw, 1.25rem); font-weight: 700; line-height: 1.4; text-align: left;
}
.jo-casuta {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 64px; min-height: 64px; padding: 0 8px;
  border: 3px dashed var(--albastru); border-radius: 14px; background: var(--albastru-pal);
  color: var(--verde);
}
.jo-casuta--semn { min-width: 60px; border-radius: 50%; border-color: #e0a800; background: #fff6d6; }
.jo-casuta--plina { border-style: solid; border-color: var(--verde); background: var(--verde-pal); animation: jo-umfla 0.4s; }
.jo-casuta--vie { border-style: solid; color: #d9534f; }

/* ---------- coșul cu mere ---------- */

.jo-pom { display: flex; flex-direction: column; align-items: center; width: min(100%, 560px); }
.jo-pom__coroana {
  display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 4px;
  width: 100%; min-height: 150px; padding: 26px 16px;
  border-radius: 48% 48% 42% 42%;
  background: radial-gradient(circle at 35% 30%, #8fdc78, #3f9f3a 72%);
  box-shadow: inset 0 -12px 0 rgb(0 0 0 / 0.1);
}
.jo-pom__trunchi { width: 46px; height: 40px; border-radius: 0 0 8px 8px; background: #8a5a2b; }
.jo-mar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; font-size: 2.6rem; line-height: 1;
  animation: jo-cade 0.5s ease-out backwards;
}
.jo-mar--pus { width: 40px; height: 40px; font-size: 1.8rem; }
.jo-cos {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
  width: min(100%, 440px); min-height: 150px; padding: 10px;
  border: 5px solid #b5793a; border-radius: 12px 12px 48px 48px;
  background: repeating-linear-gradient(45deg, #f3d39b 0 10px, #e9c27f 10px 20px);
}
.jo-cos__mere { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; min-height: 48px; }
.jo-cos__grup { display: flex; flex-wrap: wrap; justify-content: center; max-width: 200px; }
.jo-cos__plus { color: #7a4a14; font-size: 1.6rem; font-weight: 900; }
.jo-cos__calcul { margin: 0; padding: 2px 14px; border-radius: 12px; background: rgb(255 255 255 / 0.85); color: var(--albastru-inchis); font-size: clamp(1.5rem, 5vw, 2.2rem); font-weight: 900; }
.jo-cos--plin { animation: jo-salta 0.7s; }

/* ---------- broasca pe axă ---------- */

.jo-axa { width: min(100%, 760px); }
.jo-axa__sus { position: relative; height: 92px; }
.jo-broasca {
  position: absolute; bottom: 0; z-index: 2;
  font-size: clamp(2.2rem, 7vw, 3.4rem); line-height: 1;
  transform: translateX(-50%); transition: left 0.45s ease-in-out;
}
.jo-broasca__corp { display: inline-block; }
.jo-broasca--sare .jo-broasca__corp { animation: jo-salt 0.45s ease-in-out; }
.jo-axa__arc {
  position: absolute; bottom: 6px; height: 36px;
  border: 3px dashed var(--albastru); border-bottom: none; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  animation: jo-apare 0.3s backwards;
}
.jo-axa__pas { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); color: var(--albastru); font-size: 1rem; font-weight: 900; }
.jo-axa__linie { display: flex; border-top: 4px solid var(--cerneala); }
.jo-axa__nr {
  position: relative; flex: 1 1 0; min-width: 0; min-height: 60px; padding: 8px 0 0;
  border: none; border-radius: 0 0 12px 12px; background: none;
  color: var(--cerneala); font: inherit; font-size: clamp(1.15rem, 3.8vw, 1.9rem); font-weight: 800; cursor: pointer;
}
.jo-axa__nr::before { content: ''; position: absolute; top: -12px; left: 50%; width: 3px; height: 16px; margin-left: -1.5px; background: var(--cerneala); }
.jo-axa__nr:hover { background: var(--albastru-pal); }
.jo-axa__nr--start { color: var(--rosu); }
.jo-axa__nr--bine { background: var(--verde-pal); color: var(--verde); }

/* ---------- pescuitul ---------- */

.jo-pescuit__cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.jo-galeata { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 999px; background: var(--albastru-pal); font-size: 1.2rem; font-weight: 800; }
.jo-galeata__e { font-size: 2rem; line-height: 1; }
.jo-galeata--plina { animation: jo-umfla 0.4s; }
.jo-balta {
  position: relative; width: 100%; height: clamp(370px, 58vh, 500px); overflow: hidden;
  border-radius: 24px; background: linear-gradient(#bfe6ff, #6dbbf0 55%, #3d8fd1);
}
.jo-culoar {
  position: absolute; left: var(--x); display: flex; align-items: center;
  animation: jo-inoata-dr 20s linear infinite;
}
.jo-culoar--st { animation-name: jo-inoata-st; }
.jo-peste {
  display: inline-flex; align-items: center; gap: 4px; min-height: 56px; padding: 2px 14px 2px 6px;
  border: none; border-radius: 999px; background: rgb(255 255 255 / 0.85);
  color: var(--cerneala); font: inherit; font-size: clamp(1.15rem, 3.4vw, 1.5rem); font-weight: 900;
  white-space: nowrap; cursor: pointer; box-shadow: 0 3px 0 rgb(0 0 0 / 0.12);
}
.jo-culoar--dr .jo-peste { flex-direction: row-reverse; padding: 2px 6px 2px 14px; }
.jo-culoar--dr .jo-peste__e { transform: scaleX(-1); }
.jo-peste__e { display: inline-block; font-size: 2.3rem; line-height: 1; }
.jo-peste--prins { animation: jo-prins 0.7s ease-in forwards; }

/* ---------- cartonașele întoarse ---------- */

.jo-memorie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(100%, 680px); }
.jo-carton {
  position: relative; height: 100px; padding: 0; border: none; background: none;
  font: inherit; cursor: pointer; perspective: 700px;
  animation: jo-sari-in 0.4s ease-out backwards;
}
.jo-carton__in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.45s; }
.jo-carton--intors .jo-carton__in { transform: rotateY(180deg); }
.jo-carton__spate, .jo-carton__fata {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 4px; border-radius: 16px; font-weight: 900; text-align: center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.jo-carton__spate {
  border: 3px solid var(--albastru-inchis); color: #fff; font-size: 2.4rem;
  background: repeating-linear-gradient(45deg, var(--albastru) 0 12px, #4f8ff0 12px 24px);
}
.jo-carton__fata {
  border: 3px solid var(--albastru); background: #fff; color: var(--cerneala);
  font-size: clamp(1.05rem, 3.4vw, 1.6rem); transform: rotateY(180deg);
}
.jo-carton--gasit .jo-carton__fata { border-color: var(--verde); background: var(--verde-pal); color: #17783f; }

/* ---------- domino ---------- */

.jo-domino {
  display: flex; align-items: stretch; padding: 8px;
  border: 4px solid var(--cerneala); border-radius: 18px; background: #fff;
  box-shadow: 0 6px 0 rgb(0 0 0 / 0.15); transition: transform 0.9s ease-in-out;
}
.jo-domino--intors { transform: rotate(180deg); }
.jo-domino__jum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: clamp(96px, 26vw, 140px); aspect-ratio: 1; padding: 8px; }
.jo-domino__punct { border-radius: 50%; background: var(--cerneala); }
.jo-domino__linie { width: 4px; margin: 0 6px; background: var(--cerneala); }

/* ---------- cutiile cu bile ---------- */

.jo-masa { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 14px; min-height: 150px; width: 100%; }
.jo-cutie {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 92px; max-width: 220px; min-height: 110px; padding: 10px;
  border: 4px solid #c8914a; border-radius: 16px; background: #f7e3c0;
  animation: jo-sari-in 0.4s ease-out backwards;
}
.jo-cutie--noua { border-color: var(--albastru); background: var(--albastru-pal); }
.jo-cutie--gata { border-color: var(--verde); background: var(--verde-pal); }
.jo-cutie__bile { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 160px; font-size: 1.5rem; line-height: 1; }
.jo-cutie__nr { font-size: 1.9rem; font-weight: 900; }

/* ---------- hrănește animalul ---------- */

.jo-animal {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: clamp(130px, 30vw, 170px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #f4fbe9, #d6efc2);
}
.jo-animal__e { font-size: clamp(4.2rem, 14vw, 6rem); line-height: 1; }
.jo-animal__nr {
  position: absolute; right: 4px; top: 4px; display: grid; place-items: center;
  min-width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 3px solid var(--verde);
  font-size: 1.3rem; font-weight: 900;
}
.jo-animal--mananca .jo-animal__e { animation: jo-mananca 0.5s; }
.jo-hrana { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: min(100%, 600px); }
.jo-hrana__ob {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border: 2px solid var(--linie); border-radius: 14px; background: #fff;
  font-size: 2.5rem; line-height: 1;
  animation: jo-sari-in 0.4s ease-out backwards;
}
.jo-hrana__ob--mancat { border-style: dashed; background: transparent; font-size: 0; }
.jo-nr {
  position: absolute; top: -8px; right: -8px; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--albastru); color: #fff;
  font-size: 1rem; font-weight: 900; animation: jo-sari-in 0.3s backwards;
}

/* ---------- sortarea în cutii ---------- */

.jo-sortare__carti { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; }
.jo-sortare__cutii { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 10px; width: 100%; }
.jo-sertar {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; min-height: 150px; padding: 8px;
  border: 4px solid var(--albastru); border-radius: 0 0 26px 26px; background: var(--albastru-pal);
}
.jo-sertar__cap { color: var(--albastru-inchis); font-size: clamp(1.4rem, 5vw, 2.2rem); font-weight: 900; text-align: center; }
.jo-sertar__in { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.jo-sertar__mic { padding: 2px 8px; border-radius: 10px; background: #fff; font-size: 0.95rem; font-weight: 800; animation: jo-sari-in 0.4s backwards; }

/* ---------- cufărul ---------- */

.jo-placuta { padding: 4px 18px; border-radius: 14px; background: #fff6d6; border: 3px solid #e0a800; }
.jo-cufar { position: relative; display: flex; flex-direction: column; align-items: center; width: 170px; padding-top: 30px; }
.jo-cufar__capac {
  position: relative; z-index: 2; width: 170px; height: 48px;
  border: 4px solid #6b3e17; border-radius: 50px 50px 6px 6px; background: #a0622d;
  transform-origin: 6px 100%; transition: transform 0.6s ease-out;
}
.jo-cufar__corp {
  position: relative; display: grid; place-items: center; width: 170px; height: 86px;
  border: 4px solid #6b3e17; border-top-width: 2px; border-radius: 6px 6px 14px 14px;
  background: linear-gradient(90deg, transparent 44%, #e0a800 44% 56%, transparent 56%), #b8743a;
}
.jo-cufar__lacat { font-size: 2.4rem; line-height: 1; }
.jo-cufar__comoara { position: absolute; top: 44px; z-index: 1; font-size: 3rem; line-height: 1; opacity: 0; }
.jo-cufar--deschis .jo-cufar__capac { transform: rotate(-38deg); }
.jo-cufar--deschis .jo-cufar__comoara { animation: jo-comoara 0.9s 0.25s ease-out forwards; }
.jo-chei { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.jo-cheie {
  display: inline-flex; align-items: center; gap: 8px; min-height: 62px; padding: 6px 18px;
  border: 3px solid #e0a800; border-radius: 999px; background: #fff6d6;
  font-size: clamp(1.25rem, 4vw, 1.7rem); font-weight: 900; white-space: nowrap;
  animation: jo-sari-in 0.4s ease-out backwards;
}
.jo-cheie__e { font-size: 1.6em; line-height: 1; }
.jo-cheie--pusa { opacity: 0.35; }

/* ---------- balanța ---------- */

.jo-balanta { position: relative; width: min(100%, 560px); height: 270px; }
.jo-grinda {
  position: absolute; top: 130px; left: 6%; right: 6%; z-index: 2; height: 12px;
  border-radius: 6px; background: #6b4a2b;
  transform: rotate(var(--u, 0deg)); transition: transform 0.5s ease-in-out;
}
.jo-taler {
  position: absolute; bottom: 10px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  width: 44%; min-height: 110px;
  transform: rotate(calc(-1 * var(--u, 0deg))); transform-origin: 50% 100%; transition: transform 0.5s ease-in-out;
}
.jo-taler--st { left: -5%; }
.jo-taler--dr { right: -5%; }
.jo-taler__bile { display: flex; flex-wrap: wrap-reverse; justify-content: center; align-content: flex-start; gap: 3px; padding: 0 4px 2px; }
.jo-taler__vas { width: 100%; height: 16px; border-radius: 0 0 50% 50%; background: #c0c8d6; border: 3px solid #7a8699; border-top: none; }
.jo-bila { display: inline-block; width: 22px; height: 22px; padding: 0; border: none; border-radius: 50%; }
.jo-bila--verde { background: radial-gradient(circle at 35% 35%, #8fe3a8, #23a05a); }
.jo-bila--galbena { background: radial-gradient(circle at 35% 35%, #ffe9a3, #e0a800); }
.jo-bila--rosie { width: 28px; height: 28px; background: radial-gradient(circle at 35% 35%, #ffb0ad, #d9534f); cursor: pointer; animation: jo-cade 0.35s backwards; }
.jo-balanta__picior {
  position: absolute; top: 136px; left: 50%; width: 0; height: 0; margin-left: -34px;
  border-left: 34px solid transparent; border-right: 34px solid transparent; border-bottom: 100px solid #8a6a4a;
}
.jo-balanta__numere { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 0 2%; }
.jo-balanta__nr { min-width: 3.5em; padding: 2px 10px; border-radius: 12px; background: #fff; font-size: 1.4rem; font-weight: 900; text-align: center; }
.jo-balanta--dreapta .jo-grinda { background: var(--verde); }
.jo-gramada { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 60px; }
.jo-bila-mare {
  display: inline-block; width: 58px; height: 58px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffb0ad, #d9534f 70%);
  box-shadow: 0 4px 0 #a33a37;
  animation: jo-sari-in 0.35s ease-out backwards;
}

/* ---------- bețișoarele în tabelul Z | U ---------- */

.jo-tava {
  display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 860px; overflow: hidden;
  border: 4px solid var(--cerneala); border-radius: 18px; background: #fffdf5;
}
.jo-tava__col { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; min-height: 150px; padding: 8px; }
.jo-tava__col + .jo-tava__col { border-left: 4px solid var(--cerneala); }
.jo-tava__cap { color: var(--rosu); font-size: 1.6rem; font-weight: 900; }
.jo-tava__ob { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 82px; }
.jo-tava__nr { font-size: 2rem; font-weight: 900; color: var(--albastru-inchis); }
.jo-tava__col--plin { background: #fff3c4; cursor: pointer; animation: jo-puls 1s infinite; }
.jo-tava__col--leaga .jo-bat { animation: jo-strange 0.5s ease-in forwards; }
.jo-tava--gata { border-color: var(--verde); }
.jo-manunchi, .jo-bat { display: inline-block; flex: none; width: 56px; height: 80px; }
.jo-manunchi {
  background:
    linear-gradient(#d9534f, #d9534f) center / 46px 10px no-repeat,
    repeating-linear-gradient(90deg, #e0a800 0 3px, transparent 3px 4px) center / 40px 72px no-repeat;
}
.jo-bat { background: linear-gradient(#e0a800, #e0a800) center / 8px 72px no-repeat; }
.jo-nou { animation: jo-cade 0.4s ease-out backwards; }
.jo-surse { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.jo-sursa {
  display: flex; flex-direction: column; align-items: center; padding: 6px 12px;
  border: 3px solid var(--albastru); border-radius: 16px; background: var(--albastru-pal);
}
.jo-sursa__nr { font-size: 1.3rem; font-weight: 900; }
.jo-lucru { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; }
.jo-lucru > .jo-tava { flex: 3 1 420px; width: auto; }
.jo-lucru__parte { display: flex; flex: 1 1 200px; flex-direction: column; align-items: stretch; justify-content: center; gap: 12px; }
.jo-lucru__parte > .jo-indiciu { text-align: center; }
.jo-luate {
  display: flex; flex-direction: column; align-items: center; min-height: 120px; padding: 8px;
  border: 4px dashed var(--rosu); border-radius: 18px; background: var(--rosu-pal);
}
.jo-luate__cap, .jo-foarfeca__t { font-size: 1.3rem; font-weight: 900; }
.jo-luate__in { display: flex; flex-wrap: wrap; justify-content: center; }
.jo-luate__in > .jo-manunchi, .jo-luate__in > .jo-bat { zoom: 0.6; animation: jo-sari-in 0.3s backwards; }
.jo-foarfeca {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 110px; padding: 8px;
  border: 4px dashed var(--portocaliu); border-radius: 18px; background: #fff3e3;
}
.jo-foarfeca__e { font-size: 2.6rem; line-height: 1; }

/* ---------- trenul ---------- */

.jo-sina {
  width: 100%; overflow: hidden; padding: 6px 0 16px;
  background: linear-gradient(transparent calc(100% - 12px), #8a6a4a calc(100% - 12px) calc(100% - 7px), transparent calc(100% - 7px));
}
.jo-tren { display: flex; align-items: flex-end; justify-content: center; gap: 6px; width: 100%; }
.jo-tren__loco { flex: none; font-size: clamp(2.8rem, 10vw, 4.6rem); line-height: 1; }
.jo-tren__loc {
  position: relative; display: flex; flex: 0 1 170px; align-items: center; justify-content: center;
  min-width: 0; min-height: 76px; margin-bottom: 10px;
  border: 3px dashed var(--albastru); border-radius: 12px; background: var(--albastru-pal);
}
.jo-tren__loc::after {
  content: ''; position: absolute; bottom: -12px; left: 12%; right: 12%; height: 16px;
  background:
    radial-gradient(circle, #333 6px, transparent 7px) left / 16px 16px no-repeat,
    radial-gradient(circle, #333 6px, transparent 7px) right / 16px 16px no-repeat;
}
.jo-tren__nr { position: absolute; top: 2px; left: 6px; color: var(--albastru-inchis); font-weight: 900; }
.jo-vagon {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 96px; min-height: 66px; padding: 4px 10px; border-radius: 12px;
  color: #fff; font-size: clamp(1.1rem, 3.4vw, 1.6rem); font-weight: 900; white-space: nowrap;
  box-shadow: 0 4px 0 rgb(0 0 0 / 0.2);
  animation: jo-sari-in 0.4s ease-out backwards;
}
.jo-vagon--0 { background: #ef5b5b; }
.jo-vagon--1 { background: #2f6fde; }
.jo-vagon--2 { background: #23a05a; }
.jo-vagon--pus { width: 100%; min-width: 0; padding: 4px 2px; font-size: clamp(0.95rem, 3vw, 1.5rem); }
.jo-vagon__rez { font-size: 0.85em; }
.jo-tren--pleaca { animation: jo-pleaca 1.5s ease-in forwards; }
.jo-garaj { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; min-height: 76px; }
.jo-problema {
  max-width: 640px; margin: 0; padding: 10px 14px;
  border: 2px solid var(--linie); border-radius: 16px; background: #fff;
  font-size: clamp(1.05rem, 3vw, 1.3rem); line-height: 1.45;
}

/* ---------- problema jucată ---------- */

.jo-enunt { display: flex; flex-direction: column; gap: 4px; width: min(100%, 680px); }
.jo-enunt__fraza {
  margin: 0; padding: 6px 12px; border-radius: 12px; background: #fff;
  font-size: clamp(1.1rem, 3vw, 1.35rem); font-weight: 700;
  animation: jo-intra 0.4s ease-out backwards;
}
.jo-enunt__fraza--acum { background: #fff6d6; }
.jo-poveste { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; }
.jo-loc, .jo-afara {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; min-height: 130px; padding: 10px;
  border: 4px solid var(--linie); border-radius: 20px;
}
.jo-loc { flex: 2 1 260px; background: #fff; }
.jo-afara { flex: 1 1 180px; border-style: dashed; background: var(--albastru-pal); }
.jo-loc__nume, .jo-afara__nume { font-size: 1.1rem; font-weight: 800; }
.jo-loc__in, .jo-afara__in { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.jo-loc--autobuz { border-color: #d9a400; border-radius: 34px 34px 14px 14px; background: #ffe48a; }
.jo-loc--ramura { border-color: #8a5a2b; background: #eaf7e1; }
.jo-loc--cos { border-color: #b5793a; background: #f6e2bb; }
.jo-loc--raft { border-color: #8a5a2b; background: #f5e6d0; }
.jo-loc--acvariu { border-color: #3d8fd1; background: #cdeafc; }
.jo-loc--tava { border-color: #9aa3b0; background: #f0f2f5; }
.jo-loc--parcare { border-color: #7a8699; background: #e2e6ec; }
.jo-loc--cer { border-color: #9cc3f5; background: #e9f3ff; }
.jo-loc--merge { animation: jo-merge 0.9s ease-in-out; }
.jo-ob {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; font-size: 2.3rem; line-height: 1;
  animation: jo-sari-in 0.35s ease-out backwards;
}
.jo-ob--atinge { cursor: pointer; }
.jo-ob--dispare { animation: jo-sparge 0.4s forwards; pointer-events: none; }
.jo-raspuns { margin: 0; padding: 8px 16px; border-radius: 14px; background: var(--verde-pal); color: #17783f; font-size: clamp(1.15rem, 3.4vw, 1.4rem); font-weight: 800; text-align: center; }

/* ---------- ecrane mici ---------- */

@media (max-width: 600px) {
  .jo-tava { grid-template-columns: 1fr; }
  .jo-tava__col + .jo-tava__col { border-left: none; border-top: 4px solid var(--cerneala); }
  .jo-tava__col { min-height: 0; }
  .jo-lucru__parte { flex-direction: row; flex-wrap: wrap; }
  .jo-lucru__parte > .jo-luate, .jo-lucru__parte > .jo-foarfeca { flex: 1 1 0; min-width: 0; }
  .jo-lucru__parte > .jo-indiciu { flex-basis: 100%; }
  .jo-lucru__parte > .jo-surse { flex-basis: 100%; }
  .jo-memorie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jo-cufar, .jo-cufar__capac, .jo-cufar__corp { width: 140px; }
  .jo-sertar { min-height: 130px; padding: 6px 4px; }
  .jo-vagon { min-width: 84px; }
}

/* ---------- animațiile ---------- */

@keyframes jo-intra { from { opacity: 0; transform: translateY(14px); } }
@keyframes jo-sari-in { from { opacity: 0; transform: scale(0.4); } 70% { transform: scale(1.08); } }
@keyframes jo-cade { from { opacity: 0; transform: translateY(-30px); } }
@keyframes jo-apare { from { opacity: 0; } }
@keyframes jo-umfla { 50% { transform: scale(1.15); } }
@keyframes jo-salta { 30% { transform: translateY(-18px); } 60% { transform: translateY(0); } 80% { transform: translateY(-6px); } }
@keyframes jo-salt { 50% { transform: translateY(-38px); } }
@keyframes jo-inoata-dr { from { left: -200px; } to { left: 100%; } }
@keyframes jo-inoata-st { from { left: 100%; } to { left: -200px; } }
@keyframes jo-prins { to { transform: translateY(-160px) scale(0.4); opacity: 0; } }
@keyframes jo-mananca { 30% { transform: scale(1.15, 0.88); } 60% { transform: scale(0.95, 1.08); } }
@keyframes jo-comoara { to { opacity: 1; transform: translateY(-64px) scale(1.2); } }
@keyframes jo-puls { 50% { box-shadow: inset 0 0 0 6px #ffd65a; } }
@keyframes jo-strange { to { transform: scaleX(0.2); opacity: 0.4; } }
@keyframes jo-pleaca { 15% { transform: translateX(12px); } to { transform: translateX(-130vw); } }
@keyframes jo-merge { 30% { transform: translateX(-14px); } 70% { transform: translateX(14px); } }
@keyframes jo-sparge { to { transform: scale(1.6); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .jo-scena--noua, .jo-carte, .jo-mar, .jo-cutie, .jo-hrana__ob, .jo-cheie, .jo-bila-mare, .jo-bila--rosie,
  .jo-vagon, .jo-ob, .jo-carton, .jo-enunt__fraza, .jo-nou, .jo-nr, .jo-sertar__mic, .jo-axa__arc,
  .jo-cos--plin, .jo-galeata--plina, .jo-casuta--plina, .jo-loc--merge, .jo-tava__col--plin,
  .jo-animal--mananca .jo-animal__e, .jo-broasca--sare .jo-broasca__corp, .jo-luate__in > * { animation: none; }
  .jo-culoar { animation: none; }
  .jo-broasca, .jo-domino, .jo-grinda, .jo-taler, .jo-carton__in, .jo-cufar__capac { transition: none; }
  .jo-peste--prins, .jo-ob--dispare { animation: none; opacity: 0; }
  .jo-tren--pleaca { animation: none; opacity: 0.4; }
  .jo-cufar--deschis .jo-cufar__comoara { animation: none; opacity: 1; transform: translateY(-64px); }
  .jo-tava__col--leaga .jo-bat { animation: none; opacity: 0.4; }
}