/* ==========================================================
   משחקים של המשפחה - עיצוב
   מותאם לטאבלט, לאצבע של ילד, ולעברית (RTL)
   ========================================================== */

:root {
  --sky1: #bfe9ff;
  --sky2: #e7f7ff;
  --sky3: #fff4e0;
  --ink: #23415c;
  --ink-soft: #4a6b88;
  --card: #ffffff;

  --c-purple: #7b5cd6;
  --c-purple-d: #5e3fb8;
  --c-orange: #ff8b3d;
  --c-orange-d: #e46f21;
  --c-green: #2fbf71;
  --c-green-d: #1d9c58;
  --c-blue: #36a4e8;
  --c-blue-d: #1f86c7;
  --c-pink: #ff5f9e;
  --c-pink-d: #e04180;
  --c-yellow: #ffc93c;

  --pad: clamp(8px, 1.6vmin, 20px);

  /*
    ------------------------------------------------------------
    השטח הבטוח
    ------------------------------------------------------------
    באייפון יש חריץ למעלה ופס מחווה למטה, ובאנדרואיד לפעמים
    חיתוך מצלמה. env() מחזיר אפס בכל מכשיר שאין בו חריץ, ולכן
    הנוסחה נכונה בכל מקום בלי תנאים ובלי זיהוי מכשיר.

    בלי זה כפתור החזרה יושב מתחת לחריץ, וכפתור הרמז מתחת לפס
    המחווה - כלומר שני הכפתורים שהילד צריך הם בדיוק אלה שאי
    אפשר ללחוץ עליהם.
    ------------------------------------------------------------
  */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --radius: clamp(16px, 2.6vmin, 34px);
  --tap: clamp(56px, 9vmin, 88px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: system-ui, "Segoe UI", "Arial Hebrew", Tahoma, Arial, sans-serif;
  color: var(--ink);
  background: linear-gradient(165deg, var(--sky1) 0%, var(--sky2) 45%, var(--sky3) 100%);
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

#app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  padding: calc(var(--pad) + var(--safe-t))
           calc(var(--pad) + var(--safe-r))
           calc(var(--pad) + var(--safe-b))
           calc(var(--pad) + var(--safe-l));
}
.screen.on { display: flex; }

/* ---------------------------------------------------- כפתורים גדולים */

.big-btn {
  border: none;
  border-radius: var(--radius);
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.6vmin, 22px);
  padding: clamp(14px, 2.6vmin, 34px) clamp(18px, 3vmin, 44px);
  box-shadow: 0 clamp(5px, 0.9vmin, 11px) 0 var(--shade, rgba(0, 0, 0, .25)),
              0 12px 26px rgba(30, 60, 90, .18);
  transition: transform .09s ease, box-shadow .09s ease, filter .15s ease;
  min-height: var(--tap);
  line-height: 1.1;
}
.big-btn:active {
  transform: translateY(clamp(4px, 0.8vmin, 9px));
  box-shadow: 0 1px 0 var(--shade, rgba(0, 0, 0, .25)), 0 4px 12px rgba(30, 60, 90, .18);
}
.big-btn .emoji { font-size: 1.5em; line-height: 1; }

.b-purple { background: linear-gradient(180deg, #8f71e6, var(--c-purple)); --shade: var(--c-purple-d); }
.b-orange { background: linear-gradient(180deg, #ffa15e, var(--c-orange)); --shade: var(--c-orange-d); }
.b-green  { background: linear-gradient(180deg, #4bd189, var(--c-green));  --shade: var(--c-green-d); }
.b-blue   { background: linear-gradient(180deg, #59b9f2, var(--c-blue));   --shade: var(--c-blue-d); }
.b-pink   { background: linear-gradient(180deg, #ff7fb2, var(--c-pink));   --shade: var(--c-pink-d); }

/* פינה עליונה: קול + מסך מלא */
.corner {
  position: absolute;
  top: calc(var(--pad) + var(--safe-t));
  left: calc(var(--pad) + var(--safe-l));
  display: flex;
  gap: 8px;
  z-index: 40;
}
.icon-btn {
  /*
    הרצפה היא 56 ולא 48: זה בדיוק --tap שהפרויקט מגדיר לעצמו
    בשורה 46 כיעד מגע מינימלי. ב-1024x700 יצא 7.2vmin = 50
    פיקסלים, וב-768x1024 יצא 55 - כלומר כפתור הבית בתפריט
    המשחקים ירד מתחת לתקן של עצמנו בשתי רזולוציות טאבלט.
  */
  width: clamp(56px, 7.2vmin, 68px);
  height: clamp(56px, 7.2vmin, 68px);
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 4px 0 rgba(120, 150, 175, .35), 0 8px 18px rgba(30, 60, 90, .14);
  font-size: clamp(20px, 3.4vmin, 32px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(120, 150, 175, .35); }

/* ---------------------------------------------------- מסך הבית */

/* #home עוצב מחדש ב-adventure.css - הבית הוא ציור מלא מסך */

#games h1 {
  margin: 0;
  font-size: clamp(30px, 7.4vmin, 82px);
  font-weight: 900;
  color: var(--ink);
  text-shadow: 0 3px 0 #fff, 0 6px 18px rgba(40, 80, 110, .16);
  text-align: center;
}

.menu {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.4vmin, 28px);
  width: min(660px, 92%);
}
.menu .big-btn { font-size: clamp(20px, 4.2vmin, 44px); }

.stars-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(18px, 3.4vmin, 34px);
  font-weight: 800;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, .7);
  padding: clamp(8px, 1.4vmin, 16px) clamp(16px, 2.6vmin, 30px);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(40, 80, 110, .12);
}
.stars-bar .num { color: var(--c-orange-d); font-size: 1.15em; }

/* ---------------------------------------------------- כותרת בתוך משחק */

.topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vmin, 26px);
  min-height: var(--tap);
  flex: 0 0 auto;
  /*
    בצד שמאל הפיזי יושב אשכול כפתורי הפינה הקבוע (צליל, מסך
    מלא). בלי ריפוד שמפנה לו מקום, במסכים צרים כפתור החזרה
    של הכותרת נקבר מתחתיו ואי אפשר ללחוץ עליו.
  */
  padding-right: calc(var(--tap) + 16px);
  padding-left: calc(3 * var(--tap) + 44px);
  position: relative;
}

.home-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.progress {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.2vmin, 14px);
  background: rgba(255, 255, 255, .78);
  border-radius: 999px;
  padding: clamp(6px, 1vmin, 12px) clamp(12px, 2vmin, 24px);
  box-shadow: 0 4px 14px rgba(40, 80, 110, .12);
  font-size: clamp(18px, 3.2vmin, 32px);
}
.progress .dot {
  width: clamp(18px, 3vmin, 32px);
  height: clamp(18px, 3vmin, 32px);
  border-radius: 50%;
  background: #cfe0ec;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), background .25s;
}
.progress .dot.done {
  background: linear-gradient(180deg, #58d68d, var(--c-green));
  transform: scale(1.22);
}
.progress .dot.done::after { content: "✓"; color: #fff; font-size: .7em; font-weight: 900; }

/* כשיש הרבה חלקים מציגים מספר במקום עשרות נקודות */
.progress .count { font-weight: 900; color: var(--ink); direction: ltr; }

/* המנוע הישן של מצא-את-ההבדלים הוסר. העיצוב החדש נמצא
   בבלוק "מצא את ההבדלים" בהמשך הקובץ. */

/* עיגול סביב הבדל שנמצא */
.found {
  position: absolute;
  border: clamp(4px, 0.75vmin, 8px) solid #38d47f;
  border-radius: 50%;
  box-shadow: 0 0 0 clamp(3px, 0.5vmin, 6px) rgba(255, 255, 255, .85),
              0 0 22px rgba(56, 212, 127, .7);
  pointer-events: none;
  animation: pop-in .45s cubic-bezier(.25, 1.7, .45, 1) both;
}
@keyframes pop-in {
  0%   { transform: scale(.3); opacity: 0; }
  60%  { transform: scale(1.14); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* הבהוב רמז */
.hintring {
  position: absolute;
  border: clamp(4px, 0.75vmin, 8px) dashed #ffd23c;
  border-radius: 50%;
  pointer-events: none;
  animation: hint-blink 1.9s ease-in-out both;
}
@keyframes hint-blink {
  0%, 100% { opacity: 0; transform: scale(.75); }
  15%, 45%, 75% { opacity: 1; transform: scale(1.06); }
  30%, 60% { opacity: .25; transform: scale(.95); }
}

/* משוב עדין ללחיצה שאינה הבדל */
.ripple {
  position: absolute;
  width: 0; height: 0;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, .9);
  box-shadow: 0 0 14px rgba(90, 140, 180, .5);
  pointer-events: none;
  animation: ripple 0.55s ease-out both;
}
@keyframes ripple {
  0%   { width: 0; height: 0; opacity: .95; }
  100% { width: 120px; height: 120px; opacity: 0; margin: -60px 0 0 -60px; }
}

.hint-btn {
  position: absolute;
  bottom: var(--pad);
  left: var(--pad);
  z-index: 30;
  width: clamp(58px, 9vmin, 88px);
  height: clamp(58px, 9vmin, 88px);
  font-size: clamp(26px, 4.6vmin, 44px);
  background: linear-gradient(180deg, #ffe08a, var(--c-yellow));
  box-shadow: 0 5px 0 #e0a91c, 0 10px 22px rgba(30, 60, 90, .2);
}
.hint-btn:disabled { filter: grayscale(.6); opacity: .5; }

/* ---------------------------------------------------- משחק הזיכרון */

#memory { gap: var(--pad); }

/* עוטף שממרכז את לוח הקלפים בשטח שנשאר */
.grid-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* הלוח מקבל יחס צדדים לפי מספר העמודות והשורות, ולכן הדפדפן מקטין
   אותו בעצמו עד שהוא נכנס במסך - בלי חישובי גודל ב-JavaScript. */
.grid {
  display: grid;
  gap: clamp(6px, 1.4vmin, 18px);
}

.card {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  perspective: 1000px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.card-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .38s cubic-bezier(.4, 1.3, .5, 1);
  border-radius: clamp(12px, 2.2vmin, 26px);
}
.card.flipped .card-inner { transform: rotateY(180deg); }

.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: clamp(12px, 2.2vmin, 26px);
  overflow: hidden;
  box-shadow: 0 5px 16px rgba(30, 60, 90, .22);
}
.face.back {
  background: linear-gradient(150deg, #7fd8f7, #6f7ee8 55%, #a86ce8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(28px, 7vmin, 74px);
  text-shadow: 0 3px 10px rgba(0, 0, 0, .25);
}
.face.front {
  transform: rotateY(180deg);
  background: #fff;
  border: clamp(3px, 0.6vmin, 7px) solid #fff;
}
.face.front img { width: 100%; height: 100%; object-fit: cover; display: block; }

.card.matched .face.front {
  border-color: #56dd94;
  box-shadow: 0 0 0 clamp(3px, 0.5vmin, 6px) rgba(86, 221, 148, .55), 0 6px 18px rgba(30, 60, 90, .2);
}
.card.matched { animation: matched 0.6s ease both; }
@keyframes matched {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.09) rotate(-2deg); }
  70% { transform: scale(1.03) rotate(1.5deg); }
}

/* בחירת רמה */
#levels { align-items: center; justify-content: center; gap: clamp(14px, 3vmin, 40px); }
#levels h2 {
  margin: 0;
  font-size: clamp(26px, 6vmin, 62px);
  font-weight: 900;
  text-shadow: 0 3px 0 #fff;
  text-align: center;
}
.level-list { display: flex; flex-direction: column; gap: clamp(12px, 2.4vmin, 28px); width: min(620px, 92%); }
.level-list .big-btn { font-size: clamp(20px, 4vmin, 42px); }
.level-list .pips { font-size: .62em; opacity: .9; letter-spacing: .12em; }

/* ---------------------------------------------------- חגיגת סיום */

#win {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vmin, 36px);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(6px);
  z-index: 60;
}
#win.on { display: flex; animation: fade .3s ease both; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

#win .cheer {
  font-size: clamp(28px, 6.6vmin, 68px);
  font-weight: 900;
  color: var(--ink);
  text-shadow: 0 3px 0 #fff;
  text-align: center;
}
#win .star {
  font-size: clamp(64px, 17vmin, 190px);
  animation: star-pop .8s cubic-bezier(.2, 1.8, .4, 1) both;
  filter: drop-shadow(0 8px 18px rgba(220, 160, 20, .5));
}
@keyframes star-pop {
  0% { transform: scale(0) rotate(-40deg); opacity: 0; }
  65% { transform: scale(1.25) rotate(10deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
/* ---------------------------------------------------- כפתורי מסך הניצחון

   שלוש בעיות היו כאן, וכולן נמדדו ולא הוערכו:

   1. שני הכפתורים היו בדיוק באותו גודל - 240 על 85 - ובאותו
      משקל חזותי. לילד לא היה שום רמז מה הפעולה הראשית, ולכן
      "בית" ו"עוד סבב" התחרו זה בזה.
   2. האייקון נחת במרחק **שונה** מהשפה בכל כפתור: 166 פיקסלים
      ב"עוד סבב" מול 131 ב"בית". הסיבה היא flex עם
      justify-content: center - הקבוצה של אייקון+טקסט התמרכזה
      כיחידה, ולכן אורך הטקסט הזיז את האייקון. שתי דיסקיות
      שאמורות להיות זהות נראו לא מיושרות.
   3. אייקוני המשחק הם דיסקיות עץ עם טבעת חומה משלהן. על משטח
      ירוק או כחול הן נראו מודבקות מלמעלה ולא חלק מהכפתור.

   הפתרונות: גריד עם מושב קבוע לאייקון במקום flex ממורכז,
   מושב עגול שקוע שמחזיק את דיסקית העץ, והיררכיה מלאה בין
   ראשי למשני.
   ---------------------------------------------------------------- */
#win .row {
  display: flex;
  gap: clamp(12px, 2.4vmin, 30px);
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  padding-inline: clamp(10px, 2vmin, 24px);
}
#win .row .big-btn {
  /*
    עמודה קבועה לאייקון ועמודה גמישה לטקסט. המושב אינו זז עם
    אורך הטקסט, ולכן שתי הדיסקיות יושבות באותו מרחק מהשפה
    בשני הכפתורים - וב-RTL זו תמיד השפה הימנית.
  */
  --win-ic: clamp(36px, 5.8vmin, 58px);
  display: grid;
  grid-template-columns: var(--win-ic) 1fr;
  align-items: center;
  gap: clamp(10px, 1.8vmin, 20px);
  /* יעד מגע נדיב לאצבע של ילד, ובלי טקסט צמוד לשוליים */
  min-height: clamp(66px, 11vmin, 100px);
  padding: clamp(10px, 1.8vmin, 20px) clamp(18px, 2.8vmin, 32px);
  text-align: center;
}
/* מושב שקוע לדיסקית העץ: אותו טיפול בשני הכפתורים */
#win .row .big-btn .emoji {
  width: var(--win-ic);
  height: var(--win-ic);
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0;
  background: rgba(0, 0, 0, .14);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .24);
}
#win .row .big-btn .emoji svg { width: 88%; height: 88%; display: block; }

/* ראשי: עוד סבב. גדול יותר, בולט יותר, ובמרכז תשומת הלב */
#win .row #winAgain {
  font-size: clamp(21px, 4.1vmin, 42px);
  min-width: clamp(196px, 36vmin, 350px);
}
/*
  משני: בית. משטח בהיר עם טקסט כחול כהה - ברור לגמרי וגדול
  לאצבע, אבל לא מתחרה בפעולה הראשית. data-home הוא כבר המזהה
  של הכפתור הזה, ולכן אין צורך לגעת ב-HTML.
*/
#win .row [data-home] {
  background: linear-gradient(180deg, #ffffff, #e9f1fa);
  color: var(--c-blue-d);
  --shade: #bed3e7;
  font-size: clamp(18px, 3.3vmin, 34px);
  min-width: clamp(148px, 26vmin, 250px);
}
#win .row [data-home] .emoji {
  background: rgba(30, 60, 90, .10);
  box-shadow: inset 0 2px 5px rgba(30, 60, 90, .18);
}

