/* ==========================================================
   מעמקי הים.

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

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

:root {
  --deep-far: #0c2f45;
  --deep-mid: #11455f;
  --deep-near: #1b6a8c;
  --deep-glow: #7fe0e0;
  --deep-sand: #d8c9a4;
}

/* בסיס משותף לכל מסכי העולם */
.dv-stage, .sn-stage, .pl-stage, .hm-stage {
  position: absolute;
  overflow: hidden;
  border-radius: clamp(14px, 2.4vmin, 26px);
  background:
    /* קרני אור מלמעלה */
    linear-gradient(102deg, transparent 18%, rgba(180, 240, 255, .10) 22%, transparent 27%),
    linear-gradient(84deg, transparent 44%, rgba(180, 240, 255, .13) 49%, transparent 55%),
    linear-gradient(96deg, transparent 68%, rgba(180, 240, 255, .09) 73%, transparent 79%),
    radial-gradient(120% 70% at 50% -10%, rgba(160, 235, 255, .38), transparent 62%),
    linear-gradient(180deg, var(--deep-near) 0%, var(--deep-mid) 46%, var(--deep-far) 100%);
}
/* קרקעית: חול וצללית אצות */
.dv-stage::after, .sn-stage::after, .pl-stage::after, .hm-stage::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 13%;
  pointer-events: none;
  background:
    radial-gradient(60% 100% at 18% 100%, rgba(20, 60, 40, .5), transparent 70%),
    radial-gradient(50% 100% at 74% 100%, rgba(20, 60, 40, .45), transparent 70%),
    linear-gradient(180deg, rgba(216, 201, 164, .28), rgba(216, 201, 164, .72));
}

/* ==========================================================
   1. צלילה בזרמים
   ========================================================== */
.dv-stage {
  inset: clamp(56px, 9vmin, 92px) clamp(8px, 1.6vmin, 18px) clamp(8px, 1.6vmin, 18px);
  touch-action: none;
  cursor: grab;
}
.dv-stage:active { cursor: grabbing; }

/* קיר סלע עם פתח - הפתח הוא הרווח שבין שני החלקים */
.dv-wall {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(52px, 9vmin, 104px);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 14px rgba(0, 20, 30, .6));
}
.dv-rock { position: absolute; inset-inline: 0; display: block; }
.dv-rock svg { width: 100%; height: 100%; display: block; }
.dv-rock.top { top: 0; }
.dv-rock.bot { bottom: 0; transform: scaleY(-1); }

/* רצועת זרם - רואים אותה, ולכן אפשר לתכנן מולה */
.dv-flow {
  position: absolute;
  inset-inline: 0;
  pointer-events: none;
  z-index: 1;
  /* רצועה מוארת שקל לראות - הזרם צריך להיות קריא, לא מרומז */
  background: linear-gradient(180deg,
    rgba(127, 216, 240, 0), rgba(150, 230, 255, .3), rgba(127, 216, 240, 0));
  box-shadow: inset 0 0 clamp(10px, 2vmin, 24px) rgba(160, 240, 255, .22);
}
.dv-flow svg { width: 100%; height: 100%; display: block; }
.dv-flow.down svg { animation: dvFlowDown 2.4s linear infinite; }
.dv-flow.up svg { animation: dvFlowUp 2.4s linear infinite; }
@keyframes dvFlowDown {
  from { transform: translateX(-14%); } to { transform: translateX(14%); }
}
@keyframes dvFlowUp {
  from { transform: translateX(14%); } to { transform: translateX(-14%); }
}

.dv-pearl {
  position: absolute;
  width: clamp(24px, 4.4vmin, 48px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 0 clamp(6px, 1.2vmin, 14px) rgba(255, 245, 250, .9));
  animation: dvBob 2.8s ease-in-out infinite;
}
.dv-pearl svg { width: 100%; height: 100%; display: block; }
@keyframes dvBob {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -62%) scale(1.06); }
}
.dv-pearl.taken { animation: dvTake .4s ease forwards; }
@keyframes dvTake {
  to { transform: translate(-50%, -140%) scale(.3); opacity: 0; }
}

/* שער הסיום - קו אור אנכי בקצה הימני */
.dv-goal {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: clamp(30px, 5vmin, 60px);
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 clamp(8px, 1.6vmin, 18px) rgba(127, 224, 196, .8));
}
.dv-goal svg { width: 100%; height: 100%; display: block; }
.dv-goal.open { animation: dvOpen .6s ease 2; }
@keyframes dvOpen {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(127, 224, 196, .8)); }
  50%      { filter: drop-shadow(0 0 30px rgba(160, 255, 220, 1)); }
}

