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

/* --- משקים את הפרחים --- */
/* 🆕 18.10: שתי ערוגות עץ מאוירות, ובכל אחת שלוש גבשושיות עם נבט. המשפך מגיע, משקה,
   והפרח המאויר צומח. השלט מעץ, והמילה כהה על הפנים הבהירות שלו */
.garden-plots {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 10px;
  width: min(100%, 560px); margin: 6px 0; padding: 0 22px;
  background: url(../assets/img/garden/bed.png) 50% 30% / 100% auto no-repeat,
              url(../assets/img/garden/bed.png) 50% 92% / 100% auto no-repeat;
}
.plot {
  position: relative; height: 200px; padding: 0; background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  touch-action: manipulation;
}
.plot-soil { width: 70%; height: auto; margin-bottom: -12px; position: relative; z-index: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.plot-sign {
  position: relative; z-index: 2; width: 116px; height: 72px; padding-bottom: 26px;
  display: grid; place-items: center; color: var(--ink);
  background: url(../assets/img/garden/sign.png) center / contain no-repeat;
  font-size: 26px; font-weight: 700; line-height: 1;
}
.plot-flower {
  position: absolute; bottom: 84px; left: 50%; z-index: 0; transform: translateX(-50%) scale(0); transform-origin: 50% 100%;
  transition: transform .55s cubic-bezier(.34, 1.6, .64, 1);
}
.plot-flower .flower-img { display: block; height: 110px; width: auto; filter: drop-shadow(0 0 12px rgba(255,255,255,.18)); }
/* הפרח שצמח עומד לפני הגבשושית, והגבעול נכנס לאדמה */
.plot.is-grown .plot-flower { transform: translateX(-50%) scale(1); z-index: 2; bottom: 62px; }
.plot.is-grown .plot-sign { filter: drop-shadow(0 0 5px var(--ok)) drop-shadow(0 0 8px rgba(51, 224, 143, .6)); }
.plot.is-wrong .plot-sign { filter: drop-shadow(0 0 4px var(--err)) drop-shadow(0 0 4px var(--err)); animation: shake .3s; }
.plot:focus-visible { outline: none; }
.plot:focus-visible .plot-sign { filter: drop-shadow(0 0 4px var(--white)); }
/* המשפך: מופיע מעל הגבשושית בזמן ההשקיה */
.plot-can {
  position: absolute; bottom: 120px; left: 58%; width: 74px; height: auto; z-index: 3; pointer-events: none;
  opacity: 0; transform: translateY(-10px); transform-origin: 30% 70%;
  transition: opacity .2s, transform .35s;
}
.plot.is-watering .plot-can { opacity: 1; transform: rotate(-24deg); }
/* טיפות ההשקיה, מהזרבובית אל הנבט */
.plot-drops { position: absolute; bottom: 84px; left: 50%; width: 40px; margin-left: -26px; height: 50px; pointer-events: none; z-index: 2; }
.plot-drops i {
  position: absolute; top: 0; width: 8px; height: 12px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #64d2ff; box-shadow: 0 0 8px rgba(100, 210, 255, .8); opacity: 0;
}
.plot-drops i:nth-child(1) { left: 2px; }
.plot-drops i:nth-child(2) { left: 16px; }
.plot-drops i:nth-child(3) { left: 30px; }
.plot.is-watering .plot-drops i { animation: drop .6s ease-in .15s both; }
.plot.is-watering .plot-drops i:nth-child(2) { animation-delay: .27s; }
.plot.is-watering .plot-drops i:nth-child(3) { animation-delay: .39s; }
@keyframes drop { 0% { opacity: 0; transform: translateY(-10px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(46px); } }

/* --- מסדרים את הגינה --- */
.sort-held { position: relative; display: flex; flex-direction: column; align-items: center; margin-bottom: 8px; }
.sort-card {
  display: flex; align-items: center; gap: 14px; padding: 8px 18px 8px 10px; border-radius: 18px;
  background: linear-gradient(180deg, #343b47, var(--graphite-2));
  box-shadow: 0 0 0 2px var(--steel), 0 0 0 4px rgba(25, 211, 197, .3), var(--shadow);
  transition: transform .35s ease-in, opacity .35s;
}
.sort-card.is-gone { transform: translateY(80px) scale(.6); opacity: 0; }
.sort-word {
  padding: 2px 14px; border-radius: 12px; background: var(--gray-light); color: var(--ink);
  font-size: 40px; font-weight: 700; line-height: 1.2; box-shadow: 0 4px 0 #8b96a3;
}
.sort-ch { display: inline-block; border-radius: 6px; transition: background .2s, color .2s; }
.sort-ch.is-vowel { background: var(--pink); color: var(--white); padding: 0 3px; }
/* שתי הידיים של הרובוט אוחזות בפינות התחתונות של הכרטיס */
.sort-held { align-self: center; }
.sort-hands {
  position: absolute; left: -12px; right: -12px; bottom: -10px;
  display: flex; justify-content: space-between; pointer-events: none;
}
.sort-card.is-gone + .sort-hands { opacity: .4; }
.sort-hands span {
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle, #59626f 40%, #2b313c 70%);
  box-shadow: 0 0 0 3px var(--pink), 0 0 10px var(--pink-glow);
}
.sort-beds { display: flex; gap: 18px; justify-content: center; width: min(100%, 520px); }
.sort-bed {
  flex: 1; min-height: 132px; padding: 10px; border: 0; border-radius: 22px 22px 30px 30px; cursor: pointer;
  background:
    linear-gradient(180deg, transparent 52%, #4a3326 52%, #33241b),
    linear-gradient(180deg, rgba(47, 191, 113, .18), rgba(47, 191, 113, .05));
  box-shadow: 0 0 0 2.5px var(--steel), inset 0 0 0 2px rgba(47, 191, 113, .35);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  touch-action: manipulation; transition: box-shadow .2s;
}
.sort-bed-letter {
  width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px;
  background: linear-gradient(180deg, #ffe2f1, #ffb3d9); color: var(--ink);
  font-size: 42px; font-weight: 700; box-shadow: 0 5px 0 var(--pink-deep), 0 0 0 3px var(--pink), 0 0 16px var(--pink-glow);
}
.sort-bed-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 40px; }
.sort-mini { animation: pop-in .35s cubic-bezier(.34, 1.6, .64, 1) both; }
.sort-mini .art, .sort-mini img { width: 40px; height: 40px; border-radius: 8px; }
.sort-bed.is-wrong { box-shadow: 0 0 0 3px var(--err); animation: shake .3s; }
.sort-bed:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--white); }
@keyframes pop-in { from { transform: scale(0); } to { transform: scale(1); } }

/* --- צובעים את הגינה --- */
.color-ask { margin-bottom: 8px; }
.color-pots {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 16px;
  width: min(100%, 500px); padding: 4px 16px 12px; border-radius: 26px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(47, 191, 113, .22), transparent 65%),
    linear-gradient(180deg, #2a3a30, #1c2620);
  box-shadow: 0 0 0 4px #7a5236, 0 0 0 7px #4d3322, 0 0 0 9px rgba(25, 211, 197, .35), inset 0 6px 14px rgba(0, 0, 0, .35);
}
/* מדף עץ קטן מתחת לכל עציץ */
.pot-body { position: relative; }
.pot::after { content: ''; display: block; width: 110px; height: 6px; margin-top: 2px; border-radius: 3px; background: #7a5236; }
.pot {
  --pot: #6b7583;
  height: 128px; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  touch-action: manipulation;
}
.pot-bloom { height: 58px; display: flex; align-items: flex-end; }
.pot-bloom .flower-svg { animation: pop-in .45s cubic-bezier(.34, 1.6, .64, 1) both; transform-origin: 50% 100%; }
.pot-body {
  width: 96px; height: 58px; display: grid; place-items: center;
  clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pot) 85%, white), var(--pot));
  filter: saturate(.15); transition: filter .4s, background .4s;
}
.pot.is-colored .pot-body { filter: none; }
.pot-word {
  padding: 0 8px; border-radius: 8px; background: var(--gray-light); color: var(--ink);
  font-size: 26px; font-weight: 700; line-height: 1.25;
}
.pot.is-wrong .pot-body { animation: shake .3s; }
.pot.is-wrong .pot-word { box-shadow: 0 0 0 3px var(--err); }
.pot:focus-visible { outline: none; }
.pot:focus-visible .pot-word { box-shadow: 0 0 0 3px var(--teal); }

