/* ============================================================
   עולם 4 עולה רמה · 🆕 14.10.2026
   גלריית האותיות, המילה גדלה, האות הכפולה. ראו js/growth-beats.js
   🔴 המילים תמיד כהות על משטח בהיר, והתנועות ורודות, כמו בכל הקורס
   ============================================================ */

/* --- גלריית האותיות --- */
.lg-wall {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(52px, 9vw, 72px), 1fr));
  gap: clamp(6px, 1.2vw, 12px); width: min(100%, 720px); margin: 8px auto 0;
  /* ⚠️ בלי זה הבמה (flex) מכווצת את הקיר, הכרטיסים שומרים על הריבוע וגולשים על ההערה */
  flex-shrink: 0;
}
/* 🆕 15.10 · כל 26 האותיות (עולם 5): שתי שורות, a עד m ו-n עד z. בארבע שורות הקיר
   עלה על ההערה שמתחתיו. בטלפון שבע עמודות, והלוח מוקטן ב-fitPanel */
.lg-wall.is-abc { grid-template-columns: repeat(13, minmax(0, 1fr)); width: 100%; gap: 6px; }
.lg-wall.is-abc .lg-card { border-radius: 11px; }
.lg-wall.is-abc .lg-small { font-size: clamp(20px, 2.8vw, 32px); }
.lg-wall.is-abc .lg-pair { font-size: clamp(14px, 2vw, 22px); }
@media (max-width: 600px) { .lg-wall.is-abc { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.lg-stage { color: var(--teal); font-weight: 700; margin-bottom: 6px; text-align: center; }
.lg-card {
  position: relative; aspect-ratio: 1 / 1; padding: 0; border: 0; cursor: pointer;
  border-radius: 16px; touch-action: manipulation;
  background: linear-gradient(180deg, var(--white), var(--gray));
  box-shadow: 0 5px 0 #8b96a3, 0 0 0 2.5px var(--steel);
  font-family: 'Andika', 'Trebuchet MS', sans-serif; color: var(--ink);
  transition: transform .12s, box-shadow .25s;
}
.lg-card:active { transform: translateY(3px); }
.lg-small, .lg-pair { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .35s, transform .35s; }
.lg-small { font-size: clamp(26px, 4.6vw, 40px); font-weight: 700; }
/* הזוג: הגדולה בוורוד, הקטנה לידה. מוסתר עד שמוצאים */
.lg-pair {
  opacity: 0; transform: rotateY(90deg);
  display: flex; align-items: baseline; justify-content: center; gap: 2px;
  font-size: clamp(20px, 3.8vw, 32px); font-weight: 700;
}
.lg-pair b { color: var(--pink-deep, #c2186f); font-size: 1.18em; }
.lg-card.is-found { box-shadow: 0 5px 0 #1f8a57, 0 0 0 3px var(--ok), 0 0 18px rgba(51, 224, 143, .45); }
.lg-card.is-found .lg-small { opacity: 0; transform: rotateY(-90deg); }
.lg-card.is-found .lg-pair { opacity: 1; transform: none; }
.lg-card.is-wrong { box-shadow: 0 5px 0 #8b96a3, 0 0 0 3px var(--err); animation: shake .3s; }

/* --- המילה גדלה --- */
.gw-steps {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  font-family: 'Andika', sans-serif; font-size: 1.25rem; color: var(--text-soft);
}
.gw-steps span { padding: 2px 10px; border-radius: 10px; background: rgba(14, 17, 23, .55); }
.gw-steps span:last-child { color: var(--gold); box-shadow: 0 0 0 1.5px var(--gold); }
.gw-steps i { font-style: normal; color: var(--teal); }
.gw-rail { align-items: center; gap: 4px; }
.gw-ch, .dl-ch {
  width: clamp(48px, 9vw, 66px); height: clamp(56px, 10vw, 74px); border-radius: 14px;
  display: grid; place-items: center; flex: 0 0 auto;
  background: linear-gradient(180deg, var(--white), var(--gray));
  box-shadow: 0 5px 0 #8b96a3, 0 0 0 2.5px var(--teal);
  font-family: 'Andika', sans-serif; font-size: clamp(30px, 5.4vw, 40px); font-weight: 700; color: var(--ink);
  transition: box-shadow .2s;
}
.gw-ch.is-vowel, .dl-ch.is-vowel { background: linear-gradient(180deg, #ffe2f1, #ffb3d9); box-shadow: 0 5px 0 var(--pink-deep), 0 0 0 3px var(--pink); }
.gw-ch.is-lit { box-shadow: 0 5px 0 #8b96a3, 0 0 0 3px var(--gold), 0 0 24px rgba(255, 210, 63, .85); }
.gw-ch.is-added, .dl-ch.is-added { box-shadow: 0 5px 0 #1f8a57, 0 0 0 3px var(--ok), 0 0 22px rgba(51, 224, 143, .6); }
/* פתח בין אותיות: פס צר שנדלק כשמצביעים עליו */
.gw-gap {
  width: clamp(18px, 3.4vw, 26px); height: clamp(56px, 10vw, 74px); padding: 0; border: 0; cursor: pointer;
  border-radius: 10px; background: rgba(25, 211, 197, .12);
  box-shadow: inset 0 0 0 2px rgba(25, 211, 197, .55); touch-action: manipulation;
  position: relative; transition: background .15s, box-shadow .15s;
}
.gw-gap::after { content: '+'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--teal); font-weight: 900; }
.gw-gap:hover, .gw-gap:focus-visible { background: rgba(25, 211, 197, .32); box-shadow: inset 0 0 0 2px var(--teal), 0 0 14px var(--teal-glow); }
.gw-gap.is-wrong { box-shadow: inset 0 0 0 2px var(--err); animation: shake .3s; }
/* 🆕 18.10 · האדנית: האותיות יושבות באדמה של ערוגת העץ, וכשהמילה גדלה צומחים מעליה פרחים */
.gw-planter {
  position: relative; width: min(600px, 100%); padding-top: 96px; margin: 4px 0 0;
  background: url(../assets/img/garden/bed.png) 50% 100% / 100% auto no-repeat;
}
.gw-planter .gw-rail { background: none; box-shadow: none; margin: 0 0 88px; padding: 0 18px; }
.gw-planter .gw-rail::before { display: none; }
.gw-blooms { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: center; gap: 14px; pointer-events: none; }
.gw-blooms span { transform: scale(0); transform-origin: 50% 100%; transition: transform .5s cubic-bezier(.34, 1.6, .64, 1) var(--d); }
.gw-blooms.is-on span { transform: scale(1); }
.gw-blooms .flower-img { height: 104px; width: auto; display: block; filter: drop-shadow(0 0 10px rgba(255,255,255,.2)); }
.gw-new { display: flex; justify-content: center; margin-top: 4px; }
.gw-new .tile { cursor: default; animation: gw-bob 1.6s ease-in-out infinite; }
.gw-new .tile.is-vowel { background: linear-gradient(180deg, #ffe2f1, #ffb3d9); }
@keyframes gw-bob { 50% { transform: translateY(-6px); } }

/* --- האות הכפולה --- */
.dl-rule { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
/* 🆕 18.10 · שלט עץ תלוי מאויר. המילה יושבת על הפנים הבהירות שלו (מ-55% ועד 92% מגובה התמונה) */
.dl-board {
  position: relative; width: min(520px, 100%); aspect-ratio: 800 / 366; margin: 6px 0;
  background: url(../assets/img/garden/board.png) center / contain no-repeat;
}
.dl-board > .dl-sign, .dl-board > .dl-rail {
  position: absolute; left: 7%; right: 7%; top: 55%; height: 37%; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: none; box-shadow: none; border-radius: 0;
}
.dl-board > .dl-rail::before { display: none; }
.dl-board .dl-ch, .dl-board .dl-end { height: clamp(44px, 13vw, 72px); width: clamp(40px, 10.5vw, 62px); font-size: clamp(26px, 6.4vw, 40px); }
.dl-board .dl-end { min-width: clamp(40px, 10.5vw, 62px); width: auto; border-color: rgba(122, 82, 54, .55); }
.dl-board:has(.dl-sign.is-flicker) { animation: dl-flicker-board 1.1s steps(2) infinite; }
.dl-board:has(.dl-sign.is-lit) { filter: drop-shadow(0 0 12px var(--teal-glow)); }
@keyframes dl-flicker-board { 50% { filter: drop-shadow(0 0 10px rgba(255, 93, 108, .7)); } }
.dl-sign {
  display: flex; gap: 6px; padding: 14px 22px; border-radius: 18px;
  background: rgba(14, 17, 23, .7); box-shadow: 0 0 0 2px var(--steel);
  transition: box-shadow .4s;
}
.dl-sign.is-flicker { animation: dl-flicker 1.1s steps(2) infinite; }
.dl-board > .dl-sign.is-flicker, .dl-board > .dl-sign.is-lit { animation: none; box-shadow: none; }
.dl-sign.is-lit { box-shadow: 0 0 0 2.5px var(--teal), 0 0 30px var(--teal-glow); }
@keyframes dl-flicker { 50% { box-shadow: 0 0 0 2px var(--err), 0 0 18px rgba(255, 93, 108, .5); } }
.dl-ch.dl-ghost { opacity: .12; }
.dl-rail { align-items: center; gap: 8px; }
.dl-end {
  display: flex; gap: 8px; min-width: clamp(48px, 9vw, 66px); height: clamp(56px, 10vw, 74px);
  border-radius: 14px; border: 3px dashed rgba(201, 209, 217, .45);
}
.dl-end:has(.dl-ch) { border: 0; }
.dl-tile { letter-spacing: .02em; }

@media (max-width: 600px) {
  .gw-planter { padding-top: 44px; }
  .gw-blooms { top: -6px; }
  .gw-planter .gw-rail { margin-bottom: 36px; padding: 0 8px; }
  .gw-blooms { gap: 6px; }
  .gw-blooms .flower-img { height: 54px; }
}