/* /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-alfabetul-vesel/joc.css */
/* ============================================================
   ALFABETUL VESEL — aspectul
   ============================================================
   Cadrul (foaia, butoanele) vine din
   ../caiet-priveste-potriveste/joc.css. Aici: coperta, cuprinsul cu
   litere, pagina literei (literele, scrisul cu degetul, desenul,
   poezia, cuvintele) și alfabetul.
   Pe ecran lat, pagina are două coloane: literele și scrisul în
   stânga; desenul, poezia și cuvintele în dreapta.
   ============================================================ */

@font-face {
  font-family: 'Scris de mana';
  src: url('/jocuri/citire-abecedar/scris-de-mana.woff2') format('woff2');
  font-display: swap;
}
.de-mana { font-family: 'Scris de mana', cursive !important; font-weight: 400 !important; }

:root {
  --av-rosu: #d6392b;
  --av-albastru: #2d6fd1;
}

.av-foaie { --culoare-nivel: hsl(var(--nuanta, 10) 70% 55%); }

/* ---------- litera colorată ---------- */

mark.av-litera { padding: 0; background: none; color: var(--av-rosu); font-weight: 900; }
mark.av-litera--poezie { color: inherit; font-weight: inherit; transition: color 0.25s, background 0.25s; }
.av-poezie--arata mark.av-litera--poezie { border-radius: 6px; background: #ffe7a8; color: var(--av-rosu); font-weight: 900; }

/* ---------- coloanele paginii ---------- */

.av-coloane { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 2.4vw, 32px); align-items: start; margin-top: 10px; }
.av-coloana { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.av-desen-poezie { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: stretch; gap: 18px; }
@media (max-width: 560px) {
  .av-desen-poezie { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .av-coloane { grid-template-columns: 1fr; }
}

.av-titlu { margin: 6px 0 4px; font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 900; text-align: center; }
.av-subtitlu { margin: 0; color: var(--cerneala); font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 900; }

/* ---------- literele mari ---------- */

.av-litere { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.av-litere__pereche { display: flex; flex: 1 1 200px; flex-direction: column; align-items: center; padding: 6px 18px 12px; border: 4px solid var(--culoare-nivel); border-radius: var(--rotunjire); background: #fff; }
.av-litere__tipar { color: var(--av-rosu); font-size: clamp(4rem, 9vw, 7rem); font-weight: 900; line-height: 1.05; letter-spacing: 0.04em; }
.av-litere__mana { color: var(--av-albastru); font-size: clamp(3rem, 6.5vw, 5rem); line-height: 1.35; }
/* k, q, w, y: patru perechi, două pe rând */
.av-litere--multe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.av-litere--multe .av-litere__pereche { padding: 4px 8px 8px; }
.av-litere--multe .av-litere__tipar { font-size: clamp(2.6rem, 4.6vw, 3.8rem); }
.av-litere--multe .av-litere__mana { font-size: clamp(2.2rem, 3.8vw, 3.2rem); }
.av-tabla--multe .av-tabla__model { font-size: clamp(2.4rem, 4.4vw, 3.6rem); }

/* ---------- scrisul cu degetul ---------- */

.av-scris { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.av-tabla {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  border: 3px dashed var(--linie);
  border-radius: var(--rotunjire);
  background:
    linear-gradient(to bottom, transparent 32%, #c9def5 32% calc(32% + 2px), transparent calc(32% + 2px) 68%, #c9def5 68% calc(68% + 2px), transparent calc(68% + 2px)),
    #fff;
}
.av-tabla__model { color: #d9dde6; font-size: clamp(4rem, 9vw, 7.5rem); line-height: 1; white-space: nowrap; user-select: none; }
.av-tabla:has(.av-tabla__model:not(:empty)) .av-tabla__model { max-width: 100%; }
.av-tabla__panza { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.av-tabla__sterge { min-height: 44px; }

/* ---------- desenul mare ---------- */

.av-desen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin: 0; padding: 14px; border: 4px solid var(--culoare-nivel); border-radius: var(--rotunjire); background: #fff; }
.av-desen__img { display: block; width: 100%; max-width: 260px; aspect-ratio: 1; object-fit: contain; font-size: 8rem; line-height: 1; text-align: center; }
.av-scena { margin: 4px 0 0; overflow: hidden; border: 3px solid var(--culoare-nivel); border-radius: 18px; background: #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.08); }
.av-scena__img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.av-desen--dans { position: relative; }
.av-dans__butoane { position: absolute; top: 10px; right: 10px; z-index: 1; display: flex; gap: 8px; }
.av-dans__buton--sunet[aria-pressed='true'] { background: #f1f9ee; border-color: var(--verde); }
.av-dans__buton { display: grid; place-items: center; width: 52px; height: 52px; border: 3px solid var(--culoare-nivel); border-radius: 50%; background: #fff; color: var(--cerneala); font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12); }
.av-dans__buton:hover { background: #fff3cf; }
.av-dans__buton:focus-visible { outline: 4px solid var(--galben); outline-offset: 2px; }
/* Cadrele au mărimea lor (width/height din dans.js); încap într-un
   chenar de cel mult 300 × 320. */
.av-dans { display: grid; place-items: center; width: 100%; }
.av-dans__cadru { grid-area: 1 / 1; display: block; width: auto; height: auto; max-width: min(100%, 300px); max-height: 320px; object-fit: contain; }
.av-desen__cuvant { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900; }

/* ---------- poezia ---------- */

.av-poezie { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 22px 18px; border-radius: var(--rotunjire); background: #fff8e3; box-shadow: inset 0 0 0 3px #f6dfa0; }
.av-poezie__titlu { margin: 0; color: var(--cerneala-slaba); font-size: 1.15rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.av-poezie__nume { margin: 0; color: var(--av-rosu); font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 900; }
.av-poezie__versuri { display: flex; flex-direction: column; gap: 14px; font-size: clamp(1.35rem, 2.5vw, 1.75rem); font-weight: 700; line-height: 1.4; }
.av-poezie__strofa { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.av-poezie__strofa--refren { padding-left: 18px; border-left: 5px solid var(--galben); font-style: italic; }
.av-poezie__refren { color: var(--cerneala-slaba); font-size: 0.8em; font-style: normal; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.av-poezie__vers { display: block; }
.av-poezie__buton { min-height: 46px; font-size: 1rem; }
.av-poezie--arata .av-poezie__buton { background: var(--verde); }

/* ---------- îndrumarea personajului ---------- */

.av-indrumare { display: flex; align-items: center; gap: 12px; }
.av-indrumare__personaj { flex: none; width: 72px; height: 72px; object-fit: contain; font-size: 3.4rem; line-height: 1; text-align: center; }
.av-indrumare__text { position: relative; margin: 0; padding: 10px 16px; border: 3px solid var(--culoare-nivel); border-radius: 18px; background: #fff; font-size: clamp(1.1rem, 2vw, 1.3rem); font-weight: 700; }
.av-indrumare__text::before { content: ''; position: absolute; left: -12px; top: 50%; width: 18px; height: 18px; border-left: 3px solid var(--culoare-nivel); border-bottom: 3px solid var(--culoare-nivel); background: #fff; transform: translateY(-50%) rotate(45deg); }

/* ---------- cuvintele ---------- */

.av-sectiune { display: flex; flex-direction: column; gap: 14px; }
.av-cuvinte { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.av-cuvant { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 12px 8px; border: 3px solid var(--linie); border-radius: 20px; background: #fff; color: var(--cerneala); font: inherit; cursor: pointer; transition: transform 0.2s, border-color 0.2s; }
.av-cuvant:hover { transform: translateY(-3px); }
.av-cuvant--ales { border-color: var(--verde); background: #f1f9ee; animation: av-salt 0.45s ease-out; }
.av-cuvant__img { display: block; width: 100%; max-width: 120px; aspect-ratio: 1; object-fit: contain; font-size: 4.5rem; line-height: 1; text-align: center; }
.av-cuvant__text { font-size: clamp(1.35rem, 2.4vw, 1.7rem); font-weight: 800; }
.av-nota { margin: 0; padding: 10px 16px; border-left: 6px solid var(--culoare-nivel); border-radius: 8px; background: #fff; font-size: clamp(1.1rem, 2vw, 1.3rem); font-weight: 700; }
@keyframes av-salt { 40% { transform: translateY(-10px) scale(1.04); } }

/* ---------- alfabetul ---------- */

/* Literele sus, pe toată lățimea; cântecelul dedesubt, cu strofele pe
   două coloane. */
.av-coloane--alfabet { grid-template-columns: 1fr; }
.av-coloane--alfabet .av-poezie__versuri { display: block; column-count: 2; column-gap: 48px; }
.av-coloane--alfabet .av-poezie__strofa { margin-bottom: 18px; break-inside: avoid; }
@media (max-width: 800px) {
  .av-coloane--alfabet .av-poezie__versuri { column-count: 1; }
}
.av-alfabet { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.av-alfabet__litera { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border: 3px solid var(--linie); border-radius: 16px; background: #fff; color: var(--cerneala); text-decoration: none; transition: transform 0.2s; }
.av-alfabet__litera:hover { transform: translateY(-3px); border-color: var(--av-rosu); }
.av-alfabet__mare { color: var(--av-rosu); font-size: 2.2rem; font-weight: 900; line-height: 1.1; }
.av-alfabet__mica { font-size: 1.3rem; font-weight: 700; }

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

.av-cuprins__progres { margin: -8px 0 18px; color: var(--cerneala-slaba); font-size: 1.15rem; font-weight: 700; }
.av-cuprins { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.av-cuprins__litera {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 10px 6px;
  border: 4px solid hsl(var(--nuanta) 70% 60%);
  border-radius: 22px;
  background: hsl(var(--nuanta) 90% 97%);
  color: var(--cerneala);
  text-decoration: none;
  transition: transform 0.2s;
}
.av-cuprins__litera:hover { transform: translateY(-4px) rotate(-2deg); }
.av-cuprins__mare { color: hsl(var(--nuanta) 70% 40%); font-size: 2.6rem; font-weight: 900; line-height: 1; text-align: center; }
.av-cuprins__mica { font-size: 1.3rem; font-weight: 700; }
.av-cuprins__nr { position: absolute; top: 6px; left: 10px; color: var(--cerneala-slaba); font-size: 0.9rem; font-weight: 700; }
.av-cuprins__litera--multe .av-cuprins__mare { font-size: 1.7rem; white-space: nowrap; }
.av-cuprins__litera--vazut::after { content: '✓'; position: absolute; top: 4px; right: 8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--verde); color: #fff; font-size: 0.95rem; font-weight: 900; }

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

.av-coperta { display: flex; flex-direction: column; align-items: center; gap: 22px; padding-top: 6px; }
.av-coperta__carte { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(100%, 720px); padding: 26px 24px 30px; border-radius: 18px; background: radial-gradient(circle at 50% 30%, #fffdf5, #ffe1d3 65%, #ffc6a8); box-shadow: 0 14px 34px rgba(60, 45, 20, 0.22); }
.av-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; }
.av-coperta__titlu { margin: 6px 0 0; font-size: clamp(2.6rem, 8vw, 4.2rem); font-weight: 900; text-align: center; }
.av-coperta__titlu span { display: inline-block; color: hsl(calc(var(--i) * 33) 75% 48%); animation: av-salta 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * 0.12s); }
.av-coperta__animale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: clamp(4px, 1.4vw, 14px); width: 100%; margin: 6px 0 4px; }
.av-coperta__animal { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.av-coperta__animal .av-dans__cadru { max-height: clamp(90px, 17vw, 150px); }
.av-coperta__eticheta-litera { display: grid; place-items: center; width: clamp(34px, 5vw, 46px); height: clamp(34px, 5vw, 46px); border-radius: 12px; background: #fff; color: var(--av-rosu); font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 900; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1); }
.av-coperta__carte--desen { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; gap: 22px; width: min(100%, 1180px); padding: 20px; }
.av-coperta__desen { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 6px 18px rgba(60, 45, 20, 0.18); }
.av-coperta__dreapta { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.av-coperta__carte--desen .av-coperta__animale { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.av-coperta__carte--desen .av-coperta__animal .av-dans__cadru { max-height: clamp(80px, 9vw, 120px); }
@media (max-width: 860px) {
  .av-coperta__carte--desen { grid-template-columns: 1fr; }
}
.av-ascuns { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.av-coperta__personaj { width: clamp(120px, 24vw, 190px); height: clamp(120px, 24vw, 190px); object-fit: contain; font-size: 7rem; line-height: 1; text-align: center; }
.av-coperta__litere { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 560px; }
.av-coperta__litera { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: hsl(calc(var(--i) * 23) 80% 92%); color: hsl(calc(var(--i) * 23) 70% 35%); font-size: 1.3rem; font-weight: 900; animation: av-salta 3s ease-in-out infinite; animation-delay: calc(var(--i) * 0.09s); }
@keyframes av-salta { 0%, 70%, 100% { transform: translateY(0); } 35% { transform: translateY(-8px); } }

@media (prefers-reduced-motion: reduce) {
  .av-coperta__titlu span, .av-coperta__litera { animation: none; }
}