/* ============================================================
   GRĂDINA CELOR PATRU ZÂNE — aspectul
   ============================================================
   Pagina ocupă tot ecranul tablei: sus filele activităților, la mijloc
   activitatea, jos „Grădina mea”. Desenele și butoanele sunt mari, de
   atins cu degetul; nimic nu se derulează în interiorul unei casete.
   ============================================================ */

:root {
  --fundal: #f4f9ec;
  --card: #ffffff;
  --cerneala: #23331f;
  --cerneala-slaba: #55644f;
  --verde: #4f9a3a;
  --verde-inchis: #2f6e24;
  --verde-deschis: #e5f3d9;
  --linie: #d5e6c6;
  --galben: #ffd65a;
  --maro: #5a4630;
  --rotunjire: 22px;
  color-scheme: light;
}

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

body {
  background:
    radial-gradient(circle at 8% 0%, #fffbe6 0, transparent 38%),
    radial-gradient(circle at 95% 10%, #e3f1ff 0, transparent 40%),
    var(--fundal);
  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: 1800px;
  margin: 0 auto;
  padding: 10px clamp(10px, 2vw, 28px) 0;
}

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

.sus {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px 18px;
}
.inapoi {
  color: var(--verde-inchis);
  font-weight: 600;
  text-decoration: none;
}
.inapoi:hover { text-decoration: underline; }
.titlu {
  margin: 0;
  font-size: clamp(1.3rem, 2.4vw, 2.1rem);
  color: var(--verde-inchis);
}
.buton-sunet {
  justify-self: end;
  min-height: 48px;
  padding: 6px 18px;
  border: 2px solid var(--linie);
  border-radius: 999px;
  background: #fff;
  color: var(--verde-inchis);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.buton-sunet[aria-pressed='false'] { color: var(--cerneala-slaba); }
.file {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.fila {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 4px 14px 4px 6px;
  border: 2px solid var(--linie);
  border-radius: 999px;
  background: var(--card);
  color: var(--cerneala);
  font: inherit;
  font-weight: 600;
  font-size: clamp(0.9rem, 0.95vw, 1.1rem);
  cursor: pointer;
  box-shadow: 0 2px 0 var(--linie);
}
.fila:hover { border-color: var(--verde); }
.fila[aria-current='page'] {
  background: var(--verde);
  border-color: var(--verde-inchis);
  color: #fff;
  box-shadow: 0 2px 0 var(--verde-inchis);
}
.fila__simbol {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  padding: 2px;
}

/* ---------- Scena ---------- */

.scena {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.4vh, 16px);
  padding: clamp(8px, 1.4vh, 16px) 0;
  outline: none;
}
.scena:focus-visible { outline: none; }

.cerinta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
}
.cerinta h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.9rem);
}
.cerinta p {
  margin: 0;
  font-size: clamp(1.05rem, 1.5vw, 1.45rem);
  color: var(--cerneala-slaba);
}

.buton {
  min-height: 60px;
  padding: 10px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--verde);
  color: #fff;
  font: inherit;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--verde-inchis);
}
.buton:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--verde-inchis); }
.buton--usor {
  background: #fff;
  color: var(--verde-inchis);
  border: 2px solid var(--verde);
  box-shadow: 0 3px 0 var(--linie);
}

.final {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 24px;
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  font-weight: 600;
}
.final p { margin: 0; }

