/* /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-formez-cuvinte/joc.css */
/* ============================================================
   FORMEZ CUVINTE — aspectul exercițiilor
   ============================================================
   Cadrul (foaia, cuprinsul, butoanele) vine din
   ../caiet-priveste-potriveste/joc.css. Aici: cartonașul cu bandă,
   locul desenului, exercițiile, coperta și balonul.

   Cartonașul: banda (.cf-tub) stă în spatele cartonașului (z-index -1
   în contextul lui) și se vede numai prin fereastră și deasupra și
   dedesubtul cartonașului. Chenarul roșu e desenat de ::after, peste
   bandă; benzile albe ale ferestrei (::before, ::after) acoperă banda
   în marginile de sus și de jos ale cartonașului.
   ============================================================ */

:root {
  --cf-rosu: #d63a2f;
  --cf-litera: #c0261b;
}

.cf-activitate { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cf-ajutor { margin: 0; color: var(--cerneala-slaba); font-size: 1.15rem; font-weight: 600; text-align: center; }
.cf-mesaj { min-height: 2.8em; margin: 0; color: var(--verde-inchis); font-size: clamp(1.1rem, 2.2vw, 1.4rem); font-weight: 800; text-align: center; }
.cf-rand { display: block; }
.cf-butoane { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.cf-rand-lucru { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 48px; }

/* ---------- cartonașul cu bandă ---------- */

/* --h: înălțimea unei litere de pe bandă; --sus: câte litere din bandă
   se văd deasupra ferestrei (și dedesubt), cu tot cu cele estompate. */
.cf-montaj {
  --h: clamp(68px, 10vw, 116px);
  --sus: 1.4;
  --margine: calc(var(--h) * 0.2);
  display: flex;
  justify-content: center;
  padding: calc(var(--h) * (var(--sus) - 0.25)) 0;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.cf-montaj--mic { --h: clamp(44px, 6vw, 64px); --sus: 0.95; }
.cf-montaj--mobil { cursor: grab; touch-action: none; }
.cf-montaj--mobil:active { cursor: grabbing; }
.cf-montaj:focus-visible { outline: 4px solid var(--galben); outline-offset: -4px; border-radius: 18px; }

.cf-cartonas {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  padding: var(--margine) calc(var(--h) * 0.3);
  border-radius: calc(var(--h) * 0.18);
  background: #fff;
  box-shadow: 0 8px 18px rgba(80, 30, 20, 0.18);
  color: var(--cerneala);
  font-size: calc(var(--h) * 0.74);
  font-weight: 900;
  line-height: 1;
}
.cf-cartonas::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border: calc(var(--h) * 0.07) solid var(--cf-rosu);
  border-radius: inherit;
  box-shadow: inset 0 0 0 calc(var(--h) * 0.1) #fff, inset 0 0 0 calc(var(--h) * 0.13) #f3b7b1;
  pointer-events: none;
}
.cf-cartonas__litere { padding: 0 calc(var(--h) * 0.04); letter-spacing: 0.02em; }

.cf-fereastra {
  position: relative;
  flex: none;
  width: calc(var(--h) * 1.05);
  height: var(--h);
  margin: 0 calc(var(--h) * 0.04);
  border-radius: 6px;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.28), 0 0 0 3px #fff;
}
.cf-fereastra::before,
.cf-fereastra::after {
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  height: var(--margine);
  background: #fff;
}
.cf-fereastra::before { bottom: calc(100% + 3px); }
.cf-fereastra::after { top: calc(100% + 3px); }

.cf-tub {
  position: absolute;
  z-index: -1;
  left: 4px;
  right: 4px;
  top: calc(var(--h) * -1 * var(--sus));
  height: calc(var(--h) * (1 + 2 * var(--sus)));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
}
.cf-banda {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--h) * var(--sus));
  display: flex;
  flex-direction: column;
  transform: translateY(calc(var(--i, 0) * -1 * var(--h)));
  transition: transform 0.35s cubic-bezier(0.3, 1.3, 0.5, 1);
}
.cf-banda--trag { transition: none; }
.cf-banda__litera {
  display: grid;
  place-items: center;
  height: var(--h);
  border-left: 3px solid #9aa0ad;
  border-right: 3px solid #9aa0ad;
  background: #fff;
  color: var(--cf-litera);
  box-shadow: inset 0 -2px 0 #e3e5ea;
}