.dv-hero {
  position: absolute;
  width: clamp(46px, 8vmin, 92px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 4px 10px rgba(0, 20, 30, .55));
}
.dv-hero svg { width: 100%; height: auto; display: block; }
.dv-hero.bumped { animation: dvBump .42s ease; }
@keyframes dvBump {
  0%, 100% { filter: drop-shadow(0 4px 10px rgba(0, 20, 30, .55)); }
  40%      { filter: drop-shadow(0 0 16px rgba(255, 170, 120, .95)); }
}
/* רמז: הפתח שצריך לעבור בו נדלק */
.dv-hintgap {
  position: absolute;
  width: clamp(52px, 9vmin, 104px);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 4;
  border-radius: 999px;
  box-shadow: inset 0 0 0 4px rgba(255, 216, 122, .9);
  animation: dvGap 1.1s ease-in-out infinite;
}
@keyframes dvGap {
  0%, 100% { opacity: .45; } 50% { opacity: 1; }
}

/* ==========================================================
   2. סונאר
   ========================================================== */
.sn-stage {
  inset: clamp(56px, 9vmin, 92px) clamp(8px, 1.6vmin, 18px) clamp(8px, 1.6vmin, 18px);
  display: grid;
  place-items: center;
}
/*
  גלי הסונאר יוצאים ממרכז המסך, כדי לסמן ש"עכשיו משמיעים".
  במרכז בכוונה: אם הגלים היו יוצאים מהמקור, הם היו מסגירים
  את התשובה - וזה בדיוק מה שאסור כאן.
*/
.sn-wave {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(34px, 6vmin, 70px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  border: clamp(3px, .6vmin, 6px) solid var(--deep-glow);
  transition: opacity .2s ease;
}
.sn-wave.on { opacity: 1; animation: snWave 1.2s ease-out infinite; }
@keyframes snWave {
  0%   { transform: translate(-50%, -50%) scale(.4); opacity: .9; }
  100% { transform: translate(-50%, -50%) scale(2.1); opacity: 0; }
}

.sn-row {
  position: relative;
  z-index: 2;
  width: min(92%, 1020px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2.4vmin, 34px);
}
/* שורה אחת = מרחק אחד. חלוקה שווה, בלי עטיפה אוטומטית. */
.sn-line {
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
  gap: clamp(8px, 2vmin, 30px);
  width: 100%;
}
/*
  כל האלמוגים באותה שורה זהים בגודל ובבהירות. השורה האחורית
  קטנה ועמומה יותר - זה מרחק, לא רמז לתשובה. הצבע השונה הוא
  זהות בלבד: הוא לא מסגיר איזה מהם השמיע.
*/
.sn-spot {
  flex: 0 1 clamp(96px, 17.5vmin, 206px);
  aspect-ratio: 1;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  transition: transform .14s ease, filter .2s ease;
  filter: drop-shadow(0 5px 10px rgba(0, 20, 30, .5));
}
.sn-spot svg { width: 100%; height: 100%; display: block; }
.sn-line.back .sn-spot {
  flex-basis: clamp(70px, 12.5vmin, 148px);
  filter: brightness(.7) blur(.5px) drop-shadow(0 4px 8px rgba(0, 20, 30, .4));
}
.sn-spot:active { transform: translateY(4px) scale(.95); }
.sn-spot.ok { filter: drop-shadow(0 0 clamp(8px, 1.6vmin, 18px) rgba(127, 240, 180, 1)); }
.sn-spot.miss { animation: snMiss .38s ease; }
@keyframes snMiss {
  0%, 100% { transform: translateX(0); }
  30%      { transform: translateX(-8px); }
  70%      { transform: translateX(8px); }
}
.sn-spot.shine { animation: snShine .6s ease 2; }
@keyframes snShine {
  0%, 100% { transform: scale(1); }
  45%      { transform: scale(1.14); }
}

/* להשמיע שוב - זה הרמז, ואין בו שום עונש */
.sn-again {
  position: absolute;
  inset-inline-start: clamp(10px, 2vmin, 22px);
  bottom: clamp(10px, 2vmin, 22px);
  width: clamp(52px, 9vmin, 100px);
  aspect-ratio: 1;
  border: none;
  border-radius: 50%;
  background: rgba(20, 80, 110, .85);
  box-shadow: 0 4px 0 rgba(8, 40, 58, .9);
  /* לא אחוזים: על אלמנט absolute הם נמדדים לפי רוחב הבמה,
     וכפתור בן 72 פיקסלים יצא 502 פיקסלים וכיסה את המשחק */
  padding: clamp(9px, 1.8vmin, 20px);
  cursor: pointer;
  z-index: 4;
}
.sn-again svg { width: 100%; height: 100%; display: block; }
.sn-again:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(8, 40, 58, .9); }

