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

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

  /* ============================================================
     רקע מאויר אחד - שני האזורים יושבים בתוך אותו עולם
     ============================================================ */
  /* #home יורש מ-.screen את position:absolute; inset:0 (מסך מלא).
     אין לשנות ל-relative - זה מבטל את הפריסה ומקטין את המסך. */
  #home {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
  }
  #homeBg { position: absolute; inset: 0; z-index: 0; }
  #homeBg svg { width: 100%; height: 100%; display: block; }

  .home-stage {
    position: relative;
    z-index: 2;
    flex: 1;
    min-height: 0;
    display: flex;
    gap: clamp(10px, 2vmin, 26px);
    align-items: stretch;
    padding: clamp(64px, 9vmin, 96px) var(--pad) var(--pad);
  }

  /* ============================================================
     ההרפתקה - האזור הגדול והמרגש
     ============================================================ */
  .adv-zone {
    position: relative;
    flex: 2.6;
    min-width: 0;
    min-height: 0;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    display: block;
    filter: drop-shadow(0 12px 24px rgba(30, 60, 90, .22));
    transition: transform .16s ease;
  }
  .adv-zone:active { transform: translateY(5px) scale(.99); }
  .adv-zone svg { width: 100%; height: 100%; display: block; }

  /* ============================================================
     ארגז המשחקים - אלמנט מאויר, לא כרטיס לבן
     ============================================================ */
  .toy-zone {
    position: relative;
    flex: 1.25;
    min-width: 0;
    min-height: 0;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    display: block;
    filter: drop-shadow(0 10px 20px rgba(30, 60, 90, .2));
    transition: transform .16s ease;
  }
  .toy-zone:active { transform: translateY(4px) scale(.99); }
  .toy-zone svg { width: 100%; height: 100%; display: block; }

  /* ============================================================
     אנימציות עדינות

     חשוב: transform ב-CSS דורס את תכונת transform של ה-SVG.
     לכן כל אלמנט מונפש עטוף ב-<g transform="..."> חיצוני,
     ומחלקת האנימציה יושבת על <g> פנימי בלי transform משלו.
     ============================================================ */
  .bob      { animation: bob 3.2s ease-in-out infinite; }
  .bob-slow { animation: bob 4.6s ease-in-out infinite; }
  @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

  /* קובייה שמתנדנדת פעם בכמה שניות */
  .dice-wobble { animation: wobble 5s ease-in-out infinite; transform-origin: center bottom; }
  @keyframes wobble {
    0%, 62%, 100% { transform: rotate(0deg); }
    68% { transform: rotate(-11deg); }
    74% { transform: rotate(9deg); }
    80% { transform: rotate(-5deg); }
    86% { transform: rotate(2deg); }
  }
  /* חתיכת פאזל שקופצת */
  .puz-hop { animation: hop 6s ease-in-out infinite; transform-origin: center bottom; }
  @keyframes hop {
    0%, 70%, 100% { transform: translateY(0) rotate(0deg); }
    76% { transform: translateY(-16px) rotate(-8deg); }
    84% { transform: translateY(0) rotate(0deg); }
    88% { transform: translateY(-6px); }
  }
  .sway { animation: sway 4.2s ease-in-out infinite; transform-origin: center bottom; }
  @keyframes sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
  .twinkle { animation: twinkle 2.6s ease-in-out infinite; }
  @keyframes twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
  .cloud-drift { animation: drift 26s linear infinite; }
  @keyframes drift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }

  /* ============================================================
     כפתורי הפינה - בשפה של המשחק, לא עיגולים לבנים גנריים
     ============================================================ */
  .corner {
    position: absolute;
    top: var(--pad);
    left: var(--pad);
    z-index: 10;
    display: flex;
    gap: clamp(6px, 1.2vmin, 12px);
  }
  .gbtn {
    width: clamp(46px, 7vmin, 66px);
    height: clamp(46px, 7vmin, 66px);
    border: none;
    padding: 0;
    background: none;
    cursor: pointer;
    transition: transform .14s ease;
  }
  .gbtn:active { transform: translateY(3px); }
  .gbtn svg { width: 100%; height: 100%; display: block; }

  /* ווידג'ט הכוכבים - קטן, מאויר, בפינה */
  .stars-widget {
    position: absolute;
    top: var(--pad);
    right: var(--pad);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .78);
    border: 3px solid #f5b301;
    border-radius: 999px;
    padding: 3px clamp(12px, 1.8vmin, 18px) 3px 5px;
    box-shadow: 0 4px 0 rgba(214, 150, 0, .35);
  }
  .stars-widget svg { width: clamp(30px, 4.6vmin, 44px); height: auto; display: block; }
  .stars-widget .n {
    font-size: clamp(20px, 3.2vmin, 32px);
    font-weight: 900;
    color: #b57c00;
    min-width: 1ch;
    text-align: center;
  }

  @media (orientation: portrait) {
    .home-stage { flex-direction: column; }
    /* בפורטרט האזורים רחבים ונמוכים - ה-viewBox של הציור
       נשאר אותו דבר, ו-meet פשוט משאיר שוליים למעלה ולמטה. */
    .adv-zone { flex: 2.2; }
    .toy-zone { flex: 1.1; }
  }

/* ------------------------------------------------ מסכי המפות */