#confetti { position: absolute; inset: 0; pointer-events: none; z-index: 70; }

/* הודעה כשאין תמונות */
.empty-note {
  margin: 0 auto;
  max-width: 44ch;
  text-align: center;
  font-size: clamp(15px, 2.4vmin, 24px);
  line-height: 1.6;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, .8);
  padding: clamp(14px, 2.4vmin, 26px);
  border-radius: var(--radius);
}

/* ---------------------------------------------------- פאזל */

.puz-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: clamp(8px, 1.8vmin, 22px);
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
@media (max-aspect-ratio: 1/1) {
  .puz-wrap { flex-direction: column; }
}

/* המסגרת שאליה מרכיבים */
.frame {
  display: grid;
  /*
    קריטי: העמודות חייבות להתמלא משמאל לימין.
    הדף כולו RTL, וב-RTL רשת CSS ממלאת עמודות מימין לשמאל - ולכן
    החלק הראשון של התמונה נכנס לתא הימני, והתמונה המורכבת יצאה
    הפוכה כמו במראה.
  */
  direction: ltr;
  gap: 0;
  border-radius: clamp(12px, 2.2vmin, 26px);
  background: #fff;
  box-shadow: 0 6px 22px rgba(30, 60, 90, .18);
  flex: 0 0 auto;
  position: relative;
}
.slot {
  position: relative;
  background: rgba(247, 251, 254, .72);
  cursor: pointer;
}
/* מסגרת מקווקוות בתוך התא - מסמנת בבירור "כאן חסר חלק" */
.slot::after {
  content: "";
  position: absolute;
  inset: 7%;
  border: clamp(2px, 0.5vmin, 4px) dashed rgba(70, 130, 175, .55);
  border-radius: clamp(6px, 1.2vmin, 14px);
  pointer-events: none;
}
.slot.filled { background: none; cursor: default; }
.slot.filled::after { display: none; }
.slot > .piece { position: absolute; }
.slot.just-placed { animation: snap .45s cubic-bezier(.25, 1.7, .45, 1) both; z-index: 3; }
@keyframes snap {
  0% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* מגש החלקים */
.tray {
  flex: 1 1 auto;
  /* חייב להימתח לכל הרוחב (או הגובה) של האזור. בלי זה המגש מצטמצם
     לגודל התוכן שלו, והחלקים יוצאים קטנים בלי סיבה. */
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(6px, 1.2vmin, 14px);
  align-content: center;
  justify-content: center;
  align-items: center;
  padding: clamp(6px, 1.2vmin, 14px);
  background: rgba(255, 255, 255, .55);
  border-radius: clamp(14px, 2.4vmin, 30px);
  overflow: hidden;
}

/* חלק פאזל: הצורה נחתכת ב-clip-path, ולכן בלי פינות מעוגלות ובלי
   צל (צל היה נחתך יחד עם הצורה). במקום צל - קו מתאר עדין. */
.piece {
  background-repeat: no-repeat;
  cursor: pointer;
  flex: 0 0 auto;
  transition: transform .12s ease, filter .12s ease;
  touch-action: none;
  filter: drop-shadow(0 3px 4px rgba(30, 60, 90, .38));
}
.tray > .piece:active { transform: scale(1.06); }
.tray > .piece.picked {
  transform: scale(1.1);
  filter: drop-shadow(0 0 3px #ffb43c) drop-shadow(0 0 7px #ffb43c)
          drop-shadow(0 5px 8px rgba(30, 60, 90, .4));
}
/* חלק שהונח - יושב חלק בתוך התמונה, בלי צל שיפריע לתפר */
.slot > .piece { filter: none; }
.piece.dragging { position: fixed; z-index: 90; pointer-events: none; opacity: .92; }

.wrong-shake { animation: wshake .32s ease both; }
@keyframes wshake {
  0%,100% { transform: translateX(0) }
  25% { transform: translateX(-5px) }
  75% { transform: translateX(5px) }
}

/* ---------------------------------------------------- מסך הבית: אריחים */

.menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 1.8vmin, 20px);
  width: min(720px, 94%);
}
@media (min-aspect-ratio: 1/1) and (min-width: 900px) {
  .menu { grid-template-columns: repeat(3, 1fr); width: min(1000px, 94%); }
}

.tile {
  border: none;
  border-radius: var(--radius);
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(15px, 2.5vmin, 26px);
  line-height: 1.15;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.9vmin, 10px);
  padding: clamp(12px, 2.2vmin, 26px) clamp(6px, 1.2vmin, 14px);
  min-height: clamp(88px, 15vmin, 150px);
  box-shadow: 0 clamp(5px, 0.9vmin, 10px) 0 var(--shade, rgba(0,0,0,.25)),
              0 10px 22px rgba(30, 60, 90, .16);
  transition: transform .09s ease, box-shadow .09s ease;
}
.tile:active {
  transform: translateY(clamp(4px, 0.8vmin, 8px));
  box-shadow: 0 1px 0 var(--shade, rgba(0,0,0,.25)), 0 4px 10px rgba(30,60,90,.16);
}
.tile .ic { font-size: clamp(28px, 5.4vmin, 56px); line-height: 1; }