:focus-visible { outline: 4px solid #2f6fde; outline-offset: 3px; }

/* ---------- Acasă ---------- */

.acasa {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(14px, 2.5vw, 40px);
  align-items: center;
  flex: 1;
}
.acasa__zane {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.acasa__zana {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 4px solid var(--culoare);
  background: #fff;
  box-shadow: 0 6px 18px rgba(40, 60, 30, 0.15);
}
.acasa__zana img {
  display: block;
  width: 100%;
  height: clamp(240px, 56vh, 640px);
  object-fit: cover;
}
.acasa__zana figcaption {
  padding: 6px 4px;
  text-align: center;
  font-weight: 700;
  font-size: clamp(0.85rem, 1.1vw, 1.15rem);
  color: var(--culoare);
}
.acasa__poveste h2 {
  margin: 0 0 10px;
  font-size: clamp(1.4rem, 2.4vw, 2.3rem);
  color: var(--verde-inchis);
}
.acasa__poveste p {
  margin: 0 0 18px;
  font-size: clamp(1.1rem, 1.5vw, 1.45rem);
  line-height: 1.45;
}
.acasa__alegeri {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}
.alegere {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 8px 14px;
  border: 2px solid var(--linie);
  border-radius: 18px;
  background: #fff;
  font: inherit;
  font-weight: 700;
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  color: var(--cerneala);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--linie);
}
.alegere:hover { border-color: var(--verde); }
.alegere .fila__simbol { width: 58px; height: 58px; }

/* ---------- Obiectele care se trag ---------- */

.obiect,
.haina,
.cartonas {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.obiect,
.haina {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 10px 8px;
  border: 3px solid var(--linie);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 5px 0 var(--linie), 0 8px 18px rgba(40, 60, 30, 0.12);
  transition: transform 0.15s, box-shadow 0.15s;
}
.obiect .desen,
.haina .desen {
  width: clamp(80px, min(8vw, 12vh), 140px);
  height: clamp(80px, min(8vw, 12vh), 140px);
  object-fit: contain;
  pointer-events: none;
}
.obiect__nume {
  font-weight: 700;
  font-size: clamp(0.95rem, 1.2vw, 1.25rem);
  text-align: center;
}
.obiect:hover,
.haina:hover { transform: translateY(-3px); }
.ales {
  border-color: #f2b600 !important;
  box-shadow: 0 0 0 6px rgba(255, 214, 90, 0.7), 0 10px 22px rgba(40, 60, 30, 0.2) !important;
  transform: translateY(-6px) scale(1.04);
}
.tras { opacity: 0.25; }
/* Copia urmează degetul; nu trebuie să acopere locul pe care se pune
   (și desenele din grădină, .pe-scena, au alte reguli de poziție). */
.copie-trasa,
.pe-scena.copie-trasa {
  position: fixed;
  z-index: 1000;
  margin: 0;
  pointer-events: none;
  transition: none;
  cursor: grabbing;
  box-shadow: 0 18px 30px rgba(40, 60, 30, 0.3);
}
.intra { animation: intra 0.45s ease-out both; }
@keyframes intra {
  from { opacity: 0; transform: translateY(30px) scale(0.8); }
  to { opacity: 1; transform: none; }
}
.scutura { animation: scutura 0.45s ease-in-out; }
@keyframes scutura {
  0%, 100% { translate: 0; }
  20% { translate: -10px; }
  40% { translate: 10px; }
  60% { translate: -6px; }
  80% { translate: 6px; }
}

body.cu-ales [data-tinta]:not(.plin) {
  outline: 4px dashed #f2b600;
  outline-offset: 4px;
}
.sub-obiect {
  outline: 5px solid #f2b600 !important;
  outline-offset: 4px;
  transform: scale(1.02);
}

/* ---------- Cui îi aparține? ---------- */

.zane {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 18px);
  flex: 1;
}
.zana {
  position: relative;
  min-height: clamp(200px, 40vh, 500px);
  border: 5px solid var(--culoare);
  border-radius: var(--rotunjire);
  overflow: hidden;
  background: var(--deschis);
  box-shadow: 0 6px 18px rgba(40, 60, 30, 0.15);
  transition: transform 0.2s;
}
.zana__poza {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  pointer-events: none;
}
.zana__nume {
  position: absolute;
  top: 10px;
  left: 50%;
  translate: -50% 0;
  padding: 4px 16px;
  border-radius: 999px;
  background: var(--culoare);
  color: #fff;
  font-weight: 800;
  font-size: clamp(1rem, 1.5vw, 1.45rem);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.zana__cos {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  pointer-events: none;
}
.in-cos {
  width: clamp(44px, 4.6vw, 76px);
  height: clamp(44px, 4.6vw, 76px);
  padding: 4px;
  object-fit: contain;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  animation: intra 0.4s ease-out both;
}
.primeste { animation: primeste 0.5s ease-out; }
@keyframes primeste {
  40% { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(255, 214, 90, 0.8); }
}

.tava {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(10px, 2vw, 30px);
  min-height: clamp(120px, 17vh, 200px);
}

/* ---------- Transformă grădina ---------- */

.transforma {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(14px, 2.5vw, 36px);
  align-items: start;
  flex: 1;
}
.priveliste {
  position: relative;
  height: clamp(320px, 66vh, 820px);
  aspect-ratio: 440 / 887;
  border-radius: var(--rotunjire);
  overflow: hidden;
  background: #dfe9d4;
  box-shadow: 0 8px 24px rgba(40, 60, 30, 0.22);
}
.priveliste__poza {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.priveliste__poza.activa { opacity: 1; }
.priveliste__panza {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.transforma__dreapta {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vh, 22px);
}
.intrebare-cutie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: clamp(12px, 2vh, 22px) clamp(14px, 2vw, 26px);
  border-radius: var(--rotunjire);
  background: #fff;
  border: 3px solid var(--linie);
}
.intrebare {
  flex: 1 1 320px;
  margin: 0;
  font-size: clamp(1.25rem, 2.1vw, 2rem);
  font-weight: 700;
  line-height: 1.3;
}

.anotimpuri {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 16px);
}
.anotimp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border: 4px solid var(--culoare);
  border-radius: 20px;
  background: var(--deschis);
  font: inherit;
  font-weight: 800;
  font-size: clamp(1rem, 1.4vw, 1.4rem);
  color: var(--cerneala);
  cursor: pointer;
  box-shadow: 0 4px 0 var(--culoare);
  transition: transform 0.15s;
}
.anotimp img {
  width: clamp(70px, 7.5vw, 130px);
  height: clamp(70px, 7.5vw, 130px);
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.anotimp:hover { transform: translateY(-3px); }
.anotimp[aria-pressed='true'],
.anotimp.corect {
  background: var(--culoare);
  color: #fff;
}
.anotimpuri--mari .anotimp img {
  width: clamp(90px, 10vw, 170px);
  height: clamp(90px, 10vw, 170px);
}

.observatii {
  margin: 0;
  padding: clamp(12px, 2vh, 20px) clamp(14px, 2vw, 24px);
  border-radius: var(--rotunjire);
  background: #fff;
  border: 3px solid var(--linie);
}
.observatii__titlu {
  margin-bottom: 8px;
  font-weight: 800;
  font-size: clamp(1.2rem, 1.8vw, 1.7rem);
  color: var(--culoare);
}
.observatie {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--linie);
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
}
.observatie dt { font-weight: 800; }
.observatie dd { margin: 0; }