.adv-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  /*
    clip ולא hidden: hidden עדיין מאפשר גלילה תוכניתית, ומיקוד
    מקלדת בתוך המפה היה יכול להזיז את המכל ולנתק אותו מהמיקום
    שה-transform מנהל. hidden נשאר כגיבוי לדפדפן ישן.
  */
  overflow: hidden;
  overflow: clip;
  /* עוגן המיקום של המפה הנגררת שבתוכה */
  position: relative;
  /*
    אותם צבעי שמיים כמו המפה עצמה. ביחסי מסך שבהם המפה נמוכה
    מהבמה (למשל טאבלט לגובה) נשארות רצועות מעל ומתחת - וכך הן
    מתמזגות עם האיור במקום להיראות כמו מסגרת ריקה.
  */
  background: linear-gradient(180deg, #bfe4f5 0%, #dcefdc 45%, #eef7e2 100%);
}
.adv-stage svg.fm {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ==========================================================
   מפת המסע

   הקנבס גדול מהבמה בכוונה ונגרר באצבע. אין פס גלילה בשום
   מקום: המיקום כולו transform, שגם זול יותר לטאבלט.
   ========================================================== */
.jm-pan {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
  touch-action: none;
}
.jm-pan svg.jm { width: 100%; height: 100%; display: block; }
.adv-stage { cursor: grab; touch-action: none; }
.adv-stage.jm-grabbing { cursor: grabbing; }

/* עולם על המפה - אזור לחיץ גדול, לא כרטיס */
.jm-node { cursor: pointer; }
.jm-hit { pointer-events: all; }
.jm-node:not(.jm-shut):hover { filter: brightness(1.05); }
/* העולם הבא, זה שנפתח עכשיו - הילה עדינה שמזמינה */
.jm-halo { animation: jmHalo 2.6s ease-in-out infinite; }
@keyframes jmHalo {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
/* "אני כאן" - סמן שמרחף מעל העולם הנוכחי */
.jm-here { animation: jmHere 1.6s ease-in-out infinite; }
@keyframes jmHere {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-18px); }
}
/* ערפל רך על עולם נעול. רומז שיש שם משהו, לא מכסה אותו. */
.jm-mist { animation: jmMist 7s ease-in-out infinite; }
@keyframes jmMist {
  0%, 100% { opacity: .8; transform: translateX(0); }
  50%      { opacity: 1; transform: translateX(14px); }
}
.jm-gate { transform-origin: center; }
/* חיים ברקע: עננים, לבה, זוהר קוטב, גפנים ותווים */
.jm-drift { animation: jmDrift 11s ease-in-out infinite; }
.jm-drift.d2 { animation-duration: 15s; animation-direction: reverse; }
@keyframes jmDrift {
  0%, 100% { transform: translateX(-14px); }
  50%      { transform: translateX(16px); }
}
.jm-aurora { animation: jmAurora 6s ease-in-out infinite; }
.jm-aurora.d2 { animation-duration: 8s; animation-delay: -2s; }
@keyframes jmAurora {
  0%, 100% { opacity: .35; }
  50%      { opacity: .9; }
}
.jm-jelly { animation: jmJelly 5s ease-in-out infinite; }
@keyframes jmJelly {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-22px) scale(1.06); }
}
.jm-vine { animation: jmVine 5.5s ease-in-out infinite; transform-origin: top center; }
.jm-vine.d2 { animation-duration: 7s; animation-delay: -1.5s; }
@keyframes jmVine {
  0%, 100% { transform: rotate(-2.5deg); }
  50%      { transform: rotate(2.5deg); }
}
.jm-gear { animation: jmGear 9s linear infinite; }
@keyframes jmGear { to { transform: rotate(360deg); } }
.jm-note { animation: jmNote 4.5s ease-in-out infinite; }
.jm-note:nth-of-type(2) { animation-delay: -1.4s; }
.jm-note:nth-of-type(3) { animation-delay: -2.8s; }
@keyframes jmNote {
  0%, 100% { transform: translateY(0) rotate(-6deg); opacity: .75; }
  50%      { transform: translateY(-26px) rotate(6deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .jm-halo, .jm-here, .jm-mist, .jm-drift, .jm-aurora,
  .jm-jelly, .jm-vine, .jm-gear, .jm-note { animation: none; }
}

/* כפתורי ההרפתקה: בפינה הימנית העליונה - הפינה השמאלית
   כבר תפוסה בידי כפתורי הקול והמסך המלא של האפליקציה. */
.adv-corner {
  position: absolute;
  top: var(--pad);
  right: var(--pad);
  display: flex;
  gap: clamp(8px, 1.6vmin, 16px);
  z-index: 8;
}
.adv-corner .icon-btn { position: static; }

/* ------------------------------------------------ יער: נקודות ודמויות */

/*
  נקודת עניין: אובייקט אמיתי מהעולם, עם טבעת אור מסביבו.
  הטבעת + התנועה העדינה הן מה שאומר לילד "כאן לוחצים".
*/
.fm-poi {
  position: absolute;
  transform: translate(-50%, -50%);
  width: clamp(90px, 17vmin, 180px);
  height: clamp(90px, 17vmin, 180px);
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  z-index: 5;
}
.poi-halo {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 233, 140, .75) 0%,
                              rgba(255, 233, 140, .28) 55%, transparent 72%);
  animation: poiPulse 1.7s ease-in-out infinite;
}
.poi-obj {
  position: absolute;
  inset: 0;
  display: block;
  animation: poiBob 2.4s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(20, 40, 60, .3));
}
.poi-obj svg { width: 100%; height: 100%; display: block; overflow: visible; }
@keyframes poiPulse {
  0%, 100% { transform: scale(1); opacity: .7; }
  50% { transform: scale(1.16); opacity: 1; }
}
@keyframes poiBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(-2deg); }
}
.poi-shake .poi-obj { animation: poiShake .8s ease 2; }
@keyframes poiShake {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  20% { transform: rotate(-9deg) translateY(-4px); }
  45% { transform: rotate(8deg) translateY(-2px); }
  70% { transform: rotate(-5deg); }
}

/* יד מאוירת שמצביעה על הנקודה */
.poi-hand {
  position: absolute;
  left: 58%;
  top: 62%;
  width: 52%;
  z-index: 6;
  pointer-events: none;
  animation: poiTap 1.6s ease-in-out infinite;
}
.poi-hand svg { width: 100%; height: auto; display: block; }
@keyframes poiTap {
  0%, 100% { transform: translate(0, 0); opacity: .95; }
  50% { transform: translate(-10%, -16%); opacity: 1; }
}

.fm-boy {
  position: absolute;
  transform: translate(-50%, -85%);
  width: clamp(64px, 12vmin, 118px);
  z-index: 4;
  transition: left 1.2s ease-in-out, top 1.2s ease-in-out;
  pointer-events: none;
}
/* קפיצה קטנה בזמן ההליכה - נראה כמו צעדים */
.fm-boy.walking .crt { animation: walkStep .34s ease-in-out infinite; }
@keyframes walkStep {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-7%) rotate(1.5deg); }
}
.fm-boy .crt { width: 100%; height: auto; }

.fm-friend {
  position: absolute;
  transform: translate(-50%, -70%);
  width: clamp(52px, 9.5vmin, 96px);
  z-index: 3;
  cursor: pointer;
}
.fm-friend .crt { width: 100%; height: auto; }

/* ------------------------------------------------ שכבת היצור המדבר */

#advTalk {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 40;
  background: rgba(30, 50, 70, .18);
  pointer-events: none;
}
#advTalk.on { display: flex; pointer-events: auto; }
.talk-crt { width: clamp(180px, 36vmin, 360px); filter: drop-shadow(0 10px 22px rgba(20, 40, 60, .3)); }
.talk-crt.big { width: clamp(220px, 46vmin, 460px); }
.talk-crt .crt { width: 100%; height: auto; }

/* היצור המלווה בפינת המסך בזמן משימה */
/*
  היצור המלווה יושב בפינה שמאלית-תחתונה, אבל שם כבר יושב כפתור
  הרמז - ושניהם נדרסו זה על זה. עכשיו הוא נצמד לקצה התחתון
  *מתחת* לכפתור הרמז, עם z-index נמוך ממנו, כך ששום דבר לא
  מסתיר את מה שגיל צריך ללחוץ עליו.
*/
.adv-buddy {
  position: fixed;
  bottom: clamp(4px, 0.8vmin, 10px);
  left: calc(var(--pad) + clamp(58px, 9vmin, 88px) + clamp(6px, 1.2vmin, 14px));
  width: clamp(58px, 10vmin, 104px);
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(0 6px 12px rgba(20, 40, 60, .3));
}

/* במסכים צרים אין מקום לשניהם בשורה - היצור עובר לימין */
@media (max-width: 620px) {
  .adv-buddy {
    left: auto;
    right: clamp(6px, 1.4vmin, 16px);
    width: clamp(50px, 14vw, 84px);
  }
}
.adv-buddy .crt { width: 100%; height: auto; }

/* ------------------------------------------------ הצטרפות */

#advJoinScene {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  background:
    radial-gradient(circle at 50% 30%, #fff8e2, transparent 55%),
    linear-gradient(180deg, #bfe4fb, #dff2ce);
  overflow: hidden;
}
.join-creature {
  position: absolute;
  left: 50%;
  top: 34%;
  transform: translate(-50%, -50%);
  width: clamp(180px, 34vmin, 340px);
  animation: joinBob 2.6s ease-in-out infinite;
}
.join-creature .crt { width: 100%; height: auto; }
@keyframes joinBob {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-52%, -47%); }
}
.join-creature.to-light { animation: toLight .7s ease forwards; }
@keyframes toLight {
  to { transform: translate(-50%, -50%) scale(.1); filter: brightness(4); opacity: 0; }
}

.join-star {
  position: absolute;
  left: 50%;
  top: 82%;
  transform: translate(-50%, -50%);
  width: clamp(110px, 20vmin, 200px);
  cursor: grab;
  touch-action: none;
  z-index: 6;
  transition: left .3s ease, top .3s ease;
}
.join-star.dragging { transition: none; cursor: grabbing; }
.join-star .crt { width: 100%; height: auto; }
.join-star.orbit { animation: orbit 1.4s ease-in-out forwards; pointer-events: none; }
@keyframes orbit {
  0%   { transform: translate(-50%, -50%) scale(1); }
  30%  { transform: translate(-140%, -160%) scale(.7) rotate(120deg); }
  60%  { transform: translate(40%, -220%) scale(.55) rotate(260deg); }
  100% { transform: translate(-50%, -260%) scale(.2) rotate(400deg); opacity: 0; }
}

