/* ==========================================================
   מנועי עמק הגעש - עיצוב

   שלושת המסכים חולקים שפה אחת: עומק (שכבות רקע), אור חם
   שעולה מלמטה, וקווי מתאר עבים כמו בכל שאר המשחק.
   ========================================================== */

/* ---------------------------------------------- רקע משותף */
.hop-stage, .throw-stage, .span-stage {
  position: absolute;
  inset: clamp(56px, 9vmin, 92px) clamp(6px, 1.2vmin, 14px) clamp(6px, 1.2vmin, 14px);
  border-radius: clamp(14px, 2.4vmin, 26px);
  overflow: hidden;
  touch-action: none;
}
.span-stage { bottom: clamp(112px, 20vmin, 180px); }

.skin-volcano {
  background:
    radial-gradient(120% 60% at 50% 108%, #ff8c3c 0%, #d1451f 26%, transparent 62%),
    radial-gradient(80% 40% at 18% 12%, rgba(255, 210, 150, .22), transparent 60%),
    linear-gradient(180deg, #3a2230 0%, #52283a 42%, #7a3630 78%, #a8452a 100%);
}
.skin-ice {
  background:
    radial-gradient(120% 60% at 50% 108%, #eaf7ff 0%, #b9dcf0 30%, transparent 64%),
    linear-gradient(180deg, #24406b 0%, #3c6a99 45%, #7fb4d4 100%);
}
.skin-jungle {
  background:
    radial-gradient(110% 50% at 50% 106%, #4f8f4a 0%, #2f6b39 34%, transparent 66%),
    linear-gradient(180deg, #1d3a28 0%, #2f5b38 50%, #4a7c47 100%);
}
.skin-deep {
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(190, 235, 255, .5) 0%, transparent 58%),
    linear-gradient(180deg, #0f2f4a 0%, #123f5f 46%, #1d5875 100%);
}

/* אדים שעולים - חיים סביבתיים שאינם לחיצים בכוונה */
.skin-volcano::before, .skin-ice::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 22% at 22% 92%, rgba(255, 190, 120, .30), transparent 70%),
    radial-gradient(30% 18% at 72% 96%, rgba(255, 160, 90, .26), transparent 70%);
  animation: vcHaze 9s ease-in-out infinite;
}
.skin-ice::before {
  background:
    radial-gradient(40% 24% at 30% 8%, rgba(220, 245, 255, .34), transparent 70%),
    radial-gradient(32% 20% at 76% 14%, rgba(200, 235, 255, .28), transparent 70%);
}
@keyframes vcHaze { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }

/* ==========================================================
   1. קפיצה בין סלעים
   ========================================================== */

.hop-rock {
  position: absolute;
  transform: translate(-50%, -50%);
  width: clamp(78px, 15vmin, 158px);
  aspect-ratio: 100 / 70;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  filter: drop-shadow(0 6px 10px rgba(20, 10, 8, .45));
}
.hop-rock svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* סלע נע - הלוך ושוב לרוחב. --drift קובע כמה, לכל סלע אחרת. */
.hop-rock.moving { animation: hopDrift 3.4s ease-in-out infinite alternate; }
@keyframes hopDrift {
  from { transform: translate(-50%, -50%) translateX(calc(var(--drift) * -1)); }
  to   { transform: translate(-50%, -50%) translateX(var(--drift)); }
}
/*
  ============================================================
  סלע לא יציב
  ------------------------------------------------------------
  הכלל "איזה סלע מחזיק" חייב להיות נראה *לפני* שדורכים, אחרת
  זו הגרלה. קודם היה כאן רק סדק דק כהה על סלע כהה, בשקיפות
  65% - כלומר לא נראה - והילד חווה את זה כסלע שנעלם אחרי
  שלחץ עליו.

  עכשיו סלע לא יציב מסומן בשלושה אופנים בלי מילה אחת: גוף
  קריר ובהיר יותר, סדק פתוח בצבע הלבה, ורעידה איטית מתמדת.
  הוא נראה כמו משהו שעומד להישבר.
  ============================================================
*/
.hop-rock.sinker { animation: hopShiver 1.9s ease-in-out infinite; }
@keyframes hopShiver {
  0%, 100% { transform: translate(-50%, -50%) rotate(-1.6deg); }
  50%      { transform: translate(-50%, -50%) rotate(1.6deg); }
}
/* סלע נע *וגם* לא יציב - התנועה גוברת, אחרת שתי האנימציות מתנגשות */
.hop-rock.moving.sinker { animation: hopDrift 3.4s ease-in-out infinite alternate; }

/*
  שקיעה: הסלע צולל, מתיז, *ונשאר נראה*, ואז עולה בחזרה.
  קודם הוא דהה כמעט לגמרי וזה נקרא כהיעלמות ולא כשקיעה.
*/
.hop-rock.sinking { animation: hopSink 2.4s ease-in-out forwards; }
@keyframes hopSink {
  0%   { transform: translate(-50%, -50%) rotate(0); opacity: 1; }
  35%  { transform: translate(-50%, -14%) rotate(5deg); opacity: .85; }
  62%  { transform: translate(-50%, -6%)  rotate(7deg); opacity: .8; }
  100% { transform: translate(-50%, -50%) rotate(0); opacity: 1; }
}
/* ההתזה ברגע שהסלע נוגע בלבה */
.hop-splash {
  position: absolute;
  transform: translate(-50%, -50%);
  width: clamp(64px, 13vmin, 132px);
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 4;
  animation: hopSplash .8s ease-out forwards;
}
.hop-splash svg { width: 100%; height: 100%; display: block; }
@keyframes hopSplash {
  0%   { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
  25%  { transform: translate(-50%, -50%) scale(1);  opacity: .95; }
  100% { transform: translate(-50%, -66%) scale(1.5); opacity: 0; }
}
.hop-rock.start { filter: drop-shadow(0 0 12px rgba(140, 220, 255, .5)); }
.hop-rock.goal  { filter: drop-shadow(0 0 18px rgba(255, 220, 120, .85)); }
.hop-rock.hop-hint { animation: hopHint 1.2s ease-in-out infinite; }
@keyframes hopHint {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 230, 150, .5)); }
  50%      { filter: drop-shadow(0 0 22px rgba(255, 240, 190, 1)); }
}
.hop-rock.wobble { animation: hopWob .38s ease; }
@keyframes hopWob {
  0%, 100% { transform: translate(-50%, -50%) rotate(0); }
  30%      { transform: translate(-50%, -50%) rotate(-4deg); }
  70%      { transform: translate(-50%, -50%) rotate(4deg); }
}

.hop-gem {
  position: absolute;
  transform: translate(-50%, -50%);
  width: clamp(30px, 5.4vmin, 58px);
  pointer-events: none;
  z-index: 3;
  animation: hopGemBob 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255, 220, 140, .8));
}
.hop-gem svg { width: 100%; height: auto; display: block; }
@keyframes hopGemBob {
  0%, 100% { transform: translate(-50%, -50%); }
  50%      { transform: translate(-50%, -66%); }
}
.hop-gem.taken { animation: hopGemTake .42s ease forwards; }
@keyframes hopGemTake {
  to { transform: translate(-50%, -160%) scale(.4); opacity: 0; }
}