/* ---------- Pregătim o plimbare ---------- */

.plimbare {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vh, 22px);
  flex: 1;
}
.vremea {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(12px, 2vw, 28px);
  padding: 12px;
  border: 4px solid var(--culoare);
  border-radius: var(--rotunjire);
  background: var(--deschis);
}
.vremea__poza {
  width: clamp(120px, 12vw, 220px);
  height: clamp(170px, 30vh, 360px);
  object-fit: cover;
  border-radius: 16px;
}
.vremea__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.vremea__eticheta {
  margin: 0;
  font-weight: 700;
  color: var(--cerneala-slaba);
}
.vremea__cum {
  margin: 0;
  font-size: clamp(1.3rem, 2.3vw, 2.2rem);
  font-weight: 800;
  line-height: 1.25;
}
.imbracam {
  flex: 1;
  padding: 10px;
  border: 3px dashed var(--culoare);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
}
.imbracam__titlu { margin: 0 0 6px; font-weight: 700; }
.imbracam__locuri {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.loc-haina {
  display: grid;
  place-items: center;
  width: clamp(80px, 8.5vw, 140px);
  height: clamp(80px, 8.5vw, 140px);
  border-radius: 18px;
  background: #fff;
  border: 3px solid var(--linie);
}
.in-loc {
  width: 86%;
  height: 86%;
  object-fit: contain;
  animation: intra 0.4s ease-out both;
}
.dulap {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 20px);
}
.haina.pus { opacity: 0.3; pointer-events: none; }
.haina.nepotrivit { border-color: #e7b4a8; }

/* ---------- Ghicitorile zânelor ---------- */

.ghicitori {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2.2vh, 26px);
  flex: 1;
}
.ghicitoare {
  position: relative;
  width: min(100%, 1100px);
  padding: clamp(14px, 2.4vh, 28px) clamp(18px, 3vw, 40px);
  border-radius: 28px;
  background: #fff;
  border: 4px solid var(--linie);
  box-shadow: 0 8px 24px rgba(40, 60, 30, 0.12);
  text-align: center;
}
.ghicitoare__numar {
  margin: 0 0 6px;
  font-weight: 700;
  color: var(--cerneala-slaba);
}
.indicii {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.indicii li {
  margin: 6px 0;
  font-size: clamp(1.4rem, 2.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.3;
  animation: intra 0.4s ease-out both;
}
.indicii li + li {
  padding-top: 8px;
  border-top: 2px dashed var(--linie);
  color: var(--verde-inchis);
}
.ghicitori .anotimpuri { width: min(100%, 1100px); }
.raspuns__poza {
  width: clamp(90px, 9vw, 150px);
  height: clamp(130px, 18vh, 220px);
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ---------- Roata anului ---------- */

.roata-cutie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vw, 48px);
  flex: 1;
}
.roata {
  position: relative;
  width: min(clamp(300px, 62vh, 640px), calc(100vw - 32px));
  aspect-ratio: 1;
}
.roata__fond {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  background: conic-gradient(from -45deg, #fbd3df 0 25%, #fff0b8 0 50%, #fbd6bd 0 75%, #d6e8f8 0);
  border: 5px solid var(--maro);
  box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.5), 0 8px 24px rgba(40, 60, 30, 0.2);
}
.roata__sageti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.roata--gata .roata__sageti { animation: roteste 2.4s ease-in-out; }
@keyframes roteste { to { transform: rotate(360deg); } }
.roata__mijloc {
  position: absolute;
  inset: 41%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff8ec;
  border: 4px solid var(--maro);
  font-weight: 800;
  font-size: clamp(0.9rem, 1.6vh, 1.3rem);
  color: var(--maro);
}
.loc-roata {
  position: absolute;
  width: 30%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 4px dashed var(--maro);
  background: rgba(255, 255, 255, 0.75);
  translate: -50% -50%;
}
.loc-roata.plin { border-style: solid; background: #fff; }
.loc-roata--0 { left: 50%; top: 15%; }
.loc-roata--1 { left: 85%; top: 50%; }
.loc-roata--2 { left: 50%; top: 85%; }
.loc-roata--3 { left: 15%; top: 50%; }
.cartonas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-weight: 800;
  font-size: clamp(0.9rem, 1.7vh, 1.3rem);
  color: var(--cerneala);
}
.cartonas img {
  width: clamp(70px, 12vh, 130px);
  height: clamp(70px, 12vh, 130px);
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid var(--culoare);
  background: var(--deschis);
  pointer-events: none;
}
.loc-roata .cartonas img {
  width: clamp(44px, min(10.5vh, 16vw), 116px);
  height: clamp(44px, min(10.5vh, 16vw), 116px);
}
.loc-roata .cartonas { font-size: clamp(0.75rem, min(1.7vh, 3vw), 1.3rem); }
.cartonas.pus { cursor: default; }
.tava--roata .cartonas {
  padding: 10px 14px;
  border-radius: 20px;
  background: #fff;
  border: 3px solid var(--linie);
  box-shadow: 0 5px 0 var(--linie);
}
.roata-dreapta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  min-width: min(100%, 300px);
}