.b-teal   { background: linear-gradient(180deg, #3fd2c7, #17b3a6); --shade: #0f8e84; }
.b-yellow { background: linear-gradient(180deg, #ffd764, var(--c-yellow)); --shade: #d9a017; }
.b-red    { background: linear-gradient(180deg, #ff8a7a, #ef5b46); --shade: #c93f2c; }

.progress .label { font-size: .62em; font-weight: 800; color: var(--ink-soft); }

/* ---------------------------------------------------- חשבון */

.math-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vmin, 40px);
}
.math-q { text-align: center; }
.math-q .ask {
  font-size: clamp(22px, 4.6vmin, 46px);
  font-weight: 900;
  margin-bottom: clamp(8px, 1.6vmin, 18px);
}
.math-q .items {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(2px, 0.6vmin, 8px);
  font-size: clamp(26px, 6vmin, 62px);
  line-height: 1.1;
  max-width: 11ch;
}
.math-q .sum {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(6px, 1.4vmin, 18px);
}
.math-q .op { font-size: clamp(26px, 5vmin, 52px); font-weight: 900; color: var(--ink-soft); }
.math-q .gone { font-size: clamp(26px, 6vmin, 62px); opacity: .28; text-decoration: line-through; }

.math-answers { display: flex; gap: clamp(10px, 2.4vmin, 30px); flex-wrap: wrap; justify-content: center; }
.num-btn {
  border: none;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #59b9f2, var(--c-blue));
  color: #fff;
  font-family: inherit;
  font-weight: 900;
  font-size: clamp(30px, 6vmin, 62px);
  width: clamp(84px, 16vmin, 150px);
  height: clamp(84px, 16vmin, 150px);
  cursor: pointer;
  box-shadow: 0 6px 0 var(--c-blue-d), 0 10px 20px rgba(30,60,90,.2);
}
.num-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--c-blue-d); }
.num-btn.right { background: linear-gradient(180deg, #58d68d, var(--c-green)); box-shadow: 0 6px 0 var(--c-green-d); }
.num-btn.faded { opacity: .3; box-shadow: none; }

/* ---------------------------------------------------- לוחות משחק */

.board-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ttt-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(6px, 1.2vmin, 14px);
  width: min(92vw, calc(100vh - 130px));
  width: min(92vw, calc(100dvh - 130px));
  aspect-ratio: 1 / 1;
}
.ttt-board .cell {
  border: none;
  border-radius: clamp(12px, 2.2vmin, 26px);
  background: #fff;
  box-shadow: 0 5px 14px rgba(30, 60, 90, .16);
  font-size: clamp(34px, 11vmin, 96px);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.ttt-board .cell.win { background: #d8f8e4; box-shadow: 0 0 0 4px #38d47f inset; }

.c4-board {
  display: grid;
  gap: clamp(4px, 0.9vmin, 10px);
  background: linear-gradient(180deg, #4f86d8, #2f63b0);
  padding: clamp(6px, 1.2vmin, 14px);
  border-radius: clamp(12px, 2.4vmin, 28px);
  box-shadow: 0 8px 24px rgba(30, 60, 90, .25);
  /* הרוחב מוגבל גם לפי הגובה הפנוי (אחרי שורת הכותרת), אחרת
     הלוח גולש מתחת למסך כשהטאבלט לרוחב. */
  width: min(94vw, calc((100vh - 130px) * 7 / 6));
  width: min(94vw, calc((100dvh - 130px) * 7 / 6));
  aspect-ratio: 7 / 6;
  direction: ltr;
}
.c4-board .hole {
  border: none;
  border-radius: 50%;
  background: #eef4fa;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, .18);
  cursor: pointer;
  padding: 0;
  min-width: 0;
  min-height: 0;
}
.c4-board .hole.mine   { background: radial-gradient(circle at 35% 30%, #ff8080, #e02020); }
.c4-board .hole.theirs { background: radial-gradient(circle at 35% 30%, #ffe27a, #e8b100); }
.c4-board .hole.win    { box-shadow: 0 0 0 clamp(3px, 0.6vmin, 6px) #fff, 0 0 18px #fff; }

/* ---------------------------------------------------- סולמות ונחשים */

.sn-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vmin, 40px);
  flex-direction: row;
}
/* לרוחב: הלוח לוקח את מה שנשאר אחרי הקובייה */
@media (min-aspect-ratio: 1/1) {
  .sn-board {
    width: min(calc(100vw - clamp(200px, 26vmin, 300px)), calc(100vh - 110px));
    width: min(calc(100vw - clamp(200px, 26vmin, 300px)), calc(100dvh - 110px));
  }
}
@media (max-aspect-ratio: 1/1) { .sn-wrap { flex-direction: column; } }

.sn-board {
  display: grid;
  gap: clamp(2px, 0.5vmin, 6px);
  background: #cfe6f5;
  padding: clamp(4px, 0.8vmin, 9px);
  border-radius: clamp(10px, 2vmin, 22px);
  box-shadow: 0 8px 24px rgba(30, 60, 90, .2);
  width: min(92vw, calc(100vh - 120px));
  width: min(92vw, calc(100dvh - 120px));
  aspect-ratio: 1 / 1;
  direction: ltr;
}
.sn-board .sq {
  position: relative;
  background: #fff;
  border-radius: clamp(5px, 1vmin, 11px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}
.sn-board .sq:nth-child(even) { background: #f2f8fd; }
.sn-board .sq.goal { background: linear-gradient(180deg, #ffe9a8, #ffd23c); }
.sn-board .nm {
  position: absolute;
  top: 4%; right: 7%;
  font-size: clamp(9px, 1.8vmin, 18px);
  font-weight: 900;
  color: #5d7d92;
  z-index: 4;
}
.sn-board .mk { font-size: clamp(14px, 3.4vmin, 34px); line-height: 1; }
.sn-board .tok {
  position: absolute;
  font-size: clamp(14px, 3.4vmin, 34px);
  line-height: 1;
  transition: transform .15s ease;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.3));
}
.sn-board .tok.me { left: 6%; bottom: 4%; }
.sn-board .tok.pc { right: 6%; bottom: 4%; }

.die {
  border: none;
  border-radius: clamp(14px, 2.6vmin, 28px);
  background: #fff;
  box-shadow: 0 6px 0 #c3d4e0, 0 10px 22px rgba(30,60,90,.2);
  font-size: clamp(40px, 9vmin, 90px);
  line-height: 1;
  width: clamp(84px, 17vmin, 160px);
  height: clamp(84px, 17vmin, 160px);
  cursor: pointer;
  flex: 0 0 auto;
}
.die:active { transform: translateY(5px); box-shadow: 0 1px 0 #c3d4e0; }

/* ---------------------------------------------------- חשבון: תוספות */

.math-q .one { display: inline-block; transition: transform .2s ease, filter .2s ease; }
.math-q .one.lit { transform: scale(1.35); filter: drop-shadow(0 0 10px #ffb43c); }
.math-q .items.gone { opacity: .3; }
.math-q .items.gone .one { text-decoration: line-through; }
.math-q .big-num {
  font-size: clamp(70px, 20vmin, 200px);
  font-weight: 900;
  color: var(--c-blue-d);
  line-height: 1;
  text-shadow: 0 4px 0 #fff, 0 8px 20px rgba(40,80,110,.2);
}

.grp-btn {
  border: none;
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  padding: clamp(10px, 2vmin, 22px);
  box-shadow: 0 6px 0 #cfe0ec, 0 10px 20px rgba(30,60,90,.16);
  min-width: clamp(90px, 20vmin, 190px);
}
.grp-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 #cfe0ec; }
.grp-btn .items { font-size: clamp(20px, 4vmin, 40px); max-width: 6ch; }
.grp-btn.right { background: #d8f8e4; box-shadow: 0 6px 0 var(--c-green-d); }
.grp-btn.faded { opacity: .35; box-shadow: none; }

/* ---------------------------------------------------- מה מתאים למה */

.mt-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 8vmin, 110px);
}
.mt-col {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2.4vmin, 26px);
  justify-content: center;
}
.mt-item {
  border: none;
  border-radius: clamp(14px, 2.6vmin, 30px);
  background: #fff;
  cursor: pointer;
  width: clamp(74px, 17vmin, 165px);
  height: clamp(74px, 17vmin, 165px);
  padding: clamp(6px, 1.2vmin, 14px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 0 #cfe0ec, 0 10px 20px rgba(30, 60, 90, .16);
  padding: 0;
  touch-action: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.mt-item .fx {
  font-size: clamp(30px, 7vmin, 70px);
  line-height: 1.05;
  font-weight: 900;
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  width: 88%;
  overflow: hidden;
}
.mt-item:active { transform: translateY(4px); box-shadow: 0 2px 0 #cfe0ec; }
.mt-item.picked {
  box-shadow: 0 0 0 clamp(3px, 0.7vmin, 7px) #ffb43c, 0 8px 18px rgba(30,60,90,.2);
  transform: scale(1.06);
}
.mt-item.locked {
  background: #d8f8e4;
  box-shadow: 0 0 0 clamp(3px, 0.6vmin, 6px) #56dd94;
  cursor: default;
  opacity: .95;
}
.mt-item.glow { animation: mtglow 1.6s ease both; }
@keyframes mtglow {
  0%, 100% { box-shadow: 0 6px 0 #cfe0ec; }
  25%, 75% { box-shadow: 0 0 0 8px #ffd23c, 0 0 26px #ffd23c; }
}
.mt-item.dragging { position: fixed; z-index: 90; pointer-events: none; opacity: .95; }

.mt-item { overflow: hidden; }

/* ------------------------------------------- סולמות ונחשים: לוח מצויר */

.sn-board { position: relative; background: #dff0fb; }
.sn-board .sq {
  background: #fff;
  border-radius: clamp(6px, 1.2vmin, 13px);
  box-shadow: inset 0 0 0 1px rgba(150, 185, 210, .35);
}
.sn-board .sq:nth-child(even) { background: #f4fafe; }
.sn-board .sq.home { background: linear-gradient(180deg, #d9f7e4, #b6edcb); }
.sn-board .sq.goal { background: linear-gradient(180deg, #ffe9a8, #ffd23c); }
.sn-board .flag { font-size: clamp(15px, 3.6vmin, 36px); line-height: 1; }

/* התא שאליו הגיעו - הבזק קצר, כדי שברור לאן נחתנו */
.sn-board .sq.step { background: #fff3c9; }
.sn-board .sq.landed { animation: land 1.4s ease both; }
.sn-board .sq.landed.up   { box-shadow: inset 0 0 0 3px #22b573; }
.sn-board .sq.landed.down { box-shadow: inset 0 0 0 3px #e2574c; }
@keyframes land {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.12); }
}

/* שכבת הציור - נמתחת בדיוק על הלוח */
#snArt {
  position: absolute;
  inset: clamp(4px, 0.8vmin, 9px);
  width: auto; height: auto;
  pointer-events: none;
  overflow: visible;
}
.lad-rail  { stroke: #b5762e; stroke-width: 1.15; fill: none; stroke-linecap: round; opacity: .95; }
.lad-step  { stroke: #d89a4e; stroke-width: 0.95; stroke-linecap: round; opacity: .95; }
.lad-end   { fill: #2fbf71; opacity: .92; }
.lad-ico   { fill: #fff; font-size: 3px; text-anchor: middle; font-weight: 900; }

.snake-body    { stroke: #2fa860; stroke-width: 3.5; fill: none; stroke-linecap: round;
                 opacity: .93;
                 filter: drop-shadow(0 0.5px 0.7px rgba(0,0,0,.25)); }
.snake-belly   { stroke: #a8e9c1; stroke-width: 1.1; fill: none; stroke-linecap: round;
                 stroke-dasharray: 1.7 2.1; opacity: .95; }
.snake-tailtip { fill: #2fa860; }
.snake-head    { fill: #279c58; stroke: #fff; stroke-width: .7; }
.snake-eye     { fill: #fff; }
.snake-pupil   { fill: #22303a; }
.snake-tongue  { stroke: #e2574c; stroke-width: .75; fill: none; stroke-linecap: round; }

.sn-board .tok {
  position: absolute;
  font-size: clamp(15px, 3.6vmin, 36px);
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
  transition: transform .25s ease;
  z-index: 5;
}
.sn-board .tok.me { left: 4%;  bottom: 3%; }
.sn-board .tok.pc { right: 4%; bottom: 3%; }
.sn-board .nm {
  color: #5d7d92;
  font-weight: 900;
  z-index: 4;
}

/* קובייה גדולה + תוצאה בולטת */
.die-box { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 0 0 auto; }
.die {
  width: clamp(96px, 20vmin, 180px);
  height: clamp(96px, 20vmin, 180px);
  font-size: clamp(52px, 12vmin, 118px);
}
.die.rolling { animation: dieRoll .09s linear infinite; }
@keyframes dieRoll {
  0% { transform: rotate(-7deg) scale(1.02); }
  50% { transform: rotate(7deg) scale(.98); }
  100% { transform: rotate(-7deg) scale(1.02); }
}
.sn-result {
  min-height: clamp(38px, 7vmin, 66px);
  font-size: clamp(30px, 6vmin, 58px);
  font-weight: 900;
  color: var(--c-orange-d);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .25s ease, transform .3s cubic-bezier(.2,1.7,.4,1);
}
.sn-result.show { opacity: 1; transform: scale(1); }

/* ---------------------------------------------------- איורים */

/*
  כלל אחד לכל האיורים במשחק.

  מה היה שבור: האיור הוגדר width:100%;height:100%, וכשהוא יושב בתוך
  קופסת flex הדפדפן מכווץ אותו (min-width:auto + flex-shrink) - כך
  יצא איור ברוחב 12 פיקסלים בתוך משבצת של 99, כלומר "נעלם".
  עכשיו: רוחב מלא, גובה לפי יחס 1:1, ובלי כיווץ. תמיד גדול וברור.
*/
.art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  max-height: 100%;
  flex: 0 0 auto;
  overflow: visible;
}
.art-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* -------------------------------------- פריסת כמויות (בלי גלישה) */

.qty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4%;
  width: 100%;
  height: 100%;
}
.qty-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4%;
  width: 100%;
}
.qty-one {
  width: var(--qs, 30%);
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  display: block;
  transition: transform .2s ease, filter .2s ease;
}
.qty-one svg { width: 100%; height: 100%; display: block; }
.qty-one.lit { transform: scale(1.25); filter: drop-shadow(0 0 10px #ffb43c); }

/* משבצת שמכילה כמות - תמיד ריבועית ועם שוליים פנימיים */
.math-q .items {
  display: block;
  width: min(46vmin, 340px);
  height: min(46vmin, 340px);
  max-width: 100%;
}
.math-q .sum { align-items: center; }
.math-q .sum .items { width: min(30vmin, 240px); height: min(30vmin, 240px); }
.grp-btn { width: clamp(110px, 26vmin, 240px); height: clamp(110px, 26vmin, 240px); padding: clamp(8px, 1.8vmin, 18px); }
.mt-item .big-n {
  font-size: clamp(34px, 8vmin, 78px);
  font-weight: 900;
  color: var(--c-blue-d);
}
.mt-item .qty { padding: clamp(6px, 1.4vmin, 15px); }

/* ==================================================== מסך בית בקטגוריות */

#games h1 { margin-bottom: clamp(6px, 1.4vmin, 16px); }
.menu {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.2vmin, 26px);
  width: min(940px, 96%);
  grid-template-columns: none;
}
.tile { min-height: clamp(78px, 12vmin, 128px); font-size: clamp(13px, 1.9vmin, 20px); }
.tile .ic { font-size: clamp(24px, 4.4vmin, 46px); }

/* ==================================================== מסכים משותפים */

.center-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vmin, 40px);
}
.ask-big {
  font-size: clamp(22px, 4.4vmin, 46px);
  font-weight: 900;
  color: var(--ink);
  text-shadow: 0 2px 0 #fff;
}

/* ==================================================== מבוך */

.mz-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vmin, 44px);
}
@media (max-aspect-ratio: 1/1) { .mz-wrap { flex-direction: column; } }

.mz-board {
  display: grid;
  /* עוגן לשכבת הקירות - בלעדיו ה-SVG נמתח על כל המסך */
  position: relative;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.5), transparent 60%),
    linear-gradient(180deg, #f2fbf2, #e2f4e4);
  border: clamp(6px, 1.2vmin, 12px) solid #5aa45a;
  touch-action: none;
  border-radius: clamp(10px, 2vmin, 22px);
  box-shadow: 0 8px 26px rgba(30, 60, 90, .2);
  width: min(84vw, calc(100vh - 210px));
  width: min(84vw, calc(100dvh - 210px));
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  direction: ltr;
}
@media (min-aspect-ratio: 1/1) {
  .mz-board { width: min(calc(100vw - 300px), calc(100dvh - 120px)); }
}
.mz { position: relative; min-width: 0; min-height: 0; border-radius: 3px; }

/*
  רמז במבוך: תא מואר. הרמז הראשון מאיר את הצומת הבא - המקום
  שבו צריך להחליט - ולא את הפתרון. מעל שכבת הקירות כדי שייראה.
*/
.mz.mz-look::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 150, .95), rgba(255, 214, 90, 0) 70%);
  z-index: 3;
  pointer-events: none;
  animation: mzLook 1.15s ease-in-out 3;
}
@keyframes mzLook {
  0%, 100% { opacity: .35; transform: scale(.75); }
  50%      { opacity: 1;   transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  /* בלי אנימציה הרמז חייב להישאר נראה, אחרת אין רמז בכלל */
  .mz.mz-look::after { animation: none; opacity: .9; }
}
/*
  הקירות מצוירים בשכבת ה-SVG (.mz-walls) ולא בגבולות CSS:
  גבולות של תאים שכנים משאירים חורים בפינות, וקווים עם מפרק
  עגול לא. מחלקות ה-w* נשארות רק בשביל היגיון וזיהוי.
*/
.mz-walls {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  /* חיתוך לגבולות הלוח - אחרת חצי מהקו החיצוני גולש על המסך */
  overflow: hidden;
  filter: drop-shadow(0 2px 3px rgba(30, 60, 40, .35));
}
/* הקרקע משתנה לפי העולם - שביל עפר, חול רטוב, או ענן */
.mz-board[data-skin="forest"] {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.5), transparent 60%),
    linear-gradient(180deg, #efe0c4, #ddc9a4);
  border-color: #3f7f46;
}
.mz-board[data-skin="bay"] {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(180deg, #d7ecf5, #b6dcec);
  border-color: #7b6a4c;
}
.mz-board[data-skin="peaks"] {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.7), transparent 60%),
    linear-gradient(180deg, #dceaf7, #bcd6ee);
  border-color: #8aa6c8;
}

/* שובל עדין - איפה הדמות כבר עברה */
.mz.been { background: rgba(255, 214, 92, .30); }
.mz-start { background: rgba(120, 200, 255, .22); }
.mz-goal { animation: goalPulse 2s ease-in-out infinite; }
@keyframes goalPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
.mz .mz-goal { inset: 10%; }
.mz.reached { background: rgba(86, 221, 148, .45); }

.mz-hero, .mz-goal {
  position: absolute;
  inset: 8%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mz-hero { z-index: 3; transition: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.28)); }
.mz-hero.bump { animation: bump .3s ease; }
@keyframes bump { 0%,100%{transform:scale(1)} 50%{transform:scale(.86)} }
.mz-hero.arrived { animation: cheer .9s ease; }
@keyframes cheer { 0%{transform:scale(1)} 40%{transform:scale(1.4) rotate(-8deg)} 100%{transform:scale(1)} }
.mz-goal { opacity: .95; }

.mz-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: clamp(6px, 1.2vmin, 14px);
  flex: 0 0 auto;
  /* קריטי: הדף כולו RTL, ובלי זה עמודה 1 מופיעה מימין
     והחצים יוצאים הפוכים - שמאלה מזיז ימינה. */
  direction: ltr;
}
.arrow {
  border: none;
  border-radius: clamp(14px, 2.6vmin, 28px);
  background: linear-gradient(180deg, #8f71e6, var(--c-purple));
  color: #fff;
  font-size: clamp(26px, 5vmin, 50px);
  width: clamp(66px, 13vmin, 120px);
  height: clamp(66px, 13vmin, 120px);
  cursor: pointer;
  box-shadow: 0 6px 0 var(--c-purple-d), 0 10px 20px rgba(30,60,90,.2);
}
.arrow:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--c-purple-d); }
.arrow.up    { grid-column: 2; grid-row: 1; }
.arrow.left  { grid-column: 1; grid-row: 2; }
.arrow.down  { grid-column: 2; grid-row: 2; }
.arrow.right { grid-column: 3; grid-row: 2; }

/* ==================================================== מה יוצא דופן */

.odd-row { display: flex; gap: clamp(10px, 2.2vmin, 26px); flex-wrap: wrap; justify-content: center; }
.odd-card {
  border: none;
  border-radius: clamp(16px, 2.8vmin, 30px);
  background: #fff;
  cursor: pointer;
  width: clamp(118px, 23vmin, 215px);
  padding: clamp(6px, 1.2vmin, 14px);
  box-shadow: 0 6px 0 #cfe0ec, 0 10px 22px rgba(30,60,90,.16);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.odd-card svg { width: 100%; height: auto; aspect-ratio: 1/1; }
.odd-row { align-items: center; }
.odd-card .cap { font-size: clamp(12px, 1.9vmin, 19px); font-weight: 800; color: var(--ink-soft); }
.odd-card:active { transform: translateY(4px); box-shadow: 0 2px 0 #cfe0ec; }
.odd-card.right { background: #d8f8e4; box-shadow: 0 0 0 4px #56dd94, 0 8px 18px rgba(30,60,90,.2); }

/* ==================================================== סדרות */

.ser-row { display: flex; align-items: center; gap: clamp(6px, 1.4vmin, 16px); flex-wrap: wrap; justify-content: center; }
.ser-cell {
  flex: 0 0 auto;
  width: clamp(76px, 14vmin, 140px);
  aspect-ratio: 1/1;
  background: #fff;
  border-radius: clamp(12px, 2.2vmin, 24px);
  box-shadow: 0 4px 12px rgba(30,60,90,.14);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(5px, 1vmin, 11px);
}
.ser-cell.q {
  background: #fff6d9;
  border: clamp(3px, 0.6vmin, 6px) dashed #f0c749;
  font-size: clamp(28px, 5.5vmin, 56px);
  font-weight: 900;
  color: #d9a017;
}
.ser-cell.filled { animation: pop-in .45s cubic-bezier(.25,1.7,.45,1) both; }
.ser-cell.glow { box-shadow: 0 0 0 4px #ffd23c, 0 0 20px #ffd23c; }
.ser-opts { display: flex; gap: clamp(10px, 2.4vmin, 30px); flex-wrap: wrap; justify-content: center; }
.ser-opt {
  border: none;
  border-radius: clamp(16px, 2.8vmin, 30px);
  background: #fff;
  cursor: pointer;
  width: clamp(100px, 19vmin, 180px);
  aspect-ratio: 1/1;
  padding: clamp(6px, 1.2vmin, 14px);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 0 #cfe0ec, 0 10px 22px rgba(30,60,90,.16);
}
.ser-opt:active { transform: translateY(4px); box-shadow: 0 2px 0 #cfe0ec; }
.ser-opt.right { background: #d8f8e4; box-shadow: 0 0 0 4px #56dd94; }

/* ==================================================== מה חסר */

.miss-row { display: flex; align-items: center; gap: clamp(8px, 1.8vmin, 22px); flex-wrap: wrap; justify-content: center; transition: opacity .4s ease; }
.miss-row.hidden { opacity: 0; }
.miss-card {
  flex: 0 0 auto;
  width: clamp(92px, 17vmin, 165px);
  aspect-ratio: 1/1;
  background: #fff;
  border-radius: clamp(14px, 2.4vmin, 26px);
  box-shadow: 0 5px 14px rgba(30,60,90,.15);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(5px, 1vmin, 11px);
}
.miss-card.empty {
  background: #fff6d9;
  border: clamp(3px, 0.6vmin, 6px) dashed #f0c749;
  font-size: clamp(30px, 6vmin, 60px);
  font-weight: 900;
  color: #d9a017;
}
.miss-card.filled { animation: pop-in .5s cubic-bezier(.25,1.7,.45,1) both; }
.miss-opts { display: flex; gap: clamp(10px, 2.4vmin, 30px); flex-wrap: wrap; justify-content: center; }
.miss-opt {
  border: none;
  border-radius: clamp(16px, 2.8vmin, 30px);
  background: #fff;
  cursor: pointer;
  width: clamp(100px, 19vmin, 180px);
  aspect-ratio: 1/1;
  padding: clamp(6px, 1.2vmin, 14px);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 0 #cfe0ec, 0 10px 22px rgba(30,60,90,.16);
}
.miss-opt:active { transform: translateY(4px); box-shadow: 0 2px 0 #cfe0ec; }
.miss-opt.right { background: #d8f8e4; box-shadow: 0 0 0 4px #56dd94; }

/* ==================================================== משחקים חדשים */

/* ---------------------------------------- חזור אחריי */
.echo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(10px, 2.2vmin, 28px);
}
.echo-pad {
  border: none;
  cursor: pointer;
  width: clamp(84px, 16vmin, 168px);
  height: clamp(84px, 16vmin, 168px);
  border-radius: clamp(18px, 3.2vmin, 34px);
  background: var(--pc, #7ab8f0);
  padding: clamp(8px, 1.6vmin, 18px);
  box-shadow: 0 clamp(5px, 1vmin, 10px) 0 rgba(0, 0, 0, .22),
              0 10px 22px rgba(30, 60, 90, .18);
  transition: transform .09s ease, box-shadow .09s ease, filter .12s ease;
}
.echo-pad svg { width: 100%; height: 100%; display: block; }
.echo-pad:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(0, 0, 0, .22); }
/* בזמן ההדגמה אי אפשר ללחוץ - כדי שלא "יילחץ" בטעות */
.echo-row.showing .echo-pad { pointer-events: none; }
.echo-pad.lit {
  filter: brightness(1.5) saturate(1.3);
  transform: scale(1.09);
  box-shadow: 0 0 0 clamp(4px, .8vmin, 8px) #fff,
              0 0 26px 8px rgba(255, 240, 160, .95);
}

/* ---------------------------------------- מצא את הצל */
.sh-target {
  width: clamp(110px, 22vmin, 230px);
  height: clamp(110px, 22vmin, 230px);
  background: #fff;
  border-radius: clamp(18px, 3.2vmin, 34px);
  padding: clamp(8px, 1.6vmin, 18px);
  box-shadow: 0 6px 0 #cfe0ec, 0 10px 22px rgba(30, 60, 90, .16);
}
.sh-target svg { width: 100%; height: 100%; display: block; }
.sh-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 2.2vmin, 28px);
}
.sh-opt {
  border: none;
  cursor: pointer;
  flex: 0 0 auto;
  width: clamp(92px, 17vmin, 180px);
  aspect-ratio: 1 / 1;
  background: #eef3f7;
  border-radius: clamp(16px, 2.8vmin, 30px);
  padding: clamp(8px, 1.5vmin, 16px);
  box-shadow: 0 clamp(5px, .9vmin, 9px) 0 #cfe0ec, 0 10px 20px rgba(30, 60, 90, .14);
  display: flex; align-items: center; justify-content: center;
}
.sh-opt:active { transform: translateY(4px); box-shadow: 0 1px 0 #cfe0ec; }
.sh-opt.right { background: #d8f8e4; box-shadow: 0 0 0 4px #56dd94; }
/* הצללית: אותו ציור בדיוק, הכל בשחור אחיד */
.gk-shadow { display: block; width: 100%; height: 100%; }
.gk-shadow svg { width: 100%; height: 100%; display: block; filter: brightness(0) opacity(.82); }

/* ---------------------------------------- האכל את היצור */
.feed-top { display: flex; flex-direction: column; align-items: center; gap: clamp(4px, .9vmin, 10px); }
.feed-crt { width: clamp(110px, 21vmin, 220px); }
.feed-crt svg { width: 100%; height: auto; display: block; }
.feed-need { display: flex; gap: clamp(5px, 1vmin, 11px); }
.fd-dot {
  width: clamp(13px, 2.2vmin, 24px);
  height: clamp(13px, 2.2vmin, 24px);
  border-radius: 50%;
  background: #e3dccb;
  box-shadow: inset 0 0 0 2px #c4b696;
}
.fd-dot.done { background: #56dd94; box-shadow: inset 0 0 0 2px #2fa869; }
.feed-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 1.8vmin, 22px);
  max-width: min(900px, 96%);
}
.feed-item {
  border: none;
  cursor: pointer;
  flex: 0 0 auto;
  width: clamp(74px, 13vmin, 136px);
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: clamp(14px, 2.4vmin, 26px);
  padding: clamp(6px, 1.2vmin, 13px);
  box-shadow: 0 clamp(4px, .8vmin, 8px) 0 #cfe0ec, 0 8px 18px rgba(30, 60, 90, .14);
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s ease, opacity .3s ease;
}
.feed-item:active { transform: translateY(4px); box-shadow: 0 1px 0 #cfe0ec; }
/* פריט שנאכל עף אל היצור ונעלם */
.feed-item.eaten {
  transform: translateY(-160px) scale(.15);
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------- פוצץ בועות */

/*
  שדה הבועות תופס את כל המסך מתחת לסרגל. הבועות עולות לאט,
  ולחיצה מפוצצת אחת. אין שעון ואין פסילה - רק ספירה.
*/
.bub-field {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 100%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(180deg, #bfeaf7, #7fc9e0);
}
.bub {
  position: absolute;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  transition: transform .18s ease, opacity .28s ease;
  filter: drop-shadow(0 3px 6px rgba(20, 60, 90, .22));
}
.bub svg { width: 100%; height: 100%; display: block; }
.bub:active { transform: scale(.9); }
.bub.gone {
  transform: scale(1.5);
  opacity: 0;
  pointer-events: none;
}

/* מונה הבועות שנפוצצו - עיגולים שמתמלאים */
.bub-count .cnt {
  width: clamp(16px, 2.8vmin, 30px);
  height: clamp(16px, 2.8vmin, 30px);
  border-radius: 50%;
  background: #dfeaf2;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .08);
  display: inline-block;
  margin: 0 3px;
  transition: transform .2s cubic-bezier(.3,1.6,.5,1), background .2s;
}
.bub-count .cnt.on {
  background: #5ec8dd;
  transform: scale(1.2);
  box-shadow: 0 0 10px rgba(94, 200, 221, .8);
}


/*
  כפתור "סיימתי" של משחק הבועות.

  הוא נוצר בקוד אבל מעולם לא קיבל עיצוב, ולכן היה בלתי נראה -
  ומדרגה 3 ומעלה המשחק חיכה ללחיצה על כפתור שלא רואים. עכשיו
  הוא גדול, בפינה קבועה, ומתחיל לפעום ברגע שיש מה לאשר.
*/
/*
  כפתור האישור.

  הוא היה עיגול בצבע עץ, וכך נראה כמו עוד בועה שצפה בשדה. עכשיו
  הוא ירוק מלא, עם מסגרת לבנה עבה וצל - צורה שאין לה אח בשדה,
  כך שרואים מיד שזה כפתור ולא בועה. הירוק גם תואם למה שנאמר
  בקריינות: "הכפתור הירוק הגדול".
*/
.bub-done {
  position: absolute;
  bottom: clamp(10px, 2.4vmin, 26px);
  left: 50%;
  transform: translateX(-50%);
  /*
    מלבן ולא עיגול: בשדה מלא עיגולים, עיגול נוסף נקרא כבועה.
    צורה מלבנית היא הדבר היחיד על המסך שאינו בועה, ולכן ברור
    מיד שזה כפתור - בלי צורך לקרוא מילה.
  */
  width: clamp(150px, 27vmin, 240px);
  height: clamp(78px, 14vmin, 116px);
  border: clamp(4px, .9vmin, 8px) solid #fff;
  border-radius: clamp(16px, 3.2vmin, 28px);
  background: radial-gradient(circle at 36% 28%, #6fd48c, #34a05a 62%, #247843);
  padding: 0;
  cursor: pointer;
  z-index: 20;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px rgba(20, 60, 90, .38), 0 0 0 4px rgba(52, 160, 90, .22);
  transition: transform .12s ease;
}
.bub-done svg { width: auto; height: 58%; aspect-ratio: 1; display: block; }
.bub-done:active { transform: translateX(-50%) scale(.92); }
.bub-done.ready { animation: doneReady 1.5s ease-in-out infinite; }
@keyframes doneReady {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) { .bub-done.ready { animation: none; } }


/*
  בועה שנבחרה, בדרגות שבהן סופרים לבד ומאשרים בכפתור.

  היא לא נעלמת אלא מסומנת: טבעת זהב עבה וסימן וי בפינה. הסימון
  הוא צורה וצבע בלבד - ילד שאינו קורא חייב לראות מה בחר. לחיצה
  נוספת מבטלת, כדי שאפשר לתקן לבד בלי שאף אחד יאמר שטעית.
*/
.bub.sel {
  z-index: 3;
  filter: drop-shadow(0 0 12px rgba(255, 200, 60, .95));
}
.bub.sel::after {
  content: "";
  position: absolute;
  inset: -7%;
  border-radius: 50%;
  border: clamp(4px, .9vmin, 8px) solid #ffc83c;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .6) inset;
  pointer-events: none;
}
/* תג הוי בפינה - SVG מוטבע, בלי טקסט */
.bub.sel::before {
  content: "";
  position: absolute;
  inset-inline-end: -6%;
  top: -6%;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background: #ffc83c
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 13l4.6 4.6L19 7' fill='none' stroke='%234a2c05' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    center / 68% 68% no-repeat;
  border: clamp(2px, .4vmin, 4px) solid #fff8e0;
  pointer-events: none;
  z-index: 4;
}

/* בועה שאינה עומדת בתנאי: התנדנדות עדינה בלבד, בלי צבע אזהרה */
.bub.wobble { animation: bubWobble .42s ease; }
@keyframes bubWobble {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25%      { transform: translate(-6px, 0) rotate(-6deg); }
  75%      { transform: translate(6px, 0) rotate(6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bub.wobble { animation: none; }
}

/* ==================================================== מצא את ההבדלים
   שתי סצנות מאוירות זו לצד זו (או זו מעל זו בפורטרט).
   כל לוח שומר יחס קבוע, ולכן אזורי הלחיצה הם אחוזים פשוטים
   ועובדים זהה בכל גודל מסך וכל כיוון.
   ==================================================== */

.spot-board {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: clamp(6px, 1.4vmin, 18px);
  align-items: center;
  justify-content: center;
  padding: clamp(4px, 1vmin, 14px);
}
/* כל תא לוקח חצי מהמקום ומרכז בתוכו את המסגרת */
.spot-board .pane {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/*
  המסגרת שומרת יחס קבוע 10:7 ומתכווצת לבד כדי להיכנס לגובה.
  זה קריטי: אזורי הלחיצה הם אחוזים מהמסגרת, ולכן הם מדויקים
  בכל גודל מסך ובכל כיוון - בלי חישובי letterbox.
*/
.spot-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 10 / 7;
  max-height: 100%;
  border-radius: clamp(12px, 2.2vmin, 26px);
  overflow: hidden;
  background: #dff2fb;
  box-shadow: 0 6px 0 #cfe0ec, 0 10px 24px rgba(30, 60, 90, .18);
}
.spot-art, .spot-marks { position: absolute; inset: 0; }
.spot-art svg { width: 100%; height: 100%; display: block; }
.spot-marks { pointer-events: none; }

/* סימון הבדל שנמצא - טבעת מסביב, בלי לכסות את האיור */
.spot-ring {
  position: absolute;
  border: clamp(3px, .7vmin, 7px) solid #56dd94;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 0 16px rgba(86, 221, 148, .8);
  animation: spotPop .4s cubic-bezier(.25, 1.7, .45, 1) both;
}
@keyframes spotPop {
  from { transform: scale(.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* רמז - אזור גדול ומעורפל, לא הצבעה על האובייקט */
.spot-hint {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 233, 140, .55) 0%,
                              rgba(255, 233, 140, .22) 55%, transparent 72%);
  animation: spotHint 2.2s ease-in-out;
}
@keyframes spotHint {
  0% { opacity: 0; transform: scale(.7); }
  25% { opacity: 1; transform: scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

/* לחיצה במקום ריק - סימן עדין וחולף, בלי פסילה */
.spot-miss {
  position: absolute;
  width: clamp(26px, 5vmin, 52px);
  height: clamp(26px, 5vmin, 52px);
  margin: calc(clamp(26px, 5vmin, 52px) / -2);
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .9);
  animation: spotMiss .6s ease-out forwards;
}
@keyframes spotMiss {
  from { transform: scale(.4); opacity: .9; }
  to { transform: scale(1.5); opacity: 0; }
}

@media (orientation: portrait) {
  .spot-board { flex-direction: column; }
  .spot-board .pane { width: 100%; height: auto; }
}


/*
  רמז חזותי שקט.

  נדלק רק אחרי שהילד לא הגיב ואחרי שנאמרה תזכורת אחת. פעימה
  רכה ולא צבע אזהרה - זה עידוד להסתכל, לא סימן שמשהו לא בסדר.
*/
.hint-pulse { animation: hintPulse 1.6s ease-in-out infinite; }
@keyframes hintPulse {
  0%, 100% { transform: scale(1);    filter: none; }
  50%      { transform: scale(1.07); filter: drop-shadow(0 0 12px rgba(255, 200, 60, .9)); }
}
@media (prefers-reduced-motion: reduce) { .hint-pulse { animation: none; } }


/* ---- אנימציות נקודות העניין החדשות במפרץ ---- */
/* טיפי מציץ ומתחבא - התנועה היא הרמז שמישהו שם */
.poi-peek { animation: poiPeek 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes poiPeek {
  0%, 45%, 100% { transform: translateY(14px); opacity: .55; }
  60%, 85%      { transform: translateY(0);    opacity: 1; }
}
/* גולו - בועות כבדות שעולות מהעומק */
.poi-deep { animation: poiDeep 3.4s ease-in-out infinite; }
@keyframes poiDeep {
  0%   { transform: translateY(10px) scale(.9); opacity: .5; }
  55%  { transform: translateY(-6px) scale(1);  opacity: 1; }
  100% { transform: translateY(-18px) scale(1.06); opacity: 0; }
}
/* פיקי - אור שנבלע לתוך המערה */
.poi-cavelight { animation: poiCave 2.8s ease-in-out infinite; }
@keyframes poiCave {
  0%, 100% { transform: translateY(-4px) scale(1);   opacity: .95; }
  50%      { transform: translateY(10px) scale(.72); opacity: .35; }
}

/* ---- תנועות היצורים החדשים ---- */
.tipi-tail { animation: tipiTail 1.6s ease-in-out infinite; transform-origin: 60% 60%; }
@keyframes tipiTail { 0%,100%{transform:rotate(-6deg)} 50%{transform:rotate(8deg)} }
.tipi-halo, .gulo-halo, .piki-halo { animation: crtHalo 3s ease-in-out infinite; }
.piki-fin { animation: pikiFin 1.3s ease-in-out infinite; transform-origin: 0% 50%; }
@keyframes pikiFin { 0%,100%{transform:rotate(0)} 50%{transform:rotate(-10deg)} }
.piki-spark { animation: pikiSpark 2.2s ease-in-out infinite; }
@keyframes pikiSpark { 0%,100%{opacity:.4;transform:translateY(0)} 50%{opacity:1;transform:translateY(-4px)} }

@media (prefers-reduced-motion: reduce) {
  .poi-peek, .poi-deep, .poi-cavelight,
  .tipi-tail, .piki-fin, .piki-spark { animation: none; }
}


/* ==========================================================
   מנועי מפרץ המים: חיפוש, סידור, בנייה ומסלול.

   כולם עובדים באחוזים ובלי טקסט שצריך לקרוא. כל אזור פעולה
   גדול מספיק לאצבע של ילד בן חמש על טאבלט.
   ========================================================== */

/* ---------- מצא בסצנה ---------- */
.fd-field {
  position: absolute;
  inset: clamp(56px, 9vmin, 90px) clamp(8px, 1.6vmin, 18px) clamp(8px, 1.6vmin, 18px);
  border-radius: clamp(14px, 2.4vmin, 26px);
  background:
    linear-gradient(#bfe7f7 0%, #7fc9e6 42%, #3f9fc4 100%);
  overflow: hidden;
  touch-action: manipulation;
}
/* קרקעית חול, כדי שהשדה ייראה כמו מקום ולא כמו לוח ריק */
.fd-field::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 22%;
  background: linear-gradient(#e8d5a8, #d9c088);
  border-radius: 40% 40% 0 0 / 18% 18% 0 0;
}
.fd-item {
  position: absolute;
  aspect-ratio: 1;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 2;
  transition: transform .16s ease, opacity .3s ease;
  filter: drop-shadow(0 2px 3px rgba(20, 60, 90, .28));
}
.fd-item svg { width: 100%; height: 100%; display: block; }
.fd-item:active { transform: scale(.92); }
.fd-item.found {
  animation: fdFound .45s ease forwards;
  pointer-events: none;
}
@keyframes fdFound {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.3); filter: drop-shadow(0 0 12px #ffe08a); }
  100% { transform: scale(1.1); opacity: .35; }
}

/* מונה קטן בסרגל העליון: כמה כבר נמצאו */
.cnt-row { display: flex; gap: clamp(5px, 1vmin, 10px); align-items: center; }
.cnt-row .cnt {
  width: clamp(14px, 2.6vmin, 24px);
  height: clamp(14px, 2.6vmin, 24px);
  border-radius: 50%;
  background: #ffffff8c;
  border: 2px solid #ffffffcc;
}
.cnt-row .cnt.on { background: #3e8e5a; border-color: #2c6b42; }

/* ---------- סדר לפי גודל ---------- */
.sr-slots, .sr-tray {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(8px, 1.8vmin, 20px);
  flex-wrap: nowrap;
  direction: ltr;              /* קטן -> גדול תמיד משמאל לימין */
  width: 100%;
}
.sr-slots { margin-bottom: clamp(14px, 3vmin, 34px); }
.sr-slot {
  width: calc(clamp(46px, 11vmin, 118px) * var(--sz));
  aspect-ratio: 1;
  border-radius: 18%;
  border: clamp(3px, .6vmin, 6px) dashed #9fb6c4;
  background: #ffffff70;
  display: grid;
  place-items: center;
}
.sr-slot.filled { border-style: solid; border-color: #3e8e5a; background: #eaf7ee; }
.sr-slot svg { width: 84%; height: 84%; }
/*
  אזור המגע לעולם לא קטן מ-62 פיקסל, גם כשהפריט עצמו זעיר.
  ההבדל בגודל הוא כל האתגר של המשחק, אבל אצבע של בן חמש לא
  אמורה להחטיא את הפריט הקטן ביותר בגלל זה.
*/
.sr-item {
  width: max(62px, calc(clamp(46px, 11vmin, 118px) * var(--sz)));
  aspect-ratio: 1;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .14s ease, opacity .25s ease;
  filter: drop-shadow(0 3px 5px rgba(20, 60, 90, .28));
}
.sr-item svg {
  width: calc(clamp(46px, 11vmin, 118px) * var(--sz));
  max-width: 100%;
  aspect-ratio: 1;
  height: auto;
  display: block;
}
.sr-item:active { transform: scale(.93); }
.sr-item.done { opacity: .18; pointer-events: none; }

/* ---------- בנה לפי הדגם ---------- */
.bd-model, .bd-slots, .bd-tray {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 1.8vmin, 20px);
  direction: ltr;
  flex-wrap: wrap;
}
.bd-model {
  padding: clamp(10px, 2vmin, 20px);
  border-radius: clamp(14px, 2.4vmin, 26px);
  background: #fffbe8;
  border: clamp(3px, .6vmin, 6px) solid #f0d28a;
  transition: opacity .3s ease, transform .3s ease;
}
.bd-model.hidden { opacity: 0; transform: scale(.94); pointer-events: none; }
.bd-cell, .bd-slot, .bd-piece {
  width: clamp(48px, 10vmin, 104px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.bd-cell svg, .bd-slot svg, .bd-piece svg { width: 90%; height: 90%; display: block; }
.bd-slots { margin: clamp(14px, 3vmin, 30px) 0; }
.bd-slot {
  border-radius: 18%;
  border: clamp(3px, .6vmin, 6px) dashed #9fb6c4;
  background: #ffffff70;
}
.bd-slot.filled { border-style: solid; border-color: #3e8e5a; background: #eaf7ee; }
.bd-piece {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: transform .14s ease;
  filter: drop-shadow(0 3px 5px rgba(20, 60, 90, .28));
}
.bd-piece:active { transform: scale(.93); }
/* בזמן שהדגם מוצג אין מה ללחוץ - כדי שלא ינחשו לפני שהסתכלו */
#buildStage.showing .bd-tray, #buildStage.showing .bd-slots { opacity: .25; pointer-events: none; }

/* ---------- מסלול בתנועה ---------- */
.sw-stage {
  position: absolute;
  inset: clamp(56px, 9vmin, 90px) clamp(8px, 1.6vmin, 18px) clamp(8px, 1.6vmin, 18px);
  border-radius: clamp(14px, 2.4vmin, 26px);
  overflow: hidden;
  touch-action: none;
  cursor: pointer;
}
.sw-swim { background: linear-gradient(#2f6f8f 0%, #17384f 60%, #0d2233 100%); }
.sw-hop  { background: linear-gradient(#cfeaf7 0%, #8fc9e4 55%, #e8d5a8 100%); }
.sw-hero {
  position: absolute;
  left: 10%;
  top: 50%;
  width: clamp(58px, 11vmin, 120px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transition: filter .2s ease;
  pointer-events: none;
  z-index: 3;
}
.sw-hero svg { width: 100%; height: 100%; display: block; }
.sw-hero.bump { animation: swBump .48s ease; }
@keyframes swBump {
  0%, 100% { filter: none; }
  30%      { filter: drop-shadow(0 0 14px #ffd06a) brightness(1.25); }
}
.sw-rock {
  position: absolute;
  width: clamp(34px, 6.5vmin, 72px);
  z-index: 2;
  filter: drop-shadow(2px 0 4px rgba(0, 0, 0, .3));
}
.sw-rock svg { width: 100%; height: 100%; display: block; }
/* אצל טיפי אלה סלעי חוף חמים ולא סלעי מעמקים אפורים */
.sw-hop .sw-rock { filter: drop-shadow(2px 0 4px rgba(0, 0, 0, .22)); }
.sw-hop .sw-rock .rk-body { fill: #c2a173; }
.sw-hop .sw-rock path[stroke="#4c5a66"] { stroke: #8a6f45; }

/*
  בזמן שמנוע action שולט בדמות, רק הדמות הנשלטת על המסך.

  הבודק ראה שני פיקי: אחד שהוא מזיז, ואחד שיושב בקצה מד המשימות
  למעלה. גם הדמות המלווה וגם המד מוסתרים בזמן המסלול, וחוזרים
  ברגע שהסבב נגמר.
*/
body.sw-playing .adv-buddy,
body.sw-playing .adv-track { display: none; }
.sw-orb {
  position: absolute;
  width: clamp(26px, 5vmin, 54px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 35% 30%, #ffffff, #cdeafb 55%, #7fc4e0);
  box-shadow: 0 0 14px #bfe8ff;
  z-index: 2;
}
.sw-orb.taken { animation: swTake .35s ease forwards; }
@keyframes swTake {
  to { transform: translateY(-50%) scale(1.9); opacity: 0; }
}

/* ניעור עדין - משותף לכל המנועים החדשים */
.fd-item.wobble, .sr-item.wobble, .bd-piece.wobble { animation: bubWobble .4s ease; }

@media (prefers-reduced-motion: reduce) {
  .fd-item.found, .sw-hero.bump, .sw-orb.taken,
  .fd-item.wobble, .sr-item.wobble, .bd-piece.wobble { animation: none; }
}

/*
  מד המסלול במשחק התנועה.

  ילד לא קורא מספרים, ולכן ההתקדמות היא נקודה שנוסעת לאורך פס
  אל דגל בסוף. בלי זה המסלול מרגיש אינסופי.
*/
.sw-route {
  position: absolute;
  left: 6%;
  right: 6%;
  top: clamp(8px, 1.6vmin, 16px);
  height: clamp(10px, 1.8vmin, 18px);
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  border: 2px solid rgba(255, 255, 255, .5);
  z-index: 4;
  pointer-events: none;
}
.sw-route-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #9fe3f5, #ffe9a8);
}
.sw-route-dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: clamp(18px, 3.2vmin, 30px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #ffe08a 60%, #f2b53c);
  box-shadow: 0 0 10px #ffe08a;
}
.sw-route-end {
  position: absolute;
  top: 50%;
  right: 0;
  width: clamp(20px, 3.6vmin, 34px);
  aspect-ratio: 1;
  transform: translate(50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #b8f0d8 60%, #4bbf8a);
  border: 2px solid #ffffffcc;
}

/* ענני הרי העננים, אחרי שהאזור נפתח */
.wm-cloud { animation: wmCloud 6s ease-in-out infinite; }
@keyframes wmCloud {
  0%, 100% { transform: translateX(0); opacity: .8; }
  50%      { transform: translateX(10px); opacity: .95; }
}
@media (prefers-reduced-motion: reduce) { .wm-cloud { animation: none; } }

/*
  תמונת הסיום של אזור: כל החברים שנאספו עומדים יחד.
  הם נכנסים אחד-אחד, כדי שהילד יראה כל אחד מגיע ולא קבוצה
  שקופצת בבת אחת.
*/
#advTalk.crew { display: grid; place-items: center; }
.crew-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(6px, 1.4vmin, 18px);
  flex-wrap: wrap;
  max-width: 94vw;
}
.crew-one {
  width: clamp(74px, 15vmin, 168px);
  opacity: 0;
  transform: translateY(26px) scale(.8);
  animation: crewIn .55s cubic-bezier(.2, 1.3, .5, 1) forwards;
}
.crew-one svg { width: 100%; height: auto; display: block; }
@keyframes crewIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .crew-one { animation: none; opacity: 1; transform: none; }
}

/* ---- הרי העננים: תנועת הרקע ונקודות העניין ---- */
.pk-far  { animation: pkDrift 26s linear infinite; }
.pk-near { animation: pkDrift 17s linear infinite reverse; }
@keyframes pkDrift {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(26px); }
  100% { transform: translateX(0); }
}
.pk-bridge { animation: pkBridge 3.4s ease-in-out infinite; }
@keyframes pkBridge { 0%,100% { opacity: .7 } 50% { opacity: 1 } }
.pk-spark { animation: pkSpark 2.6s ease-in-out infinite; }
.pk-spark.s2 { animation-delay: .8s }
.pk-spark.s3 { animation-delay: 1.5s }
@keyframes pkSpark {
  0%,100% { opacity: .35; transform: translateY(0) }
  50%     { opacity: 1;   transform: translateY(-6px) }
}

/* נקודות העניין של האזור */
.poi-puff    { animation: poiPuff 3s ease-in-out infinite; }
@keyframes poiPuff {
  0%,42%,100% { transform: translateY(10px); opacity: .5 }
  58%,86%     { transform: translateY(-2px); opacity: 1 }
}
.poi-feather { animation: poiFeather 4.2s ease-in-out infinite; transform-origin: 50% 0%; }
@keyframes poiFeather {
  0%,100% { transform: translateY(-8px) rotate(-9deg) }
  50%     { transform: translateY(8px)  rotate(9deg) }
}
.poi-spark-bolt { animation: poiBolt 2.4s ease-in-out infinite; }
@keyframes poiBolt {
  0%,66%,100% { opacity: .25; transform: scale(.86) }
  74%,88%     { opacity: 1;   transform: scale(1.06) }
}
.poi-dawn { animation: poiDawn 4s ease-in-out infinite; }
@keyframes poiDawn {
  0%,100% { transform: translateY(10px); opacity: .55 }
  50%     { transform: translateY(-4px); opacity: 1 }
}
.poi-dew { animation: poiDew 3.2s ease-in-out infinite; }
@keyframes poiDew {
  0%,100% { transform: translateY(-3px) scale(1) }
  50%     { transform: translateY(3px)  scale(1.07) }
}

@media (prefers-reduced-motion: reduce) {
  .pk-far, .pk-near, .pk-bridge, .pk-spark,
  .poi-puff, .poi-feather, .poi-spark-bolt, .poi-dawn, .poi-dew { animation: none; }
}

/* ==========================================================
   סימטריה
   ========================================================== */
.mr-board {
  position: absolute;
  inset: clamp(56px, 9vmin, 90px) clamp(8px, 1.6vmin, 18px) clamp(120px, 21vmin, 190px);
  display: flex;
  align-items: stretch;
  border-radius: clamp(14px, 2.4vmin, 26px);
  background: linear-gradient(#e8f2fb, #cfe4f6);
  overflow: hidden;
}
.mr-half { position: relative; flex: 1; }
/*
  המראה צריכה להיראות כמו מראה.

  הצד המקורי מואר קצת יותר, הצד להשלמה כהה ורגוע, וביניהם
  קו כסוף שנוצץ. זה מסביר את הכלל בלי מילה אחת - ובלי לגלות
  לאן כל חלק הולך.
*/
/* המקור מואר, ההשלמה רגועה - הפרש עדין שמכוון בלי להסביר */
#mirLeft  { background: #ffffff4d; }
#mirRight { background: #8fb0d518; }
.mr-axis {
  position: relative;
  width: clamp(6px, 1.1vmin, 11px);
  background: linear-gradient(180deg, #cfe0f2, #ffffff 45%, #cfe0f2);
  box-shadow: 0 0 12px #ffffffcc, 0 0 3px #7d93b5;
  overflow: hidden;
}
/* ניצוץ שנוסע לאורך המראה - עדין, לא מסיח */
.mr-axis::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 34%;
  background: linear-gradient(180deg, #ffffff00, #ffffff, #ffffff00);
  animation: mrShimmer 3.6s ease-in-out infinite;
}
@keyframes mrShimmer {
  0%, 100% { top: -34%; opacity: .3; }
  50%      { top: 100%; opacity: .95; }
}
@media (prefers-reduced-motion: reduce) { .mr-axis::after { animation: none; top: 33%; } }

/* גרירה: העתק שנוסע עם האצבע, ומקום שמאיר כשמרחפים מעליו */
.mr-ghost {
  position: fixed;
  z-index: 90;
  transform: translate(-50%, -50%) scale(1.08);
  pointer-events: none;
  opacity: .92;
  filter: drop-shadow(0 6px 10px rgba(20, 60, 90, .4));
}
.mr-piece.dragging { opacity: .35; }
.mr-slot.over {
  border-color: #e8a33c;
  background: #fff6e0;
  transform: scale(1.08);
}
.mr-item, .mr-slot {
  position: absolute;
  width: clamp(46px, 9vmin, 96px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.mr-item svg, .mr-slot svg { width: 100%; height: 100%; display: block; }
.mr-slot {
  border-radius: 20%;
  border: clamp(3px, .6vmin, 6px) dashed #93a9c4;
  background: #ffffff5c;
}
.mr-slot.filled { border: none; background: none; }
.mr-slot.next {
  border-color: #e8a33c;
  background: #fff6e0;
  animation: mrNext 1.5s ease-in-out infinite;
}
@keyframes mrNext {
  0%, 100% { box-shadow: 0 0 0 0 #e8a33c66; }
  50%      { box-shadow: 0 0 0 clamp(6px, 1.2vmin, 12px) #e8a33c00; }
}
.mr-tray {
  position: absolute;
  inset-inline: clamp(8px, 1.6vmin, 18px);
  bottom: clamp(8px, 1.6vmin, 18px);
  height: clamp(100px, 18vmin, 160px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.8vmin, 20px);
  flex-wrap: wrap;
  padding: clamp(6px, 1.2vmin, 14px);
  border-radius: clamp(14px, 2.4vmin, 26px);
  background: #ffffffb0;
}
.mr-piece {
  width: clamp(52px, 10vmin, 104px);
  aspect-ratio: 1;
  padding: 0; border: none; background: none; cursor: pointer;
  transition: transform .14s ease, opacity .25s ease;
  filter: drop-shadow(0 3px 5px rgba(20, 60, 90, .28));
}
.mr-piece svg { width: 100%; height: 100%; display: block; }
.mr-piece:active { transform: scale(.93); }
.mr-piece.done { opacity: .18; pointer-events: none; }
.mr-piece.wobble { animation: bubWobble .4s ease; }

/* ==========================================================
   חבר את הכוכבים
   ========================================================== */
.st-field {
  position: absolute;
  inset: clamp(56px, 9vmin, 90px) clamp(8px, 1.6vmin, 18px) clamp(8px, 1.6vmin, 18px);
  border-radius: clamp(14px, 2.4vmin, 26px);
  background: radial-gradient(circle at 50% 30%, #2c4670 0%, #16233d 62%, #0d1526 100%);
  overflow: hidden;
  touch-action: none;
  cursor: pointer;
}
.st-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-line {
  stroke: #ffe9a8;
  stroke-width: .9;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2px #ffe9a8);
}
/*
  כוכב כבוי. קודם זו הייתה נקודה צהובה בשקיפות נמוכה, וזה נראה
  כמו כתם אפור. עכשיו הוא כחלחל-לבן וחיוור - כוכב רחוק שעדיין
  לא נגעו בו - וההבדל מהכוכב הדולק ברור מיד.
*/
.st-dot {
  position: absolute;
  width: clamp(34px, 6.4vmin, 68px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* הצבע מגיע מהמשחק (משתני --dot-*), עם ברירת מחדל כחולה */
  background: radial-gradient(circle at 40% 35%, #ffffff,
              var(--dot-core, #cfe3ff) 52%, var(--dot-edge, #7fa0cc));
  opacity: .55;
  box-shadow: 0 0 8px #6f8fbb66;
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
  pointer-events: none;
}
.st-dot.lit {
  opacity: 1;
  background: radial-gradient(circle at 40% 35%, #ffffff,
              var(--dot-core, #ffe08a) 55%, var(--dot-edge, #d9a93c));
  box-shadow: 0 0 16px var(--dot-glow, #ffe08a);
}
.st-dot.next {
  background: radial-gradient(circle at 40% 35%, #ffffff, #fff3c4 55%, #ffd06a);
}
/* הנקודה הבאה - האור הוא ההוראה, אין מספרים */
.st-dot.next {
  opacity: 1;
  animation: stNext 1.15s ease-in-out infinite;
}
@keyframes stNext {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    box-shadow: 0 0 10px #ffe08a; }
  50%      { transform: translate(-50%, -50%) scale(1.35); box-shadow: 0 0 26px #fff3c4; }
}
/* רגע הגילוי: הצורה כולה נדלקת */
.st-field.revealed .st-line { stroke: #fff6d8; stroke-width: 1.6; }
.st-field.revealed .st-dot  { opacity: 1; box-shadow: 0 0 20px #fff3c4; }
.st-field.revealed { animation: stReveal 1.8s ease; }
@keyframes stReveal {
  0%   { filter: brightness(1); }
  30%  { filter: brightness(1.5); }
  100% { filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .mr-slot.next, .st-dot.next, .st-field.revealed, .mr-piece.wobble { animation: none; }
}

/* ---- רוכבים על הרוח ---- */
.sw-wind {
  background: linear-gradient(#bfe0f7 0%, #e4f0fb 46%, #f7fbff 100%);
}
/* מערבולות רוח ברקע, כדי שהתנועה תורגש גם כשאין מכשול */
.sw-wind::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(-8deg, transparent 0 46px,
      rgba(255, 255, 255, .55) 46px 50px, transparent 50px 96px);
  animation: windFlow 2.4s linear infinite;
  pointer-events: none;
}
@keyframes windFlow {
  from { transform: translateX(0); }
  to   { transform: translateX(-96px); }
}
/* טבעת ענן - עוברים דרכה */
.sw-ring {
  position: absolute;
  width: clamp(58px, 11vmin, 116px);
  aspect-ratio: .78;
  transform: translateY(-50%);
  z-index: 1;
  transition: opacity .35s ease, transform .35s ease;
}
.sw-ring svg { width: 100%; height: 100%; display: block; }
.sw-ring.through {
  animation: ringThrough .5s ease forwards;
  filter: drop-shadow(0 0 14px #ffe9a8);
}
@keyframes ringThrough {
  to { transform: translateY(-50%) scale(1.35); opacity: 0; }
}
.sw-ring.missed { opacity: .35; }

/* ציפור רחוקה שחולפת בעולם הרוח - קישוט בלבד, לא מכשול */
.sw-bird {
  position: absolute;
  width: clamp(34px, 6vmin, 68px);
  transform: translateY(-50%);
  opacity: .7;
  z-index: 0;
  pointer-events: none;
  animation: swBird 2.6s ease-in-out infinite;
}
.sw-bird svg { width: 100%; height: auto; display: block; }
@keyframes swBird {
  0%, 100% { transform: translateY(-50%) scaleY(1); }
  50%      { transform: translateY(-58%) scaleY(.72); }
}
/* ענן סערה - רך יותר מסלע, עם הילה מאיימת קלה */
.sw-rock.storm { filter: drop-shadow(0 0 10px rgba(60, 80, 110, .45)); }
@media (prefers-reduced-motion: reduce) { .sw-bird { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  .sw-wind::before, .sw-ring.through { animation: none; }
}

/*
  הצורה שהונחה מוצגת הפוכה אופקית.

  זו כל הנקודה של המשחק: בסוף רואים *השתקפות* ולא שני עותקים
  זהים. הצורה במגש נשארת רגילה, כי היא הפריט עצמו ולא הבבואה.
*/
.mr-slot.filled svg { transform: scaleX(-1); }

/* מסתיר חלקי בחיפוש: חזותי בלבד, הלחיצה עוברת דרכו */
.fd-occluder {
  position: absolute;
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 3;
  opacity: .95;
}
.fd-occluder svg { width: 100%; height: 100%; display: block; }

/* "בנה לפי הדגם" בשתי שורות - רשת במקום שורה אחת */
.bd-model.grid2, .bd-slots.grid2 {
  display: grid;
  grid-template-columns: repeat(var(--bd-cols, 3), auto);
  justify-content: center;
  gap: clamp(8px, 1.8vmin, 20px);
}

/* זרם - רצועה שדוחפת. רואים חצים, מרגישים דחיפה */
.sw-current {
  position: absolute;
  top: 0;
  height: 100%;
  width: clamp(64px, 12vmin, 130px);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  pointer-events: none;
  z-index: 1;
}
.sw-current svg { width: 100%; height: 100%; opacity: .75; }
.sw-current.up svg   { animation: curUp 1.2s linear infinite; }
.sw-current.down svg { animation: curDown 1.2s linear infinite; }
@keyframes curUp   { from { transform: translateY(8px) }  to { transform: translateY(-8px) } }
@keyframes curDown { from { transform: translateY(-8px) } to { transform: translateY(8px) } }

/* שער הסיום */
.sw-gate {
  position: absolute;
  top: 4%;
  height: 92%;
  /* רחב מספיק כדי שרואים שעוברים *דרכו* ולא לידו */
  width: clamp(96px, 19vmin, 210px);
  z-index: 2;
  pointer-events: none;
}
.sw-gate svg { width: 100%; height: 100%; }

/*
  שער הסיום בנוי מאלמנטים ולא מציור אחד: העמודים נמתחים לכל
  גובה בלי להתעוות, והדגלים והכדורים נשארים בגודל אמיתי.
*/
/* כן עבה למעלה ולמטה - שני קצות קו הגמר */
.gt-cap {
  position: absolute;
  left: 8%;
  right: 8%;
  height: clamp(22px, 4vmin, 44px);
  border-radius: 8px;
  box-shadow: 0 0 16px rgba(255, 245, 200, .55);
}
.gt-cap.top { top: 4%; }
.gt-cap.bot { bottom: 0; }
/* סרט האור שעוברים דרכו */
.gt-tape {
  position: absolute;
  left: 12%;
  right: 12%;
  top: calc(4% + clamp(22px, 4vmin, 44px));
  bottom: clamp(22px, 4vmin, 44px);
  border-radius: 6px;
  opacity: .34;
}
.gt-orb {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(16px, 3vmin, 30px);
  height: clamp(16px, 3vmin, 30px);
  border-radius: 50%;
  box-shadow: 0 0 16px currentColor;
}
.gt-orb.l { top: calc(4% + clamp(4px, .8vmin, 8px)); }
.gt-orb.r { bottom: clamp(4px, .8vmin, 8px); }
/* דגלון מתנופף על הכן העליון */
.gt-flag {
  position: absolute;
  top: 4%;
  width: clamp(22px, 4vmin, 42px);
  height: clamp(22px, 4vmin, 44px);
}
.gt-flag.l { left: 8%; clip-path: polygon(0 0, 100% 50%, 0 100%); transform-origin: 0 50%; }
.gt-flag.r { right: 8%; clip-path: polygon(100% 0, 0 50%, 100% 100%); transform-origin: 100% 50%; }

.gate-glow { animation: gateGlow 1.2s ease-in-out infinite; }
/* דגלוני השער מתנופפים - סימן חיים שרואים מרחוק */
.gate-flag { animation: gateFlag 1.1s ease-in-out infinite; }
.gate-flag.f2 { animation-delay: .3s; }
@keyframes gateFlag { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.72); } }
@keyframes gateGlow { 0%,100% { opacity: .55 } 50% { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  .sw-current svg, .gate-glow, .gate-flag { animation: none; }
}


/* סימטריה v2: מקומות חופשיים, צורה נבחרת, ומגש שמהבהב כרמז */
.mr-slot.free {
  border-radius: 50%;
  cursor: pointer;
  background: #ffffff70;
  transition: transform .15s ease;
}
.mr-slot.free:active { transform: scale(.9); }
.mr-piece.sel {
  transform: scale(1.14);
  filter: drop-shadow(0 0 12px #ffc83c);
}
.mr-slot.wobble { animation: bubWobble .4s ease; }
#mirTray.hint-pulse { box-shadow: 0 0 0 4px #e8a33c88; }

/* חיבור כוכבים v2: תצוגה מקדימה, פיתויים, נדנוד */
.st-line.ghost {
  stroke: #ffe9a8;
  stroke-width: 1.3;
  opacity: .9;
  filter: drop-shadow(0 0 4px #ffe9a8);
}
.st-field.preview .st-dot { opacity: .95; }
/*
  כוכב לא זז ממקומו. לעולם.

  הנקודות ממוקמות ב-left/top ומרוכזות ב-translate(-50%,-50%);
  כל אנימציה שכותבת transform בלי ה-translate הזה מקפיצה את
  הכוכב בחצי מגודלו - וזו בדיוק ה"תזוזה" שגיל ראה. לכן: כל
  keyframe כאן שומר על ה-translate, והשינוי הוא בקנה מידה
  ובזוהר בלבד. גם ה-hint-pulse הגנרי נדרס כאן במיוחד.
*/
.st-dot.wobble {
  animation: stWobble .4s ease;
  pointer-events: none;
}
@keyframes stWobble {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  30%      { transform: translate(-50%, -50%) scale(.88); }
  70%      { transform: translate(-50%, -50%) scale(1.1); }
}
.st-dot.hint-pulse { animation: stHint 1.5s ease-in-out infinite; }
@keyframes stHint {
  0%, 100% { transform: translate(-50%, -50%) scale(1);
             box-shadow: 0 0 10px #ffe08a; }
  50%      { transform: translate(-50%, -50%) scale(1.22);
             box-shadow: 0 0 24px #fff3c4; }
}
@media (prefers-reduced-motion: reduce) {
  .st-dot.wobble, .st-dot.hint-pulse { animation: none; }
}

/* ==========================================================
   שליטה ישירה בדמות במפת האזור
   ========================================================== */
.fm-boy { transition: none; }
.fm-boy.walking svg { animation: boyBob .4s ease-in-out infinite; }
@keyframes boyBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.fm-boy.flip svg { transform: scaleX(-1); }
.fm-boy.flip.walking svg { animation: boyBobFlip .4s ease-in-out infinite; }
@keyframes boyBobFlip {
  0%, 100% { transform: scaleX(-1) translateY(0); }
  50%      { transform: scaleX(-1) translateY(-5px); }
}
/* ניצוץ לאיסוף בדרך */
.walk-spark {
  position: absolute;
  width: clamp(18px, 3.4vmin, 34px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #ffffff, #ffe08a 55%, #f2b53c);
  box-shadow: 0 0 12px #ffe08a;
  animation: sparkFloat 1.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes sparkFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-6px) scale(1.08); }
}
.walk-spark.taken { animation: sparkTaken .4s ease forwards; }
@keyframes sparkTaken {
  to { transform: translateY(-22px) scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fm-boy.walking svg, .walk-spark { animation: none; }
}

/* ==========================================================
   גרירה באצבע - הרפאים שעוקבים אחרי היד
   ========================================================== */
.gk-ghost {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  left: 0; top: 0;
  z-index: 3000;
  pointer-events: none;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 12px 18px rgba(20, 40, 60, .38));
  animation: gkGrab .13s ease-out;
}
.gk-ghost svg, .gk-ghost img { width: 100%; height: 100%; display: block; }
.gk-ghost.gk-snap { transition: transform .18s cubic-bezier(.25, .9, .3, 1); }
@keyframes gkGrab {
  from { scale: 1; }
  to   { scale: 1.12; }
}
.gk-ghost { scale: 1.12; }
/* המקור נשאר במקומו אבל דהוי - הילד רואה מאיפה החפץ בא */
.gk-lift { opacity: .3 !important; }
/* יעד שהאצבע מעליו */
.gk-over {
  outline: clamp(3px, .7vmin, 6px) solid #ffcc55;
  outline-offset: 2px;
  background-color: rgba(255, 216, 122, .45) !important;
}
@media (prefers-reduced-motion: reduce) {
  .gk-ghost { animation: none; }
  .gk-ghost.gk-snap { transition: none; }
}

/* יד ההדגמה - נוסעת פעם אחת ומראה מה עושים */
.gk-hand {
  position: absolute;
  left: 0; top: 0;
  width: clamp(38px, 6.5vmin, 72px);
  z-index: 60;
  pointer-events: none;
  filter: drop-shadow(0 4px 7px rgba(20, 30, 40, .45));
  animation: gkHand 3.2s cubic-bezier(.4, 0, .3, 1) 1 both;
}
.gk-hand svg { width: 100%; height: auto; display: block; }
/*
  המיקום מונפש דרך left/top ולא דרך translate: אחוזים בתוך
  translate נמדדים ביחס לגודל *האלמנט עצמו*, ולכן היד הייתה
  נוחתת במקום שרירותי במקום בנקודה שביקשנו על הבמה.
*/
@keyframes gkHand {
  0%       { left: var(--x0); top: var(--y0); transform: translate(-50%, -30%) scale(1);   opacity: 0; }
  10%      { left: var(--x0); top: var(--y0); transform: translate(-50%, -30%) scale(1);   opacity: 1; }
  22%      { left: var(--x0); top: var(--y0); transform: translate(-50%, -30%) scale(.82); opacity: 1; }
  62%      { left: var(--x1); top: var(--y1); transform: translate(-50%, -30%) scale(.82); opacity: 1; }
  74%      { left: var(--x1); top: var(--y1); transform: translate(-50%, -30%) scale(1);   opacity: 1; }
  100%     { left: var(--x1); top: var(--y1); transform: translate(-50%, -30%) scale(1);   opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .gk-hand { display: none; } }