.hop-hero {
  position: absolute;
  transform: translate(-50%, -86%);
  width: clamp(48px, 9vmin, 96px);
  z-index: 5;
  pointer-events: none;
  transition: left .26s cubic-bezier(.3, -.4, .5, 1.5), top .26s ease-out;
  filter: drop-shadow(0 5px 8px rgba(20, 10, 8, .5));
}
.hop-hero svg { width: 100%; height: auto; display: block; }
.hop-hero.jumping { animation: hopJump .32s ease; }
@keyframes hopJump {
  0%, 100% { transform: translate(-50%, -86%) scale(1, 1); }
  40%      { transform: translate(-50%, -120%) scale(.9, 1.14); }
}
.hop-hero.falling { animation: hopFall .38s ease; }
@keyframes hopFall {
  0%   { transform: translate(-50%, -86%); }
  50%  { transform: translate(-50%, -50%) rotate(10deg); opacity: .7; }
  100% { transform: translate(-50%, -86%); }
}
.hop-hero.arrived { animation: hopCheer .9s ease 2; }
@keyframes hopCheer {
  0%, 100% { transform: translate(-50%, -86%) scale(1); }
  50%      { transform: translate(-50%, -104%) scale(1.1); }
}

/* ==========================================================
   2. כוון וזרוק
   ========================================================== */

