/* /jocuri/caiet-priveste-potriveste/joc.css */
/* ============================================================
   PRIVEȘTE, POTRIVEȘTE, DESCOPERĂ! — aspectul
   ============================================================
   Foaia caietului stă în mijlocul ecranului, pe fundal de hârtie, cu
   culorile copertei. Desenele și butoanele sunt mari, de atins cu
   degetul pe tabla interactivă.
   ============================================================ */

:root {
  --hartie: #f6efdd;
  --foaie: #fffcf3;
  --cerneala: #1d2b4f;
  --cerneala-slaba: #59607a;
  --linie: #e7dcc0;
  --cer: #a9d3ec;
  --verde: #5f9e57;
  --verde-inchis: #3f7438;
  --galben: #f2b632;
  --rosu: #e2673f;
  --maro: #8a5a32;
  --rotunjire: 22px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
[hidden] { display: none !important; }

body {
  background:
    radial-gradient(circle at 10% 0%, #fff8e3 0, transparent 40%),
    radial-gradient(circle at 92% 6%, #e1f0fa 0, transparent 36%),
    var(--hartie);
  color: var(--cerneala);
  font-family: 'Segoe UI', 'Nunito', Roboto, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.ascuns {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.pagina {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 1500px;
  margin: 0 auto;
  padding: 10px clamp(12px, 2vw, 28px) 24px;
}

/* ---------- Fundalul: forme abia vizibile, care plutesc ---------- */

.fundal {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.fundal__forma {
  position: absolute;
  width: var(--marime);
  height: var(--marime);
  opacity: 0.14;
  transform: translate(-50%, -50%) rotate(var(--rotire));
  animation: pluteste 9s ease-in-out infinite alternate;
}
@keyframes pluteste {
  from { transform: translate(-50%, -50%) rotate(var(--rotire)); }
  to { transform: translate(-50%, calc(-50% - 18px)) rotate(calc(var(--rotire) + 8deg)); }
}
.pagina { position: relative; z-index: 1; }

/* ---------- Sus ---------- */

.sus {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.inapoi {
  color: var(--cerneala);
  font-weight: 600;
  text-decoration: none;
  padding: 8px 4px;
}
.inapoi:hover { text-decoration: underline; }
.titlu {
  margin: 0;
  text-align: center;
  font-size: clamp(1.1rem, 2.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: 0.01em;
}
body[data-vedere='coperta'] .sus__cuprins { visibility: hidden; }

@media (max-width: 640px) {
  .sus { grid-template-columns: 1fr auto; }
  .titlu { grid-column: 1 / -1; grid-row: 2; }
}

.scena { flex: 1; outline: none; }

/* ---------- Butoane ---------- */

.buton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 10px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--cerneala);
  color: #fff;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
}
.buton:hover { filter: brightness(1.12); }
.buton .scurt { display: none; }
@media (max-width: 640px) {
  .buton { min-height: 46px; padding: 8px 16px; font-size: 1rem; white-space: nowrap; }
  .foaie__pagina { min-width: 44px; height: 44px; }
  .foaie__jos { gap: 8px; }
  .buton .lung { display: none; }
  .buton .scurt { display: inline; }
  .rand { gap: 8px; }
  .rand__sageata { font-size: 1.4rem; }
  .rand__model, .varianta { width: 68px; padding: 6px; border-radius: 14px; }
  .rand__variante { gap: 8px; }
}
.buton:focus-visible, [role='button']:focus-visible, .cuprins a:focus-visible {
  outline: 4px solid var(--galben);
  outline-offset: 3px;
}
.buton--mare { font-size: 1.4rem; min-height: 64px; padding: 12px 40px; }
.buton--simplu {
  background: #fff;
  color: var(--cerneala);
  border: 2px solid var(--linie);
  box-shadow: none;
}
.buton--gata {
  background: var(--verde);
  animation: indeamna 1.6s ease-in-out 3;
}
@keyframes indeamna { 50% { transform: scale(1.07); } }

/* ---------- Coperta ---------- */

.coperta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.coperta__carte {
  position: relative;
  width: min(100%, 900px, calc((100dvh - 175px) * 0.7076));
  aspect-ratio: 1055 / 1491;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 2px 0 #e2d6b6, 0 18px 40px rgba(60, 45, 20, 0.25);
  cursor: pointer;
  user-select: none;
}
.coperta__poza { display: block; width: 100%; height: 100%; }
.coperta__piesa { position: absolute; transform: rotate(var(--rotire)); pointer-events: none; }

/* Ochii nimfei: pleoapa coboară și urcă o dată la 5 secunde. */
.coperta__ochi {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}
.coperta__pleoapa {
  position: relative;
  width: 100%;
  height: 125%;
  background: linear-gradient(180deg, #f2b67e 0%, #eeae76 70%, #e39e66 100%);
  border-radius: 0 0 50% 50% / 0 0 30% 30%;
  box-shadow: inset 0 -3px 0 rgba(43, 26, 18, 0.7);
  transform: translateY(-101%);
  animation: clipeste 5s ease-in-out infinite;
  animation-delay: 1.2s;
}
/* Ochiul închis: o linie arcuită, cu genele în jos. */
.coperta__pleoapa::after {
  content: '';
  position: absolute;
  left: 14%;
  right: 14%;
  top: 34%;
  height: 22%;
  border-bottom: 4px solid #2b1a12;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
@keyframes clipeste {
  0%, 86%, 100% { transform: translateY(-101%); }
  89%, 90% { transform: translateY(-12%); }
  93% { transform: translateY(-101%); }
}

/* Cascada: dungi albe care coboară. */
.coperta__cascada {
  position: absolute;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 0 9px, rgba(255, 255, 255, 0.7) 9px 13px, rgba(255, 255, 255, 0) 13px 22px);
  background-size: 100% 22px;
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 9px, #000 9px 12px, transparent 12px 17px);
  mask-image: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 9px, #000 9px 12px, transparent 12px 17px);
  opacity: 0.4;
  filter: blur(0.6px);
  animation: cade 0.7s linear infinite;
}
@keyframes cade { to { background-position: 0 22px; } }
.coperta__spuma {
  position: absolute;
  width: 2.2%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 70%);
  filter: blur(1px);
  transform: translate(-50%, -50%);
  animation: spuma 1.8s ease-in-out infinite;
}
@keyframes spuma { 50% { transform: translate(-50%, -65%) scale(1.25); opacity: 0.4; } }

.coperta__unduire {
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.coperta__frunze {
  position: absolute;
  pointer-events: none;
  animation: leagana 4.5s ease-in-out infinite alternate;
}
@keyframes leagana {
  from { transform: rotate(calc(var(--unghi) * -0.4)); }
  to { transform: rotate(var(--unghi)); }
}

/* Sclipiciul: puncte foarte mici, care se aprind, urcă puțin și se sting. */
.coperta__sclipici, .coperta__praf {
  position: absolute;
  width: var(--m);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 30%, rgba(var(--c), 0.95) 45%, rgba(var(--c), 0) 72%);
  box-shadow: 0 0 4px 1px rgba(var(--c), 0.55);
  pointer-events: none;
}
.coperta__sclipici {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  animation: sclipeste 3s ease-in-out infinite;
}
@keyframes sclipeste {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  45% { opacity: 1; transform: translate(calc(-50% + var(--dx) * 0.5), calc(-50% + var(--dy) * 0.5)) scale(1); }
  60% { opacity: 0.9; }
  90% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.5); }
}

/* Unde pe apă: două arcuri albe care se lărgesc și se sting. */
.coperta__unda {
  position: absolute;
  width: 4.5%;
  height: 1.3%;
  transform: translate(-50%, -50%);
  border-top: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50% 50% 0 0;
  opacity: 0;
  animation: unda 4s ease-in-out infinite;
}
.coperta__unda::after {
  content: '';
  position: absolute;
  left: 30%;
  right: -40%;
  top: 40%;
  height: 100%;
  border-top: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50% 50% 0 0;
}
@keyframes unda {
  0% { opacity: 0; transform: translate(-60%, -50%) scale(0.6); }
  40% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-30%, -50%) scale(1.3); }
}

/* ---------- Foaia ---------- */

.foaie {
  background:
    repeating-linear-gradient(to bottom, transparent 0 39px, rgba(169, 211, 236, 0.28) 39px 40px),
    var(--foaie);
  border-radius: 14px;
  box-shadow: 0 2px 0 #e2d6b6, 0 14px 34px rgba(60, 45, 20, 0.16);
  padding: clamp(14px, 2.4vw, 34px) clamp(14px, 3vw, 44px) clamp(12px, 2vw, 24px);
  border-left: 10px solid var(--culoare-nivel, var(--rosu));
}
.foaie--nivel-1 { --culoare-nivel: #e2673f; }
.foaie--nivel-2 { --culoare-nivel: #55a2d8; }
.foaie--nivel-3 { --culoare-nivel: #f2b632; }
.foaie--nivel-4 { --culoare-nivel: #5f9e57; }
.foaie--nivel-5 { --culoare-nivel: #a58ad0; }

.foaie__sus {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  color: var(--cerneala-slaba);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.foaie__titlu {
  margin: 4px 0 18px;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}
.foaie__cerinta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0 22px;
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
  font-weight: 700;
  line-height: 1.3;
}
.foaie__exercitiu {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  background: var(--culoare-nivel);
  color: #fff;
}
.foaie__jos {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}
.foaie__pagina {
  display: grid;
  place-items: center;
  min-width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--linie);
  background: #fff;
  font-weight: 800;
  font-size: 1.2rem;
}

/* ---------- Formele ---------- */

.forma {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.umbra { filter: brightness(0); opacity: 0.55; }
/* Imaginile din bibliotecă în altă culoare (pagina „La fel ca modelul”). */
.nuanta-rosu { filter: hue-rotate(320deg) saturate(1.3); }
.nuanta-galben { filter: hue-rotate(40deg); }
.nuanta-verde { filter: hue-rotate(100deg); }
.nuanta-mov { filter: hue-rotate(250deg); }
.nuanta-albastru { filter: hue-rotate(190deg); }
.nuanta-roz { filter: hue-rotate(300deg) saturate(0.8) brightness(1.1); }

/* ---------- Umbrele ---------- */

.umbre__tabla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(110px, 15vw, 190px), 1fr));
  gap: clamp(12px, 2vw, 26px);
  padding: clamp(12px, 2vw, 24px);
  border-radius: var(--rotunjire);
  background: #eaf5fb;
  border: 3px dashed var(--cer);
}
.umbre__loc {
  aspect-ratio: 1;
  padding: 12%;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.umbre__loc.sub-piesa, body.cu-aleasa .umbre__loc[data-tinta]:hover {
  background: #fff3c4;
  transform: scale(1.04);
}
.umbre__loc.plin { background: #fff; cursor: default; animation: primeste 0.4s ease-out; }
@keyframes primeste { 0% { transform: scale(0.85); } 70% { transform: scale(1.06); } }

.umbre__tava {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 2vw, 26px);
  margin-top: 22px;
  min-height: clamp(100px, 13vw, 160px);
}
.piesa {
  width: clamp(100px, 13vw, 160px);
  aspect-ratio: 1;
  padding: clamp(8px, 1.2vw, 16px);
  border-radius: 18px;
  background: #fff;
  border: 3px solid var(--linie);
  cursor: grab;
  touch-action: none;
}
/* Piesele, locurile și variantele: desenul umple căsuța, în interiorul
   marginii (grilă, ca înălțimea desenului să fie a căsuței). */
.piesa, .umbre__loc, .varianta, .rand__model, .sir__desen, .numara__semn {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
}
.piesa.trasa { opacity: 0.3; }
.piesa.aleasa, .varianta.aleasa {
  border-color: var(--galben);
  box-shadow: 0 0 0 5px rgba(242, 182, 50, 0.45);
  transform: translateY(-4px);
}
.copie-trasa {
  position: fixed;
  z-index: 50;
  margin: 0;
  pointer-events: none;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.25);
}

/* ---------- Rândurile (umbra potrivită, perechea, intrusul, șirul) ---------- */

.rand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(10px, 1.6vw, 22px);
  padding: clamp(10px, 1.4vw, 16px) 0;
  border-bottom: 2px dashed var(--linie);
}
.rand:last-child { border-bottom: 0; }
.rand__model {
  width: clamp(90px, 11vw, 140px);
  aspect-ratio: 1;
  padding: 10px;
  border-radius: 18px;
  background: #fff;
  border: 3px solid var(--culoare-nivel);
}
.rand__sageata { font-size: 2.2rem; color: var(--cerneala-slaba); }
.rand__variante {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.6vw, 22px);
  flex: 1;
}
.varianta {
  position: relative;
  width: clamp(80px, 10vw, 130px);
  aspect-ratio: 1;
  padding: 10px;
  border-radius: 18px;
  background: #fff;
  border: 3px solid var(--linie);
  cursor: pointer;
  transition: transform 0.15s;
}
.varianta:hover { transform: translateY(-3px); }
.rand.rezolvat .varianta { cursor: default; }
.rand.rezolvat .varianta:not(.corecta):not(.taiata):not(.incercuita) { opacity: 0.45; }
.rand.rezolvat .varianta.necolorata { opacity: 0.45; }
.rand--serie.rezolvat .varianta:not(.taiata) { opacity: 1; }
.corecta { border-color: var(--verde); background: #eaf6e6; }
.taiata { border-color: var(--rosu); }
.taiata::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 7px;
  border-radius: 4px;
  background: var(--rosu);
  transform: rotate(-35deg);
}
.rand--serie { justify-content: center; }

.rand--sir { flex-direction: column; align-items: stretch; }
.sir__desene {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 120px));
  gap: clamp(4px, 1vw, 12px);
}
.sir__desen {
  aspect-ratio: 1;
  padding: 8%;
  border-radius: 14px;
  background: #fff;
  border: 2px solid var(--linie);
}
.sir__gol {
  display: grid;
  place-items: center;
  border: 3px dashed var(--culoare-nivel);
  color: var(--culoare-nivel);
  font-size: clamp(1.6rem, 4vw, 3rem);
  font-weight: 800;
}
.rand__variante--mici { justify-content: flex-end; }
.rand__variante--mici .varianta { width: clamp(70px, 8vw, 104px); }