.cf-cu-sageti { display: flex; align-items: center; gap: 12px; }
.cf-sageti { display: flex; flex-direction: column; gap: 12px; }
.cf-sageata { width: 58px; height: 58px; border: 3px solid var(--linie); border-radius: 50%; background: #fff; color: var(--cerneala); font-size: 1.5rem; cursor: pointer; box-shadow: 0 4px 0 var(--linie); }
.cf-sageata:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--linie); }

/* ---------- desenul de lângă cartonaș ---------- */

.cf-rezultat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: clamp(150px, 20vw, 220px); min-height: clamp(170px, 22vw, 250px); padding: 10px; border: 4px dashed var(--linie); border-radius: var(--rotunjire); background: #fff; }
.cf-rezultat--sens { border-style: solid; border-color: var(--verde); background: #f1f9ee; animation: cf-apare 0.35s ease-out; }
.cf-rezultat--fara { border-color: #b8bccb; background: #f4f5f8; }
.cf-rezultat__img { display: block; width: clamp(110px, 15vw, 170px); height: clamp(110px, 15vw, 170px); object-fit: contain; font-size: 5rem; line-height: 1; text-align: center; }
.cf-rezultat__semn { color: #b8bccb; font-size: clamp(4rem, 9vw, 6rem); font-weight: 900; line-height: 1; }
.cf-rezultat__cuvant { font-size: clamp(1.4rem, 2.8vw, 1.9rem); font-weight: 900; }
.cf-rezultat--fara .cf-rezultat__cuvant { color: var(--cerneala-slaba); }
.cf-rezultat__nota { color: var(--cerneala-slaba); font-weight: 700; }

/* ---------- cuvintele găsite ---------- */

.cf-gasite-cadru { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; padding: 12px 20px; border: 3px solid var(--linie); border-radius: var(--rotunjire); background: #fffdf6; }
.cf-gasite__titlu { font-weight: 800; color: var(--cerneala-slaba); }
.cf-gasite { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cf-gasit { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 96px; min-height: 96px; padding: 6px; border: 3px solid var(--verde); border-radius: 16px; background: #fff; font-size: 1.15rem; font-weight: 800; animation: cf-apare 0.35s ease-out; }
.cf-gasit--gol { border-style: dashed; border-color: var(--linie); background: transparent; animation: none; }
.cf-gasit__img { width: 64px; height: 64px; object-fit: contain; font-size: 3rem; line-height: 1; }

/* ---------- are sens? / cuvântul și desenul ---------- */

.cf-runda { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.cf-runda__nr { margin: 0; color: var(--cerneala-slaba); font-weight: 700; }
.cf-raspuns--da.cf-raspuns--ales { background: var(--verde); }
.cf-raspuns--nu { background: #7d8394; }
.cf-raspuns--nu.cf-raspuns--ales { background: var(--verde); }
.cf-tinta { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: clamp(180px, 24vw, 260px); min-height: clamp(180px, 24vw, 260px); padding: 12px; border: 4px solid var(--cer); border-radius: var(--rotunjire); background: #f3f9fd; }
.cf-tinta--gasit { border-color: var(--verde); background: #f1f9ee; }
.cf-tinta__img { display: block; width: clamp(140px, 19vw, 210px); height: clamp(140px, 19vw, 210px); object-fit: contain; font-size: 6rem; line-height: 1; text-align: center; }
.cf-tinta__cuvant { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900; animation: cf-apare 0.35s ease-out; }

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

.cf-buton-instructiuni { padding: 6px 14px; border: 2px solid currentColor; border-radius: 999px; background: #fff; font: inherit; cursor: pointer; }
.cf-buton-instructiuni::before { content: '▸ '; }
.cf-buton-instructiuni[aria-expanded='true']::before { content: '▾ '; }
.cf-buton-instructiuni:hover { background: #fff3cf; }
.cf-foaie--instructiuni .cf-exercitiu { display: none !important; }
.cf-panou { display: flex; flex-direction: column; align-items: center; gap: 18px; margin: 14px 0 18px; animation: cf-apare 0.3s ease-out; }
.cf-panou[hidden] { display: none; }
.cf-explicatie { display: flex; flex-direction: column; gap: 16px; width: min(100%, 980px); }
.cf-explicatie__pas { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 18px; padding: 10px 20px; border: 3px solid var(--linie); border-radius: var(--rotunjire); background: #fff; animation: cf-apare 0.4s ease-out; }
.cf-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; }
.cf-explicatie__desen { display: flex; justify-content: center; }
.cf-explicatie__dreapta { display: flex; flex-direction: column; gap: 6px; }
.cf-explicatie__titlu { margin: 0; font-size: clamp(1.2rem, 2.3vw, 1.45rem); font-weight: 900; }
.cf-explicatie__text { margin: 0; font-size: clamp(1.1rem, 2.1vw, 1.3rem); font-weight: 600; line-height: 1.45; }
.cf-formula { align-self: flex-start; margin: 2px 0; padding: 2px 14px; border-radius: 10px; background: #fff3cf; font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 800; }
.cf-formula__litera { color: var(--cf-litera); font-weight: 900; }
.cf-retine { margin: 0; padding: 14px 20px; border: 3px solid var(--galben); border-radius: var(--rotunjire); background: #fff8e3; font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-weight: 800; text-align: center; animation: cf-apare 0.4s ease-out; }
.cf-cu-desen { display: flex; align-items: center; gap: 14px; }
.cf-cu-desen .cf-rezultat { width: clamp(110px, 12vw, 140px); min-height: clamp(120px, 13vw, 150px); }
.cf-cu-desen .cf-rezultat__img { width: clamp(72px, 9vw, 100px); height: clamp(72px, 9vw, 100px); }
.cf-cu-desen .cf-rezultat__semn { font-size: 3.4rem; }
.cf-cu-desen .cf-rezultat__cuvant { font-size: 1.3rem; }
@media (max-width: 760px) {
  .cf-explicatie__pas { grid-template-columns: auto 1fr; }
  .cf-explicatie__desen { grid-column: 1 / -1; }
}

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

.cf-invatat-cadru { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; width: 100%; }
@media (max-width: 760px) {
  .cf-invatat-cadru { grid-template-columns: 1fr; justify-items: center; }
}

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

.cf-cuprins__desen .cf-montaj { --h: clamp(30px, 3.6vw, 42px); --sus: 0.75; }

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

.cf-coperta { display: flex; flex-direction: column; align-items: center; gap: 22px; padding-top: 6px; }
.cf-coperta__carte { display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(100%, 600px); padding: 26px 24px 28px; border-radius: 18px; background: radial-gradient(circle at 50% 35%, #fffdf5, #ffe9b8 70%, #f9d27c); box-shadow: 0 14px 34px rgba(60, 45, 20, 0.22); }
.cf-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; }
.cf-coperta__titlu { margin: 6px 0 0; font-size: clamp(2.2rem, 6vw, 3.2rem); font-weight: 900; }
.cf-coperta__mijloc { display: flex; align-items: center; gap: 18px; }
.cf-coperta__desen { display: grid; place-items: center; width: clamp(100px, 20vw, 150px); height: clamp(100px, 20vw, 150px); }
.cf-coperta__img { width: 100%; height: 100%; object-fit: contain; animation: cf-apare 0.35s ease-out; }
.cf-coperta__sub { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--cerneala-slaba); text-align: center; }

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

.cf-balon-mesaj { 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); }
.cf-balon-mesaj[data-fel='indiciu'] { border-color: var(--galben); }
.cf-balon-mesaj__chip { position: absolute; left: -78px; bottom: -10px; width: 86px; height: 86px; object-fit: contain; }
.cf-balon-mesaj__text { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.4; }
.cf-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; }
.cf-balon-mesaj--apare { animation: cf-apare 0.35s ease-out; }
@keyframes cf-apare { from { transform: translateY(20px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .cf-banda { transition: none; }
}