.join-hand {
  position: absolute;
  left: 50%;
  top: 84%;
  width: clamp(34px, 6vmin, 62px);
  margin: -6px 0 0 -8px;
  z-index: 7;
  pointer-events: none;
  opacity: .92;
  filter: drop-shadow(0 4px 8px rgba(20, 40, 60, .35));
}
.join-hand .wicon, .join-hand svg { width: 100%; height: auto; display: block; }
@keyframes handDemo {
  0%, 15% { left: 50%; top: 82%; opacity: 1; }
  70% { left: 52%; top: 38%; opacity: 1; }
  85%, 100% { left: 52%; top: 38%; opacity: 0; }
}

.join-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: clamp(18px, 3.2vmin, 34px);
  padding: clamp(16px, 3vmin, 34px);
  width: clamp(200px, 36vmin, 360px);
  box-shadow: 0 0 0 6px #ffd23c, 0 18px 44px rgba(20, 40, 60, .3);
  text-align: center;
}
.join-card .crt { width: 78%; height: auto; }
.join-card-name {
  font-size: clamp(26px, 5vmin, 52px);
  font-weight: 900;
  color: var(--ink);
}

/* ------------------------------------------------ האלבום */

/*
  14 יצורים כבר לא נכנסים במסך אחד. בלי הכללים האלה הרשת
  גולשת מעל שורת הכותרת ומכסה את כפתור החזרה - וגיל נתקע
  באלבום. לכן: הרשת נגללת בתוך האזור שלה, מיושרת מלמעלה
  (מרכוז אנכי + גלישה = החלק העליון נחתך ולא ניתן להגיע אליו),
  ושורת הכותרת תמיד שכבה מעל.
*/
#advAlbum .center-wrap {
  gap: clamp(14px, 3vmin, 32px);
  justify-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: clamp(8px, 1.6vmin, 18px) clamp(8px, 1.6vmin, 18px) clamp(20px, 4vmin, 44px);
}
#advAlbum .topbar {
  position: relative;
  z-index: 5;
}
#advAlbum .album-grid {
  margin-block: auto;   /* ממורכז כשיש מקום, נגלל כשאין */
  flex: 0 0 auto;
}
.album-grid {
  display: flex;
  gap: clamp(12px, 2.6vmin, 30px);
  flex-wrap: wrap;
  justify-content: center;
}
/*
  כרטיס אספנות, לא כרטיס ממשק: מסגרת עץ, נוף קטן בפנים,
  וקרני אור מסתובבות מאחורי יצור שכבר הצטרף.
*/
.album-card {
  position: relative;
  border: none;
  cursor: pointer;
  background:
    linear-gradient(#f7efd7, #e8dcb4) padding-box,
    linear-gradient(#c9975c, #96683a) border-box;
  border: clamp(6px, 1.2vmin, 12px) solid transparent;
  border-radius: clamp(18px, 3.4vmin, 34px);
  width: clamp(130px, 24vmin, 230px);
  padding: clamp(8px, 1.6vmin, 18px);
  box-shadow: 0 8px 0 #6d4b26, 0 12px 26px rgba(30, 60, 90, .28);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  isolation: isolate;
}
/* נוף קטן בתחתית הכרטיס - רמז לסביבה של היצור */
.album-card::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background:
    radial-gradient(120% 100% at 50% 100%, #6aa85c 0 55%, transparent 56%),
    linear-gradient(#cfe9f5, #dff2c8);
  z-index: -2;
}
/* קרני אור - רק ליצור שכבר התגלה */
.album-card.got::after {
  content: "";
  position: absolute;
  left: 50%; top: 42%;
  width: 190%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 243, 184, .55) 0deg 8deg,
    transparent 8deg 30deg);
  animation: albumRays 26s linear infinite;
  z-index: -1;
  pointer-events: none;
}
@keyframes albumRays { to { transform: translate(-50%, -50%) rotate(360deg); } }

.album-card .crt { width: 88%; height: auto; }
.album-card:not(.got) {
  background:
    linear-gradient(#e4dcc6, #cfc4a8) padding-box,
    linear-gradient(#a8875a, #7d5c33) border-box;
}
.album-card:not(.got)::before { filter: grayscale(.7) brightness(.92); }
.album-card:active { transform: translateY(4px); box-shadow: 0 3px 0 #6d4b26; }

/* שלט-עץ עם השם */
.album-name {
  position: relative;
  font-size: clamp(15px, 2.5vmin, 25px);
  font-weight: 900;
  color: #4a3212;
  background: #c9975c;
  border: 2px solid #6d4b26;
  border-radius: 8px;
  padding: 2px clamp(10px, 2vmin, 20px);
  box-shadow: 0 2px 0 #6d4b26;
}
.album-card:not(.got) .album-name { background: #b3a482; color: #5d4a2c; }

.album-stars { display: flex; gap: 2px; }
.album-stars .wicon { width: clamp(15px, 2.4vmin, 24px); height: auto; }
.album-stars .empty .wicon { filter: grayscale(1) opacity(.45); }

/* ------------------------------------------------ אנימציות יצורים */

.crt { overflow: visible; }
.crt-idle { animation: crtBreathe 2.8s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes crtBreathe {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.035) scaleX(0.99); }
}
.crt-idle .crt-tail { animation: tailWag 2.2s ease-in-out infinite; }
@keyframes tailWag {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(9deg); }
}
.crt-idle .crt-wing { animation: tailWag 1.6s ease-in-out infinite; }
.crt-idle .crt-eye { animation: crtBlink 4.6s infinite; transform-origin: center; }
@keyframes crtBlink {
  0%, 94%, 100% { transform: scaleY(1); }
  96.5% { transform: scaleY(0.08); }
}
.crt-glow { animation: glowPulse 2s ease-in-out infinite; }
@keyframes glowPulse {
  0%, 100% { opacity: .55; }
  50% { opacity: .95; }
}
.fm-bush { transform-origin: center bottom; }


/* ================= פופו: חיים עדינים =================
   הדמות נושמת, ממצמצת, מנפנפת באוזני העלה ומכשכשת בזנב.
   transform-box: fill-box נחוץ כדי שהמרכז יחושב לפי הצורה
   עצמה ולא לפי כל ה-SVG - אחרת האוזן "עפה" מהמקום. */
.popo-fig { transform-origin: 50% 92%; animation: popoBreathe 3.4s ease-in-out infinite; }
@keyframes popoBreathe { 0%,100% { transform: scale(1,1);} 50% { transform: scale(1.014,.986);} }

.popo-earl { transform-box: fill-box; transform-origin: 60% 95%; animation: popoEarL 5s ease-in-out infinite; }
@keyframes popoEarL { 0%,100% { transform: rotate(0);} 50% { transform: rotate(-3deg);} }
.popo-earr { transform-box: fill-box; transform-origin: 30% 95%; animation: popoEarR 5s ease-in-out infinite .6s; }
@keyframes popoEarR { 0%,100% { transform: rotate(0);} 50% { transform: rotate(2.5deg);} }
.popo-tail { transform-box: fill-box; transform-origin: 8% 60%; animation: popoTail 4.2s ease-in-out infinite; }
@keyframes popoTail { 0%,100% { transform: rotate(0);} 50% { transform: rotate(7deg);} }
.popo-lids { opacity: 0; animation: popoBlink 4.6s infinite; }
@keyframes popoBlink { 0%,94%,100% { opacity: 0;} 95.5%,97.5% { opacity: 1;} }

/* ================= כפתור עץ ================= */
.icon-btn.wood {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  display: grid;
  place-items: center;
}
.icon-btn.wood .wicon {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 3px 6px rgba(20,40,60,.32));
}
.icon-btn.wood:active { transform: scale(.94); }

@media (prefers-reduced-motion: reduce) {
  .popo-fig, .popo-earl, .popo-earr, .popo-tail, .popo-lids { animation: none; }
}


/* אייקון עץ בתוך שורת טקסט */
.album-title {
  margin: 0;
  font-size: clamp(22px, 4vmin, 40px);
  display: flex;
  align-items: center;
  gap: 10px;
}
.album-title .wicon { width: clamp(28px, 5vmin, 52px); height: auto; }
.games-card .ic .wicon { width: 100%; height: auto; }
.stars-bar .ic-star .wicon { width: clamp(22px, 3.4vmin, 36px); height: auto; display: block; }
.stars-bar .ic-star { display: grid; place-items: center; }


/* ניצוץ ויד מאוירים במקום אימוג'י */
.poi-spark .spark-art { width: 100%; height: 100%; display: block; }
.join-hand .hand-art { width: 100%; height: auto; display: block;
  filter: drop-shadow(0 4px 8px rgba(20,40,60,.35)); }

/* ------------------------------------------------ כפתורי הפינה
   ה-SVG מצייר את הכפתור עצמו (עיגול צבעוני, קו מתאר, נצנוץ),
   ולכן העיגול הלבן הגנרי של .icon-btn מבוטל בכפתורי הפינה. */
.corner .icon-btn {
  background: none;
  box-shadow: none;
  border: none;
  padding: 0;
  font-size: 0;
}
.corner .icon-btn svg { width: 100%; height: 100%; display: block; overflow: visible; }
.corner .icon-btn:active { transform: translateY(3px); box-shadow: none; }


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

/* --- לומי: מרחפת, כנפיים, הילה, נקודות אור --- */
.lumi-fig { transform-origin: 50% 92%; animation: lumiFloat 3.2s ease-in-out infinite; }
@keyframes lumiFloat {
  0%,100% { transform: translateY(0) scale(1,1); }
  50%     { transform: translateY(-6px) scale(1.012,.988); }
}
.lumi-wingl { transform-box: fill-box; transform-origin: 90% 60%; animation: lumiWingL 1.1s ease-in-out infinite; }
@keyframes lumiWingL { 0%,100% { transform: rotate(0) scaleX(1);} 50% { transform: rotate(-8deg) scaleX(.86);} }
.lumi-wingr { transform-box: fill-box; transform-origin: 10% 60%; animation: lumiWingR 1.1s ease-in-out infinite; }
@keyframes lumiWingR { 0%,100% { transform: rotate(0) scaleX(1);} 50% { transform: rotate(8deg) scaleX(.86);} }
.lumi-halo { animation: lumiHalo 2.8s ease-in-out infinite; }
@keyframes lumiHalo { 0%,100% { opacity: .55;} 50% { opacity: 1;} }
.lumi-spark { animation: lumiSpark 2.2s ease-in-out infinite; }
@keyframes lumiSpark { 0%,100% { transform: scale(.85) rotate(0);} 50% { transform: scale(1.15) rotate(20deg);} }
.lumi-lids { opacity: 0; animation: lumiBlink 5.2s infinite; }
@keyframes lumiBlink { 0%,93%,100% { opacity: 0;} 94.5%,96.5% { opacity: 1;} }
.lumi-dot { animation: lumiDot 3s ease-in-out infinite; }
.lumi-dot.d2 { animation-delay: .5s; } .lumi-dot.d3 { animation-delay: 1.1s; }
@keyframes lumiDot { 0%,100% { opacity: .25; transform: translateY(0);} 50% { opacity: .95; transform: translateY(-5px);} }

/* --- בומבו: כבד ואיטי, אוזניים מתנדנדות, אגוז מתהפך --- */
.bombo-fig { transform-origin: 50% 94%; animation: bomboBreathe 4.2s ease-in-out infinite; }
@keyframes bomboBreathe { 0%,100% { transform: scale(1,1);} 50% { transform: scale(1.02,.982);} }
.bombo-earl { transform-box: fill-box; transform-origin: 70% 90%; animation: bomboEarL 5.6s ease-in-out infinite; }
@keyframes bomboEarL { 0%,100% { transform: rotate(0);} 50% { transform: rotate(-4deg);} }
.bombo-earr { transform-box: fill-box; transform-origin: 30% 90%; animation: bomboEarR 5.6s ease-in-out infinite .8s; }
@keyframes bomboEarR { 0%,100% { transform: rotate(0);} 50% { transform: rotate(4deg);} }
.bombo-nut { animation: bomboNut 3.6s ease-in-out infinite; }
@keyframes bomboNut { 0%,100% { transform: rotate(0);} 50% { transform: rotate(-10deg);} }
.bombo-lids { opacity: 0; animation: bomboBlink 5.8s infinite; }
@keyframes bomboBlink { 0%,92%,100% { opacity: 0;} 93.5%,96%  { opacity: 1;} }

/* --- זיפי: מהיר וקופצני, זנב מכשכש חזק --- */
.zipi-fig { transform-origin: 50% 92%; animation: zipiBounce 2.4s ease-in-out infinite; }
@keyframes zipiBounce {
  0%,100% { transform: translateY(0) scale(1,1); }
  45%     { transform: translateY(-4px) scale(.99,1.01); }
  60%     { transform: translateY(0) scale(1.02,.98); }
}
.zipi-tail { transform-box: fill-box; transform-origin: 5% 70%; animation: zipiTail 1.6s ease-in-out infinite; }
@keyframes zipiTail { 0%,100% { transform: rotate(-5deg);} 50% { transform: rotate(9deg);} }
.zipi-finl { transform-box: fill-box; transform-origin: 60% 95%; animation: zipiFinL 2.8s ease-in-out infinite; }
@keyframes zipiFinL { 0%,100% { transform: rotate(0);} 50% { transform: rotate(-5deg);} }
.zipi-finr { transform-box: fill-box; transform-origin: 40% 95%; animation: zipiFinR 2.8s ease-in-out infinite .4s; }
@keyframes zipiFinR { 0%,100% { transform: rotate(0);} 50% { transform: rotate(5deg);} }
.zipi-lids { opacity: 0; animation: zipiBlink 3.8s infinite; }
@keyframes zipiBlink { 0%,95%,100% { opacity: 0;} 96%,98% { opacity: 1;} }
.zipi-drop { animation: zipiDrop 2.6s ease-in-out infinite; }
.zipi-drop.d2 { animation-delay: .9s; }
@keyframes zipiDrop { 0%,100% { opacity: .2; transform: translateY(0);} 50% { opacity: .9; transform: translateY(-6px);} }

@media (prefers-reduced-motion: reduce) {
  .lumi-fig, .lumi-wingl, .lumi-wingr, .lumi-halo, .lumi-spark, .lumi-lids, .lumi-dot,
  .bombo-fig, .bombo-earl, .bombo-earr, .bombo-nut, .bombo-lids,
  .zipi-fig, .zipi-tail, .zipi-finl, .zipi-finr, .zipi-lids, .zipi-drop { animation: none; }
}

/* ==================================================== מסך המשחקים
   אותו עולם מאויר של הבית: רקע גבעות, ואריחי עץ עם איור לכל משחק.
   ==================================================== */

/*
  מסך המשחקים בנוי כשלוש שכבות אנכיות: רקע מאויר, שורת
  קטגוריות קבועה, ורשימה שגוללת בתוך עצמה. שורת הקטגוריות
  יושבת מתחת לכפתורי הפינה, ולכן היא לא מתנגשת בהם בשום רוחב.
*/
/*
  אסור להגדיר כאן display. ‎.screen מוסתר ב-display:none ונדלק
  ב-‎.screen.on, ומזהה גובר על מחלקה - הגדרת display:flex כאן
  השאירה את מסך המשחקים גלוי *מעל* כל משחק שנפתח.
  flex-direction לבדו בטוח: הוא לא משפיע כשהמסך מוסתר.
*/
#games {
  padding: 0;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
}
#gamesBg { position: absolute; inset: 0; z-index: 0; }
#gamesBg svg { width: 100%; height: 100%; display: block; }

/* שורת הקטגוריות: איור, צבע וסביבה לכל קטגוריה. התווית
   הקטנה היא להורה - הילד מזהה לפי הציור והצבע. */
.cat-row {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  display: flex;
  gap: clamp(5px, 1.2vmin, 16px);
  justify-content: center;
  flex-wrap: wrap;
  width: min(1020px, calc(100% - 2 * var(--pad)));
  margin: clamp(58px, 8.4vmin, 94px) auto 0;
}
/*
  מסך נמוך מאוד - טלפון לרוחב, 390 פיקסלים גובה. שם המרווח
  שמפנה מקום לכפתור הבית הוא 15% מכל המסך, והרשימה נדחקת
  לרצועה צרה. הכפתור עצמו קטן יותר שם ממילא.
*/
@media (max-height: 480px) {
  .cat-row { margin-top: clamp(38px, 9vmin, 52px); }
  .games-scroll { padding-top: clamp(4px, 1vmin, 10px); }
}
.cat-chip {
  flex: 0 1 auto;
  width: clamp(80px, 12.5vmin, 146px);
  border: clamp(3px, .6vmin, 6px) solid transparent;
  border-radius: clamp(14px, 2.4vmin, 26px);
  background: var(--soft, #eef2f7);
  color: var(--ink, #24352c);
  font-family: inherit;
  font-weight: 900;
  cursor: pointer;
  padding: clamp(4px, .9vmin, 11px) clamp(3px, .6vmin, 8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1px, .4vmin, 5px);
  opacity: .7;
  filter: saturate(.55);
  transition: transform .14s ease, opacity .2s ease, filter .2s ease, box-shadow .2s ease;
}
.cat-art { display: block; width: clamp(36px, 6.2vmin, 74px); aspect-ratio: 1; }
.cat-art svg { width: 100%; height: 100%; display: block; }
.cat-label { font-size: clamp(11px, 1.7vmin, 19px); line-height: 1.1; }
.cat-chip.on {
  opacity: 1;
  filter: none;
  border-color: var(--hue);
  background: #fffdf6;
  box-shadow: 0 clamp(4px, .8vmin, 8px) 0 var(--hue), 0 8px 18px rgba(30, 60, 90, .2);
  transform: translateY(-3px);
}
.cat-chip:active { transform: translateY(2px); }

.games-scroll {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: clamp(8px, 1.6vmin, 18px) var(--pad) clamp(16px, 3vmin, 34px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
/*
  הרשת מוגדרת דרך המזהה, כדי לא להתנגש ב-.menu של מסכים אחרים.
  auto-fill עם רוחב מינימלי = מספר העמודות נגזר מהמסך, ולכן 35
  משחקים פשוט ימשיכו לשורה הבאה ויגללו - בלי גלישה ובלי דחיסה.
*/
#menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(116px, 18.5vmin, 184px), 1fr));
  gap: clamp(8px, 1.6vmin, 18px);
  width: min(1020px, 100%);
  align-content: start;
}
/* גובה שמכיל את האיור, הרווח והכיתוב - אחרת הכיתוב גולש על האיור */
#menu .tile { min-height: clamp(104px, 16.5vmin, 184px); }
#menu .tile .tl { font-size: clamp(12px, 1.9vmin, 21px); }
#menu .tile[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .cat-chip { transition: none; } }

/* כפתור הבית בשפה הגרפית של המשחק */
.games-home {
  position: absolute;
  top: var(--pad);
  right: var(--pad);
  z-index: 10;
  background: none;
  box-shadow: none;
  border: none;
  padding: 0;
  font-size: 0;
}
.games-home svg { width: 100%; height: 100%; display: block; overflow: visible; }
.games-home:active { transform: translateY(3px); box-shadow: none; }


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

  מה שכן השתנה מול הגרסה הקודמת: הרוחב נקבע על ידי הרשת ולא
  על ידי האריח. קודם היה כאן width קבוע עם flex, שריד מהמבנה
  הישן של קבוצות, והוא ניצח את הרשת (‎#games .tile‎ ספציפי
  יותר מ-‎#menu .tile‎).
*/
#games .tile {
  background: linear-gradient(180deg, #fff9ec, #f3e4c8);
  color: #6d4b26;
  border: clamp(3px, .55vmin, 5px) solid #a9784a;
  border-radius: clamp(16px, 2.6vmin, 28px);
  box-shadow: 0 clamp(5px, .9vmin, 9px) 0 #8a5f37,
              0 10px 20px rgba(60, 40, 20, .18);
  gap: clamp(2px, .5vmin, 6px);
  min-height: 0;
  padding: clamp(8px, 1.4vmin, 16px) clamp(6px, 1vmin, 12px);
  font-size: clamp(13px, 1.9vmin, 21px);
  text-shadow: none;
}
#games .tile:active {
  transform: translateY(clamp(4px, .8vmin, 8px));
  box-shadow: 0 1px 0 #8a5f37, 0 4px 10px rgba(60, 40, 20, .18);
}
#games .tile .ic {
  width: clamp(56px, 10vmin, 112px);
  height: clamp(56px, 10vmin, 112px);
  font-size: 0;
  display: block;
}
#games .tile .ic svg { width: 100%; height: 100%; display: block; }

/*
  הכללים של חלוקת הקבוצות הישנה (‎.group / .ghead‎ ושלטי העץ
  שלהן) הוסרו יחד עם המבנה עצמו. הם גם החזיקו
  justify-content:center ו-padding-top גדול על ‎.games-scroll‎,
  ששרדו את המעבר ודחפו את רשת האריחים לאמצע המסך.

  בלנדסקייפ יש יותר רוחב, ולכן האריחים מעט גדולים יותר -
  אבל הרשימה עדיין מתחילה מלמעלה וגוללת בתוך עצמה.
*/
@media (orientation: landscape) {
  #games .tile .ic { width: clamp(50px, 8.4vmin, 94px); height: clamp(50px, 8.4vmin, 94px); }
  #menu {
    grid-template-columns: repeat(auto-fill, minmax(clamp(126px, 15vmin, 178px), 1fr));
  }
}

/* ==================================================== בחירת רמה
   אותה שפה: רקע מאויר, שלט עץ לכותרת, וכפתורי עץ עם פרצוף מצויר.
   ==================================================== */

#levels { padding: 0; }
#levelsBg { position: absolute; inset: 0; z-index: 0; }
#levelsBg svg { width: 100%; height: 100%; display: block; }
#levels > :not(#levelsBg) { position: relative; z-index: 2; }

#levels h2 {
  background: linear-gradient(180deg, #c98f5c, #9a6538);
  color: #fff8ea;
  border: clamp(3px, .6vmin, 5px) solid #6d4b26;
  border-radius: 999px;
  padding: clamp(6px, 1.2vmin, 14px) clamp(20px, 3.4vmin, 40px);
  box-shadow: 0 clamp(4px, .7vmin, 7px) 0 rgba(80, 52, 24, .55);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}

#levels .big-btn {
  background: linear-gradient(180deg, #fff9ec, #f3e4c8);
  color: #6d4b26;
  border: clamp(3px, .55vmin, 5px) solid #a9784a;
  box-shadow: 0 clamp(5px, .9vmin, 9px) 0 #8a5f37, 0 10px 20px rgba(60, 40, 20, .18);
  text-shadow: none;
  gap: clamp(8px, 1.6vmin, 20px);
}
#levels .big-btn:active {
  transform: translateY(clamp(4px, .8vmin, 8px));
  box-shadow: 0 1px 0 #8a5f37, 0 4px 10px rgba(60, 40, 20, .18);
}
#levels .big-btn .emoji {
  width: clamp(48px, 8vmin, 86px);
  height: clamp(48px, 8vmin, 86px);
  font-size: 0;
  flex: 0 0 auto;
}
#levels .big-btn .emoji svg { width: 100%; height: 100%; display: block; }
#levels .pips { color: #8a5f37; opacity: 1; font-weight: 800; }