/* ---------- Bifa și X-ul ---------- */

.semn {
  position: fixed;
  z-index: 1100;
  width: var(--marime);
  height: var(--marime);
  translate: -50% -50%;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.3));
  animation: semn 1.5s ease-out both;
}
.semn svg { display: block; width: 100%; height: 100%; }
@keyframes semn {
  0% { opacity: 0; transform: scale(0.3); }
  15% { opacity: 1; transform: scale(1.12); }
  25% { transform: scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: scale(1); }
}

/* ---------- Grădina desenată (copac.js) ---------- */

.copac-cutie {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 32%);
  gap: clamp(12px, 2vw, 28px);
  align-items: start;
  flex: 1;
}
.scena-gradina {
  position: relative;
  width: min(100%, calc((100dvh - 300px) * 1.6));
  min-width: 280px;
  aspect-ratio: 16 / 10;
  border-radius: var(--rotunjire);
  overflow: hidden;
  background: #cfe6f7;
  box-shadow: 0 8px 24px rgba(40, 60, 30, 0.22);
  justify-self: center;
}
.scena-gradina__desen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.scena-gradina .fundal { opacity: 0; transition: opacity 1s ease; }
.scena-gradina[data-anotimp='primavara'] .fundal[data-pentru='primavara'],
.scena-gradina[data-anotimp='vara'] .fundal[data-pentru='vara'],
.scena-gradina[data-anotimp='toamna'] .fundal[data-pentru='toamna'],
.scena-gradina[data-anotimp='iarna'] .fundal[data-pentru='iarna'] { opacity: 1; }

/* Straturile copacului: fiecare bucată (mugur, floare, frunză, măr)
   crește din nimic, pe rând. */
.strat .p {
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) calc(var(--i) * 14ms),
    opacity 0.3s calc(var(--i) * 14ms);
}
.are-muguri .strat-muguri .p,
.are-flori .strat-flori .p,
.are-frunze-verzi .strat-frunze-verzi .p,
.are-frunze-ruginii .strat-frunze-ruginii .p,
.are-mere-verzi .strat-mere-verzi .p,
.are-mere-rosii .strat-mere-rosii .p,
.are-cirese .strat-cirese .p,
.are-cazute .strat-cazute .p {
  opacity: 1;
  transform: none;
}
.strat-zapada { opacity: 0; transition: opacity 1.2s; }
.are-zapada .strat-zapada { opacity: 1; }
.cad-frunzele .strat-frunze-ruginii .p {
  opacity: 0;
  transform: translate(30px, 560px) rotate(140deg);
  transition:
    transform 1.6s ease-in calc(var(--i) * 18ms),
    opacity 1.6s ease-in calc(var(--i) * 18ms);
}
.ploaie { animation: ploaie 0.45s linear infinite; }
@keyframes ploaie { to { transform: translate(-10px, 34px); } }
.ninsoare { animation: ninsoare 3s linear infinite alternate; }
@keyframes ninsoare { to { transform: translate(12px, 26px); } }
.copac-tinta { cursor: pointer; }