.th-who {
  position: absolute;
  left: 19%;
  top: 80%;
  transform: translate(-50%, -84%);
  width: clamp(56px, 11vmin, 116px);
  pointer-events: none;
  filter: drop-shadow(0 5px 8px rgba(20, 10, 8, .5));
}
.th-who svg { width: 100%; height: auto; display: block; }

.th-ball {
  position: absolute;
  transform: translate(-50%, -50%);
  width: clamp(30px, 5.6vmin, 60px);
  pointer-events: none;
  z-index: 4;
  filter: drop-shadow(0 0 10px rgba(255, 210, 140, .85));
}
.th-ball svg { width: 100%; height: auto; display: block; }
.th-ball.flying { animation: thSpin .7s linear infinite; }
@keyframes thSpin {
  from { transform: translate(-50%, -50%) rotate(0); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/*
  רוחב הסל נקבע מה-JS לפי דרגת הקושי (r), והוא *זהה* לאזור
  הפגיעה. מה שהילד רואה הוא מה שנתפס.
*/
.th-target {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: clamp(74px, 12vmin, 130px);
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 6px 10px rgba(20, 10, 8, .45));
}
.th-target svg { height: 100%; }
.th-target svg { width: 100%; height: auto; display: block; }
.th-target.hit { animation: thHit .6s ease; }
@keyframes thHit {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  40%      { transform: translate(-50%, -50%) scale(1.18); }
}
.th-target.hop-hint { animation: hopHint 1.2s ease-in-out infinite; }

.th-wall {
  position: absolute;
  transform: translateX(-50%);
  width: clamp(30px, 5.4vmin, 58px);
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 5px 8px rgba(20, 10, 8, .4));
}
.th-wall svg { width: 100%; height: 100%; display: block; }
.th-wall.hit { animation: thWallHit .3s ease; }
@keyframes thWallHit {
  0%, 100% { transform: translateX(-50%) scaleX(1); }
  50%      { transform: translateX(-50%) scaleX(.86); }
}