/* ==========================================================
   3. דוגמאות פנינים
   ========================================================== */
.pl-stage {
  inset: clamp(56px, 9vmin, 92px) clamp(8px, 1.6vmin, 18px) clamp(112px, 20vmin, 182px);
  display: grid;
  place-items: center;
}
/* השרשרת: חוט שעובר בכל החוליות, כדי שזו תהיה שרשרת ולא שורה */
.pl-row {
  position: relative;
  z-index: 2;
  width: min(96%, 1000px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(4px, 1vmin, 12px);
  direction: ltr;
  padding: clamp(10px, 2vmin, 22px) 0;
}
.pl-row::before {
  content: "";
  position: absolute;
  inset-inline: 2%;
  top: 50%;
  height: clamp(4px, .8vmin, 8px);
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(216, 240, 250, .2),
              rgba(216, 240, 250, .75), rgba(216, 240, 250, .2));
}
.pl-bead {
  position: relative;
  z-index: 2;
  width: clamp(46px, 8vmin, 96px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 3px 7px rgba(0, 20, 30, .45));
}
.pl-bead svg { width: 100%; height: 100%; display: block; }
/* מקום ריק בשרשרת - טבעת מקווקוות, ברור שמשהו אמור לשבת שם */
.pl-bead.blank {
  border-radius: 50%;
  border: clamp(3px, .6vmin, 6px) dashed rgba(216, 240, 250, .8);
  background: rgba(255, 255, 255, .1);
  filter: none;
}
.pl-bead.set { animation: plSet .4s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes plSet {
  0%   { transform: scale(.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.pl-bead.miss { animation: snMiss .38s ease; }
.pl-bead.shine { animation: snShine .5s ease; }
.pl-bead.hint-pulse { animation: plHint 1.15s ease-in-out infinite; }
@keyframes plHint {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 216, 122, .85); }
  50%      { box-shadow: 0 0 0 clamp(8px, 1.6vmin, 16px) rgba(255, 216, 122, 0); }
}

.pl-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:
    radial-gradient(80% 120% at 50% 0%, rgba(160, 235, 255, .2), transparent 70%),
    linear-gradient(180deg, rgba(20, 80, 110, .9), rgba(12, 52, 74, .95));
  border: clamp(3px, .6vmin, 6px) solid rgba(127, 224, 224, .5);
}
.pl-opt {
  width: clamp(52px, 9vmin, 104px);
  aspect-ratio: 1;
  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, 20, 30, .55));
}
.pl-opt svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.pl-opt:active { cursor: grabbing; }
.pl-opt.used { opacity: .22; pointer-events: none; }
.pl-opt.miss { animation: snMiss .38s ease; }

/* ==========================================================
   4. החיה והבית שלה
   ========================================================== */
