/* ============================================================
   משחקי מפל הירח · עולם 9 (במספור של הילד) · 🆕 21.10.2026
   תופסים מילים במפל (falls-catch) וחותכים מילה ארוכה (chunk-split)
   🔴 המילים תמיד כהות על משטח בהיר, כמו בכל הקורס
   ============================================================ */

/* --- תופסים מילים במפל (21.10, במקום שתי הבריכות) --- */
.fc-scene { position: relative; width: min(100%, 620px); aspect-ratio: 16 / 10; margin: 4px 0 8px; overflow: hidden; border-radius: 22px;
  box-shadow: 0 0 0 2px var(--steel), 0 0 0 4px rgba(25, 211, 197, .3);
  background: url(../assets/img/falls/falls.jpg) 50% 50% / cover no-repeat, linear-gradient(180deg, #23285e, #1c4f7a 60%, #0d2b4a); }
.fc-scene::after { content: ''; position: absolute; inset: 0; background: rgba(8, 10, 30, .22); pointer-events: none; transition: background 1.2s; }
.fc-scene.is-lit::after { background: rgba(255, 246, 194, .12); }
.fc-moons { position: absolute; top: 3%; left: 4%; right: 4%; z-index: 3; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.fc-moon { width: 16px; height: 16px; border-radius: 50%; background: rgba(30, 36, 60, .85); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); transition: background .4s, box-shadow .4s; }
.fc-moon.is-on { background: #fff6c2; box-shadow: 0 0 8px #fff6c2, 0 0 18px rgba(255, 210, 63, .7); }
.fc-lanes { position: absolute; inset: 0; z-index: 2; }
.fc-word { position: absolute; top: 0; width: 24%; padding: 8px 4px; border: 0; border-radius: 16px; background: #fffbea; color: var(--ink); cursor: pointer;
  font-family: 'Andika', 'Trebuchet MS', sans-serif; font-size: clamp(24px, 4.6vw, 34px); font-weight: 700; line-height: 1.1;
  box-shadow: 0 0 0 3px var(--teal), 0 6px 14px rgba(0, 0, 0, .45); touch-action: manipulation; will-change: transform; transition: opacity .3s, box-shadow .2s; }
.fc-word.is-wrong { box-shadow: 0 0 0 3px var(--err), 0 6px 14px rgba(0, 0, 0, .45); animation: shake .3s; }
.fc-word.is-right { box-shadow: 0 0 0 4px var(--pink), 0 0 30px rgba(255, 62, 165, .7); }
.fc-word.is-gone { opacity: 0; }
.fc-word.is-splash { opacity: .2; }
.fc-target { position: absolute; left: 50%; bottom: 3%; z-index: 3; transform: translateX(-50%); padding: 5px; border-radius: 16px; background: var(--white);
  box-shadow: 0 0 0 3px var(--pink), 0 0 24px rgba(255, 62, 165, .5); }
.fc-target .art { display: block; border-radius: 12px; }

/* --- חותכים מילה ארוכה --- */
.cs-log { display: flex; align-items: center; justify-content: center; padding: 14px 18px; margin: 8px 0 14px; border-radius: 22px;
  background: linear-gradient(180deg, #c98a52, #8f5a2e); box-shadow: 0 8px 0 #5e3a1c, 0 10px 20px rgba(0, 0, 0, .4); transition: gap .4s; }
.cs-l { display: inline-grid; place-items: center; min-width: 46px; height: 64px; padding: 0 4px; border-radius: 12px; background: #fffbea; color: var(--ink);
  font-family: 'Andika', 'Trebuchet MS', sans-serif; font-size: 40px; font-weight: 700; transition: background .3s, box-shadow .3s, margin .4s; }
.cs-gap { width: 18px; height: 64px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; }
.cs-gap::after { content: ''; position: absolute; left: 50%; top: 10%; bottom: 10%; width: 3px; margin-left: -1.5px; border-radius: 2px;
  background: rgba(255, 251, 234, .6); transition: background .2s; }
.cs-gap:hover::after, .cs-gap:focus-visible::after { background: var(--pink); }
.cs-gap.is-wrong::after { background: var(--err); }
.cs-gap.is-wrong { animation: shake .3s; }
.cs-log.is-split .cs-gap { pointer-events: none; }
.cs-log.is-split .cs-gap::after { background: transparent; }
.cs-log.is-split .cs-gap.is-cut { width: 34px; }
.cs-log.is-split .cs-gap.is-cut::after { background: var(--pink); width: 4px; box-shadow: 0 0 10px var(--pink); }
.cs-l.is-a { background: linear-gradient(180deg, #d9fbf6, #8ff0e4); box-shadow: 0 0 0 2.5px var(--teal); }
.cs-l.is-b { background: linear-gradient(180deg, #ffe1f0, #ffa3d3); box-shadow: 0 0 0 2.5px var(--pink); }
.cs-log.is-joined .cs-gap.is-cut { width: 18px; }
.cs-log.is-joined .cs-gap.is-cut::after { background: transparent; box-shadow: none; }

@media (max-width: 600px) {
  .cs-l { min-width: 34px; height: 50px; font-size: 30px; }
  .cs-gap { width: 12px; height: 50px; }
  .fc-word { width: 28%; }
  .fc-target .art { width: 72px; height: 72px; }
}

/* --- בול העץ צף, ונחצה לשניים (21.10, שני: "משחקים עם אנימציות") --- */
.cs-log { animation: cs-float 2.6s ease-in-out infinite alternate; }
.cs-log.is-split .cs-l { transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), background .3s, box-shadow .3s; }
.cs-log.is-split .cs-l.is-a { transform: translateX(-10px) rotate(-5deg); }
.cs-log.is-split .cs-l.is-b { transform: translateX(10px) rotate(5deg); }
.cs-log.is-joined .cs-l.is-a, .cs-log.is-joined .cs-l.is-b { transform: none; }
@keyframes cs-float { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-6px) rotate(1deg); } }

/* --- למה האות כפולה --- */
.dw-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dw-pic .art { border-radius: 16px; box-shadow: 0 0 0 3px var(--white); }
.dw-word { display: flex; gap: 4px; }
.dw-l.is-vowel { background: linear-gradient(180deg, #ffe1f0, #ffa3d3); box-shadow: 0 6px 0 #c4157a, 0 0 0 2.5px var(--pink); animation: dw-pulse 1.2s ease-in-out infinite; }
.dw-slot { background: transparent; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35); color: var(--ink); }
.dw-slot.is-guard { background: linear-gradient(180deg, #d9fbf6, #8ff0e4); box-shadow: 0 6px 0 #0f8f86, 0 0 0 2.5px var(--teal), 0 0 18px var(--teal-glow); }
.dw-word.is-whole .dw-l.is-vowel { animation: none; }
.dw-guard { position: relative; background: linear-gradient(180deg, #d9fbf6, #8ff0e4); box-shadow: 0 6px 0 #0f8f86, 0 0 0 2.5px var(--teal);
  animation: dw-hop .8s ease-in-out infinite; }
.dw-guard.is-running { animation: none; transition: transform .6s cubic-bezier(.4, -.3, .5, 1.3); transform: translate(var(--dx), var(--dy)) scale(.98); }
.dw-shield { position: absolute; right: -12px; top: -12px; width: 24px; height: 28px; border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
  background: linear-gradient(180deg, #ffe28a, #f0a20a); box-shadow: 0 0 0 2px #fff; }
@keyframes dw-pulse { 50% { transform: scale(1.08); } }
@keyframes dw-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* --- הרובוט חוצה את הנהר (21.10, במקום הדגים הקופצים) --- */
.rc-scene { position: relative; width: min(100%, 640px); aspect-ratio: 16 / 9; margin: 4px 0 8px; overflow: hidden; border-radius: 22px;
  box-shadow: 0 0 0 2px var(--steel), 0 0 0 4px rgba(25, 211, 197, .3);
  background: url(../assets/img/falls/falls.jpg) 50% 70% / cover no-repeat, linear-gradient(180deg, #23285e, #1c4f7a 60%, #0d2b4a); }
.rc-scene::after { content: ''; position: absolute; inset: 0; background: rgba(8, 10, 30, .18); pointer-events: none; }
.rc-bank { position: absolute; top: 22%; bottom: 0; width: 11%; z-index: 1; background: linear-gradient(180deg, #4d7a3a, #2f4f24 60%, #5a4632);
  box-shadow: inset 0 6px 0 rgba(255, 255, 255, .15); }
.rc-left { left: 0; border-radius: 0 40% 0 0; }
.rc-right { right: 0; border-radius: 40% 0 0 0; }
.rc-scene.is-across .rc-right { box-shadow: inset 0 6px 0 rgba(255, 255, 255, .15), 0 0 30px rgba(255, 246, 194, .8); }
.rc-stones { position: absolute; inset: 0; z-index: 2; }
.rc-stone { position: absolute; transform: translate(-50%, -50%); width: 13%; aspect-ratio: 2 / 1; padding: 0; border: 0; border-radius: 50%;
  background: radial-gradient(ellipse at 40% 30%, #b9b3c9, #6e6882 70%, #4d4860); box-shadow: 0 6px 0 rgba(0, 0, 0, .35), 0 0 0 2px rgba(255, 255, 255, .15);
  display: grid; place-items: center; opacity: .35; transition: opacity .3s, transform .5s ease-in, box-shadow .3s; cursor: default; }
.rc-stone.is-now { opacity: 1; cursor: pointer; animation: rc-bob 1.6s ease-in-out infinite alternate; }
.rc-stone[data-row="1"].is-now { animation-delay: -.8s; }
.rc-stone.is-right { opacity: 1; animation: none; box-shadow: 0 6px 0 rgba(0, 0, 0, .35), 0 0 0 3px var(--pink), 0 0 20px rgba(255, 62, 165, .5); }
.rc-stone.is-sinking { animation: none; opacity: 0; transform: translate(-50%, -10%) scale(.7); }
.rc-w { padding: 2px 8px; border-radius: 10px; background: #fffbea; color: var(--ink); font-family: 'Andika', 'Trebuchet MS', sans-serif;
  font-size: clamp(13px, 2.6vw, 21px); font-weight: 700; line-height: 1.15; }
.rc-stone:not(.is-now):not(.is-right) .rc-w:empty { display: none; }
.rc-target { position: absolute; right: 3%; top: 4%; z-index: 4; padding: 4px; border: 0; border-radius: 14px; background: var(--white); cursor: pointer;
  box-shadow: 0 0 0 3px var(--pink), 0 0 22px rgba(255, 62, 165, .5); }
.rc-target .art { display: block; border-radius: 10px; }
.rc-tin { position: absolute; z-index: 3; transform: translate(-50%, -118%); transition: left .55s ease-in-out, top .55s ease-in-out; pointer-events: none; }
.rc-hop.is-hopping { animation: rc-jump .55s ease-in-out; }
.rc-hop.is-wobble { animation: rc-wobble .5s ease-in-out; }
@keyframes rc-bob { to { transform: translate(-50%, calc(-50% - 4px)); } }
@keyframes rc-jump { 0% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(4px) scale(1.1, .9); }
  55% { transform: translateY(-46px) scale(.95, 1.05); } 85% { transform: translateY(2px) scale(1.08, .92); } 100% { transform: none; } }
@keyframes rc-wobble { 20%, 60% { transform: rotate(-12deg); } 40%, 80% { transform: rotate(12deg); } }
@media (max-width: 600px) { .rc-stone { width: 14%; } .rc-target .art { width: 64px; height: 64px; } }
@media (prefers-reduced-motion: reduce) { .cs-log, .dw-guard, .dw-l.is-vowel { animation: none; } }
.fc-target { cursor: pointer; }   /* 21.10: הקשה על התמונה משמיעה את המילה */

/* --- 21.10, שני: קודם מופרד ואז מחובר. שני בולי עץ שצפים זה אל זה, וביניהם קו דק --- */
.cs-river { display: flex; align-items: center; justify-content: center; gap: 70px; margin: 10px 0 16px; transition: gap .7s cubic-bezier(.5, 0, .3, 1.2); }
.cs-part { border: 0; cursor: pointer; padding: 12px 14px; display: flex; gap: 3px; }
.cs-part:nth-of-type(2) { animation-delay: -1.3s; }
.cs-part .cs-l { min-width: 42px; }
.cs-part.is-read { box-shadow: 0 8px 0 #5e3a1c, 0 0 0 3px #fff6c2, 0 0 22px rgba(255, 246, 194, .6); }
.cs-joint { width: 0; height: 56px; border-radius: 2px; background: var(--pink); opacity: 0; transition: width .4s .5s, opacity .4s .5s, margin .4s .5s; }
.cs-river.is-joined { gap: 0; }
.cs-river.is-joined .cs-part { animation: none; cursor: default; }
.cs-river.is-joined .cs-part:first-of-type { border-radius: 22px 0 0 22px; }
.cs-river.is-joined .cs-part:last-of-type { border-radius: 0 22px 22px 0; }
.cs-river.is-joined .cs-joint { width: 4px; opacity: 1; margin: 0 3px; box-shadow: 0 0 10px var(--pink); }
@media (max-width: 600px) { .cs-river { gap: 30px; } .cs-part .cs-l { min-width: 30px; } }
/* tinVisual מחזיר תמונה שממלאת את המיכל. כאן הרובוט קטן, כדי שלא יסתיר את האבנים */
.rc-tin { width: 11%; min-width: 54px; }
.rc-hop, .rc-hop > *, .rc-hop img, .rc-hop svg { display: block; width: 100% !important; height: auto !important; }