/* --- מעוף הדבורה --- */
/* 🆕 18.10: רקע הגינה של העולם, פרחים ודבורה מאוירים */
.bee-field {
  position: relative; width: min(100%, 560px); height: 270px; margin: 4px 0; overflow: hidden;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(20, 24, 38, .78), rgba(20, 24, 38, .62) 60%, rgba(16, 40, 30, .8)),
    url(../assets/img/w4-bg.jpg) 50% 70% / cover no-repeat;
  box-shadow: 0 0 0 2px var(--steel), 0 0 0 4px rgba(25, 211, 197, .3);
}
.bee-lane { position: relative; height: 104px; }
.bee-lane + .bee-lane { margin-top: 2px; }
.bee-flower {
  position: absolute; left: 0; top: 0; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; touch-action: manipulation;
}
.bee-flower .flower-img { height: 64px; width: auto; filter: drop-shadow(0 0 8px rgba(255,255,255,.2)); }
.bee-word {
  margin-top: -10px; padding: 0 9px; border-radius: 9px; background: var(--gray-light); color: var(--ink);
  font-size: 24px; font-weight: 700; line-height: 1.25; box-shadow: 0 0 0 2px var(--steel), 0 3px 0 #8b96a3;
}
.bee-flower.is-hit .bee-word { box-shadow: 0 0 0 3px var(--ok), 0 0 16px rgba(51, 224, 143, .6); }
.bee-flower.is-miss .bee-word { box-shadow: 0 0 0 3px var(--err); }
/* הדבורה: איור, מרחפת למעלה ולמטה, וטסה במעבר חלק */
.bee {
  position: absolute; width: 62px; height: 52px; margin: -26px 0 0 -31px; z-index: 3; pointer-events: none;
  transition: left .36s cubic-bezier(.3, .7, .4, 1), top .36s cubic-bezier(.3, .7, .4, 1);
}
.bee img { width: 100%; height: auto; display: block; animation: hover-bee .5s ease-in-out infinite alternate; filter: drop-shadow(0 0 8px rgba(255, 210, 63, .5)); }
@keyframes hover-bee { to { transform: translateY(-4px) rotate(-4deg); } }
.bee.is-dizzy { animation: shake .3s 2; }

@media (prefers-reduced-motion: reduce) {
  .bee img { animation: none; }
  .plot-flower, .bee { transition-duration: .01s; }
}

@media (max-width: 600px) {
  .garden-plots { gap: 8px 10px; }
  .garden-plots { padding: 0 8px; }
  .plot { height: 160px; }
  .plot-sign { width: 92px; height: 58px; padding-bottom: 22px; font-size: 21px; }
  .plot-flower { bottom: 66px; }
  .plot.is-grown .plot-flower { bottom: 50px; }
  .plot-flower .flower-img { height: 86px; }
  .plot-can { width: 56px; bottom: 96px; }
  .sort-word { font-size: 34px; }
  .sort-bed { min-height: 116px; }
  .pot { height: 114px; }
  .pot-body { width: 84px; height: 52px; }
  .pot-word { font-size: 22px; }
  .bee-field { height: 250px; }
  .bee-lane { height: 96px; }
}