.scena-gradina__obiecte {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pe-scena {
  position: absolute;
  pointer-events: auto;
  transition: left 0.6s ease, top 0.6s ease, width 0.6s ease, opacity 0.6s;
}
.pe-scena > img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}
.pe-scena__eticheta {
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 70%;
  padding: 2px 12px;
  border-radius: 999px;
  background: #fff;
  font-weight: 700;
  font-size: clamp(0.8rem, 1.05vw, 1.1rem);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.cerc-gol {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 5px dashed rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.28);
}
.tinta-scena--scorbura .cerc-gol { border-color: #ffd65a; background: rgba(255, 214, 90, 0.18); }
.zona-vreme {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 5px dashed #fff;
}
.zona-vreme img { width: 66%; pointer-events: none; }
.zona-vreme--cald { background: rgba(255, 214, 90, 0.55); }
.zona-vreme--ger { background: rgba(170, 205, 240, 0.7); }
.de-mutat { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.de-mutat > img, .de-atins > img { transition: transform 0.15s; }
.de-mutat:hover > img, .de-atins:hover > img { transform: scale(1.08); }
.de-atins { cursor: pointer; }
.pe-scena.ales { outline: 5px solid #f2b600; outline-offset: 2px; border-radius: 16px; transform: none; }
/* Ce s-a pus deja nu mai prinde atingerile: altfel acoperă locul
   pentru următorul (al doilea măr în coș, al doilea bulgăre). */
.pe-scena.pus { cursor: default; pointer-events: none; }
.decor { pointer-events: none; }
.gasita > img { transform: scale(1.35) !important; filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 10px #ffd65a); }
.doarme > img { filter: brightness(0.92) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)); }
.zzz {
  position: absolute;
  top: -40%;
  right: -30%;
  font-weight: 800;
  font-size: clamp(1rem, 1.6vw, 1.6rem);
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  animation: zzz 2s ease-in-out infinite;
}
@keyframes zzz { 50% { transform: translateY(-8px); opacity: 0.6; } }
.zboara { opacity: 0.5; }
.cer-tinta { aspect-ratio: 1.6; border-radius: 50%; }
.atins { animation: atins 0.6s ease-out; }
@keyframes atins {
  40% { transform: scale(1.12); filter: drop-shadow(0 0 14px #fff6b8); }
}
.scena-gradina.atins { animation: none; }
.rasare { animation: rasare 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
.gramada-creste > img { transform: scale(var(--m, 1)); transform-origin: bottom center; transition: transform 0.4s; }
.samanta-in-gropita { position: absolute; width: 30%; left: 35%; top: 40%; }
.rasad-in-gropita { position: absolute; width: 74%; left: 13%; bottom: 30%; animation: rasare 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
.stropitoare-uda { pointer-events: none; animation: uda 1.3s ease-in-out both; transform-origin: 30% 70%; }
.stropitoare-uda::after {
  content: '';
  position: absolute;
  left: -10%;
  top: 70%;
  width: 40%;
  height: 80%;
  background: radial-gradient(circle, #6fb8ec 0 18%, transparent 20%) 0 0 / 34% 28%;
  animation: picaturi 0.5s linear infinite;
}
@keyframes uda {
  0% { opacity: 0; transform: rotate(0); }
  20% { opacity: 1; transform: rotate(-30deg); }
  85% { opacity: 1; transform: rotate(-30deg); }
  100% { opacity: 0; transform: rotate(0); }
}
@keyframes picaturi { to { background-position: 0 100%; } }

/* ---------- Panoul de lângă grădină ---------- */

.copac-panou,
.misiune-panou {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.5vh, 16px);
  padding: clamp(12px, 1.6vw, 22px);
  border-radius: var(--rotunjire);
  background: #fff;
  border: 3px solid var(--linie);
}
.copac-cap {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(1.1rem, 1.5vw, 1.45rem);
}
.copac-cap img {
  width: clamp(56px, 6vw, 84px);
  height: clamp(56px, 6vw, 84px);
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--culoare, var(--verde));
}
.copac-cap span { color: var(--cerneala-slaba); font-size: 0.85em; }
.copac-sarcina {
  margin: 0;
  font-size: clamp(1.15rem, 1.7vw, 1.6rem);
  font-weight: 700;
  line-height: 1.3;
}
.tava--jetoane {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  min-height: 0;
}
.obiect--mic { padding: 6px 4px; border-radius: 16px; }
.obiect--mic .desen { width: clamp(56px, 5vw, 86px); height: clamp(56px, 5vw, 86px); }
.obiect--mic .obiect__nume { font-size: clamp(0.8rem, 0.95vw, 1rem); }
.obiect.pus { opacity: 0.3; pointer-events: none; }
.variante { display: flex; flex-direction: column; gap: 10px; }
.varianta {
  padding: 14px 18px;
  border: 3px solid var(--linie);
  border-radius: 16px;
  background: #fff;
  font: inherit;
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  font-weight: 600;
  text-align: left;
  color: var(--cerneala);
  cursor: pointer;
  box-shadow: 0 3px 0 var(--linie);
}
.varianta:hover { border-color: var(--verde); }
.varianta--bine { border-color: #2ea44f; background: #e7f6ea; }
.copac-intrebare { display: flex; flex-direction: column; gap: 12px; }

.album {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
}
.album__loc { margin: 0; text-align: center; font-weight: 700; font-size: 0.9rem; color: var(--culoare); }
.album__poza {
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  border: 3px solid var(--culoare);
}
.album__poza--gol {
  display: grid;
  place-items: center;
  border-style: dashed;
  background: #f6f8f3;
  color: var(--cerneala-slaba);
  font-size: 1.6rem;
}
.album__loc--acum .album__poza--gol { background: #fffbe6; }
.scena-gradina--mica { width: 100%; min-width: 0; border-radius: 0; box-shadow: none; pointer-events: none; }

/* ---------- Animalele și misiunile ---------- */

.meniu-misiuni {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(12px, 2vw, 24px);
}
.card-misiune {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 12px;
  border: 4px solid var(--culoare);
  border-radius: var(--rotunjire);
  background: var(--deschis);
  font: inherit;
  font-weight: 800;
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  color: var(--cerneala);
  cursor: pointer;
  box-shadow: 0 5px 0 var(--culoare);
}
.card-misiune:hover { transform: translateY(-3px); }
.card-misiune__desen { width: clamp(110px, 12vw, 180px); height: clamp(110px, 12vw, 180px); object-fit: contain; }
.misiune-progres { margin: 0; font-weight: 700; color: var(--verde-inchis); font-size: clamp(1rem, 1.3vw, 1.3rem); }
.misiune-progres:empty { display: none; }
.explicatie {
  padding: 12px 16px;
  border-left: 6px solid var(--culoare, var(--verde));
  border-radius: 12px;
  background: #fbfdf7;
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  line-height: 1.4;
}
.misiune-jos { display: flex; flex-direction: column; gap: 10px; }
.misiune-jos .anotimpuri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.misiune-jos .anotimp img { width: clamp(56px, 5vw, 90px); height: clamp(56px, 5vw, 90px); }

.obiective {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.obiectiv {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border: 3px solid var(--linie);
  border-radius: 16px;
  background: #fff;
}
.obiectiv__desen { width: clamp(56px, 5.5vw, 96px); height: clamp(56px, 5.5vw, 96px); object-fit: contain; }
.obiectiv--haina .obiectiv__desen { filter: grayscale(1) opacity(0.6); }
.obiectiv__numar { font-weight: 800; font-size: clamp(1.1rem, 1.5vw, 1.5rem); }
.obiectiv--gata { border-color: #2ea44f; background: #e7f6ea; }
.obiectiv--gata::after {
  content: '✓';
  position: absolute;
  top: -12px;
  right: -10px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #2ea44f;
  color: #fff;
  font-weight: 900;
  font-size: 1.3rem;
  border: 3px solid #fff;
}
.haine-misiune__titlu { margin: 0 0 6px; font-weight: 800; font-size: clamp(1.05rem, 1.4vw, 1.35rem); }
.haine-misiune__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.haina--mica { padding: 6px 4px; border-radius: 16px; font: inherit; cursor: pointer; }
.haina--mica .desen { width: clamp(56px, 5vw, 90px); height: clamp(56px, 5vw, 90px); }
.haina--aleasa { border-color: #2ea44f; background: #e7f6ea; }

.anotimpuri--coloana { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }

@media (max-width: 900px) {
  .copac-cutie { grid-template-columns: 1fr; }
  .scena-gradina { width: 100%; }
}

/* ---------- Povestea anotimpurilor (poveste.js) ---------- */

.poveste {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
  grid-template-areas: 'ilustratie text' 'comenzi comenzi';
  gap: clamp(12px, 2vw, 26px);
  align-items: start;
}
.poveste > .ilustratie { grid-area: ilustratie; }
.poveste__text { grid-area: text; }
.poveste__comenzi { grid-area: comenzi; }

.ilustratie {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: calc(100dvh - 330px);
  min-height: 220px;
  border-radius: var(--rotunjire);
  overflow: hidden;
  background: linear-gradient(#e6f3ff, #fdf6e3 70%, #eef6e0);
  box-shadow: 0 8px 24px rgba(40, 60, 30, 0.2);
}
.ilustratie__imagine { width: 100%; height: 100%; object-fit: cover; display: block; }
.ilustratie--scena-1 { background: linear-gradient(#cfe6f7, #f7f2e2 75%, #dcebc8); }
.ilustratie--scena-6 { background: linear-gradient(#fdf6e3, #f3e6c8); }
.ilustratie__loc {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--rotire, 0deg));
}
.ilustratie__loc > img { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.22)); }
.ilustratie__loc > .ilustratie__zana-intreaga { filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.25)); }
.ilustratie__zana {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid var(--culoare);
  background: #fff;
}
.zboara-pagina { animation: pagina-zboara 3.2s ease-in-out infinite alternate; }
.zboara-pagina:nth-child(odd) { animation-duration: 2.6s; }
@keyframes pagina-zboara {
  to { transform: translate(-50%, -62%) rotate(calc(var(--rotire, 0deg) + 8deg)); }
}
.ridicata { animation: ridicata 2.4s ease-in-out infinite alternate; }
@keyframes ridicata { to { transform: translate(-50%, -62%) rotate(-20deg); } }

.pagina-calendar {
  position: relative;
  padding: 9% 6% 6%;
  border-radius: 8px;
  background: #fffdf6;
  border: 2px solid #e2d4b4;
  box-shadow: 0 8px 18px rgba(60, 40, 10, 0.28);
}
.pagina-calendar__inele {
  position: absolute;
  top: 2%;
  left: 8%;
  right: 8%;
  height: 5%;
  min-height: 6px;
  background: radial-gradient(circle, #8a7a60 0 35%, transparent 40%) 0 50% / 12.5% 100% repeat-x;
}
.pagina-calendar .scena-gradina--mica {
  border: 3px solid var(--culoare);
  border-radius: 4px;
}
.pagina-calendar__nume {
  display: block;
  margin-top: 6%;
  text-align: center;
  font-weight: 800;
  font-size: clamp(0.8rem, 1.2vw, 1.25rem);
  color: var(--culoare);
}
.sageata-roata {
  height: clamp(18px, 3vh, 34px);
  border: 5px solid var(--maro);
  border-top: 0;
  border-radius: 0 0 40px 40px;
  position: relative;
}
.sageata-roata::after {
  content: '';
  position: absolute;
  left: -13px;
  top: -16px;
  border: 10px solid transparent;
  border-bottom: 16px solid var(--maro);
}

.poveste__text {
  padding: clamp(14px, 2vw, 28px);
  border-radius: var(--rotunjire);
  background: #fff;
  border: 3px solid var(--linie);
  font-size: clamp(1.1rem, 1.45vw, 1.45rem);
  line-height: 1.5;
}
.poveste__numar {
  margin: 0 0 4px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cerneala-slaba);
}
.poveste__titlu {
  margin: 0 0 10px;
  font-size: 1.25em;
  color: var(--verde-inchis);
}
.poveste__paragraf,
.poveste__replica { margin: 0 0 0.6em; }
.poveste__replica { padding-left: 0.6em; color: #3d2e5a; font-weight: 600; }
/* Paragraful care se aude acum. */
.poveste__text .se-citeste {
  margin-left: -0.6em;
  padding-left: 0.4em;
  border-left: 5px solid var(--galben);
  background: #fffbea;
  border-radius: 6px;
}

.poveste__comenzi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.poveste__comenzi > :last-child { margin-left: auto; }
.buton-poveste {
  min-height: 60px;
  padding: 10px 22px;
  border: 3px solid var(--verde);
  border-radius: 999px;
  background: #fff;
  color: var(--verde-inchis);
  font: inherit;
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--linie);
}
.buton-poveste[aria-pressed='true'] { background: var(--verde-deschis); }
.buton-poveste--sunet { border-color: var(--linie); color: var(--cerneala-slaba); }
.buton--mare { min-height: 76px; padding: 14px 40px; font-size: clamp(1.3rem, 2vw, 1.8rem); }
.indeamna { animation: indeamna 1.2s ease-in-out infinite; }
@keyframes indeamna {
  50% { box-shadow: 0 4px 0 var(--verde-inchis), 0 0 0 10px rgba(79, 154, 58, 0.3); }
}

.coperta-poveste {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2vh, 22px);
  padding: clamp(16px, 3vh, 40px) 16px;
  border-radius: 28px;
  background: #fff;
  border: 3px solid var(--linie);
  text-align: center;
}
.coperta-poveste__zane { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.coperta-poveste__zane img {
  width: clamp(80px, 9vw, 150px);
  height: clamp(80px, 9vw, 150px);
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid var(--culoare);
}
.coperta-poveste__titlu { margin: 0; font-size: clamp(1.6rem, 3vw, 2.8rem); color: var(--verde-inchis); }
.coperta-poveste__despre { margin: 0; font-size: clamp(1.1rem, 1.5vw, 1.4rem); color: var(--cerneala-slaba); }
.coperta-poveste__butoane { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.coperta-poveste__gata { margin: 0; font-weight: 700; color: #2e7d3e; }

.intrebare-poveste {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vh, 20px);
  width: min(100%, 1150px);
  margin: 0 auto;
}
.intrebare-poveste__cap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.intrebare-poveste__cap h2 { margin: 0; flex: 1 1 400px; font-size: clamp(1.4rem, 2.5vw, 2.3rem); }
.variante-poveste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 24px);
}
.varianta-poveste {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: clamp(10px, 1.5vw, 20px);
  border: 4px solid var(--linie);
  border-radius: var(--rotunjire);
  background: #fff;
  font: inherit;
  font-weight: 800;
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  color: var(--cerneala);
  cursor: pointer;
  box-shadow: 0 5px 0 var(--linie);
  transition: transform 0.15s, box-shadow 0.3s;
}
.varianta-poveste:hover { transform: translateY(-3px); }
.varianta-poveste__desen,
.varianta-poveste__zana {
  width: clamp(90px, 12vw, 190px);
  height: clamp(90px, 12vw, 190px);
  object-fit: contain;
  pointer-events: none;
}
.varianta-poveste__zana { object-fit: cover; border-radius: 50%; border: 5px solid var(--culoare); }
.varianta-poveste.corect,
.locuri-ordine.corect {
  border-color: #2ea44f;
  background: #e7f6ea;
  box-shadow: 0 5px 0 #2ea44f, 0 0 0 8px rgba(46, 164, 79, 0.18);
}
.raspuns-poveste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  min-height: 60px;
}
.raspuns-poveste p { margin: 0; flex: 1 1 400px; font-size: clamp(1.1rem, 1.6vw, 1.5rem); font-weight: 700; }
.raspuns-poveste__bine { color: #22743a; }
.raspuns-poveste__indiciu { color: #8a5a00; }
.raspuns-poveste__butoane { display: flex; flex-wrap: wrap; gap: 10px; }

.ordine-poveste { display: flex; flex-direction: column; gap: 16px; }
.locuri-ordine {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.5vw, 20px);
  padding: 10px;
  border-radius: var(--rotunjire);
  border: 3px solid transparent;
}
.loc-ordine {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(140px, 22vh, 230px);
  border: 4px dashed var(--maro);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.75);
}
.loc-ordine.plin { border-style: solid; background: #fff; }
.loc-ordine__nr {
  position: absolute;
  top: 6px;
  left: 10px;
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--maro);
}
.tava--ordine { min-height: 0; }
.cartonas--ordine {
  padding: 10px 14px;
  border-radius: 20px;
  background: #fff;
  border: 3px solid var(--linie);
  box-shadow: 0 5px 0 var(--linie);
}
.loc-ordine .cartonas--ordine { border: 0; box-shadow: none; padding: 0; }

.final-poveste {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2.5vh, 26px);
  text-align: center;
}
.final-poveste h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.6rem); color: var(--verde-inchis); }
.final-poveste__pagini {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 24px);
  width: min(100%, 1200px);
}

@media (max-width: 900px) {
  .poveste {
    grid-template-columns: 1fr;
    grid-template-areas: 'ilustratie' 'text' 'comenzi';
  }
  .ilustratie { max-height: none; }
  .poveste__comenzi > :last-child { margin-left: 0; }
  .poveste__comenzi > * { flex: 1 1 auto; }
  .locuri-ordine, .final-poveste__pagini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .variante-poveste { grid-template-columns: 1fr; }
  .varianta-poveste { flex-direction: row; justify-content: flex-start; }
  .varianta-poveste__desen, .varianta-poveste__zana { width: 80px; height: 80px; }
}

/* ---------- Butonul de ascultare ---------- */

.asculta {
  flex: none;
  width: 52px;
  height: 52px;
  border: 2px solid var(--linie);
  border-radius: 50%;
  background: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--linie);
}
.asculta:hover { border-color: var(--verde); }
.cerinta .asculta { align-self: center; width: 44px; height: 44px; font-size: 1.25rem; }
.cu-asculta { display: flex; align-items: flex-start; gap: 10px; }
.cu-asculta > :first-child { flex: 1; min-width: 0; }
.cu-asculta--centru { justify-content: center; }
.cu-asculta--centru > :first-child { flex: 0 1 auto; }
.obiectiv { cursor: pointer; }

/* ---------- Grădina mea ---------- */

.gradina-mea {
  display: flex;
  align-items: stretch;
  gap: 12px;
  height: clamp(64px, 9vh, 100px);
  margin: 0 calc(-1 * clamp(10px, 2vw, 28px));
  padding: 0 clamp(10px, 2vw, 28px);
}
.gradina-mea__eticheta {
  align-self: center;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 800;
  color: var(--verde-inchis);
  white-space: nowrap;
}
.gradina-mea__contor {
  min-width: 2.2em;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--verde);
  color: #fff;
  text-align: center;
  font-size: 1.3em;
}
.gradina-mea__pajiste {
  position: relative;
  flex: 1;
  border-radius: 18px 18px 0 0;
  background:
    radial-gradient(ellipse at 20% 100%, #8fd16a 0, transparent 60%),
    linear-gradient(#d9efff, #eef8ff 45%, #9bd57a 45%, #6fb84e);
  overflow: hidden;
}
.gradina-mea__straturi {
  position: absolute;
  inset: 0;
}
.rasplata {
  position: absolute;
  width: clamp(40px, 6.5vh, 74px);
  height: clamp(40px, 6.5vh, 74px);
  object-fit: contain;
  translate: -50% 0;
  animation: rasare 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) both;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.2));
}
@keyframes rasare {
  from { transform: scale(0) translateY(20px); }
  to { transform: none; }
}

