/*
  שני המשחקים האלה חולקים רקע: גפני (vn) ובנה דרך (pt).
  אתר החפירה (dg) היה שותף שלישי, וכשהוא קיבל מעבדה משלו
  הסלקטור המשותף נמחק וגרר איתו גם את שני האחרים - שנשארו
  בלי רקע ובלי position. נתפס בבדיקה שאחרי ההחלפה.
*/
.vn-stage, .pt-stage {
  position: absolute;
  overflow: hidden;
  border-radius: clamp(14px, 2.4vmin, 26px);
  background:
    /* קרני אור בין העלים */
    linear-gradient(100deg, transparent 14%, rgba(230, 255, 190, .12) 19%, transparent 25%),
    linear-gradient(86deg, transparent 46%, rgba(230, 255, 190, .15) 51%, transparent 58%),
    linear-gradient(94deg, transparent 72%, rgba(230, 255, 190, .1) 77%, transparent 83%),
    /* חופת עלים כהה למעלה */
    radial-gradient(140% 44% at 50% -6%, rgba(10, 34, 16, .85), transparent 70%),
    linear-gradient(180deg, var(--jg-mid) 0%, var(--jg-near) 52%, var(--jg-deep) 100%);
}
.vn-stage::after, .pt-stage::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 12%;
  pointer-events: none;
  background:
    radial-gradient(60% 100% at 14% 100%, rgba(10, 40, 18, .6), transparent 72%),
    radial-gradient(50% 100% at 82% 100%, rgba(10, 40, 18, .55), transparent 72%),
    linear-gradient(180deg, rgba(111, 79, 44, .3), rgba(58, 40, 24, .85));
}
.vn-stage::before, .pt-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  background-repeat: no-repeat;
  background-size: 26% auto, 22% auto, 18% auto;
  background-position: left -3% top -6%, right -2% top -8%, right -3% bottom -6%;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M0 0 C60 4 96 40 100 100 C40 96 4 60 0 0 Z' fill='%23163a1e'/><path d='M4 6 C50 30 74 58 92 94' stroke='%232f6b33' stroke-width='4' fill='none'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M100 0 C40 4 4 40 0 100 C60 96 96 60 100 0 Z' fill='%2312331a'/><path d='M96 6 C50 30 26 58 8 94' stroke='%232f6b33' stroke-width='4' fill='none'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M100 100 C40 96 4 60 0 0 C60 4 96 40 100 100 Z' fill='%23163a1e'/></svg>");
}

/* ==========================================================
   הג'ונגל הקדום.

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

   שלוש שכבות עומק בכל מסך:
     רקע    - חופת עלים כהה, גזעים רחוקים, קרני אור
     אמצע   - הדבר שמשחקים בו
     חזית   - עלים גדולים שנכנסים מהפינות
   ========================================================== */

:root {
  --jg-deep: #14301c;
  --jg-mid: #1f4a26;
  --jg-near: #2f6b33;
  --jg-light: #7fc46c;
  --jg-earth: #6f4f2c;
  --jg-mud: #3a2818;
}

/* בסיס משותף לכל מסכי העולם */

.vn-stage, .pt-stage {
  position: absolute;
  overflow: hidden;
  border-radius: clamp(14px, 2.4vmin, 26px);
  background:
    /* קרני אור בין העלים */
    linear-gradient(100deg, transparent 14%, rgba(230, 255, 190, .12) 19%, transparent 25%),
    linear-gradient(86deg, transparent 46%, rgba(230, 255, 190, .15) 51%, transparent 58%),
    linear-gradient(94deg, transparent 72%, rgba(230, 255, 190, .1) 77%, transparent 83%),
    /* חופת עלים כהה למעלה */
    radial-gradient(140% 44% at 50% -6%, rgba(10, 34, 16, .85), transparent 70%),
    linear-gradient(180deg, var(--jg-mid) 0%, var(--jg-near) 52%, var(--jg-deep) 100%);
}
/* קרקע היער בחזית */
.vn-stage::after, .pt-stage::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 12%;
  pointer-events: none;
  background:
    radial-gradient(60% 100% at 14% 100%, rgba(10, 40, 18, .6), transparent 72%),
    radial-gradient(50% 100% at 82% 100%, rgba(10, 40, 18, .55), transparent 72%),
    linear-gradient(180deg, rgba(111, 79, 44, .3), rgba(58, 40, 24, .85));
}
/* עלים גדולים בפינות - החזית שמכניסה את הצופה לתוך הג'ונגל */
.vn-stage::before, .pt-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  background-repeat: no-repeat;
  background-size: 26% auto, 22% auto, 18% auto;
  background-position: left -3% top -6%, right -2% top -8%, right -3% bottom -6%;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M0 0 C60 4 96 40 100 100 C40 96 4 60 0 0 Z' fill='%23163a1e'/><path d='M4 6 C50 30 74 58 92 94' stroke='%232f6b33' stroke-width='4' fill='none'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M100 0 C40 4 4 40 0 100 C60 96 96 60 100 0 Z' fill='%2312331a'/><path d='M96 6 C50 30 26 58 8 94' stroke='%232f6b33' stroke-width='4' fill='none'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M100 100 C40 96 4 60 0 0 C60 4 96 40 100 100 Z' fill='%23163a1e'/></svg>");
}

/* ==========================================================
   1. גפנים
   ========================================================== */
.vn-stage {
  inset: clamp(56px, 9vmin, 92px) clamp(8px, 1.6vmin, 18px) clamp(8px, 1.6vmin, 18px);
  touch-action: none;
  cursor: pointer;
}
/* גפן תלויה מהחופה. transform-origin למעלה - שם היא קשורה. */
.vn-vine {
  position: absolute;
  width: clamp(34px, 6vmin, 70px);
  transform-origin: 50% 0;
  pointer-events: none;
  z-index: 2;
  /* margin-left פיזי ולא inset-inline: המסך בעברית, ושם
     ההיסט היה יוצא מהצד ההפוך והגפן לא הייתה מרוכזת על left */
  margin-left: calc(clamp(34px, 6vmin, 70px) / -2);
  filter: drop-shadow(0 4px 8px rgba(0, 20, 6, .45));
}
.vn-vine svg { width: 100%; height: 100%; display: block; }
.vn-vine.hint { animation: vnHint 1.1s ease-in-out infinite; }
@keyframes vnHint {
  0%, 100% { filter: drop-shadow(0 4px 8px rgba(0, 20, 6, .45)); }
  50%      { filter: drop-shadow(0 0 16px rgba(255, 216, 122, .95)); }
}

.vn-fruit {
  position: absolute;
  width: clamp(26px, 4.6vmin, 52px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 3px 6px rgba(0, 20, 6, .5));
  animation: vnBob 2.6s ease-in-out infinite;
}
.vn-fruit svg { width: 100%; height: 100%; display: block; }
@keyframes vnBob {
  0%, 100% { transform: translate(-50%, -50%); }
  50%      { transform: translate(-50%, -62%); }
}
.vn-fruit.taken { animation: vnTake .4s ease forwards; }
@keyframes vnTake { to { transform: translate(-50%, -150%) scale(.3); opacity: 0; } }