/* כפתור הבית של מסך הרמות */
#levels .home-btn { background: none; box-shadow: none; border: none; padding: 0; font-size: 0; }
#levels .home-btn svg { width: 100%; height: 100%; display: block; overflow: visible; }

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

[data-ic] { font-size: 0; }
[data-ic] svg { width: 100%; height: 100%; display: block; overflow: visible; }

.ic-inline {
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  vertical-align: -.35em;
}

/* כפתורי בית / רמז / מפה / אלבום בכל המסכים */
.icon-btn.home-btn, .icon-btn.hint-btn, #advToMap, .adv-album-btn, #albumBack {
  background: none;
  box-shadow: none;
  border: none;
  padding: 0;
  font-size: 0;
}
.icon-btn.home-btn svg, .icon-btn.hint-btn svg,
#advToMap svg, .adv-album-btn svg, #albumBack svg {
  width: 100%; height: 100%; display: block; overflow: visible;
}
.icon-btn.home-btn:active, .icon-btn.hint-btn:active { transform: translateY(3px); box-shadow: none; }

/* מסך הניצחון */
#win .cheer { }
#win .star { width: clamp(64px, 12vmin, 128px); height: clamp(64px, 12vmin, 128px); margin: 0 auto; }
#win .big-btn .emoji {
  width: clamp(34px, 5.4vmin, 58px);
  height: clamp(34px, 5.4vmin, 58px);
  flex: 0 0 auto;
}