/* ---------- Zâna vorbește ---------- */

.balon {
  position: fixed;
  z-index: 900;
  left: 50%;
  top: 10px;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(92vw, 900px);
  padding: 10px 46px 10px 10px;
  border-radius: 24px;
  background: #fff;
  border: 4px solid var(--culoare, var(--verde));
  box-shadow: 0 12px 32px rgba(30, 40, 20, 0.28);
}
.balon[data-fel='indiciu'] { background: #fffbea; }
.balon--apare { animation: intra 0.35s ease-out both; }
.balon__chip {
  flex: none;
  width: clamp(64px, 8vh, 96px);
  height: clamp(64px, 8vh, 96px);
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--culoare, var(--verde));
}
.balon__text {
  margin: 0;
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  font-weight: 700;
  line-height: 1.3;
}
.balon__inchide {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--cerneala-slaba);
  cursor: pointer;
}

/* ---------- Ecrane mici ---------- */

@media (max-width: 900px) {
  .acasa,
  .transforma { grid-template-columns: 1fr; }
  .acasa__zana img { height: clamp(180px, 34vh, 320px); }
  .priveliste { height: auto; width: min(100%, 360px); justify-self: center; }
  .dulap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zana { min-height: 34vh; }
  .zana__nume { font-size: 0.85rem; padding: 3px 8px; }
}
@media (max-width: 560px) {
  .fila__text { display: none; }
  .fila { padding: 6px; }
  .anotimpuri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vremea { grid-template-columns: 1fr; }
  .vremea__poza { width: 100%; height: 160px; }
  .observatie { grid-template-columns: 1fr; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}