/* מדף היעד - הקצה הימני של המסלול */
.vn-goal {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: clamp(52px, 9vmin, 108px);
  pointer-events: none;
  z-index: 2;
}
.vn-goal svg { width: 100%; height: 100%; display: block; }
.vn-goal.reached { animation: vnReached .6s ease 2; }
@keyframes vnReached {
  0%, 100% { filter: none; }
  50%      { filter: drop-shadow(0 0 22px rgba(255, 230, 140, 1)); }
}

/*
  ==========================================================
  שלושת הדברים שהופכים את הגפנים לתזמון
  ==========================================================
  קו התחזית, סימון הגפן הבאה, ואזור התפיסה שנפתח. בלי
  שלושתם הילד לחץ וראה מה קרה - וזה מה שהרגיש אקראי.
*/
.vn-arc {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
  color: #ffe08a;
}
.vn-arc.on { opacity: 1; }
/* המסלול מגיע לגפן הבאה - זה הרגע */
.vn-arc.good { color: #7fe08a; }
.vn-arc svg { width: 100%; height: 100%; display: block; overflow: visible; }
.vn-arc-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 7 10;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px currentColor);
}

.vn-target {
  position: absolute;
  width: clamp(40px, 7vmin, 84px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
  color: rgba(255, 236, 170, .55);
  transition: color .15s ease, transform .15s ease;
}
.vn-target svg { width: 100%; height: 100%; display: block; }
.vn-target.open {
  color: #7fe08a;
  transform: translate(-50%, -50%) scale(1.18);
  filter: drop-shadow(0 0 clamp(8px, 1.6vmin, 18px) rgba(127, 224, 138, .95));
}

.vn-hero {
  position: absolute;
  width: clamp(52px, 9vmin, 104px);
  transform: translate(-50%, -20%);
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 5px 9px rgba(0, 20, 6, .6));
}
.vn-hero svg { width: 100%; height: auto; display: block; }
.vn-hero.flying { transform: translate(-50%, -20%) rotate(-12deg); }
.vn-hero.grab { animation: vnGrab .32s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes vnGrab {
  0%   { transform: translate(-50%, -20%) scale(1.16); }
  100% { transform: translate(-50%, -20%) scale(1); }
}

/* ==========================================================
   2. עקבות בג'ונגל
   ========================================================== */
/* רצועת בוץ שבה מוטבעות העקבות */
/* העקבה שעליה עונים עכשיו */

/*
  ==========================================================
  שתי ההוכחות
  ==========================================================
  טעות: העקבה של מי שנבחר, ליד העקבה שבבוץ, בגוון אחר -
  כדי שהילד ישווה צורה לצורה במקום לשמוע "נסה שוב".
*/

/*
  הצלחה: היצור באמת חוצה את הבוץ, ומשאיר אחריו את אותה עקבה.
  אותה footShape, ולכן זו הוכחה ולא איור נפרד.
*/
@keyframes tkStep {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-6px) rotate(1.5deg); }
}


@keyframes jgShake {
  0%, 100% { transform: translateX(0); }
  30%      { transform: translateX(-9px); }
  70%      { transform: translateX(9px); }
}
@keyframes jgHint {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 216, 122, .85); }
  50%      { box-shadow: 0 0 0 clamp(8px, 1.6vmin, 17px) rgba(255, 216, 122, 0); }
}

/* ==========================================================
   3. חפירת מאובנים
   ========================================================== */
/* הבור: רשת גושי חול. אין מרווח - זה משטח אחד. */
/* שלוש דרגות התפוררות - ההברשה מרגישה כמו עבודה, לא כמו לחיצה */
@keyframes dgHint {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.5) saturate(1.4); }
}

/*
  ==========================================================
  לוח ההרכבה - לוח אנטומי, לא שורה
  ==========================================================
  היה כאן display:flex עם gap, כלומר החלקים נערמו בשורה אחת
  בסדר שבו הם נוצרו. לכן השלד המורכב לא דמה לשום דבר.

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

/* קו מתאר בשלב המעבר: "זה גוף שלם, לא ערמת עצמות" */
@keyframes dgGlow {
  0%, 100% { box-shadow: 0 12px 28px rgba(0, 0, 0, .6); }
  50%      { box-shadow: 0 0 clamp(24px, 5vmin, 60px) rgba(255, 226, 150, .95),
                         inset 0 0 clamp(24px, 5vmin, 60px) rgba(255, 226, 150, .5); }
}
@keyframes dgDone {
  0%, 100% { box-shadow: 0 12px 28px rgba(0, 0, 0, .6); }
  50%      { box-shadow: 0 0 30px rgba(255, 226, 150, .95); }
}