/* ---------- Numără ---------- */

.activitate--numara {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(14px, 2vw, 30px);
  align-items: start;
}
@media (max-width: 900px) { .activitate--numara { grid-template-columns: 1fr; } }
.numara__desen {
  position: relative;
  aspect-ratio: 2 / 1;
  border-radius: var(--rotunjire);
  background:
    radial-gradient(ellipse at 30% 60%, #f3e3b4 0 18%, transparent 19%),
    radial-gradient(ellipse at 72% 40%, #f3e3b4 0 16%, transparent 17%),
    radial-gradient(ellipse at 30% 60%, #b9dd9a 0 24%, transparent 25%),
    radial-gradient(ellipse at 72% 40%, #b9dd9a 0 22%, transparent 23%),
    #bfe2f3;
  background-size: cover;
  background-position: center;
  border: 3px solid var(--cer);
}
.numara__forma {
  position: absolute;
  width: 12%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  cursor: pointer;
  border-radius: 50%;
}
.numara__forma.numarata::after {
  content: '';
  position: absolute;
  right: -4%;
  top: -4%;
  width: 34%;
  height: 34%;
  border-radius: 50%;
  background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10 L9 14 L15 6' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 80% no-repeat;
  border: 2px solid #fff;
}
.numara__raspunsuri { display: grid; gap: 16px; }
.numara__rand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 18px;
  background: #fff;
  border: 2px solid var(--linie);
}
.numara__semn { flex: none; width: clamp(56px, 6vw, 80px); aspect-ratio: 1; }
.numara__numere { display: flex; flex-wrap: wrap; gap: 8px; }
.numar {
  display: grid;
  place-items: center;
  width: clamp(44px, 4.2vw, 58px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--linie);
  background: var(--foaie);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 800;
  cursor: pointer;
}
.numar.corect { background: var(--verde); border-color: var(--verde-inchis); color: #fff; }
.numara__rand.rezolvat .numar:not(.corect) { opacity: 0.35; cursor: default; }

/* ---------- Ce ai învățat ---------- */

.invatat__forme {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 18px;
}
.invatat__forme figure {
  margin: 0;
  width: clamp(90px, 10vw, 130px);
  text-align: center;
  font-weight: 700;
  font-size: 1.15rem;
}
.invatat__forme .forma { height: auto; aspect-ratio: 1; }
.invatat {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.4;
}
.invatat li {
  position: relative;
  padding: 8px 0 8px 46px;
}
.invatat li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10 L9 14 L15 6' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* ---------- Cuprinsul ---------- */

.cuprins {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cuprins a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: 'numar titlu forme' 'numar progres forme';
  align-items: center;
  gap: 4px 18px;
  padding: 14px 20px;
  border-radius: 18px;
  background: #fff;
  border: 2px solid var(--linie);
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s, border-color 0.15s;
}
.cuprins a:hover { transform: translateY(-2px); border-color: var(--galben); }
.cuprins__numar {
  grid-area: numar;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cerneala);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
}
.cuprins__nivel:nth-child(5n+1) .cuprins__numar { background: #e2673f; }
.cuprins__nivel:nth-child(5n+2) .cuprins__numar { background: #55a2d8; }
.cuprins__nivel:nth-child(5n+3) .cuprins__numar { background: #e0a420; }
.cuprins__nivel:nth-child(5n+4) .cuprins__numar { background: #5f9e57; }
.cuprins__nivel:nth-child(5n+5) .cuprins__numar { background: #a58ad0; }
.cuprins__titlu { grid-area: titlu; font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-weight: 800; }
.cuprins__progres { grid-area: progres; color: var(--cerneala-slaba); font-weight: 600; }
.cuprins__bara {
  display: block;
  max-width: 260px;
  height: 8px;
  margin-top: 6px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--verde) calc(var(--cat) * 100%), var(--linie) 0);
}
.cuprins__forme { grid-area: forme; display: flex; gap: 8px; }
.cuprins__forme .forma { width: clamp(40px, 5vw, 64px); height: clamp(40px, 5vw, 64px); }
.cuprins__nivel--gata a { border-color: var(--verde); }
@media (max-width: 640px) {
  .cuprins a { grid-template-columns: auto 1fr; grid-template-areas: 'numar titlu' 'numar progres' 'forme forme'; }
}

/* ---------- Nimfa, cu balonul ei ---------- */

.personaj {
  position: fixed;
  right: clamp(10px, 2vw, 30px);
  bottom: clamp(10px, 2vw, 30px);
  z-index: 40;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  max-width: min(520px, calc(100vw - 20px));
  pointer-events: none;
}
.personaj__chip {
  order: 2;
  flex: none;
  width: clamp(110px, 11vw, 170px);
  height: auto;
}
.personaj__text {
  position: relative;
  margin: 0 0 40px;
  padding: 14px 20px;
  border-radius: 20px;
  background: #fff;
  border: 3px solid var(--verde);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 700;
  line-height: 1.35;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}
.personaj[data-fel='indiciu'] .personaj__text { border-color: var(--galben); }
.personaj__inchide {
  position: absolute;
  top: -12px;
  left: -12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--linie);
  background: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  pointer-events: auto;
}
.personaj--apare { animation: apare 0.35s ease-out; }
@keyframes apare { from { transform: translateY(20px); opacity: 0; } }

/* ---------- Semnele ---------- */

.semn {
  position: fixed;
  z-index: 60;
  width: var(--marime);
  height: var(--marime);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: semn 1.3s ease-out both;
}
.semn svg { display: block; width: 100%; height: 100%; }
@keyframes semn {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  20% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.scutura { animation: scutura 0.45s ease-in-out; }
@keyframes scutura {
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* ---------- Semnele copilului: încercuit, colorat, întors ---------- */

.incercuita::before {
  content: '';
  position: absolute;
  inset: -7px;
  border: 5px solid #e2673f;
  border-radius: 50%;
  pointer-events: none;
}
.necolorata .forma { filter: grayscale(1); opacity: 0.55; }
.oglindita .forma { transform: scaleX(-1); }

/* ---------- Perechile ---------- */

.perechi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 150px));
  justify-content: center;
  gap: clamp(10px, 2vw, 24px);
}
.perechi .carton { width: auto; }
.carton.gasita {
  border-color: var(--pereche);
  box-shadow: 0 0 0 4px var(--pereche);
  cursor: default;
}

/* ---------- Obiecte și forme ---------- */

.obiecte__forme {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 24px);
}
.obiecte__forma {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: clamp(170px, 18vw, 250px);
  padding: 14px;
  border-radius: 18px;
  background: #eaf5fb;
  border: 3px dashed var(--cer);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.obiecte__forma.sub-piesa, body.cu-aleasa .obiecte__forma:hover { background: #fff3c4; transform: scale(1.03); }
.obiecte__figura { width: clamp(60px, 7vw, 100px); aspect-ratio: 1; }
.obiecte__cos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.obiecte__cos .forma { width: clamp(40px, 4.5vw, 64px); height: clamp(40px, 4.5vw, 64px); }

/* ---------- De la mic la mare ---------- */

.ordine {
  display: grid;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 2px dashed var(--linie);
}
.ordine:last-child { border-bottom: 0; }
.ordine__desene, .ordine__locuri {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 130px));
  gap: clamp(8px, 1.6vw, 20px);
  justify-content: center;
}
.ordine__desen { width: auto; }
.ordine__desen.pusa { visibility: hidden; }
.ordine__loc {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 18px;
  border: 3px dashed var(--culoare-nivel);
  color: var(--culoare-nivel);
  font-size: 1.6rem;
  font-weight: 800;
  padding: 10px;
}
.ordine__loc.plin { border-style: solid; background: #fff; }
.ordine__loc .forma { grid-area: 1 / 1; }

/* ---------- Ilustrațiile (ce nu apare, deosebirile) ---------- */

.ilustratie {
  position: relative;
  aspect-ratio: 2 / 1;
  margin-bottom: 18px;
  border-radius: var(--rotunjire);
  background:
    radial-gradient(ellipse at 25% 70%, #f3e3b4 0 16%, transparent 17%),
    radial-gradient(ellipse at 75% 35%, #f3e3b4 0 15%, transparent 16%),
    radial-gradient(ellipse at 25% 70%, #b9dd9a 0 23%, transparent 24%),
    radial-gradient(ellipse at 75% 35%, #b9dd9a 0 22%, transparent 23%),
    #bfe2f3;
  background-size: cover;
  background-position: center;
  border: 3px solid var(--cer);
}
.ilustratie__desen {
  position: absolute;
  width: 16%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.deosebiri {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 2vw, 24px);
}
.deosebiri .ilustratie { margin-bottom: 0; }
.deosebiri .ilustratie__desen { width: 19%; }
.deosebiri__contor { margin: 14px 0 0; font-size: 1.25rem; font-weight: 800; text-align: center; }
@media (max-width: 760px) {
  .deosebiri { grid-template-columns: 1fr; }
  .perechi { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .obiecte__forme { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Jumătăți și piese ---------- */

.jumatate { width: 100%; height: 100%; }
.jumatate--stanga .forma { clip-path: inset(0 50% 0 0); }
.jumatate--dreapta .forma { clip-path: inset(0 0 0 50%); }
.jumatate--sus .forma { clip-path: inset(0 0 50% 0); }
.jumatate--jos .forma { clip-path: inset(50% 0 0 0); }
.jumatate__model > * { grid-area: 1 / 1; }
.jumatate__gol {
  margin-left: 50%;
  border: 3px dashed var(--culoare-nivel);
  border-left: 0;
  border-radius: 0 12px 12px 0;
}
.piese__rand {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 140px));
  justify-content: center;
  gap: clamp(10px, 2vw, 24px);
}
.piese__rand .varianta { width: auto; }
.piese__linie { margin: 14px 0; border-top: 3px dashed var(--linie); }
.piesa-taiata.gasita { border-color: var(--pereche); box-shadow: 0 0 0 4px var(--pereche); cursor: default; }

/* ---------- Aceeași poziție ---------- */

.rotita-90 .forma { transform: rotate(90deg); }
.rotita-180 .forma { transform: rotate(180deg); }
.rotita-270 .forma { transform: rotate(270deg); }
.contur .forma {
  filter: brightness(0) invert(1) drop-shadow(2px 0 0 #1d2b4f) drop-shadow(-2px 0 0 #1d2b4f) drop-shadow(0 2px 0 #1d2b4f) drop-shadow(0 -2px 0 #1d2b4f);
}
.chenar-mic { border-style: double; border-width: 6px; }

/* ---------- Ce lipsește din desen ---------- */

.din-forme__cadru {
  width: clamp(130px, 15vw, 200px);
  aspect-ratio: 1;
  padding: 10px;
  border-radius: 18px;
  background: #fff;
  border: 3px solid var(--culoare-nivel);
}
.din-forme { position: relative; width: 100%; height: 100%; }
.din-forme .forma { position: absolute; }
.din-forme .din-forme__gol { opacity: 0.16; }

/* ---------- Desene care se trag ---------- */

.trasabil, .varianta[role='button']:not([data-tinta]), .piesa-taiata:not([data-tinta]) { cursor: grab; touch-action: none; }
.carton { touch-action: none; }
.activitate { user-select: none; -webkit-user-select: none; }
.pusa:not(.gasita) { opacity: 0.35; cursor: default; }
.rand__model.pusa { opacity: 0.35; }
[data-tinta].sub-piesa, body.cu-aleasa [data-tinta]:hover { outline: 4px dashed var(--galben); outline-offset: 3px; }
.piesa-taiata.gasita .jumatate { position: absolute; inset: 10px; width: auto; height: auto; }
.piesa-taiata { position: relative; }

/* ---------- Ce ai învățat: nimfa cu steaua ---------- */

.invatat__cadru { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; }
.invatat__nimfa { width: clamp(140px, 18vw, 260px); height: auto; }
@media (max-width: 640px) { .invatat__cadru { grid-template-columns: 1fr; } .invatat__nimfa { justify-self: center; } }

/* /jocuri/matematica-clasa-1/joc-unelte.css */
/* Unelte comune pentru jocuri: tragerea cu degetul și stelele. */
.jt-trage { cursor: grab; user-select: none; -webkit-user-select: none; position: relative; z-index: 1; }
.jt-trage--acum { cursor: grabbing; z-index: 20; transition: none; filter: drop-shadow(0 8px 10px hsl(220 40% 20% / 0.3)); }
.jt-inapoi { transition: transform 0.3s ease-out; }
.jt-blocat { cursor: default; }
.jt-tinta--peste { outline: 4px dashed var(--albastru); outline-offset: 4px; }
.jt-tinta--gresit { animation: jt-scutura 0.4s; }
@keyframes jt-scutura { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.jt-stele { position: fixed; z-index: 50; width: 0; height: 0; pointer-events: none; }
.jt-stea { position: absolute; left: -0.5em; top: -0.5em; font-size: 1.4rem; animation: jt-stea 0.8s ease-out both; }
@keyframes jt-stea { to { transform: translate(var(--dx), var(--dy)) scale(0.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .jt-stea, .jt-tinta--gresit { animation: none; }
  .jt-stele { display: none; }
}

/* /jocuri/caiet-zeci-unitati/joc.css */
/* ============================================================
   ZECI ȘI UNITĂȚI — aspectul exercițiilor
   ============================================================
   Cadrul (foaia, cuprinsul, butoanele) vine din
   ../caiet-priveste-potriveste/joc.css. Aici: bețișoarele și
   mănunchiurile (ca în lecțiile de clasa I), tabelul Z | U, bancnotele
   și exercițiile. Zecile au eticheta roșie, unitățile albastră.
   ============================================================ */

:root {
  --zeci: #d9534f;
  --unitati: #2f6fe0;
  --bat: #e0a800;
  --albastru: #2f6fe0;
}

.cz-activitate { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cz-ajutor { margin: 0; color: var(--cerneala-slaba); font-size: 1.15rem; font-weight: 600; text-align: center; }
.cz-mesaj { min-height: 1.4em; margin: 0; color: var(--verde-inchis); font-size: clamp(1.1rem, 2.2vw, 1.4rem); font-weight: 800; text-align: center; }
.cz-rand { display: block; }
.cz-calcul { margin: 0; color: var(--cerneala); font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 900; text-align: center; }
.cz-numar-mare { margin: 0; color: var(--cerneala); font-size: clamp(3.4rem, 9vw, 5.6rem); font-weight: 900; line-height: 1; }
.cz-runda { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
.cz-runda__nr { margin: 0; color: var(--cerneala-slaba); font-weight: 700; }
.cz-aleasa { outline: 4px solid var(--galben); outline-offset: 3px; }

/* ---------- bețișoare și mănunchiuri ---------- */

.cz-bat { display: inline-block; width: 8px; height: 70px; border-radius: 3px; background: var(--bat); box-shadow: inset -2px 0 0 rgba(0, 0, 0, 0.12); }
.cz-manunchi {
  position: relative; display: inline-block; width: 34px; height: 70px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, var(--bat) 0 4px, #fff 4px 6px);
}
.cz-manunchi::after { content: ''; position: absolute; left: -3px; right: -3px; top: 30px; height: 9px; border-radius: 3px; background: var(--zeci); }
.cz-bete { display: inline-flex; align-items: flex-end; gap: 18px; }
.cz-bete__zeci, .cz-bete__unitati { display: inline-flex; align-items: flex-end; gap: 12px; }
.cz-bete__unitati { gap: 4px; }
.cz-bete__zeci:empty, .cz-bete__unitati:empty { display: none; }
.cz-bete--mic .cz-bat { width: 5px; height: 42px; }
.cz-bete--mic .cz-manunchi { width: 20px; height: 42px; background: repeating-linear-gradient(90deg, var(--bat) 0 2px, #fff 2px 3px); }
.cz-bete--mic .cz-manunchi::after { top: 18px; height: 6px; }
.cz-bete--mic { gap: 10px; }
.cz-bete--mic .cz-bete__zeci { gap: 9px; }
.cz-bete--mic .cz-manunchi::after { left: -2px; right: -2px; }
.cz-bete--mic .cz-bete__unitati { gap: 3px; }
.cz-desen { display: flex; justify-content: center; padding: 18px 24px; border: 3px dashed var(--cer); border-radius: var(--rotunjire); background: #eaf5fb; }

/* ---------- tabelul Z | U ---------- */

.cz-tabel { display: grid; grid-template-columns: repeat(2, minmax(110px, auto)); border: 3px solid var(--cerneala); border-radius: 14px; overflow: hidden; background: #fff; }
.cz-tabel > * { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 5px; padding: 8px 12px; border-right: 2px solid var(--linie); border-bottom: 2px solid var(--linie); }
.cz-tabel > :nth-child(2n) { border-right: 0; }
.cz-tabel > :nth-last-child(-n + 2) { border-bottom: 0; }
.cz-tabel__cap { font-size: 1.6rem; font-weight: 900; }
.cz-tabel__cap--z { color: var(--zeci); background: #fde9e7; }
.cz-tabel__cap--u { color: var(--unitati); background: #e6eefc; }
.cz-tabel__desen { min-height: 94px; max-width: 240px; }
.cz-tabel__cifra { min-height: 76px; align-items: center; font-size: 3rem; font-weight: 900; line-height: 1; }
.cz-tabel__cifra:nth-last-child(2) { color: var(--zeci); }
.cz-tabel__cifra:last-child { color: var(--unitati); }
.cz-tabel__cifra--gol { margin: 6px; border: 3px dashed var(--cer) !important; border-radius: 12px; background: #f3f9fd; cursor: pointer; }

/* ---------- cartonașe și cutii ---------- */

.cz-tava { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; min-height: 80px; }
.cz-carte {
  display: grid; place-items: center; min-width: 72px; height: 72px; padding: 0 10px;
  border: 3px solid var(--cerneala); border-radius: 16px; background: #fff;
  color: var(--cerneala); font-size: 2.2rem; font-weight: 900; box-shadow: 0 4px 0 var(--cerneala);
}
.cz-carte-desen { display: grid; place-items: center; min-width: 150px; min-height: 90px; padding: 12px; border: 3px solid var(--linie); border-radius: 16px; background: #fff; }
.cz-cutie { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 240px; min-height: 160px; padding: 14px; border: 4px dashed var(--galben); border-radius: var(--rotunjire); background: #fff8e3; }
.cz-cutie__nr { font-size: 3rem; font-weight: 900; line-height: 1; }
.cz-cutie .cz-carte-desen { border-color: var(--verde); }

/* ---------- variante de ales ---------- */

.cz-variante { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.cz-varianta { min-width: 96px; height: 86px; border: 3px solid var(--linie); border-radius: 18px; background: #fff; color: var(--cerneala); font: inherit; font-size: 2.6rem; font-weight: 900; cursor: pointer; box-shadow: 0 4px 0 var(--linie); }
.cz-varianta:hover { border-color: var(--galben); }
.cz-varianta--bine { border-color: var(--verde); background: #e7f4e3; }

/* ---------- bețișoarele împrăștiate pe masă ---------- */

.cz-masa { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px; max-width: 760px; padding: 22px; border-radius: var(--rotunjire); background: #f3e2c4; box-shadow: inset 0 0 0 4px #e6cfa6; }
.cz-masa__bat { position: relative; display: grid; place-items: center; width: 46px; height: 96px; padding: 0; border: 0; background: none; cursor: pointer; transform: translateY(var(--sus)) rotate(var(--rot)); transition: transform 0.3s; }
.cz-masa__bat[data-numarat] { transform: none; }
.cz-masa__nr { position: absolute; top: -12px; left: 50%; display: grid; place-items: center; min-width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: var(--unitati); color: #fff; font-size: 1rem; }
.cz-masa__nr:empty { display: none; }
.cz-masa__bat--pleaca { transform: translateY(80px) scale(0.6); opacity: 0; transition: transform 0.6s ease-in, opacity 0.6s; }

/* ---------- bani ---------- */

.cz-bani { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 720px; padding: 16px; border-radius: var(--rotunjire); background: #f0e2cf; transition: transform 0.6s, opacity 0.6s; }
.cz-bani--pleaca { transform: scale(0.4); opacity: 0; }
.cz-ban { display: inline-flex; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 10px; }
.cz-ban[data-numarat] { outline: 3px solid var(--verde); outline-offset: 2px; }
.cz-ban--zece .bancnota { width: 180px; height: 92px; }
.cz-ban--zece .bancnota__valoare { font-size: 2.6rem; }
.cz-tejghea { position: relative; display: flex; justify-content: center; width: min(100%, 620px); min-height: 110px; padding: 30px 14px 14px; border-radius: 16px; background: #8a5a32; box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.15); }
.cz-tejghea__eticheta { position: absolute; top: 6px; left: 14px; color: #fff; font-weight: 700; }
.cz-tejghea__bani { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cz-portofel { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: min(100%, 720px); padding: 12px; border-radius: 18px; background: #f0e2cf; }
.cz-produs { display: flex; align-items: center; gap: 16px; }
.cz-produs__img { width: 120px; height: 120px; object-fit: contain; font-size: 5rem; line-height: 1; }
.cz-produs__pret { padding: 8px 18px; border-radius: 999px; background: var(--galben); color: var(--cerneala); font-size: 2rem; font-weight: 900; }

/* bancnotele (aceleași ca în lecțiile de clasa I, desene.js) */
.bancnota { position: relative; isolation: isolate; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 108px; height: 56px; padding-right: 22px; color: #12245a; line-height: 1; }
.bani__fond { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.bancnota__valoare, .bancnota__unitate { text-shadow: 0 0 3px #fff, 0 0 6px #fff; }
.bancnota__valoare { font-size: 1.6rem; font-weight: 900; }
.bancnota__unitate { font-size: 0.75rem; font-weight: 800; letter-spacing: 1px; }

/* ---------- baloanele ---------- */

.cz-cer { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(16px, 4vw, 48px); padding: 10px 0 20px; }
.cz-balon { display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; animation: cz-pluteste 3.2s ease-in-out infinite alternate; animation-delay: var(--intarziere); }
.cz-balon__corp { display: grid; place-items: center; width: clamp(150px, 20vw, 190px); height: clamp(170px, 23vw, 215px); border-radius: 50% 50% 48% 48% / 56% 56% 44% 44%; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.75) 0 10%, transparent 11%), var(--culoare); box-shadow: inset -10px -14px 0 rgba(0, 0, 0, 0.12); }
.cz-balon__corp .cz-bete { padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.92); }
.cz-balon__sfoara { width: 2px; height: 46px; background: var(--cerneala-slaba); }
.cz-balon[data-spart] { animation: cz-sparge 0.4s ease-out forwards; }
@keyframes cz-pluteste { to { transform: translateY(-14px); } }
@keyframes cz-sparge { to { transform: scale(1.3); opacity: 0; } }

/* ---------- butoanele de la „Formează numărul” ---------- */

.cz-butoane { display: grid; grid-template-columns: repeat(2, auto); gap: 10px 14px; }
.cz-plus { min-width: 190px; }

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

.cz-tren { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 10px; }
.cz-locomotiva__img { width: 120px; height: 120px; object-fit: contain; font-size: 5rem; line-height: 1; }
.cz-vagon { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 190px; min-height: 160px; padding: 12px 10px 26px; border: 4px solid var(--maro); border-radius: 14px; background: #fff3dd; }
.cz-vagon__text { font-size: 1.05rem; font-weight: 800; text-align: center; }
.cz-vagon__loc { display: grid; place-items: center; width: 96px; height: 82px; border: 3px dashed var(--galben); border-radius: 14px; background: #fff; }
.cz-vagon[data-plin] .cz-vagon__loc { border-style: solid; border-color: var(--verde); }
.cz-vagon__roti { position: absolute; bottom: -16px; left: 22px; right: 22px; height: 28px; background: radial-gradient(circle at 14px 14px, var(--cerneala) 0 12px, transparent 13px) left / 28px 28px no-repeat, radial-gradient(circle at 14px 14px, var(--cerneala) 0 12px, transparent 13px) right / 28px 28px no-repeat; }

/* ---------- explicația nivelului ---------- */

.cz-explicatie { display: flex; flex-direction: column; gap: 16px; width: min(100%, 900px); }
.cz-explicatie__pas { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 18px; padding: 16px 20px; border: 3px solid var(--linie); border-radius: var(--rotunjire); background: #fff; animation: cz-apare 0.4s ease-out; }
.cz-explicatie__nr { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--culoare-nivel); color: #fff; font-size: 1.3rem; font-weight: 900; }
.cz-explicatie__desen { display: flex; justify-content: center; }
.cz-explicatie__text { margin: 0; font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-weight: 600; line-height: 1.5; }
@media (max-width: 760px) {
  .cz-explicatie__pas { grid-template-columns: auto 1fr; }
  .cz-explicatie__text { grid-column: 1 / -1; }
}

/* două desene alăturate, cu numărul deasupra */
.cz-egal { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 16px; }
.cz-cu-numar { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; background: #f7f1e1; }
.cz-numar-mic { font-size: 1.8rem; font-weight: 900; line-height: 1; }
.cz-semn-loc { display: grid; place-items: center; align-self: center; width: 72px; height: 72px; border: 3px dashed var(--galben); border-radius: 16px; background: #fff8e3; font-size: 2.4rem; font-weight: 900; }
.cz-semn-loc[data-gata] { border-style: solid; border-color: var(--verde); background: #e7f4e3; }

/* șirul de căsuțe, ecuația */
.cz-sir { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 10px; }
.cz-sir__semn { align-self: center; font-size: 2rem; font-weight: 900; color: var(--cerneala-slaba); }
.cz-sir-loc { display: inline-grid; place-items: center; min-width: 72px; height: 72px; padding: 0 8px; border: 3px dashed var(--cer); border-radius: 14px; background: #f3f9fd; font-size: 2.2rem; font-weight: 900; cursor: pointer; vertical-align: middle; }
.cz-sir-loc[data-plin] { border-style: solid; border-color: var(--verde); background: #e7f4e3; cursor: default; }
.cz-ecuatie { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 0; font-size: 2.4rem; font-weight: 900; }
.cz-ajutor--mare { color: var(--cerneala); font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 800; }

/* obiectele de grupat câte 10 */
.cz-gramada { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 760px; min-height: 40px; padding: 14px; border-radius: var(--rotunjire); background: #fff8e3; }
.cz-gramada__ob { width: 62px; height: 62px; padding: 4px; border: 0; background: none; cursor: pointer; transform: rotate(var(--rot)); }
.cz-gramada__img { display: block; width: 100%; height: 100%; object-fit: contain; font-size: 2.2rem; line-height: 1; }
.cz-grupe { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.cz-grupa { position: relative; display: grid; grid-template-columns: repeat(5, 40px); gap: 4px; min-height: 92px; padding: 10px; border: 3px dashed var(--linie); border-radius: 18px; background: #fff; }
.cz-grupa .cz-gramada__img { width: 40px; height: 40px; font-size: 1.6rem; }
.cz-grupa--plina { border: 4px solid var(--zeci); }
.cz-grupa__eticheta { position: absolute; top: -16px; right: -12px; display: grid; place-items: center; min-width: 38px; height: 38px; border-radius: 50%; background: var(--zeci); color: #fff; font-size: 1.1rem; }

/* banii arătați */
.cz-bani--arata { max-width: 760px; }
.cz-varianta--lei { min-width: 150px; font-size: 1.9rem; }

/* ---------- exercițiile adăugate a doua oară ---------- */

.cz-propozitie { margin: 0; padding: 14px 24px; border: 3px solid var(--linie); border-radius: 18px; background: #fff; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; text-align: center; }
.cz-varianta--cuvant { min-width: 170px; padding: 0 22px; font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.cz-cuvinte { margin: 0; padding: 10px 26px; border-radius: 999px; background: #fff8e3; font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 900; font-style: italic; }
.cz-taste { display: grid; grid-template-columns: repeat(5, 70px); gap: 10px; }
.cz-tasta { height: 70px; border: 3px solid var(--cerneala); border-radius: 16px; background: #fff; color: var(--cerneala); font: inherit; font-size: 2rem; font-weight: 900; cursor: pointer; box-shadow: 0 4px 0 var(--cerneala); }
.cz-tasta:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--cerneala); }
.cz-cifra-aleasa { padding: 0 6px; border-radius: 14px; background: #fff1b8; color: var(--zeci); box-shadow: inset 0 -6px 0 var(--galben); }
/* axa de la o zece la următoarea: liniuțe, zecile și numărul ales scrise deasupra */
.cz-axa { display: flex; align-items: flex-end; width: min(100%, 720px); height: 64px; border-bottom: 4px solid var(--cerneala); }
.cz-axa__nr { position: relative; flex: 1 1 0; height: 14px; border-left: 3px solid var(--cerneala); }
.cz-axa__nr:last-child { flex: 0 0 0; }
.cz-axa__nr--zece, .cz-axa__nr--ales { height: 26px; }
.cz-axa__nr--ales { border-left: 4px solid var(--zeci); }
.cz-axa__nr--zece::before, .cz-axa__nr--ales::before { content: attr(data-t); position: absolute; bottom: calc(100% + 4px); left: 0; transform: translateX(-50%); font-size: 1.3rem; font-weight: 900; }
.cz-axa__nr--ales::before { color: var(--zeci); font-size: 1.6rem; }
.cz-perechi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(100%, 760px); }
.cz-pereche { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border: 3px solid var(--linie); border-radius: 16px; background: #fff; cursor: pointer; }
.cz-pereche[data-plin] { border-color: var(--verde); }
.cz-pereche__text { font-size: 1.2rem; font-weight: 800; }
.cz-scor { margin: 0; color: var(--cerneala-slaba); font-weight: 700; }
.cz-stele { display: flex; gap: 14px; }
.cz-stea { font-size: 4.2rem; line-height: 1; color: #e6dcc2; }
.cz-stea--plina { color: var(--galben); text-shadow: 0 3px 0 #c98f10; animation: cz-apare 0.5s ease-out; }
@media (max-width: 640px) {
  .cz-taste { grid-template-columns: repeat(5, 54px); }
  .cz-tasta { height: 56px; font-size: 1.6rem; }
  .cz-perechi { grid-template-columns: 1fr; }
}

/* ---------- balonul cu mesaje ---------- */

.cz-balon-mesaj { position: fixed; right: clamp(10px, 2vw, 30px); bottom: clamp(10px, 2vw, 30px); z-index: 40; max-width: min(420px, calc(100vw - 20px)); padding: 16px 44px 16px 20px; border: 3px solid var(--verde); border-radius: 22px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); }
.cz-balon-mesaj[data-fel='indiciu'] { border-color: var(--galben); }
.cz-balon-mesaj__text { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.4; }
.cz-balon-mesaj__inchide { position: absolute; top: 6px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f1ead6; font-size: 1.3rem; cursor: pointer; }
.cz-balon-mesaj--apare { animation: cz-apare 0.35s ease-out; }
@keyframes cz-apare { from { transform: translateY(20px); opacity: 0; } }

/* ---------- coperta ---------- */

.cz-coperta { display: flex; flex-direction: column; align-items: center; gap: 22px; padding-top: 6px; }
.cz-coperta__carte { position: relative; width: min(100%, 470px, calc((100dvh - 210px) * 900 / 1272)); border-radius: 18px; overflow: hidden; box-shadow: 0 14px 34px rgba(60, 45, 20, 0.22); }
.cz-coperta__poza { display: block; width: 100%; height: auto; }
/* bețișoarele care cad în lăbuțele veveriței, apoi banda roșie */
.cz-coperta__bete { position: absolute; left: 55.2%; top: 56.7%; display: flex; justify-content: space-between; width: 15%; height: 6.5%; transform: translate(-50%, -50%); }
.cz-coperta__bat { width: 8%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f7d23c, #f2b51c 60%, #d99a12); box-shadow: inset 0 0 0 1px rgba(140, 90, 10, 0.35); opacity: 0; animation: cz-cade 0.45s ease-out forwards; animation-delay: calc(0.5s + var(--k) * 0.22s); }
.cz-coperta__banda { position: absolute; left: -6%; right: -6%; top: 42%; height: 18%; border-radius: 3px; background: #d63a2f; opacity: 0; transform: scaleX(0); animation: cz-banda 0.5s ease-out 3.1s forwards; }
@keyframes cz-cade { from { opacity: 0; transform: translateY(-180%); } to { opacity: 1; transform: none; } }
@keyframes cz-banda { to { opacity: 1; transform: none; } }

/* ---------- veverița ---------- */

.cz-veverita { display: block; height: auto; pointer-events: none; user-select: none; }
.cz-veverita--mica { width: clamp(64px, 8vw, 96px); }
.cz-ajutor-rand { display: flex; align-items: center; justify-content: center; gap: 12px; }
.cz-explicatie-cadru { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 18px; width: min(100%, 1100px); }
.cz-veverita--explicatie { position: sticky; top: 12px; width: clamp(120px, 14vw, 190px); }
.cz-invatat-cadru { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px; width: 100%; }
.cz-veverita--felicita { width: clamp(130px, 16vw, 220px); }
.cz-veverita--diploma { width: 96px; margin-left: 10px; }
.cz-balon-mesaj__chip { position: absolute; left: -78px; bottom: -14px; width: 92px; height: auto; }
.cz-balon-mesaj { max-width: min(420px, calc(100vw - 110px)); }
@media (max-width: 760px) {
  .cz-explicatie-cadru, .cz-invatat-cadru { grid-template-columns: 1fr; }
  .cz-veverita--explicatie { position: static; justify-self: center; width: 120px; }
  .cz-veverita--felicita { justify-self: center; width: 140px; }
}

/* masa de lemn de la „Legăm zece bețișoare” */
.cz-masa { background: url('/jocuri/caiet-zeci-unitati/imagini/fundal-masa.webp') center / cover; box-shadow: inset 0 0 0 4px rgba(120, 75, 30, 0.45); }

.cz-cuprins__desen { align-items: flex-end; }
.cz-cuprins__bani { align-self: center; padding: 6px 14px; border-radius: 999px; background: #f0e2cf; font-weight: 800; white-space: nowrap; }

/* ---------- diploma ---------- */

.cz-diploma-loc { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; margin-top: 10px; }
.cz-diploma__comenzi { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cz-diploma__camp { min-width: 260px; min-height: 52px; padding: 8px 16px; border: 3px solid var(--linie); border-radius: 999px; font: inherit; font-size: 1.2rem; }
.cz-diploma { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(100%, 720px); padding: 34px 30px; border: 10px double var(--galben); border-radius: 18px; background: #fffdf5; text-align: center; }
.cz-diploma__titlu { margin: 0; color: var(--zeci); font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.cz-diploma__text { margin: 0; font-size: 1.2rem; line-height: 1.5; }
.cz-diploma__nume { min-width: 60%; min-height: 1.4em; padding: 6px 0; border-bottom: 3px solid var(--cerneala); font-size: clamp(1.8rem, 4.6vw, 2.6rem); font-weight: 900; }
.cz-diploma__desen { display: flex; align-items: flex-end; gap: 18px; margin: 10px 0; }
.cz-diploma__egal { font-size: 2.4rem; font-weight: 900; }
.cz-diploma__semnatura { margin: 0; font-size: 1.6rem; font-weight: 900; color: var(--verde-inchis); }

@media print {
  body * { visibility: hidden; }
  .cz-diploma, .cz-diploma * { visibility: visible; }
  .cz-diploma { position: absolute; left: 0; top: 0; width: 100%; border-width: 12px; }
  .fundal { display: none; }
}

@media (max-width: 640px) {
  .cz-butoane { grid-template-columns: 1fr 1fr; }
  .cz-plus { min-width: 0; font-size: 0.95rem; padding: 8px 10px; }
  .cz-tabel { grid-template-columns: repeat(2, minmax(90px, auto)); }
  .cz-vagon { width: 150px; }
  .cz-varianta { min-width: 80px; height: 74px; font-size: 2.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cz-balon, .cz-coperta__bat, .cz-coperta__banda { animation: none; }
  .cz-coperta__bat, .cz-coperta__banda { opacity: 1; transform: none; }
}