.hm-stage {
  inset: clamp(56px, 9vmin, 92px) clamp(8px, 1.6vmin, 18px) clamp(112px, 20vmin, 182px);
  display: grid;
  place-items: center;
}
.hm-row {
  position: relative;
  z-index: 2;
  width: min(96%, 980px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(10px, 2.4vmin, 34px);
}
.hm-home {
  position: relative;
  width: clamp(84px, 15vmin, 172px);
  aspect-ratio: 1;
  border-radius: 18%;
  transition: transform .16s ease, box-shadow .2s ease;
  filter: drop-shadow(0 6px 12px rgba(0, 20, 30, .5));
}
.hm-home > svg { width: 100%; height: 100%; display: block; }
.hm-home.miss { animation: snMiss .38s ease; }
.hm-home.hint-pulse { animation: plHint 1.15s ease-in-out infinite; }
/* בעל החיים נכנס הביתה - זה התשלום על הגרירה */
.hm-in {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 56%;
  transform: translateX(-50%);
  animation: hmIn .7s cubic-bezier(.3, 1.3, .4, 1) both;
}
.hm-in svg { width: 100%; height: 100%; display: block; }
@keyframes hmIn {
  0%   { transform: translate(-50%, -90%) scale(1.25); opacity: 0; }
  55%  { transform: translate(-50%, 4%) scale(.92); opacity: 1; }
  100% { transform: translate(-50%, 0) scale(1); opacity: 1; }
}
.hm-home.full { box-shadow: 0 0 clamp(10px, 2vmin, 22px) rgba(127, 240, 190, .8); }

.hm-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(10px, 2.4vmin, 32px);
  flex-wrap: wrap;
  padding: clamp(8px, 1.4vmin, 16px);
  border-radius: clamp(14px, 2.4vmin, 26px);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(160, 235, 255, .2), transparent 70%),
    linear-gradient(180deg, rgba(20, 80, 110, .9), rgba(12, 52, 74, .95));
  border: clamp(3px, .6vmin, 6px) solid rgba(127, 224, 224, .5);
}
.hm-animal {
  width: clamp(60px, 11vmin, 122px);
  aspect-ratio: 1;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition: transform .16s ease;
  filter: drop-shadow(0 4px 8px rgba(0, 20, 30, .55));
}
.hm-animal svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.hm-animal:active { cursor: grabbing; }
.hm-animal.miss { animation: snMiss .38s ease; }
.hm-animal.hint-pulse { animation: plHint 1.15s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .dv-flow svg, .dv-pearl, .dv-goal.open, .dv-hero.bumped, .dv-hintgap,
  .sn-wave.on, .sn-spot.shine, .pl-bead.set, .pl-bead.shine,
  .pl-bead.hint-pulse, .hm-in, .hm-home.hint-pulse, .hm-animal.hint-pulse {
    animation: none;
  }
}

/* ==========================================================
   חיים ברקע - בועות שעולות מהקרקעית

   עדינות ואיטיות בכוונה: לפי כלל הבית, כל דבר שזז חייב להיות
   אינטראקטיבי או עדין מספיק כדי שלא ייקרא כמטרה. אלה לא
   נלחצות, ולכן הן חייבות להישאר רקע.
   ========================================================== */
.dv-stage::before, .sn-stage::before, .pl-stage::before, .hm-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle at 12% 90%, rgba(200, 245, 255, .3) 0 5px, transparent 6px),
    radial-gradient(circle at 27% 88%, rgba(200, 245, 255, .22) 0 3px, transparent 4px),
    radial-gradient(circle at 44% 92%, rgba(200, 245, 255, .28) 0 6px, transparent 7px),
    radial-gradient(circle at 63% 87%, rgba(200, 245, 255, .2) 0 4px, transparent 5px),
    radial-gradient(circle at 81% 91%, rgba(200, 245, 255, .3) 0 5px, transparent 6px),
    radial-gradient(circle at 93% 89%, rgba(200, 245, 255, .22) 0 3px, transparent 4px);
  animation: deepRise 13s linear infinite;
}
@keyframes deepRise {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; opacity: .9; }
  to   { background-position: 0 -88%, 0 -95%, 0 -80%, 0 -92%, 0 -85%, 0 -98%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dv-stage::before, .sn-stage::before, .pl-stage::before, .hm-stage::before { animation: none; }
}

/* ==========================================================
   מפת מעמקי הים - חיים ברקע

   כל מה שזז כאן הוא רקע ולא מטרה: איטי, שקוף למחצה, ובלי
   קווי מתאר חדים. הכלל בבית הזה הוא שדבר שזז חייב להיות
   אינטראקטיבי או עדין מספיק כדי שלא ייקרא כלחיץ.
   ========================================================== */