/* חצי המבוך (גיבוי לשליטה באצבע) */
.mz-pad .arrow { font-size: 0; padding: 0; }
.mz-pad .arrow svg { width: 100%; height: 100%; display: block; }

/* קוביית סולמות ונחשים */
#snDie { font-size: 0; }
#snDie svg { width: 100%; height: 100%; display: block; }

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

.ttt-board { grid-template-rows: repeat(3, 1fr); }
.ttt-board .cell { min-height: 0; overflow: hidden; }
.ttt-board .cell svg { width: 72%; height: 72%; display: block; }

/* אסימוני סולמות ונחשים - קטנים מספיק ששניהם נראים באותה משבצת */
.sn-board .tok {
  font-size: 0;
  width: clamp(18px, 3.6vmin, 38px);
  height: clamp(18px, 3.6vmin, 38px);
}
.sn-board .tok svg { width: 100%; height: 100%; display: block; }
.sn-board .tok.me { left: 4%; bottom: 4%; z-index: 3; }
.sn-board .tok.pc { right: 4%; bottom: 4%; z-index: 3; }
.sn-board .flag { font-size: 0; display: block; width: 62%; margin: 0 auto; }
.sn-board .flag svg { width: 100%; height: 100%; display: block; }

/* גב קלף הזיכרון */
.face.back { font-size: 0; }
.face.back svg { width: 52%; height: 52%; display: block; }