/*
  כל שקע ממוקם במרכזו: left/top הם נקודת המרכז, ולכן
  translate(-50%,-50%). ככה האחוזים ב-FOSSILS מתארים "איפה
  העצם הזאת נמצאת בגוף" ולא "איפה הפינה שלה".
*/
@keyframes dgSet {
  0%   { transform: translate(-50%, -50%) scale(1.18); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes dgSlotShake {
  0%, 100% { transform: translate(-50%, -50%) rotate(0); }
  25%      { transform: translate(-52%, -50%) rotate(-5deg); }
  75%      { transform: translate(-48%, -50%) rotate(5deg); }
}
@keyframes dgSlotHint {
  0%, 100% { border-color: rgba(238, 226, 196, .45); }
  50%      { border-color: rgba(255, 226, 150, 1);
             box-shadow: 0 0 clamp(8px, 1.6vmin, 18px) rgba(255, 226, 150, .8); }
}

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

/*
  ==========================================================
  שלושת שלבי המעבר מעצמות לגוף
  ==========================================================
  שלושתם שכבות באותו מקום בדיוק, מעל השלד, באותו יחס צלעות -
  ולכן הצללית יושבת על העצמות ולא לידן. זה כל העניין: הילד
  רואה שהעצמות *ממלאות* את הצורה.
*/

/*
  1. רמז הגוף: צל, לא צללית.

  בתחילה זה היה silhouette חד, וזה נתן יותר מדי - הילד ראה
  בדיוק את אותה צורה שתופיע אחר כך על אחד משלושת הכרטיסים,
  ולכן השלב הבא היה זיהוי מהזיכרון ולא מהעצמות. טשטוש הופך
  את זה ל"צל גוף": המסה והפרופורציות נשארות, הקווים המדויקים
  לא.
*/
/*
  שני מצבים, ובכוונה:

  בהרכבה הגוף הוא *התייחסות* - הילד צריך לראות איפה הראש
  ואיפה הרגליים כדי להחליט לאן כל עצם הולכת. לכן ברור, ורק
  מעט מטושטש כדי שיישאר רקע ולא ציור.

  (המצב המטושטש-מאוד שימש בגרסה שבה הגוף נחשף רק *אחרי*
  ההרכבה, כרמז לקראת שאלת זיהוי. אין יותר שאלת זיהוי.)
*/

/* 2. צללית שלא מתאימה: נכנסת, לא מתיישבת, ויוצאת */

/* 3. המילוי, ואז היצור החי */
@keyframes dgAlive {
  0%, 100% { transform: scale(1) translateY(0) rotate(0); }
  30%      { transform: scale(1.04) translateY(-6px) rotate(-2deg); }
  65%      { transform: scale(1.02) translateY(0) rotate(2deg); }
}

/*
  ==========================================================
  שלב הזיהוי: צלליות, לא כרטיסי תשובה
  ==========================================================
  גדולות, עם שטח מגע נדיב, ובלי צבע - כי מה שמשווים הוא צורה.
*/
@keyframes dgRight {
  0%, 100% { transform: scale(1); }
  45%      { transform: scale(1.16); }
}

/* לרוחב נמוך: הצלליות קטנות מעט, כדי שלא יכסו את השלד */
@media (max-height: 460px) {
  .dg-board { top: 3%; width: min(80%, 58vh); }
  .dg-sil { flex-basis: clamp(72px, 12vmin, 120px); }
}

@keyframes dgFound {
  0%   { transform: scale(.3) rotate(-14deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ==========================================================
   4. בנה דרך
   ========================================================== */
.pt-stage {
  inset: clamp(56px, 9vmin, 92px) clamp(8px, 1.6vmin, 18px) clamp(112px, 20vmin, 182px);
}
.pt-road {
  position: absolute;
  inset-inline: 0;
  bottom: 16%;
  height: clamp(56px, 10vmin, 116px);
  z-index: 2;
}
.pt-ground {
  position: absolute;
  inset-block: 0;
  display: block;
}
.pt-ground svg { width: 100%; height: 100%; display: block; }
/* פער: בוץ שאי אפשר לעבור בו עד שמניחים משהו מעליו */
.pt-gap {
  position: absolute;
  inset-block: 0;
  border-radius: 6px;
  transition: box-shadow .2s ease;
}
.pt-mud { position: absolute; inset: 0; display: block; }
.pt-mud svg { width: 100%; height: 100%; display: block; }
/*
  תצוגה מקדימה בזמן גרירה: הפער אומר "מתאים" או "לא מתאים"
  עוד לפני שמשחררים. ירוק ואדום, ובלי מילים.
*/
.pt-gap.fit {
  box-shadow: inset 0 0 0 clamp(3px, .6vmin, 6px) rgba(122, 224, 138, .95),
              0 0 clamp(10px, 2vmin, 22px) rgba(122, 224, 138, .7);
}
.pt-gap.nofit {
  box-shadow: inset 0 0 0 clamp(3px, .6vmin, 6px) rgba(226, 118, 92, .9);
}
.pt-gap.miss { animation: jgShake .4s ease; }
.pt-gap.hint-pulse { animation: jgHint 1.15s ease-in-out infinite; }
/* החלק שהונח - יושב על הפער ומכסה אותו */
.pt-laid {
  position: absolute;
  inset-inline: -2%;
  top: -14%;
  height: 52%;
  display: block;
  animation: ptLay .34s cubic-bezier(.3, 1.5, .5, 1);
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .5));
}
.pt-laid svg { width: 100%; height: 100%; display: block; }
@keyframes ptLay {
  0%   { transform: translateY(-40px) rotate(-8deg); opacity: 0; }
  100% { transform: translateY(0) rotate(0); opacity: 1; }
}

.pt-hero {
  position: absolute;
  bottom: 22%;
  width: clamp(44px, 7.6vmin, 88px);
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 5px 9px rgba(0, 20, 6, .6));
  transition: left .05s linear;
}
.pt-hero svg { width: 100%; height: auto; display: block; }
.pt-hero.walking { animation: ptWalk .34s ease-in-out infinite; }
@keyframes ptWalk {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-2deg); }
  50%      { transform: translateX(-50%) translateY(-7px) rotate(2deg); }
}
.pt-hero.cheer { animation: ptCheer .7s ease 2; }
@keyframes ptCheer {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1); }
  45%      { transform: translateX(-50%) translateY(-16px) scale(1.08); }
}

