/* ============================================================
   משחקי התחנה · עולם 5 · 🆕 15.10.2026
   רכבת המשפחות (family-train) · מחברים גדולה וקטנה (case-match)
   ============================================================ */

/* ---------- רכבת המשפחות ---------- */

/* הרכבת למעלה: קטר, ואחריו כל קרון שהושלם, משמאל לימין כמו הקריאה.
   🆕 18.10: קטר וקרונות מאוירים במקום ציור CSS (שני: "אפשר לעשות אותה יפה יותר") */
.ft-train {
  display: flex; align-items: flex-end; gap: 0; flex-wrap: wrap;
  min-height: 74px; width: 100%; padding: 6px 10px 4px;
  border-bottom: 5px solid var(--steel);
  box-shadow: 0 6px 14px -8px var(--teal-glow);
}
.ft-loco { height: 66px; width: auto; flex: none; filter: drop-shadow(0 0 10px var(--pink-glow)); }
.ft-car { position: relative; flex: none; width: 116px; margin-left: -4px; }
.ft-car img { display: block; width: 100%; height: auto; }
.ft-car b {
  position: absolute; left: var(--sl); top: var(--st); width: var(--sw); height: var(--sh);
  display: grid; place-items: center; color: var(--ink); font-size: 17px;
  font-family: 'Andika', 'Trebuchet MS', sans-serif;
}

/* 🆕 18.10 · היציאה: הרכבת גדלה במרכז, מעשנת, ונוסעת שמאלה אל מחוץ למסך */
.ft-departing .wave-head { visibility: hidden; }
.ft-train.is-departing {
  position: relative; flex-wrap: nowrap; overflow: hidden; margin: 70px 0 40px; padding: 70px 10px 6px;
}
.ft-train.is-departing .ft-loco { height: 110px; }
.ft-train.is-departing .ft-car { width: 140px; }
.ft-train.is-departing .ft-car b { font-size: 22px; }
.ft-train.is-departing > img, .ft-train.is-departing > .ft-car { animation: ft-chug .5s ease-in-out infinite alternate; }
.ft-train.is-departing.is-gone > * { transform: translateX(-140vw); transition: transform 2.2s cubic-bezier(.55, 0, .85, .55); animation: none; }
@keyframes ft-chug { to { transform: translateY(-2px); } }
.ft-steam { position: absolute; left: 34px; top: 0; width: 70px; height: 80px; pointer-events: none; }
.ft-steam i {
  position: absolute; left: 10px; bottom: 0; width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.85), rgba(255,255,255,0) 70%);
  animation: ft-puff 1.2s ease-out infinite; opacity: 0;
}
.ft-steam i:nth-child(2) { animation-delay: .4s; }
.ft-steam i:nth-child(3) { animation-delay: .8s; }
@keyframes ft-puff { 0% { transform: translate(0, 0) scale(.5); opacity: .9; } 100% { transform: translate(18px, -70px) scale(2.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ft-steam, .ft-train.is-departing > * { animation: none; } }

/* פני השלט בכל קרון, באחוזים מהתמונה. נמדד על הנכסים ב-app/assets/img/train */
.is-teal { --sl: 20.5%; --st: 6%; --sw: 59%; --sh: 42%; }
.is-pink { --sl: 17%;   --st: 5%; --sw: 66%; --sh: 42%; }
.is-gold { --sl: 20%;   --st: 6%; --sw: 60%; --sh: 44%; }

/* הקרון הגדול: המילה יושבת על השלט, משבצת ריקה לאות הפותחת ואחריה הסיומת */
.ft-yard { display: flex; flex-direction: column; align-items: center; width: 100%; margin: 14px 0 10px; }
.ft-wagon { position: relative; width: min(480px, 100%); }
.ft-wagon-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); }
.ft-sign { position: absolute; left: var(--sl); top: var(--st); width: var(--sw); height: var(--sh); display: grid; place-items: center; }
.ft-word { display: flex; align-items: center; gap: 6px; font-family: 'Andika', 'Trebuchet MS', sans-serif; }
.ft-slot {
  width: 64px; height: 74px; border-radius: 14px; border: 3px dashed var(--pink-deep);
  display: grid; place-items: center; font-size: 46px; font-weight: 700; color: var(--ink);
  background: rgba(255,255,255,.45);
  font-family: 'Andika', 'Trebuchet MS', sans-serif;
}
.ft-slot.is-filled { border-style: solid; border-color: var(--ok); background: linear-gradient(180deg, var(--white), var(--gray)); box-shadow: 0 0 20px rgba(51, 224, 143, .5); }
.ft-rime { display: flex; gap: 6px; }
.ft-ch {
  width: 64px; height: 74px; border-radius: 14px; display: grid; place-items: center;
  font-size: 46px; font-weight: 700; color: var(--ink);
  background: linear-gradient(180deg, var(--white), var(--gray)); box-shadow: 0 5px 0 #8b96a3;
}
.ft-ch.is-vowel { background: linear-gradient(180deg, #ffe2f1, #ffb3d9); box-shadow: 0 5px 0 var(--pink-deep); }
.ft-done-words { display: flex; justify-content: center; gap: 10px; min-height: 28px; margin-top: 8px; direction: ltr; }
.ft-mini { font-family: 'Andika', 'Trebuchet MS', sans-serif; font-size: 22px; font-weight: 700; color: var(--teal); }

/* ---------- מחברים גדולה וקטנה ---------- */

.cm-lead { color: var(--text-soft); font-weight: 700; margin-bottom: 10px; text-align: center; }
.cm-board { position: relative; width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 90px; padding: 6px 0; }
.cm-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.cm-lines line { stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 6px currentColor); }
.cm-row { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 12px; position: relative; }
.cm-card {
  aspect-ratio: 1 / 1; border-radius: 16px; display: grid; place-items: center;
  font-family: 'Andika', 'Trebuchet MS', sans-serif; font-size: clamp(30px, 4.6vw, 48px); font-weight: 700; color: var(--ink);
  background: linear-gradient(180deg, var(--white), var(--gray));
  box-shadow: 0 6px 0 #8b96a3, 0 0 0 3px var(--steel);
  transition: transform .12s, box-shadow .2s;
}
.cm-card.is-upper { background: linear-gradient(180deg, #fff6d6, #ffd98a); }
.cm-card.is-sel { transform: translateY(-4px); box-shadow: 0 8px 0 var(--pink-deep), 0 0 0 3px var(--pink), 0 0 22px var(--pink-glow); }
.cm-card.is-matched { box-shadow: 0 6px 0 rgba(0,0,0,.35), 0 0 0 3px var(--m), 0 0 22px var(--m); }
.cm-card.is-wrong { box-shadow: 0 6px 0 #8b96a3, 0 0 0 3px var(--err); animation: shake .3s; }

@media (max-width: 600px) {
  .ft-slot, .ft-ch { width: 42px; height: 50px; font-size: 32px; border-radius: 10px; }
  .ft-slot { border-width: 2px; }
  .ft-word, .ft-rime { gap: 4px; }
  .ft-loco { height: 46px; }
  .ft-car { width: 64px; }
  .ft-car b { font-size: 11px; }
  .ft-train.is-departing .ft-loco { height: 56px; }
  .ft-train.is-departing .ft-car { width: 60px; }
  .ft-train.is-departing .ft-car b { font-size: 11px; }
  .ft-steam { left: 14px; transform: scale(.6); transform-origin: bottom left; }
  .cm-row { gap: 6px; }
  .cm-board { gap: 64px; }
}