/* שורות תור ומחוונים */
.progress .ic-inline, #tttTurn .ic-inline, #c4Turn .ic-inline, #snTurn .ic-inline {
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
  vertical-align: -.4em;
}
.progress .ic-inline svg, #tttTurn .ic-inline svg,
#c4Turn .ic-inline svg, #snTurn .ic-inline svg {
  width: 100%; height: 100%; display: block;
}

/* ==================================================== מד המפגש
   נקודה לכל שלב, ובסוף היצור עצמו: הילד רואה כמה נשאר עד
   שהחבר החדש מצטרף אליו.
   ==================================================== */
.adv-track {
  position: fixed;
  top: clamp(6px, 1.2vmin, 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 34;
  display: none;
  align-items: center;
  gap: clamp(6px, 1.2vmin, 14px);
  background: rgba(255, 255, 255, .82);
  border: clamp(3px, .55vmin, 5px) solid #a9784a;
  border-radius: 999px;
  padding: clamp(3px, .6vmin, 7px) clamp(10px, 1.8vmin, 20px)
           clamp(3px, .6vmin, 7px) clamp(4px, .8vmin, 9px);
  box-shadow: 0 4px 0 rgba(120, 82, 44, .35);
  direction: ltr;
}
.adv-track.on { display: flex; }
/*
  מד ההתקדמות של היצור ומחוון הסבבים של המשחק ישבו שניהם
  במרכז העליון ונחתכו זה בזה. כשמד היצור פעיל, מחוון הסבבים
  יורד שורה - שני המדדים נשארים קריאים ואף אחד לא נעלם.
*/
body:has(.adv-track.on) .screen.on .topbar .progress {
  transform: translateY(clamp(40px, 6.4vmin, 66px));
}
/* גיבוי לדפדפנים בלי :has - עדיף להוריד תמיד מאשר לחפוף */
body.adv-track-on .screen.on .topbar .progress {
  transform: translateY(clamp(40px, 6.4vmin, 66px));
}
.adv-track .tk {
  width: clamp(12px, 2.1vmin, 22px);
  height: clamp(12px, 2.1vmin, 22px);
  border-radius: 50%;
  background: #e3dccb;
  box-shadow: inset 0 0 0 2px #c4b696;
}
.adv-track .tk.done { background: #56dd94; box-shadow: inset 0 0 0 2px #2fa869; }
.adv-track .tk.now {
  background: #ffd23c;
  box-shadow: inset 0 0 0 2px #d9a017;
  animation: trackNow 1.3s ease-in-out infinite;
}
@keyframes trackNow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
.adv-track .tk-goal {
  width: clamp(30px, 5vmin, 52px);
  height: clamp(30px, 5vmin, 52px);
  display: block;
  margin-inline-start: clamp(2px, .5vmin, 6px);
  filter: grayscale(.75) opacity(.55);
  transition: filter .4s ease, transform .4s ease;
}
.adv-track .tk-goal svg { width: 100%; height: 100%; display: block; }
.adv-track .tk-goal.reached { filter: none; transform: scale(1.14); }

/* ==================================================== בהירות בבית
   כפתור ההרפתקה פועם, ובפעם הראשונה יד מאוירת מצביעה עליו.
   ==================================================== */
.adv-zone { animation: advBreathe 2.8s ease-in-out infinite; }
@keyframes advBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.018); }
}
.adv-zone:active { animation: none; }

.home-hand {
  position: absolute;
  left: 46%;
  top: 44%;
  width: clamp(56px, 9vmin, 110px);
  z-index: 9;
  pointer-events: none;
  animation: homeTap 1.7s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(20, 40, 60, .35));
}
.home-hand svg { width: 100%; height: auto; display: block; }
@keyframes homeTap {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .95; }
  50% { transform: translate(-6%, -12%) scale(1.08); opacity: 1; }
}


/* ================= מסלול האור של ההצטרפות ================= */