.pt-tray {
  position: absolute;
  inset-inline: clamp(8px, 1.6vmin, 18px);
  bottom: clamp(8px, 1.6vmin, 18px);
  min-height: clamp(92px, 16vmin, 152px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vmin, 26px);
  flex-wrap: wrap;
  padding: clamp(8px, 1.4vmin, 16px);
  border-radius: clamp(14px, 2.4vmin, 26px);
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 24px, transparent 24px 50px),
    linear-gradient(180deg, #5f4630, #3a2818);
  border: clamp(3px, .6vmin, 6px) solid #7d5528;
}
/*
  רוחב החלק במגש הוא המידע: ענף קצר לא יגשר על פער רחב.
  שלושת הרוחבים ביחס 1:2:3, בדיוק כמו הפערים.
*/
.pt-piece {
  height: clamp(30px, 5.2vmin, 62px);
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition: transform .16s ease, opacity .3s ease;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .55));
}
.pt-piece svg { width: 100%; height: 100%; display: block; pointer-events: none; }
/*
  רוחב החלק נגזר מאותו --upx של הדרך.

  קודם היו כאן שלושה clamp קבועים - w1/w2/w3 - שלא היה להם
  שום יחס לרוחב שיחידה אחת תופסת על הדרך. שני סרגלים נפרדים,
  ולכן "חלק באורך של הפער" היה משהו שאפשר רק לנסות. עכשיו
  חלק בן שתי יחידות רחב בדיוק כמו פער בן שתי יחידות.
*/
.pt-piece { width: calc(var(--u, 1) * var(--upx, 28px)); }
.pt-piece:active { cursor: grabbing; }
.pt-piece.used { opacity: .2; pointer-events: none; }
.pt-piece.miss { animation: jgShake .4s ease; }
.pt-piece.hint-pulse { animation: jgHint 1.15s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .vn-fruit, .vn-vine.hint, .vn-goal.reached, .vn-hero.grab,
  .tk-print.hint-pulse, .tk-beast.hint-pulse, .tk-beast.miss,
  .dg-sand.hint-pulse, .dg-board.done, .dg-part, .dg-sil.right,
  .pt-laid, .pt-hero.walking, .pt-hero.cheer, .pt-piece.hint-pulse,
  .pt-gap.hint-pulse, .dg-slot.hint-pulse, .dg-slot.set,
  .dg-slot.miss, .dg-sil.miss, .dg-sil.hint-pulse,
  .dg-board.glow, .dg-alive.on {
    animation: none;
  }
  /*
    בלי תנועה, שלבי המעבר חייבים להישאר *נראים* - הם נושאים
    מידע ולא קישוט. לכן רק המעברים מתבטלים, לא האטימות.
  */
  .dg-bodyghost, .dg-misfit, .dg-fill, .dg-alive { transition: none; }
  .dg-slot.miss { border-color: #c96a4a; }
}

/* ==========================================================
   מפת הג'ונגל וזהות היצורים - חיים ברקע

   הכל איטי ועדין: רקע ולא מטרה. אין כאן שום דבר שנראה לחיץ
   ואינו לחיץ.
   ========================================================== */
.jgm-beams { animation: jgmBeams 10s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes jgmBeams {
  0%, 100% { opacity: .65; transform: skewX(0deg); }
  50%      { opacity: 1;  transform: skewX(1.4deg); }
}
.jgm-vines { animation: jgmVines 8s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes jgmVines {
  0%, 100% { transform: skewX(-1.4deg); }
  50%      { transform: skewX(1.4deg); }
}
.jgm-fall { animation: jgmFall 1.1s linear infinite; }
@keyframes jgmFall {
  from { transform: translateY(-24px); } to { transform: translateY(0); }
}
.jgm-mist { animation: jgmMist 15s ease-in-out infinite; }
.jgm-mist.m1 { animation-duration: 19s; animation-delay: -6s; }
.jgm-mist.m2 { animation-duration: 23s; animation-delay: -12s; }
@keyframes jgmMist {
  0%, 100% { transform: translateX(-46px); opacity: .1; }
  50%      { transform: translateX(52px); opacity: .22; }
}

/* זרועות הגפן של גפני והזנב של עקבי - חלק מהזהות שלהם */
.crt-vine { animation: crtVine 3.6s ease-in-out infinite; transform-origin: 50% 100%; }
.crt-vine.v2 { animation-delay: -1.8s; }
@keyframes crtVine {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
.crt-tail { animation: crtTail 2.4s ease-in-out infinite; transform-origin: 100% 100%; }
@keyframes crtTail {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .jgm-beams, .jgm-vines, .jgm-fall, .jgm-mist, .crt-vine, .crt-tail { animation: none; }
}

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

   עכשיו יש שביל: רקע רחוק, שכבת צמחייה, אזור בוץ **בהיר**
   במרכז שהעקבות הכהות בולטות עליו, וקדמה עדינה למטה. קרן
   אור אחת יורדת בדיוק על הבוץ, כי לשם המבט צריך ללכת.
   ========================================================== */
.tk-stage {
  position: absolute;
  inset: clamp(56px, 9vmin, 92px) clamp(8px, 1.6vmin, 18px) clamp(8px, 1.6vmin, 18px);
  overflow: hidden;
  border-radius: clamp(14px, 2.4vmin, 26px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding-block: clamp(8px, 2vmin, 26px);
  background:
    /* קרן אור על אזור הבוץ */
    radial-gradient(58% 40% at 50% 34%, rgba(255, 244, 196, .17), transparent 72%),
    /* חופת עלים כהה למעלה, מרוסנת */
    radial-gradient(120% 30% at 50% -4%, rgba(9, 30, 14, .7), transparent 74%),
    linear-gradient(180deg, #24491f 0%, #2f5624 34%, #46512c 62%, #5a4c31 100%);
}

/* צמחייה רחוקה: גבעולים רכים, לא עלים שמכסים את המסך */
.tk-far {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 46%;
  pointer-events: none;
  opacity: .42;
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: auto 82%;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 120'><g fill='%231b3d1a'><path d='M20 120 C 14 84 26 60 34 42 C 40 62 36 92 32 120 Z'/><path d='M60 120 C 52 88 62 56 74 34 C 78 62 70 96 70 120 Z'/><path d='M120 120 C 116 90 126 66 136 48 C 140 74 132 100 130 120 Z'/><path d='M180 120 C 172 92 182 62 194 40 C 198 68 190 98 190 120 Z'/><path d='M220 120 C 214 96 222 72 230 56 C 234 78 228 102 228 120 Z'/></g></svg>");
}

/* השביל: פס בהיר שחוצה את הסצנה ומוליך אל הבוץ */

/*
  אזור הבוץ. בהיר בכוונה: העקבה כהה, ובלי הפרש טון אמיתי
  היא נעלמת. הצורה אורגנית ולא כמוסה - זה כתם בוץ, לא מגש.
*/

/* העקבה. --dy ו---rot נותנים לשורה תחושה של הליכה. */

/* העקבה של מי שנבחר בטעות, ליד עקבת המטרה */

/* עקבה טרייה שהחיה הרגע השאירה */

/* ההילה על אזור האצבעות - שם נמצא ההבדל בין כל שתי עקבות */
.tk-diff {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}
.tk-diff svg { width: 100%; height: 100%; display: block; }
.tk-diff.on { animation: tkDiff 1.6s ease-in-out infinite; }
/*
  ההילה פועמת ב-opacity ולא ב-filter.

  אנימציה על filter מאלצת את הדפדפן לרסטר מחדש את כל האלמנט
  בכל פריים, כי drop-shadow אינו מאפיין שהמרכיב יודע להזיז
  לבד. על SVG בגודל הזה זה נראה כריצוד ולא כפעימה. opacity
  עובר במרכיב בלי רסטר, ולכן הפעימה חלקה. הזוהר עצמו נשאר -
  הוא פשוט צל קבוע, ורק העוצמה נושמת.
*/
.tk-diff.on { filter: drop-shadow(0 0 9px rgba(255, 215, 122, .95)); }
@keyframes tkDiff {
  0%, 100% { opacity: .48; }
  50%      { opacity: 1; }
}

/* עלה קטן ליד העקבות: מול מה משווים את הגודל */

/* המסלול שבו החיה חוצה את הבוץ */

/* החיות לבחירה. touch target גדול לכל אחת. */
.tk-row {
  position: relative;
  /*
    החיות מעל הדקורציה.

    שתי שכבות קישוט ישבו מעליהן: .tk-props (3) ו-.tk-fore (4).
    התוצאה היא שגומת עשב חתכה את גוף החתול ואת רגלי הפיל בפסים
    ירוקים - נראה כתקלה בציור, לא כצמחייה. ההערה של .tk-fore
    אומרת במפורש שהיא אמורה לשבת מאחורי הכול, ולכן הכוונה
    והמימוש לא הסכימו.

    5 ולא יותר: זכוכית המגדלת (7) והחיה ההולכת (6) חייבות
    להישאר מעל.
  */
  z-index: 5;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(6px, 1.6vmin, 22px);
  width: min(94%, 1200px);
  margin: 0 auto clamp(6px, 1.4vmin, 16px);
}
/* טעות: החיה עושה צעד קטן קדימה. אין רעידה ואין אדום. */
.tk-beast.stepped { animation: tkStepOut .7s ease; }
@keyframes tkStepOut {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-9%) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}

/* זכוכית מגדלת - הרמז השני */

/* קדמה: קצה עשב עדין, בלי לכסות שום דבר שצריך לראות */
.tk-fore {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 5.5%;
  pointer-events: none;
  z-index: 4;
  background:
    linear-gradient(180deg, transparent, rgba(28, 46, 20, .8)),
    repeat-x bottom/auto 100%
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'><g fill='%23223d1a'><path d='M0 40 C 8 24 14 16 20 8 C 24 20 24 30 26 40 Z'/><path d='M40 40 C 46 22 54 14 62 6 C 64 22 60 32 60 40 Z'/><path d='M90 40 C 96 26 104 16 112 10 C 114 24 108 34 108 40 Z'/><path d='M140 40 C 148 22 156 14 164 8 C 166 24 160 34 158 40 Z'/><path d='M180 40 C 186 26 192 18 198 12 C 200 26 196 34 196 40 Z'/></g></svg>");
}

@media (prefers-reduced-motion: reduce) {
  .tk-diff.on, .tk-walker.go, .tk-beast.stepped { animation: none; }
  .tk-walker { transition: none; }
}

/*
  שכבת אמצע: שיחים ושרכים בגובה שבין הבוץ לחיות. בלי זה נשאר
  שם פס ריק שרוחבו כל המסך, וזה מה שגרם לסצנה להיראות חשופה.
  היא יושבת מאחורי הכול (z-index 0) ולכן לא מסתירה כלום.
*/
.tk-stage .tk-far::after {
  content: "";
  position: absolute;
  inset-inline: -2%;
  bottom: -58%;
  height: 74%;
  opacity: .85;
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: auto 100%;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 100'><g fill='%23234a1f'><ellipse cx='36' cy='96' rx='40' ry='26'/><ellipse cx='104' cy='99' rx='30' ry='19'/><ellipse cx='188' cy='96' rx='46' ry='24'/><ellipse cx='276' cy='99' rx='34' ry='20'/></g><g fill='none' stroke='%232d5c26' stroke-width='4' stroke-linecap='round'><path d='M30 84 C 22 66 26 52 34 44'/><path d='M42 84 C 44 64 52 54 62 48'/><path d='M186 82 C 178 62 182 48 190 40'/><path d='M198 84 C 202 66 212 56 222 50'/></g></svg>");
}

/*
  זוהר רך סביב הבוץ, כדי שהאזור שבו נמצאת השאלה יהיה הדבר
  הבהיר ביותר במסך. זה מה שמכוון את המבט בלי חץ ובלי מסגרת.
*/

/* ==========================================================
   שביל הבוץ והמסלול - גרסה שנייה
   ==========================================================
   שני דברים שנפסלו בבדיקה חזותית:

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

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

/* השביל: רצועה רחבה שנמשכת מקרוב-שמאל אל רחוק-ימין */
/* שפת השביל: מעבר רך אל הדשא, בלי קו חד */
/* אבנים קטנות בשולי השביל */
.tk-prints { position: absolute; inset: 0; display: block; }

/* רגבים כהים לאורך השביל, כדי שהבוץ לא ייראה כמשטח אחיד */
.tk-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(2.2% 5% at 12% 74%, rgba(60, 42, 22, .8), transparent 70%),
    radial-gradient(1.6% 4% at 26% 60%, rgba(60, 42, 22, .7), transparent 70%),
    radial-gradient(2.6% 6% at 44% 48%, rgba(60, 42, 22, .65), transparent 70%),
    radial-gradient(1.8% 4% at 61% 36%, rgba(60, 42, 22, .7), transparent 70%),
    radial-gradient(2.2% 5% at 78% 26%, rgba(60, 42, 22, .6), transparent 70%),
    radial-gradient(3% 7% at 34% 78%, rgba(120, 96, 60, .5), transparent 70%),
    radial-gradient(2.4% 6% at 70% 52%, rgba(120, 96, 60, .45), transparent 70%);
}

/*
  עקבה על המסלול. left/top הם המקום לאורך השביל, --dy ההסטה
  לצד המתחלף, --sc הפרספקטיבה.
*/
.tk-print {
  position: absolute;
  width: clamp(66px, 11.6vmin, 142px);
  aspect-ratio: 1;
  translate: -50% -50%;
  transform: translateY(var(--dy, 0)) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
  transform-origin: 50% 50%;
  transition: transform .3s ease, filter .3s ease;
}
.tk-print > svg { width: 100%; height: 100%; display: block; }
.tk-print.zoom {
  transform: translateY(var(--dy, 0)) rotate(var(--rot, 0deg))
             scale(calc(var(--sc, 1) * 1.5));
  filter: drop-shadow(0 0 clamp(8px, 1.6vmin, 18px) rgba(255, 216, 122, .95));
  z-index: 5;
}

/* התזות הבוץ סביב העקבה - העומק שהופך אותה לשקע */
.tk-splat {
  position: absolute;
  inset: -18%;
  pointer-events: none;
  z-index: -1;
}
.tk-splat svg { width: 100%; height: 100%; display: block; }

.tk-mine {
  z-index: 4;
  opacity: 0;
  transform: translateY(var(--dy, 0)) rotate(var(--rot, 0deg))
             scale(calc(var(--sc, 1) * .7));
  filter: drop-shadow(0 0 clamp(5px, 1vmin, 12px) rgba(255, 236, 180, .85));
}
.tk-mine.on {
  /*
    opacity חייבת להיות כאן. בלעדיה העקבה של החיה שנבחרה
    בטעות נשארה על opacity:0 ולא נראתה כלל - רק ההילה שלה
    דלפה החוצה. כלומר כל רגע הלימוד, שבו הילד משווה שתי
    עקבות זו לצד זו, פשוט לא קרה על המסך.
  */
  opacity: 1;
  transform: translateY(var(--dy, 0)) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
  transition: opacity .35s ease, transform .35s ease;
}

.tk-new {
  opacity: 0;
  transform: translateY(var(--dy, 0)) rotate(var(--rot, 0deg))
             scale(calc(var(--sc, 1) * .6));
}
.tk-new.on {
  transform: translateY(var(--dy, 0)) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
  transition: opacity .3s ease, transform .3s cubic-bezier(.2, 1.5, .4, 1);
}

/*
  החיות: עומדות על הדשא, בלי כרטיס. לכל חיה יש הצל שלה בתוך
  ה-SVG, ומתחתיה כתם דשא רך שמחבר אותה לקרקע.
*/
.tk-beast {
  position: relative;
  flex: 1 1 0;
  min-width: 64px;
  max-width: clamp(170px, 28vmin, 320px);
  aspect-ratio: 200 / 180;
  border: none;
  background: none;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  transition: transform .16s ease, filter .2s ease;
  filter: drop-shadow(0 6px 9px rgba(0, 22, 6, .45));
}
.tk-beast::before {
  content: "";
  position: absolute;
  inset-inline: 8%;
  bottom: 1%;
  height: 16%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(96, 138, 62, .55), transparent 76%);
}
.tk-beast svg { width: 100%; height: 100%; display: block; }
.tk-beast:active { transform: translateY(3px) scale(.97); }
.tk-beast.won { filter: drop-shadow(0 0 16px rgba(214, 255, 170, .9)); }

/* עדשת ה-close-up */
.tk-glass {
  position: absolute;
  width: clamp(100px, 16vmin, 186px);
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
  opacity: 0;
  z-index: 7;
  transition: opacity .3s ease, left .6s ease, top .6s ease;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .5));
}
.tk-glass svg { width: 100%; height: 100%; display: block; }
.tk-glass.on { opacity: 1; }
/*
  תוכן העדשה נעלם בזמן שהיא עפה, וחוזר כשהיא נחתה.

  קודם התוכן התחלף בזמן התנועה: העדשה חצתה את המסך והציגה את
  הכף של החיה שממנה היא יצאה, החליפה תוכן ארבעים מילישניות
  לפני הנחיתה, ומיד קפצה הלאה. חמש קפיצות כאלה עם החלפת תוכן
  באוויר - זה הריצוד. וזה גם לימד קישור שגוי, בדיוק מה שהרמז
  בא למנוע.
*/
.tk-glass > svg { transition: opacity .2s ease; }
.tk-glass.moving > svg { opacity: 0; }

/*
  השביל. גרדיאנט אלכסוני על מלבן נתן קיר חום, לא שביל: לא היה
  לו קצה ולא היה לו כיוון. עכשיו הצורה עצמה היא מרובע שמצטמצם
  אל הפינה הרחוקה - clip-path - ולכן הפרספקטיבה נמצאת במתאר
  ולא בצבע. הקצה נקרא, וברור לאן השביל הולך.
*/
.tk-mud {
  position: relative;
  z-index: 2;
  align-self: stretch;
  width: 100%;
  height: 58%;
  display: block;
  padding: 0;
  border-radius: 0;
  /*
    שוליים גליים במקום מצולע עם פינות חדות. שביל בוץ אמיתי אינו
    קרש: הקצה שלו מתעגל, נכנס ויוצא. המסכה נמתחת עם האזור, ולכן
    היא עובדת גם ב-1280x800 וגם ב-iPad לאורך.
  */
  /* מיכל בלבד: המסכה עברה אל .tk-band */
}

.tk-band {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M-2 104 C 18 100 42 84 66 64 C 80 52 92 44 104 38 L104 10 C 90 16 72 26 54 40 C 34 55 14 70 -2 76 Z' fill='%23fff'/></svg>") center/100% 100% no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M-2 104 C 18 100 42 84 66 64 C 80 52 92 44 104 38 L104 10 C 90 16 72 26 54 40 C 34 55 14 70 -2 76 Z' fill='%23fff'/></svg>") center/100% 100% no-repeat;
  background:
    radial-gradient(52% 66% at 40% 62%, rgba(255, 246, 208, .22), transparent 78%),
    linear-gradient(168deg, #6b5033 0%, #82633c 34%, #91714a 62%, #7a5c3a 100%);
}

/* צל פנימי לאורך שולי השביל, שהוא יישב בתוך הקרקע */
.tk-mud::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: polygon(-2% 102%, -2% 52%, 97% 8%, 97% 30%);
  box-shadow:
    inset 0 clamp(6px, 1.2vmin, 14px) clamp(14px, 2.6vmin, 30px) rgba(34, 20, 8, .55),
    inset 0 clamp(-14px, -2.6vmin, -6px) clamp(14px, 2.6vmin, 30px) rgba(34, 20, 8, .4);
}

/*
  החיה שהולכת. היא יושבת בתוך אלמנט השביל, ולכן left/top שלה
  הם אותם אחוזים של העקבות - וכך היא באמת עוברת עליהן.
  --sc מקטין אותה עם ההתרחקות, כמו את העקבות.
*/
.tk-walker {
  position: absolute;
  width: clamp(84px, 15vmin, 190px);
  translate: -50% -78%;
  transform: scale(var(--sc, 1));
  transform-origin: 50% 100%;
  z-index: 6;
  pointer-events: none;
  transition: left 2.2s linear, top 2.2s linear, transform 2.2s linear;
}
.tk-walker svg { width: 100%; height: auto; display: block; }
.tk-walker.go { animation: tkStep .44s ease-in-out infinite; }

/*
  אבנים וגומות עשב בשולי השביל.

  כשהשביל הפך לרצועה עם clip-path, האבנים שהיו על ::before שלו
  נחתכו יחד איתו ונעלמו. הן עברו לשכבה נפרדת שיושבת *מעל*
  הדשא ומחוץ ל-clip, ולכן הן נראות בשוליים - בדיוק שם שהן
  צריכות להיות, כדי שיהיה לגודל העקבה מול מה להימדד.
*/
.tk-props {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background-repeat: no-repeat;
  /*
    בשוליים בלבד. במיקום הראשון האבנים ישבו על השביל עצמו
    וגומת עשב כיסתה חיה, וזה בדיוק ההיפך ממה שדקורציה צריכה
    לעשות: הן שם כדי לתת לעקבה מול מה להימדד, לא כדי להסתיר.
  */
  background-size: 8% auto, 6% auto, 5% auto, 9% auto, 8% auto;
  background-position:
    2% 70%, 94% 30%, 72% 5%, 7% 84%, 93% 68%;
  background-image:
    /* אבן גדולה בשולי השביל הקרוב */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'><path d='M5 38 C 1 22 14 6 33 7 C 52 8 62 22 58 38 Z' fill='%238b8474' stroke='%23443c31' stroke-width='4.5' stroke-linejoin='round'/><path d='M13 20 C 22 13 38 12 49 18' stroke='%23aaa392' stroke-width='4' fill='none' stroke-linecap='round'/></svg>"),
    /* אבן קטנה */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'><path d='M8 38 C 4 24 17 12 34 14 C 51 16 60 26 56 38 Z' fill='%2379725f' stroke='%233d3529' stroke-width='4.5' stroke-linejoin='round'/></svg>"),
    /* אבן רחוקה */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'><path d='M6 38 C 3 20 19 10 36 12 C 53 14 60 26 57 38 Z' fill='%23847d6a' stroke='%2342392c' stroke-width='4.5' stroke-linejoin='round'/></svg>"),
    /* גומת עשב קדמית */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 50'><g fill='none' stroke='%232f6b2c' stroke-width='5.5' stroke-linecap='round'><path d='M14 48 C 10 32 14 20 20 10'/><path d='M28 48 C 26 30 32 18 40 8'/><path d='M44 48 C 46 32 54 22 64 14'/><path d='M58 48 C 62 34 68 26 74 20'/></g></svg>"),
    /* גומת עשב רחוקה */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 50'><g fill='none' stroke='%23285c26' stroke-width='5' stroke-linecap='round'><path d='M18 48 C 14 34 18 22 24 14'/><path d='M34 48 C 32 32 40 20 48 12'/><path d='M52 48 C 56 34 62 26 70 20'/></g></svg>");
}

/* שכבת ההליכה: אותה מערכת קואורדינטות של העקבות, בלי מסכה */
.tk-walk {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

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

   מה שיש עכשיו: אתר חפירה בגוני חול חמים, דף מחקר על קלף
   בהיר עם קווי מדידה, ומגש ממצאים מעץ. תאורה חמה, עומק,
   וטקסטורה - והעצמות הן הדבר הבהיר ביותר על המסך.
   ========================================================== */
.dg-stage {
  position: absolute;
  inset: clamp(56px, 9vmin, 92px) clamp(8px, 1.6vmin, 18px)
         clamp(104px, 17vmin, 168px);
  overflow: hidden;
  border-radius: clamp(14px, 2.4vmin, 26px);
  display: grid;
  /*
    שורה ועמודה מפורשות. בלי זה השורה נמדדת לפי התוכן, ואחוז
    גובה של הבור נפתר מול התוכן עצמו - חישוב מעגלי שנפל בחזרה
    על גודל התוכן. התוצאה: בור בגובה 612 בתוך במה בגובה 592,
    ושורת חול שלמה נחתכה בדרגה החמישית.
  */
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  /* אור חם מלמעלה, ואבן בהירה מתחת */
  background:
    radial-gradient(70% 54% at 50% -6%, rgba(255, 236, 186, .3), transparent 70%),
    linear-gradient(180deg, #c8ad82 0%, #b1926a 46%, #967a58 100%);
  box-shadow: inset 0 0 clamp(20px, 4vmin, 46px) rgba(70, 46, 20, .35);
}
/* טקסטורת אבן עדינה */
.dg-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .3;
  background-image:
    radial-gradient(3px 2px at 12% 22%, rgba(90, 62, 30, .5), transparent 60%),
    radial-gradient(4px 3px at 38% 66%, rgba(90, 62, 30, .4), transparent 60%),
    radial-gradient(3px 2px at 68% 30%, rgba(90, 62, 30, .45), transparent 60%),
    radial-gradient(5px 3px at 84% 72%, rgba(90, 62, 30, .35), transparent 60%),
    radial-gradient(3px 2px at 54% 12%, rgba(90, 62, 30, .4), transparent 60%);
}

/* ---------------------------------------- אתר החפירה */
.dg-pit {
  position: relative;
  z-index: 2;
  display: none;
  /*
    הבור חייב להיכנס בשני הממדים. קודם היה לו רוחב בלבד
    ותאים מרובעים, ולכן בדרגה החמישית - 7 עמודות על 6 שורות -
    הגובה יצא כפול מהבמה ושורה שלמה נחתכה מלמטה. עכשיו
    השורות הן 1fr והתא ממלא את מה שיש, ולכן אין חיתוך בשום
    יחס מסך.
  */
  /*
    minmax(0, 1fr) ולא 1fr. הרוחב 1fr הוא בעצם minmax(auto, 1fr),
    והמינימום auto הוא גודל התוכן - וגוש החול הוא SVG עם יחס
    ממדים, ולכן הגובה המינימלי שלו שווה לרוחבו. כך כל שורה
    נאלצה להיות 99 פיקסלים, שש שורות יצאו 594, והבור גלש מהבמה
    למרות שגובהו הוגבל. עם minmax(0, 1fr) השורה יכולה להתכווץ.
  */
  grid-template-columns: repeat(var(--c, 7), minmax(0, 1fr));
  grid-template-rows: repeat(var(--r, 6), minmax(0, 1fr));
  gap: clamp(2px, .4vmin, 5px);
  width: min(90%, 740px);
  height: 96%;
  padding: clamp(8px, 1.6vmin, 18px);
  border-radius: clamp(12px, 2.2vmin, 22px);
  background:
    linear-gradient(180deg, rgba(120, 90, 44, .5), rgba(80, 58, 26, .6));
  box-shadow: inset 0 clamp(4px, .8vmin, 10px) clamp(10px, 2vmin, 22px)
              rgba(50, 32, 10, .5);
}
.dg-pit.on { display: grid; }
/*
  touch-action: none על הבור ועל הגושים.

  ההברשה עובדת על pointerdown ואחריו pointermove רצוף. בלי
  touch-action הדפדפן מפרש גרירה באצבע כגלילה של הדף, לוקח
  את המחווה לעצמו, ושולח pointercancel - כלומר ההברשה נעצרת
  אחרי המגע הראשון. במכשיר מגע זה אומר שאי אפשר לחפור.

  GK.drag כבר מציב touch-action: none על כל ידית גרירה
  (engine.js), ולכן הניקוי והגרירה עבדו; רק הבור נשכח.
*/
.dg-pit, .dg-sand { touch-action: none; }
.dg-sand {
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
  transition: opacity .22s ease, transform .22s ease, filter .18s ease;
}
/*
  ה-SVG שבתוך גוש החול חייב להיות שקוף למצביע. המברשת מזהה
  גוש דרך document.elementFromPoint, וכל עוד ה-svg תפס את
  המצביע הפונקציה החזירה את ה-rect שבתוכו - לא את הגוש -
  והחיפוש cells.find(c => c.el === el) לא מצא כלום. כלומר
  ההברשה לא עשתה דבר, והמשחק לא היה ניתן לשחק כבר בשלב
  הראשון. פותר ה-QA לא תפס את זה כי הוא קרא ל-uncover
  ישירות ודילג על שכבת הקלט.
*/
.dg-sand svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.dg-find .dg-shape, .dg-find .dg-shape svg { pointer-events: none; }
.dg-plan { pointer-events: none; }
.dg-sand.b1 { filter: brightness(1.06); transform: scale(.97); }
.dg-sand.b2 { filter: brightness(1.12); transform: scale(.93); }
.dg-sand.b3 { filter: brightness(1.18); transform: scale(.88); }
.dg-sand.gone { opacity: 0; transform: scale(.6); pointer-events: none; }
.dg-sand.hint-pulse { animation: dgPulse 1.15s ease-in-out infinite; }
@keyframes dgPulse {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 214, 122, .6)); }
  50%      { filter: drop-shadow(0 0 12px rgba(255, 214, 122, 1)); }
}

