/* /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/caiet-colorez/joc.css */
/* ============================================================
   COLOREZ ȘI PICTEZ — aspectul
   ============================================================
   Cadrul (foaia, cuprinsul, butoanele) vine din
   ../caiet-priveste-potriveste/joc.css. Aici: planșa, uneltele,
   culorile, codul, cuprinsul cu desene, coperta și foaia de tipărit.
   Planșa încape pe ecranul tabletei și al tablei interactive.
   ============================================================ */

.cc-ajutor { margin: -4px 0 12px; color: var(--cerneala-slaba); font-size: 1.1rem; font-weight: 600; text-align: center; }
/* Pe ecranul îngust: uneltele sus, planșa, culorile jos. Pe ecranul lat
   (tabla interactivă, tableta culcată): uneltele în stânga, culorile în
   dreapta, ca planșa să încapă în înălțimea ecranului. --rezerva este
   înălțimea ocupată de titlu, cerință și butoanele de jos. */
.cc-activitate { --rezerva: 300px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cc-activitate--cod { --rezerva: 370px; }
.cc-mijloc { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }

/* ---------- planșa ---------- */

.cc-svg { display: block; width: 100%; height: auto; }
.cc-plansa { width: min(100%, calc((100dvh - var(--rezerva)) * 4 / 3), 1200px); min-width: min(100%, 420px); border: 4px solid var(--linie); border-radius: var(--rotunjire); background: #fff; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.cc-plansa .cc-svg { cursor: crosshair; }
.cc-zona--model { cursor: not-allowed; }

/* ---------- uneltele ---------- */

.cc-bara { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; }
.cc-grup, .cc-marimi { display: flex; gap: 8px; }
.cc-unealta { display: grid; place-items: center; width: 64px; height: 64px; padding: 6px; border: 3px solid var(--linie); border-radius: 18px; background: #fff; cursor: pointer; box-shadow: 0 4px 0 var(--linie); }
.cc-unealta--mica { width: 54px; height: 54px; }
.cc-unealta:hover { border-color: var(--galben); }
.cc-unealta:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--linie); }
.cc-unealta[aria-pressed='true'] { border-color: var(--cerneala); background: #fff6d8; box-shadow: 0 4px 0 var(--cerneala); }
.cc-icoana, .cc-icoana svg { display: block; width: 100%; height: 100%; }
.cc-marime { display: grid; place-items: center; width: 50px; height: 50px; border: 3px solid var(--linie); border-radius: 50%; background: #fff; cursor: pointer; }
.cc-marime[aria-pressed='true'] { border-color: var(--cerneala); }
.cc-marime__punct { width: var(--d); height: var(--d); border-radius: 50%; background: var(--culoare-aleasa); box-shadow: 0 0 0 2px #262626; }

/* ---------- culorile ---------- */

.cc-paleta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 900px; }
.cc-culoare { width: 50px; height: 50px; border: 4px solid #fff; border-radius: 50%; background: var(--c); cursor: pointer; box-shadow: 0 0 0 2px #262626, 0 4px 0 2px rgba(0, 0, 0, 0.2); }
.cc-culoare[aria-pressed='true'] { transform: scale(1.18); box-shadow: 0 0 0 3px #262626, 0 0 0 7px var(--galben); }

/* ---------- codul culorilor ---------- */

.cc-cod { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; padding: 10px 18px; border: 3px dashed var(--linie); border-radius: 18px; background: #fff; }
.cc-cod__rand { display: flex; align-items: center; gap: 8px; }
.cc-cod__numar { font-size: 1.7rem; font-weight: 900; }
.cc-cod__pata { width: 40px; height: 40px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #262626; }

/* ---------- cuprinsul ---------- */

.cc-categorie--1 { --culoare-nivel: #e2673f; }
.cc-categorie--2 { --culoare-nivel: #55a2d8; }
.cc-categorie--3 { --culoare-nivel: #e0a420; }
.cc-categorie--4 { --culoare-nivel: #5f9e57; }
.cc-categorie--5 { --culoare-nivel: #a58ad0; }
.cc-sarituri { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.cc-saritura { padding: 10px 18px; border: 3px solid var(--culoare-nivel); border-radius: 999px; background: #fff; color: var(--cerneala); font-size: 1.1rem; font-weight: 800; text-decoration: none; }
.cc-saritura:hover { background: var(--culoare-nivel); color: #fff; }
.cc-categorie { margin: 0 0 30px; scroll-margin-top: 16px; }
.cc-categorie__titlu { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 4px solid var(--culoare-nivel); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 900; }
.cc-categorie__cate { color: var(--cerneala-slaba); font-size: 1rem; font-weight: 700; }
.cc-categorie .cuprins__numar { background: var(--culoare-nivel); }
.cc-cuprins { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.cc-cuprins a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 12px; border: 3px solid var(--linie); border-radius: var(--rotunjire); background: #fff; color: var(--cerneala); text-decoration: none; transition: transform 0.15s; }
.cc-cuprins a:hover { transform: translateY(-2px); border-color: var(--galben); }
.cc-cuprins__plansa--gata a { border-color: var(--verde); }
.cc-cuprins__desen { display: block; overflow: hidden; border: 2px solid var(--linie); border-radius: 14px; }
.cc-cuprins__jos { display: flex; align-items: center; gap: 12px; }
.cc-cuprins__jos .cuprins__numar { flex: none; }
.cc-cuprins__titlu { display: block; font-size: 1.2rem; font-weight: 800; }
.cc-cuprins__fel { display: block; color: var(--cerneala-slaba); font-weight: 600; }

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

/* Coperta ca o carte în mijlocul ecranului: eticheta, titlul, desenul,
   creioanele și butonul, unul sub altul (ordinea din `order`). */
.cc-coperta { display: flex; flex-direction: column; align-items: center; padding-top: 6px; }
.cc-coperta__text { display: contents; }
.cc-coperta__eticheta { order: 1; }
.cc-coperta__titlu { order: 2; }
.cc-coperta__desen { order: 3; }
.cc-coperta__creioane { order: 4; }
.cc-coperta__text .buton { order: 5; margin-top: 8px; }
.cc-coperta__carte { display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(100%, 560px); padding: 26px 24px 30px; border-radius: 18px; background: radial-gradient(circle at 50% 30%, #fffdf5, #ffe9b8 70%, #f9d27c); box-shadow: 0 14px 34px rgba(60, 45, 20, 0.22); }
.cc-coperta__eticheta { margin: 0; padding: 4px 16px; border-radius: 999px; background: #fff; color: var(--cerneala-slaba); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.cc-coperta__titlu { margin: 0; font-size: clamp(2.2rem, 6vw, 3.2rem); font-weight: 900; text-align: center; }
.cc-coperta__desen { width: 100%; overflow: hidden; border: 4px solid #fff; border-radius: 16px; }
.cc-coperta__creioane { display: flex; justify-content: center; gap: 6px; }
.cc-creion { position: relative; width: clamp(18px, 4vw, 28px); height: clamp(70px, 14vw, 100px); border-radius: 3px 3px 4px 4px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.15), transparent 40%, rgba(255, 255, 255, 0.25) 60%, rgba(0, 0, 0, 0.15)), var(--c); box-shadow: 0 0 0 2px #262626; margin-top: 18px; }
.sus__dreapta { display: flex; align-items: center; gap: 10px; }
.sus__ecran { display: grid; place-items: center; width: 52px; height: 52px; padding: 8px; border: 2px solid var(--linie); border-radius: 50%; background: #fff; cursor: pointer; }
.sus__ecran svg { width: 100%; height: 100%; }
body[data-vedere='coperta'] .sus__cuprins { display: none; }
.cc-creion::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 18px; background: linear-gradient(var(--c) 0 35%, #f3d9b1 35%); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

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

.cc-balon { position: fixed; right: clamp(10px, 2vw, 30px); bottom: clamp(10px, 2vw, 30px); z-index: 40; max-width: min(420px, calc(100vw - 110px)); 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); }
.cc-balon[data-fel='indiciu'] { border-color: var(--galben); }
.cc-balon__chip { position: absolute; left: -78px; bottom: -10px; width: 86px; height: 86px; object-fit: contain; font-size: 3.6rem; }
.cc-balon__text { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.4; }
.cc-balon__inchide { position: absolute; top: 6px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f1ead6; font-size: 1.3rem; cursor: pointer; }
.cc-balon--apare { animation: cc-apare 0.35s ease-out; }
@keyframes cc-apare { from { transform: translateY(20px); opacity: 0; } }

@media (min-width: 1000px) {
  .cc-activitate { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 16px; --rezerva: 345px; }
  .cc-activitate--cod { --rezerva: 415px; }
  .cc-bara { flex-direction: column; flex-wrap: nowrap; gap: 14px; }
  .cc-bara .cc-grup { display: grid; grid-template-columns: repeat(2, auto); }
  .cc-marimi { flex-direction: column; align-items: center; }
  .cc-paleta { display: grid; grid-template-columns: repeat(3, auto); gap: 8px; }
  .cc-culoare { width: min(50px, calc((100dvh - 330px) / 8 - 8px)); height: min(50px, calc((100dvh - 330px) / 8 - 8px)); }
}

@media (max-width: 640px) {
  .cc-unealta { width: 54px; height: 54px; }
  .cc-unealta--mica { width: 46px; height: 46px; }
  .cc-culoare { width: 44px; height: 44px; }
  .cc-plansa { min-width: 100%; }
}

/* ---------- foaia de tipărit ---------- */

.cc-tipar { display: none; }
@media print {
  @page { size: A4 landscape; margin: 12mm; }
  body > :not(.cc-tipar) { display: none !important; }
  body { background: #fff; }
  .cc-tipar { display: block; }
  .cc-tipar__titlu { margin: 0 0 4px; font-size: 22pt; text-align: center; }
  .cc-tipar__cerinta { margin: 0 0 6px; font-size: 14pt; text-align: center; }
  .cc-tipar__cod { display: flex; justify-content: center; gap: 18pt; margin: 0 0 6px; padding: 0; list-style: none; font-size: 14pt; font-weight: 700; }
  .cc-tipar .cc-svg { width: auto; height: 150mm; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-balon--apare { animation: none; }
}