.join-track {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.tk-base {
  fill: none;
  stroke: rgba(255, 255, 255, .55);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 0.1 5;
  vector-effect: non-scaling-stroke;
}
.tk-lit {
  fill: none;
  stroke: #ffd23c;
  stroke-width: 3.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px #ffe27a);
  transition: stroke-dashoffset .12s linear;
}

/* נקודות אור לאורך המסלול */
.join-dots { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.jd {
  position: absolute;
  width: clamp(12px, 2.4vmin, 22px);
  height: clamp(12px, 2.4vmin, 22px);
  margin: calc(clamp(12px, 2.4vmin, 22px) / -2) 0 0 calc(clamp(12px, 2.4vmin, 22px) / -2);
  border-radius: 50%;
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 0 0 2px rgba(255, 210, 60, .35);
  animation: jdPulse 1.6s ease-in-out infinite;
  transition: background .2s, box-shadow .2s, transform .2s;
}
@keyframes jdPulse { 0%,100% { transform: scale(.9); } 50% { transform: scale(1.12); } }
.jd.on {
  background: #ffd23c;
  box-shadow: 0 0 12px #ffe27a, 0 0 0 3px rgba(255, 210, 60, .5);
  transform: scale(1.25);
  animation: none;
}

/* הילה שמתחזקת ככל שמתקרבים ליצור */
.join-glow {
  position: absolute;
  left: 50%; top: 34%;
  width: clamp(240px, 46vmin, 460px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 246, 201, .95), rgba(255, 246, 201, 0) 65%);
  z-index: 1;
  pointer-events: none;
  opacity: .15;
  transition: opacity .15s linear;
}

/* שובל נצנוצים אחרי הכוכב */
.jspark {
  position: absolute;
  width: clamp(8px, 1.6vmin, 15px);
  height: clamp(8px, 1.6vmin, 15px);
  margin: calc(clamp(8px, 1.6vmin, 15px) / -2) 0 0 calc(clamp(8px, 1.6vmin, 15px) / -2);
  border-radius: 50%;
  background: #fff6d0;
  box-shadow: 0 0 10px #ffd23c;
  z-index: 4;
  pointer-events: none;
  animation: jsparkFade .8s ease-out forwards;
}
@keyframes jsparkFade {
  from { transform: scale(1); opacity: .95; }
  to   { transform: scale(.2) translateY(10px); opacity: 0; }
}

/* הכוכב עצמו */
.join-star {
  width: clamp(76px, 14vmin, 140px);
  z-index: 6;
  transition: none;
}
.join-star.gliding { transition: left .4s cubic-bezier(.3,1.2,.5,1), top .4s cubic-bezier(.3,1.2,.5,1); }

@media (prefers-reduced-motion: reduce) {
  .jd, .jspark { animation: none; }
}


/* ============ מפרץ המים ============ */

/* מד ההתקדמות בגרסת פנינים */
.adv-track.bay .tk.pearl-slot {
  background: none;
  box-shadow: none;
  width: clamp(22px, 3.6vmin, 40px);
  height: clamp(22px, 3.6vmin, 40px);
  display: grid;
  place-items: center;
}
.adv-track.bay .tk.pearl-slot .pearl { width: 100%; height: auto; display: block; }
.adv-track.bay .tk.pearl-slot.now .pearl {
  animation: pearlWait 1.8s ease-in-out infinite;
}
@keyframes pearlWait { 0%,100% { transform: scale(1);} 50% { transform: scale(1.14);} }
.adv-track.bay .tk.pearl-slot.done .pearl {
  filter: drop-shadow(0 0 8px rgba(255, 200, 230, .95));
}

/* מסלול ההצטרפות בעור ימי: זרם בועות במקום אור יער */
#advJoinScene.bay {
  background:
    radial-gradient(circle at 50% 26%, #eaffff, transparent 58%),
    linear-gradient(180deg, #bfeaf7, #6fc3dd);
}
#advJoinScene.bay .tk-lit {
  stroke: #7fe4f7;
  filter: drop-shadow(0 0 7px #bff4ff);
}
#advJoinScene.bay .tk-base { stroke: rgba(255, 255, 255, .7); }
#advJoinScene.bay .jd {
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 0 0 2px rgba(127, 228, 247, .5);
}
#advJoinScene.bay .jd.on {
  background: #9ff0ff;
  box-shadow: 0 0 14px #bff4ff, 0 0 0 3px rgba(127, 228, 247, .6);
}
#advJoinScene.bay .jspark {
  background: #eafcff;
  box-shadow: 0 0 10px #7fe4f7;
}
#advJoinScene.bay .join-glow {
  background: radial-gradient(circle, rgba(214, 250, 255, .95), rgba(214, 250, 255, 0) 65%);
}
.light-bubble { width: 100%; height: auto; }

/* תנועה עדינה בסצנת המפרץ - לא להעמיס */
.bay-wave  { animation: bayWave 6s ease-in-out infinite; }
.bay-wave2 { animation: bayWave 7.5s ease-in-out infinite .8s; }
@keyframes bayWave { 0%,100% { transform: translateX(0);} 50% { transform: translateX(-10px);} }

.bay-fish    { animation: baySwim 16s linear infinite; }
.bay-fish.f2 { animation-duration: 21s; animation-delay: -4s; }
.bay-fish.f3 { animation-duration: 26s; animation-delay: -9s; }
@keyframes baySwim {
  0%   { transform: translateX(0) scaleX(1); }
  48%  { transform: translateX(420px) scaleX(1); }
  50%  { transform: translateX(420px) scaleX(-1); }
  98%  { transform: translateX(0) scaleX(-1); }
  100% { transform: translateX(0) scaleX(1); }
}

.bay-bubbles circle { animation: bayRise 4.4s ease-in infinite; }
.bay-bubbles.d2 circle { animation-duration: 5.6s; }
@keyframes bayRise {
  0%   { transform: translateY(0); opacity: 0; }
  15%  { opacity: .9; }
  100% { transform: translateY(-70px); opacity: 0; }
}

.bay-weed { transform-box: fill-box; transform-origin: 50% 100%; animation: baySway 5s ease-in-out infinite; }
@keyframes baySway { 0%,100% { transform: rotate(-3deg);} 50% { transform: rotate(3deg);} }

.bay-crab { animation: bayCrab 9s ease-in-out infinite; }
@keyframes bayCrab {
  0%,100% { transform: translateX(0) scaleX(1); }
  45%     { transform: translateX(70px) scaleX(1); }
  50%     { transform: translateX(70px) scaleX(-1); }
  95%     { transform: translateX(0) scaleX(-1); }
}

.bay-boat { animation: bayBoat 8s ease-in-out infinite; }
@keyframes bayBoat { 0%,100% { transform: translateY(0) rotate(-1.5deg);} 50% { transform: translateY(-5px) rotate(1.5deg);} }