/* ------------------------------------------ דף המחקר */
.dg-board {
  position: relative;
  z-index: 2;
  display: none;
  width: min(94%, 860px);
  aspect-ratio: 400 / 240;
  border-radius: clamp(10px, 1.8vmin, 18px);
  /* קלף בהיר עם קווי מדידה */
  background:
    repeating-linear-gradient(0deg, rgba(138, 111, 69, .12) 0 1px,
                              transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(138, 111, 69, .12) 0 1px,
                              transparent 1px 26px),
    radial-gradient(80% 70% at 40% 20%, #fdf6e2, transparent 72%),
    linear-gradient(170deg, #f6ecd4 0%, #e8d9b8 100%);
  border: clamp(3px, .6vmin, 6px) solid #8a6f45;
  box-shadow: 0 clamp(6px, 1.2vmin, 14px) clamp(14px, 3vmin, 32px)
              rgba(58, 38, 14, .4);
}
.dg-board.on { display: block; }
.dg-plan { position: absolute; inset: 0; width: 100%; height: 100%; }
.dg-bone { animation: dgSet .34s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes dgSet {
  0%   { opacity: 0; transform: scale(1.14); }
  100% { opacity: 1; transform: scale(1); }
}
.dg-board.glow .dg-built { filter: drop-shadow(0 0 10px rgba(255, 226, 150, .95)); }

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

  קודם הוא קיבל במגע גם מסגרת מקווקוות, וזו נראתה כשקע טכני.
  עכשיו רק זוהר רך: זה נקרא כאזור בגוף החיה.
*/
.dg-zone {
  position: absolute;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease, background .2s ease;
  background: radial-gradient(closest-side,
              rgba(255, 226, 150, .58), rgba(255, 226, 150, 0) 74%);
}
.dg-zone.over { opacity: 1; }

/*
  כל עוד עצם באוויר, קווי דף המחקר מתחזקים - כולם באותה מידה.
  שום אזור אינו מוסגר, ולכן התשובה לא נחשפת; מה שמשתנה הוא
  שהאנטומיה נקראת טוב יותר בדיוק ברגע שהילד צריך אותה.
*/
.dg-board .dg-plan { transition: opacity .18s ease; }
.dg-board.dragging .dg-plan { opacity: 1; }
.dg-board.dragging .dg-plan path { stroke-width: 3.4; }
.dg-zone.hintzone { opacity: 1; animation: dgPulse 1.2s ease-in-out infinite; }
.dg-zone.nope {
  opacity: 1;
  background: radial-gradient(closest-side,
              rgba(198, 150, 96, .42), rgba(198, 150, 96, 0) 78%);
}

/* ----------------------------------------- מגש הממצאים */
.dg-tray {
  position: absolute;
  inset-inline: clamp(8px, 1.6vmin, 18px);
  bottom: clamp(8px, 1.4vmin, 16px);
  min-height: clamp(88px, 14.5vmin, 142px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(6px, 1.4vmin, 18px);
  padding: clamp(6px, 1.2vmin, 14px);
  border-radius: clamp(12px, 2.2vmin, 22px);
  /* עץ */
  background:
    repeating-linear-gradient(90deg, rgba(90, 58, 26, .18) 0 2px,
                              transparent 2px 16px),
    linear-gradient(180deg, #9c6f3e 0%, #7c552c 100%);
  border: clamp(3px, .6vmin, 6px) solid #5e3f1e;
  box-shadow: inset 0 clamp(3px, .6vmin, 8px) clamp(8px, 1.6vmin, 18px)
              rgba(40, 24, 8, .45);
}
.dg-find {
  position: relative;
  width: clamp(76px, 12.4vmin, 128px);
  aspect-ratio: 1.16;
  border-radius: clamp(8px, 1.4vmin, 14px);
  background: linear-gradient(180deg, rgba(255, 246, 224, .16),
                              rgba(255, 246, 224, .05));
  cursor: pointer;
  touch-action: none;
  transition: transform .16s ease, opacity .3s ease, box-shadow .2s ease;
}
.dg-find .dg-shape { position: absolute; inset: 6%; }
.dg-find .dg-shape svg { width: 100%; height: 100%; display: block; }
/*
  אדמה על העצם. --d יורד עם כל הברשה, ולכן הניקוי נראה
  קורה - ולא קופץ מלוכלך לנקי.
*/
.dg-find .dg-dirt {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--d, 1);
  transition: opacity .16s linear;
  /*
    האדמה כיסתה רק כתמים קטנים ולכן היא כמעט לא נראתה, ושלב
    הניקוי נראה מיותר. עכשיו יש שכבת בסיס אטומה שמכסה את
    העצם, ועליה גושים - וההברשה באמת חושפת משהו.
  */
  background:
    radial-gradient(42% 34% at 24% 30%, #6f5228, transparent 72%),
    radial-gradient(38% 32% at 70% 58%, #62481f, transparent 72%),
    radial-gradient(34% 30% at 42% 76%, #7b5b2c, transparent 72%),
    radial-gradient(32% 28% at 80% 24%, #6f5228, transparent 72%),
    linear-gradient(160deg, #8a6a38 0%, #6d5027 100%);
  box-shadow: inset 0 0 0 2px rgba(70, 50, 20, .6);
}
.dg-find.dirty { box-shadow: inset 0 0 0 2px rgba(120, 88, 40, .5); }
.dg-find.clean {
  background: linear-gradient(180deg, rgba(255, 250, 232, .3),
                              rgba(255, 250, 232, .12));
  box-shadow: 0 3px 8px rgba(30, 18, 6, .4);
}
.dg-find.clean:active { transform: translateY(3px) scale(.96); }
.dg-find.miss { animation: dgShake .4s ease; }
@keyframes dgShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px) rotate(-2deg); }
  75%      { transform: translateX(5px) rotate(2deg); }
}
.dg-find.away { opacity: 0; transform: translateY(18px) scale(.8); }
.dg-find.hint-pulse { animation: dgPulse 1.15s ease-in-out infinite; }

/* ------------------------------------- שלד מול גוף */
/*
  --live ו---bones מוגדרים ב-JS מהסליידר. השלד והחיה יושבים
  באותו SVG ובאותם עוגנים, ולכן ההזזה מראה את העצמות *בתוך*
  הגוף - וזה ה-payoff של המשחק.
*/
.dg-board .dg-live { opacity: var(--live, 0); }
.dg-board.revealed .dg-built { opacity: var(--bones, 1); }
/*
  בלי transition. הסליידר צריך לעקוב אחרי האצבע מיד - מעבר
  של 300ms הופך גרירה למשהו שמגיע באיחור, ובסביבות שבהן
  מעברי CSS אינם מתקדמים הוא נתקע באמצע לגמרי.
*/
.dg-board.revealed .dg-live { transition: none; }

.dg-xray {
  position: absolute;
  z-index: 4;
  bottom: clamp(6px, 1.4vmin, 16px);
  left: 50%;
  translate: -50% 0;
  display: none;
  align-items: center;
  gap: clamp(8px, 1.6vmin, 18px);
  padding: clamp(6px, 1.2vmin, 12px) clamp(12px, 2.4vmin, 24px);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(253, 246, 226, .95),
                              rgba(232, 217, 184, .95));
  border: clamp(2px, .5vmin, 4px) solid #8a6f45;
  box-shadow: 0 5px 14px rgba(50, 32, 12, .4);
}
.dg-xray.on { display: flex; }
.dg-xlabel {
  width: clamp(26px, 4.4vmin, 44px);
  aspect-ratio: 1;
  background: center/contain no-repeat;
  flex: 0 0 auto;
}
.dg-xbone {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><g stroke='%236b5a3e' stroke-width='4' fill='%23efe6cd'><path d='M10 26 L30 14' stroke-linecap='round'/><circle cx='9' cy='28' r='5'/><circle cx='31' cy='12' r='5'/></g></svg>");
}
.dg-xlive {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path d='M6 28 C 4 16 14 9 22 10 C 32 11 36 20 34 28 Z' fill='%23a07b3c' stroke='%232b2016' stroke-width='3.4' stroke-linejoin='round'/><circle cx='26' cy='18' r='2.6' fill='%232b2016'/></svg>");
}
#digXraySlider {
  width: clamp(120px, 24vmin, 280px);
  height: clamp(26px, 4.4vmin, 40px);
  accent-color: #8a6f45;
  cursor: pointer;
}

/* כפתור "סיימתי", נפתח רק אחרי הגילוי */
.dg-done {
  position: absolute;
  z-index: 5;
  top: clamp(6px, 1.4vmin, 16px);
  inset-inline-start: clamp(6px, 1.4vmin, 16px);
  width: clamp(56px, 9vmin, 84px);
  aspect-ratio: 1;
  display: none;
  border: clamp(3px, .6vmin, 5px) solid #4b7a2a;
  border-radius: 50%;
  cursor: pointer;
  background: radial-gradient(circle at 34% 28%, #b6e88a, #6aa83c) center/cover;
  box-shadow: 0 4px 10px rgba(30, 50, 14, .45);
}
.dg-done.on { display: block; }
.dg-done::after {
  content: "";
  position: absolute;
  inset: 24%;
  background: center/contain no-repeat
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path d='M7 22 L16 31 L34 10' fill='none' stroke='%23ffffff' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.dg-done:active { transform: translateY(3px) scale(.96); }

@media (prefers-reduced-motion: reduce) {
  .dg-bone, .dg-zone.hintzone, .dg-sand.hint-pulse,
  .dg-find.hint-pulse, .dg-find.miss { animation: none; }
}