.dm-beams { animation: dmBeams 9s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes dmBeams {
  0%, 100% { opacity: .7; transform: skewX(0deg); }
  50%      { opacity: 1;  transform: skewX(1.6deg); }
}
.dm-weed { animation: dmWeed 7s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes dmWeed {
  0%, 100% { transform: skewX(-2deg); }
  50%      { transform: skewX(2deg); }
}
/*
  דגיג. העטיפה החיצונית ממקמת ב-transform של SVG והפנימית
  מונפשת ב-CSS - שתי שכבות, אחרת אנימציית CSS מוחקת את המיקום
  והדגים נוחתים בפינה. זה הלקח מהדגים של המפרץ.
*/
.dm-fish { animation: dmFish 9s ease-in-out infinite; }
.dm-fish.f1 { animation-duration: 12s; animation-delay: -3s; }
.dm-fish.f2 { animation-duration: 15s; animation-delay: -7s; }
@keyframes dmFish {
  0%, 100% { transform: translate(-40px, 0) scale(var(--sx, 1), 1); }
  50%      { transform: translate(46px, -18px) scale(var(--sx, 1), 1); }
}
.dm-bub { animation: dmBub 6s linear infinite; }
.dm-bub.b1 { animation-duration: 8s; animation-delay: -2.5s; }
.dm-bub.b2 { animation-duration: 10s; animation-delay: -5s; }
@keyframes dmBub {
  0%   { transform: translateY(0); opacity: .55; }
  100% { transform: translateY(-330px); opacity: 0; }
}

/* זרועות המדוזה וגלי ההד של הדי - חלק מהזהות שלהם */
.crt-arm { animation: dpArm 3.4s ease-in-out infinite; transform-origin: 50% 0; }
.crt-arm.a1 { animation-delay: -1.1s; }
.crt-arm.a2 { animation-delay: -2.2s; }
@keyframes dpArm {
  0%, 100% { transform: translateX(-3px); }
  50%      { transform: translateX(3px); }
}
.crt-ring { animation: dpRing 2.6s ease-out infinite; transform-origin: 100px 108px; }
.crt-ring.r2 { animation-delay: -.85s; }
.crt-ring.r3 { animation-delay: -1.7s; }
@keyframes dpRing {
  0%   { transform: scale(.55); opacity: .6; }
  100% { transform: scale(1.25); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dm-beams, .dm-weed, .dm-fish, .dm-bub, .crt-arm, .crt-ring { animation: none; }
}

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

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

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

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

.sn-spot {
  /* גדולים יותר: היו clamp(96px, 17.5vmin, 206px) */
  flex: 0 1 clamp(112px, 20vmin, 224px);
  position: relative;
  /* שטח מגע מעבר לציור עצמו */
  padding: clamp(4px, 1vmin, 12px);
  /* נדנוד עדין - לכל אחד עיכוב אחר, כדי שלא ינועו כגוף אחד */
  animation: snSway 4.6s ease-in-out infinite;
}
.sn-spot:nth-child(2) { animation-delay: -1.1s; }
.sn-spot:nth-child(3) { animation-delay: -2.3s; }
.sn-spot:nth-child(4) { animation-delay: -3.4s; }
@keyframes snSway {
  0%, 100% { transform: rotate(-1.6deg) translateY(0); }
  50%      { transform: rotate(1.6deg) translateY(-4px); }
}

/*
  הבסיס. ::before ולא אלמנט נוסף, כדי לא לגעת במבנה שה-JS
  בונה - הוא מוסיף רק את ה-svg.
*/
.sn-spot::before {
  content: "";
  position: absolute;
  inset-inline: 12%;
  bottom: 2%;
  height: 16%;
  border-radius: 50%;
  background:
    radial-gradient(60% 100% at 50% 22%, rgba(210, 245, 255, .5), transparent 70%),
    linear-gradient(180deg, #4a7f96, #2b5468);
  box-shadow: 0 3px 0 rgba(8, 40, 58, .8), inset 0 2px 0 rgba(255, 255, 255, .3);
  z-index: -1;
}

/* תגובה מיידית לנגיעה: שוקע, וטבעת אור סביבו */
.sn-spot:active {
  transform: translateY(5px) scale(.94);
  animation: none;
}
.sn-spot:active::after,
.sn-spot.demo::after {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  border: clamp(3px, .6vmin, 6px) solid rgba(180, 245, 255, .9);
  animation: snTouch .5s ease-out;
  pointer-events: none;
}
@keyframes snTouch {
  from { transform: scale(.7); opacity: 1; }
  to   { transform: scale(1.25); opacity: 0; }
}

/*
  הטוטוריאל: האלמוג המדגים נדלק לאורך כל ההדגמה.

  זה מותר כאן ואסור בסבב האמיתי - זאת בדיוק הנקודה: בהדגמה
  אנחנו *כן* רוצים לומר "זה אני", כי מלמדים את החוק ולא
  בוחנים אותו. האלמוג המדגים לעולם אינו התשובה.
*/
.sn-spot.teach {
  animation: none;
  filter: drop-shadow(0 0 clamp(12px, 2.4vmin, 26px) rgba(255, 226, 150, 1))
          brightness(1.18);
}
.sn-spot.teach::after {
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  border: clamp(3px, .6vmin, 6px) solid rgba(255, 226, 150, .9);
  animation: snTeachRing 1.4s ease-out infinite;
  pointer-events: none;
}
@keyframes snTeachRing {
  from { transform: scale(.8); opacity: .95; }
  to   { transform: scale(1.3); opacity: 0; }
}

/* ההדגמה: אותה תגובה של נגיעה אמיתית */
.sn-spot.demo { transform: translateY(5px) scale(.94); animation: none; }

/*
  רמז 1: פעימה אחת על כל האלמוגים. פעם אחת, ולא הבהוב מתמשך -
  מסך שמהבהב כל הזמן מפסיק להיות מובן.
*/
.sn-spot.pulse-once { animation: snPulse .9s ease; }
@keyframes snPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 5px 10px rgba(0, 20, 30, .5)); }
  50%      { transform: scale(1.1) translateY(-6px);
             filter: drop-shadow(0 0 clamp(10px, 2vmin, 22px) rgba(180, 245, 255, .95)); }
}

/* רמז 3: צמצום עדין. דוהה, אבל עדיין שם ועדיין נלחץ. */
.sn-spot.dimmed {
  filter: brightness(.42) saturate(.5) blur(1px);
  transition: filter .6s ease;
}
.sn-line.back .sn-spot.dimmed {
  filter: brightness(.32) saturate(.5) blur(1.2px);
}

/*
  תשובה נכונה: המקור "שר" - גלי קול יוצאים ממנו והוא מקפץ.
  זה מה שמוכיח לילד שזה באמת היה המקום שהצליל בא ממנו.
*/
.sn-spot.sang { animation: snSang .9s ease; }
@keyframes snSang {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-14px) scale(1.12); }
  60%  { transform: translateY(-4px) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}