/* ------- שכבת הכוונה: נקודות עגולות, סמן נחיתה, וקלע ------- */
.th-aim, .th-band {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}
.th-band { z-index: 3; }
.th-band svg { width: 100%; height: 100%; display: block; }
/*
  הנקודות הן אלמנטים רגילים ולא SVG בתוך viewBox מעוות, ולכן
  הן נשארות עגולות בכל יחס מסך. קודם הן צוירו כקו בתוך
  preserveAspectRatio="none" ויצאו קו דק כמעט בלתי נראה.
*/
.th-dot {
  position: absolute;
  display: block;
  width: clamp(5px, .95vmin, 10px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff3cc;
  box-shadow: 0 0 0 2px rgba(120, 70, 30, .35), 0 0 8px rgba(255, 220, 140, .8);
}
.th-aim.on .th-dot { background: #b6f5c2; box-shadow: 0 0 0 2px rgba(30, 100, 50, .35), 0 0 10px rgba(150, 245, 175, .9); }
.th-aim.ghost .th-dot { opacity: .55 !important; }
/* סמן הנחיתה - איפה זה ייגמר */
.th-land {
  position: absolute;
  display: block;
  width: clamp(20px, 3.4vmin, 40px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: clamp(3px, .6vmin, 6px) dashed #fff3cc;
  animation: thLand 1.1s ease-in-out infinite;
}
.th-land.on { border-color: #8fe0a0; border-style: solid; background: rgba(143, 224, 160, .28); }
@keyframes thLand {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.16); }
}
/* טבעת העוצמה סביב הכדור - --p הוא 0..1 */
.th-ring {
  position: absolute;
  transform: translate(-50%, -50%);
  width: clamp(52px, 9vmin, 100px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity .12s ease;
  background: conic-gradient(#ffd35e calc(var(--p, 0) * 360deg), rgba(255, 255, 255, .18) 0);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
  mask: radial-gradient(circle, transparent 58%, #000 60%);
}
@media (prefers-reduced-motion: reduce) { .th-land { animation: none; } }

/* ==========================================================
   3. בנה מעבר
   ========================================================== */

/*
  שתי הגדות והתהום שביניהן.

  קודם היה כאן transparent באמצע, ולכן בעולם הקרח הגדה והרקע
  היו אותו כחול חיוור ופער לא נראה בכלל - וילד לא יכול למדוד
  משהו שהוא לא רואה. עכשיו התהום כהה ומוצל, והגדות בהירות.
*/
/*
  --gap-a ו---gap-b נכתבים ב-layoutGap מהמידה שנמדדה בפועל.
  קודם הם היו 20% ו-80% קבועים, ואז כשהמגש היה האילוץ והתהום
  התכווץ, הגדות נשארו במקומן והמקטעים "צפו" מעליהן.
*/
/* ברירת המחדל על הבמה עצמה, לא על ::after - אחרת הכתיבה מ-JS לא גוברת */
.span-stage { --gap-a: 20%; --gap-b: 80%; }
.span-stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  background:
    linear-gradient(90deg,
      var(--bank, #6f5a42) 0 var(--gap-a),
      var(--void-edge, #1d1710) var(--gap-a) calc(var(--gap-a) + 2%),
      var(--void, #241c13) calc(var(--gap-a) + 2%) calc(var(--gap-b) - 2%),
      var(--void-edge, #1d1710) calc(var(--gap-b) - 2%) var(--gap-b),
      var(--bank, #6f5a42) var(--gap-b) 100%);
  box-shadow: inset 0 clamp(6px, 1.2vmin, 12px) clamp(10px, 2vmin, 20px) rgba(0, 0, 0, .55);
  border-top: clamp(4px, .8vmin, 8px) solid var(--bank-edge, #4a3826);
  pointer-events: none;
}
.skin-ice.span-stage {
  --bank: #cfe8f5; --void: #17415f; --void-edge: #123047; --bank-edge: #6f9cb8;
}
.skin-jungle.span-stage {
  --bank: #6b7c4a; --void: #1d2b14; --void-edge: #16210f; --bank-edge: #3d4a2a;
}
.skin-deep.span-stage {
  --bank: #5f8496; --void: #123043; --void-edge: #0d2230; --bank-edge: #3d5a66;
}

/*
  ============================================================
  הסרגל המשותף
  ------------------------------------------------------------
  --upx הוא רוחב יחידה אחת בפיקסלים, נמדד מהתהום עצמו ונקבע
  ב-fitScale. גם המקטעים על התהום וגם הקרשים במגש נגזרים ממנו,
  ולכן קרש של שלוש יחידות באמת באורך של מקטע שלוש יחידות.
  קודם היו שני סרגלים שונים - אחוזים על התהום ופיקסלים במגש -
  ואז שום אורך לא היה בר-השוואה, וכל שנשאר היה לנסות חלקים.
  ============================================================
*/
.sp-slot {
  position: absolute;
  bottom: 30%;
  height: clamp(24px, 4.4vmin, 46px);
  border: clamp(3px, .6vmin, 6px) dashed rgba(255, 240, 200, .5);
  border-radius: 8px;
  background: rgba(255, 240, 200, .08);
  padding: 0;
  z-index: 3;
}
.sp-slot.filled { border: none; background: none; }
.sp-slot svg { width: 100%; height: 100%; display: block; }

/* עמודי המקטעים - מהם נמדד האורך */
.sp-pier {
  position: absolute;
  bottom: 22%;
  width: clamp(7px, 1.3vmin, 13px);
  height: clamp(30px, 5.6vmin, 58px);
  margin-inline-start: calc(clamp(7px, 1.3vmin, 13px) / -2);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #8a7256, #5a4632);
  box-shadow: inset 0 0 0 1px #3b2f22;
  z-index: 2;
  pointer-events: none;
}
.skin-ice .sp-pier { background: linear-gradient(180deg, #bcdcee, #7ba6c2); }

/* המקטע שכדאי להסתכל עליו - רמז ראשון, בלי לומר איזה חלק */
.sp-slot.look {
  animation: spLook 1.1s ease-in-out 3;
  border-color: rgba(255, 226, 150, .95);
}
@keyframes spLook {
  0%, 100% { background: rgba(255, 240, 200, .08); }
  50%      { background: rgba(255, 226, 150, .3); }
}
/* המקטע שהחלק נבחן מולו כרגע */
.sp-slot.looking { border-color: rgba(255, 255, 255, .9); }
.sp-slot.gk-over { border-color: #ffe08a; background: rgba(255, 224, 138, .18); }

/*
  ============================================================
  התחזית
  ------------------------------------------------------------
  איך החלק יישב אם ישוחרר כאן. שקופה, לא לחיצה, ומצוירת באותו
  סרגל - ולכן קרש קצר נעצר באמצע והחלל שנשאר נראה, וקרש ארוך
  בולט מעבר לעמוד. זה מה שמחליף את "לא נכון".
  ============================================================
*/
.sp-preview {
  position: absolute;
  bottom: 30%;
  height: clamp(24px, 4.4vmin, 46px);
  opacity: 0;
  z-index: 5;
  pointer-events: none;
  transition: opacity .12s ease;
}
.sp-preview.on { opacity: .62; }
.sp-preview svg { width: 100%; height: 100%; display: block; }
.sp-preview.fits { opacity: .8; filter: drop-shadow(0 0 10px #9ff0a8); }
.sp-preview.short { filter: drop-shadow(0 0 8px #ffd88a); }
/* ארוך מדי: הקצה בולט מעבר לעמוד ונוטה כלפי מטה */
.sp-preview.long {
  transform-origin: 0 50%;
  transform: rotate(4deg);
  filter: drop-shadow(0 0 8px #ffd88a);
}
/*
  החלל שנשאר כשהחלק קצר - נראה, לא נאמר. חייב להיות בולט:
  סימון דק בגובה הקרש לא נקרא כ"פה נשאר חסר".
*/
.sp-rest {
  position: absolute;
  inset-block: -55%;
  border: clamp(3px, .6vmin, 5px) dashed rgba(255, 210, 105, 1);
  border-radius: 7px;
  background: repeating-linear-gradient(45deg,
    rgba(255, 210, 105, .34) 0 7px, rgba(255, 210, 105, .1) 7px 14px);
}

/* החלק שהונח בפועל ונשאר רגע כדי שרואים למה הוא לא מתאים */
.sp-tried {
  position: absolute;
  bottom: 30%;
  height: clamp(24px, 4.4vmin, 46px);
  z-index: 6;
  pointer-events: none;
  transition: transform .44s ease-in, opacity .44s ease-in;
}
.sp-tried svg { width: 100%; height: 100%; display: block; }
.sp-tried.long { transform-origin: 0 50%; transform: rotate(6deg); }
.sp-tried.fall { transform: translateY(180%) rotate(24deg); opacity: 0; }
.sp-tried.long.fall { transform: translateY(180%) rotate(38deg); opacity: 0; }

.span-tray {
  position: absolute;
  inset-inline: clamp(6px, 1.2vmin, 14px);
  bottom: clamp(6px, 1.2vmin, 14px);
  height: clamp(96px, 17vmin, 156px);
  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: rgba(255, 248, 232, .88);
}
.span-tray.hint-pulse { box-shadow: 0 0 0 4px #e8a33c88; }

.sp-piece {
  /*
    אותו --upx של התהום. זה הקשר היחיד שמאפשר לילד להשוות
    אורך של קרש לאורך של פער בלי לנסות אותו.
  */
  /*
    ברירת המחדל קטנה בכוונה. היא בתוקף רק עד שהמידה נמדדת, וערך
    גדול היה גורם לקרשים לגלוש מהמגש ולהישבר לשתי שורות בפריים
    הראשון - וזה בדיוק מה שנראה כשקצב הרענון מוחנק.
  */
  width: calc(var(--u) * var(--upx, 26px));
  height: clamp(26px, 4.6vmin, 48px);
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  transition: transform .18s ease, opacity .3s ease;
  filter: drop-shadow(0 3px 5px rgba(20, 60, 90, .3));
}
.sp-piece svg { width: 100%; height: 100%; display: block; }
.sp-piece.arch { height: clamp(30px, 5.4vmin, 56px); }

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

  סיבוב של הכפתור עצמו הוציא קרש ארוך מגבולות המגש - שלוש
  יחידות על הסרגל של התהום גבוהות מהמגש כולו. וזה גם לא היה
  נכון עניינית: כל עוד החלק שוכב על הצד אין מה למדוד בו,
  והמידה המשותפת חוזרת אליו ברגע שהוא מסתובב.
*/
.sp-piece.turned {
  position: relative;
  width: clamp(30px, 5vmin, 52px);
  height: clamp(62px, 11vmin, 100px);
}
.sp-piece .sp-rot {
  position: absolute;
  inset-inline-end: -7px;
  top: 50%;
  width: clamp(20px, 3.2vmin, 28px);
  height: clamp(20px, 3.2vmin, 28px);
  margin-top: calc(clamp(20px, 3.2vmin, 28px) / -2);
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23fff8e8' opacity='.94'/%3E%3Cpath d='M19 12a7 7 0 1 1-2.8-5.6' fill='none' stroke='%23d98324' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M19 4.6V9.4h-4.8' fill='none' stroke='%23d98324' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  animation: spTurnHint 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes spTurnHint {
  0%, 70%, 100% { opacity: .8; transform: rotate(0); }
  85%           { opacity: 1;  transform: rotate(-42deg); }
}
/* הסיבוב עצמו: החלק מתיישר ומקבל את המידה של התהום */
.sp-piece.just-turned { animation: spTurned .42s ease; }
@keyframes spTurned {
  0%   { transform: rotate(-84deg) scale(.9); }
  60%  { transform: rotate(6deg) scale(1.04); }
  100% { transform: rotate(0) scale(1); }
}
.sp-piece.lift-tap { transform: translateY(-5px); }
/* רמז שני: החלק המתאים פועם פעם אחת */
.sp-piece.pulse-once { animation: spPulse .7s ease 2; }
@keyframes spPulse {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 3px 5px rgba(20, 60, 90, .3)); }
  50%      { transform: translateY(-7px) scale(1.05); filter: drop-shadow(0 0 14px #ffd166); }
}
.sp-piece.done { opacity: .25; pointer-events: none; }
.sp-piece.gone { opacity: 0; transform: scale(.7); pointer-events: none; }
.sp-piece.hop-hint { animation: hopHint 1.2s ease-in-out infinite; }

.sp-hero {
  position: absolute;
  bottom: 34%;
  inset-inline-start: 10%;
  transform: translateX(-50%);
  width: clamp(48px, 9vmin, 96px);
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 5px 8px rgba(20, 10, 8, .5));
}
.sp-hero svg { width: 100%; height: auto; display: block; }
.sp-hero.walking { animation: spStep .34s ease-in-out infinite; }
@keyframes spStep {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-5px); }
}
.sp-hero.arrived { animation: hopCheer .9s ease 2; }

@media (prefers-reduced-motion: reduce) {
  .hop-rock.moving, .hop-gem, .hop-hero, .th-ball.flying,
  .skin-volcano::before, .skin-ice::before,
  .sp-hero.walking, .hop-rock.hop-hint, .sp-slot.hop-hint,
  .th-target.hop-hint, .sp-piece.hop-hint,
  .sp-slot.look, .sp-piece.pulse-once, .sp-piece .sp-rot,
  .sp-piece.just-turned, .hop-rock.sinker { animation: none; }
  /*
    הרעידה של סלע לא יציב מכובה, אבל הצבע והסדק נשארים - הכלל
    עדיין נראה. סימון שתלוי רק בתנועה נעלם למי שכיבה תנועה.
  */
  /*
    גם בלי אנימציה הרמזים חייבים להישאר נראים, אחרת מי שכיבה
    תנועה מקבל משחק בלי רמזים בכלל.
  */
  .sp-slot.look { background: rgba(255, 226, 150, .3); }
  .sp-piece.pulse-once { filter: drop-shadow(0 0 14px #ffd166); }
  .sp-piece .sp-rot { opacity: 1; }
}