/* בובי - חיים עדינים */
.bubi-fig { transform-origin: 50% 92%; animation: bubiFloat 3.6s ease-in-out infinite; }
@keyframes bubiFloat {
  0%,100% { transform: translateY(0) scale(1,1); }
  50%     { transform: translateY(-5px) scale(1.012,.988); }
}
.bubi-tailbub { transform-box: fill-box; transform-origin: center; animation: bubiBub 4.2s ease-in-out infinite; }
@keyframes bubiBub { 0%,100% { transform: scale(1);} 50% { transform: scale(1.07);} }
.bubi-tail { transform-box: fill-box; transform-origin: 5% 50%; animation: bubiTail 2.2s ease-in-out infinite; }
@keyframes bubiTail { 0%,100% { transform: rotate(-6deg);} 50% { transform: rotate(8deg);} }
.bubi-finl { transform-box: fill-box; transform-origin: 100% 50%; animation: bubiFinL 2.6s ease-in-out infinite; }
@keyframes bubiFinL { 0%,100% { transform: rotate(0);} 50% { transform: rotate(-7deg);} }
.bubi-finr { transform-box: fill-box; transform-origin: 0% 50%; animation: bubiFinR 2.6s ease-in-out infinite .4s; }
@keyframes bubiFinR { 0%,100% { transform: rotate(0);} 50% { transform: rotate(7deg);} }
.bubi-lids { opacity: 0; animation: bubiBlink 4.2s infinite; }
@keyframes bubiBlink { 0%,94%,100% { opacity: 0;} 95.5%,97.5% { opacity: 1;} }
.bubi-bub { animation: bubiRise 3.4s ease-in infinite; }
.bubi-bub.b2 { animation-delay: .9s; } .bubi-bub.b3 { animation-delay: 1.7s; }
@keyframes bubiRise {
  0%   { transform: translateY(0); opacity: 0; }
  20%  { opacity: .85; }
  100% { transform: translateY(-52px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bay-wave, .bay-wave2, .bay-fish, .bay-bubbles circle, .bay-weed,
  .bay-crab, .bay-boat, .bubi-fig, .bubi-tailbub, .bubi-tail,
  .bubi-finl, .bubi-finr, .bubi-lids, .bubi-bub,
  .adv-track.bay .tk.pearl-slot.now .pearl { animation: none; }
}

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

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

/* ---- יער: קרן שמש, ציפורים, עלים נושרים ---- */
.fm-ray { animation: rayBreathe 11s ease-in-out infinite; transform-box: fill-box; transform-origin: 0 0; }
.fm-ray.r2 { animation-duration: 15s; animation-delay: -4s; }
@keyframes rayBreathe { 0%, 100% { opacity: .07; } 50% { opacity: .17; } }

.fm-flyer { animation: fmFly 26s linear infinite; }
.fm-flyer.f1 { animation-duration: 34s; animation-delay: -9s; }
.fm-flyer.f2 { animation-duration: 30s; animation-delay: -18s; }
@keyframes fmFly {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: .75; }
  92%  { opacity: .75; }
  100% { transform: translate(-420px, -46px); opacity: 0; }
}

.fm-leaf { animation: fmFall 14s ease-in infinite; transform-box: fill-box; transform-origin: center; }
.fm-leaf.l1 { animation-duration: 17s; animation-delay: -5s; }
.fm-leaf.l2 { animation-duration: 12s; animation-delay: -9s; }
.fm-leaf.l3 { animation-duration: 19s; animation-delay: -3s; }
.fm-leaf.l4 { animation-duration: 15s; animation-delay: -12s; }
@keyframes fmFall {
  0%   { transform: translate(0, 0) rotate(0); opacity: 0; }
  10%  { opacity: .8; }
  50%  { transform: translate(-26px, 180px) rotate(180deg); }
  90%  { opacity: .55; }
  100% { transform: translate(18px, 380px) rotate(360deg); opacity: 0; }
}

/* ---- פסגות: קרני אור, ציפורים, פתיתי אור ---- */
.pk-ray { animation: rayBreathe 13s ease-in-out infinite; }
.pk-ray.r2 { animation-duration: 17s; animation-delay: -6s; }

.pk-flyer { animation: pkFly 30s linear infinite; }
.pk-flyer.f1 { animation-duration: 38s; animation-delay: -11s; }
.pk-flyer.f2 { animation-duration: 34s; animation-delay: -22s; }
@keyframes pkFly {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: .6; }
  90%  { opacity: .6; }
  100% { transform: translate(520px, -34px); opacity: 0; }
}

.pk-mote { animation: pkDrift 18s ease-in-out infinite; }
.pk-mote.m1 { animation-duration: 23s; animation-delay: -7s; }
.pk-mote.m2 { animation-duration: 15s; animation-delay: -11s; }
.pk-mote.m3 { animation-duration: 21s; animation-delay: -4s; }
.pk-mote.m4 { animation-duration: 26s; animation-delay: -16s; }
@keyframes pkDrift {
  0%   { transform: translate(0, 0); opacity: .2; }
  50%  { transform: translate(64px, -34px); opacity: .7; }
  100% { transform: translate(128px, 8px); opacity: .2; }
}

@media (prefers-reduced-motion: reduce) {
  .fm-ray, .fm-flyer, .fm-leaf,
  .pk-ray, .pk-flyer, .pk-mote { animation: none; }
}

/* ==========================================================
   "לשחק שוב"

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

#advReplay .center-wrap { gap: clamp(18px, 3.4vmin, 42px); }

.rp-who {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.6vmin, 18px);
}
.rp-who .rp-crt { width: clamp(52px, 8vmin, 92px); display: block; }
.rp-who .rp-crt svg { width: 100%; height: auto; display: block; }
.rp-name {
  font-size: clamp(22px, 4vmin, 44px);
  font-weight: 900;
  color: #5d3a20;
  background: rgba(255, 255, 255, .82);
  border: clamp(3px, .55vmin, 5px) solid #a9784a;
  border-radius: 999px;
  padding: clamp(2px, .5vmin, 6px) clamp(14px, 2.4vmin, 26px);
  box-shadow: 0 4px 0 rgba(120, 82, 44, .35);
}

.rp-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 2.4vmin, 28px);
}
.rp-task {
  position: relative;
  width: clamp(96px, 17vmin, 168px);
  aspect-ratio: 1;
  border: none;
  padding: clamp(6px, 1.2vmin, 14px);
  cursor: pointer;
  border-radius: clamp(16px, 3vmin, 30px);
  background:
    linear-gradient(#fdf6e2, #f0e2bf) padding-box,
    linear-gradient(#c9975c, #96683a) border-box;
  border: clamp(5px, 1vmin, 10px) solid transparent;
  box-shadow: 0 7px 0 #6d4b26, 0 11px 22px rgba(30, 60, 90, .24);
  transition: transform .14s ease, box-shadow .14s ease;
}
.rp-task:active { transform: translateY(5px); box-shadow: 0 2px 0 #6d4b26; }
.rp-task .rp-ico { display: block; width: 100%; height: 100%; }
.rp-task .rp-ico svg { width: 100%; height: 100%; display: block; }
/* מספר המשימה - קטן בפינה, עוזר לזכור סדר בלי להיות טקסט להבנה */
.rp-task .rp-num {
  position: absolute;
  inset-inline-start: clamp(4px, .8vmin, 9px);
  top: clamp(2px, .5vmin, 6px);
  font-size: clamp(14px, 2.2vmin, 24px);
  font-weight: 900;
  color: #a9784a;
}

.rp-all {
  width: clamp(110px, 20vmin, 190px);
  aspect-ratio: 1;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  transition: transform .14s ease;
  filter: drop-shadow(0 8px 16px rgba(30, 60, 90, .3));
  animation: rpAllPulse 2.4s ease-in-out infinite;
}
.rp-all:active { transform: translateY(4px) scale(.97); }
.rp-all svg { width: 100%; height: 100%; display: block; }
@keyframes rpAllPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}

/* כפתור "לשחק שוב" על כרטיס באלבום */
.album-replay {
  position: absolute;
  inset-inline-end: clamp(3px, .7vmin, 8px);
  top: clamp(3px, .7vmin, 8px);
  width: clamp(34px, 5.4vmin, 56px);
  height: clamp(34px, 5.4vmin, 56px);
  cursor: pointer;
  z-index: 3;
  transition: transform .14s ease;
}
.album-replay svg { width: 100%; height: 100%; display: block; }
.album-replay:active { transform: translateY(3px) scale(.95); }

/* מסך הסיום של חזרה: שוב / משימה אחרת / חזרה */
.rp-end { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 3vmin, 34px); }
.rp-end-crt { width: clamp(120px, 24vmin, 260px); }
.rp-end-crt svg { width: 100%; height: auto; display: block; }
.rp-end-row { display: flex; gap: clamp(14px, 3vmin, 34px); }
.rp-btn {
  width: clamp(72px, 13vmin, 128px);
  aspect-ratio: 1;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  transition: transform .14s ease;
  filter: drop-shadow(0 6px 12px rgba(30, 60, 90, .3));
}
.rp-btn:active { transform: translateY(4px) scale(.96); }
.rp-btn svg { width: 100%; height: 100%; display: block; }

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