.sn-spot.sang::after {
  content: "";
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  border: clamp(3px, .7vmin, 7px) solid rgba(127, 240, 200, .9);
  animation: snRings .9s ease-out;
  pointer-events: none;
}
@keyframes snRings {
  from { transform: scale(.5); opacity: 1; }
  to   { transform: scale(1.5); opacity: 0; }
}

/* טעות: קפיצה, לא רעידה זועמת */
.sn-spot.miss { animation: snMissBounce .46s ease; }
@keyframes snMissBounce {
  0%, 100% { transform: translateY(0) rotate(0); }
  25%      { transform: translateY(-10px) rotate(-3deg); }
  55%      { transform: translateY(0) rotate(2deg); }
  80%      { transform: translateY(-4px) rotate(0); }
}

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

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

  הם גם נראים שונה, כדי שהילד יזכה ללמוד שיש כאן שתי פעולות.
  ============================================================
*/
.sn-again {
  /* גדול יותר: היה clamp(52px, 9vmin, 100px) */
  width: clamp(64px, 11vmin, 116px);
  background: linear-gradient(180deg, #46b7d8, #1f7fa4);
  box-shadow: 0 clamp(4px, .8vmin, 6px) 0 #125875,
              0 6px 16px rgba(0, 25, 40, .45);
  /* פועם בעדינות עד הנגיעה הראשונה בו, כדי שיימצא */
  animation: snAgainCall 2.8s ease-in-out infinite;
}
.sn-again.used { animation: none; }
@keyframes snAgainCall {
  0%, 100% { box-shadow: 0 clamp(4px, .8vmin, 6px) 0 #125875,
                         0 6px 16px rgba(0, 25, 40, .45),
                         0 0 0 0 rgba(120, 225, 255, .5); }
  60%      { box-shadow: 0 clamp(4px, .8vmin, 6px) 0 #125875,
                         0 6px 16px rgba(0, 25, 40, .45),
                         0 0 0 clamp(8px, 1.6vmin, 16px) rgba(120, 225, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .sn-spot, .sn-spot.pulse-once, .sn-spot.sang, .sn-spot.miss,
  .sn-again, .sn-spot:active::after, .sn-spot.demo::after,
  .sn-spot.sang::after { animation: none; }
  /* בלי תנועה, הרמז חייב להישאר נראה */
  .sn-spot.pulse-once {
    filter: drop-shadow(0 0 clamp(10px, 2vmin, 22px) rgba(180, 245, 255, .95));
  }
}