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

:root{
  --screen-w:min(92vw, 344px);
  /* פלטת ההדגמה, מתחלפת בסעיף 4 */
  --p1:#FDBC11;
  --p2:#C1E2E9;
  --p3:#57C6DD;
}

/* ----------------------------------------------------------
   הפתיחה: הדמות יושבת מתחת לכותרת
   ---------------------------------------------------------- */
.hero-fig{
  width:min(54vw, 196px);
  margin-top:4px;
  margin-bottom:-4px;
  position:relative;
}
.hero-fig::before{
  content:"";
  position:absolute;
  inset:auto -14% 4% -14%;
  height:58%;
  background:var(--blob-blue);
  opacity:.5;
  -webkit-mask-image:var(--blob-shape-c);mask-image:var(--blob-shape-c);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.hero-fig img{
  width:100%;height:auto;position:relative;
  /* הקצה התחתון נמוג אל הקרם, כדי שהחיתוך במותן לא ייראה כשבירה */
  -webkit-mask-image:linear-gradient(to bottom, #000 82%, transparent 99%);
  mask-image:linear-gradient(to bottom, #000 82%, transparent 99%);
}
.lede--2{margin-top:14px}

/* ----------------------------------------------------------
   המסך: מסגרת מצוירת ביד סביב שקופית ביחס 16:9
   ---------------------------------------------------------- */
.screen{
  position:relative;
  width:var(--screen-w);
  padding:9px 9px 10px;
  margin-top:16px;
}
.screen::after{
  content:"";
  position:absolute;inset:0;
  border:2.6px solid var(--ink);
  border-radius:15px;
  filter:url(#wob-fine);
  pointer-events:none;
}
.screen__in{
  position:relative;
  aspect-ratio:16/9;
  border-radius:7px;
  overflow:hidden;
  background:var(--cream);
  container-type:inline-size;
}
/* רגל קטנה, כדי שזה יקרא כמסך ולא כתמונה במסגרת */
.screen__stand{
  display:block;
  width:34%;
  height:9px;
  margin:9px auto 0;
  border:2.4px solid var(--ink);
  border-top:none;
  border-radius:0 0 9px 9px;
  filter:url(#wob-fine);
}

/* ----------------------------------------------------------
   השקופיות עצמן. הכל טקסט חי, בלי קובץ תמונה.
   הגדלים ב cqw, כך שהשקופית נשארת זהה בכל רוחב מסך.
   ---------------------------------------------------------- */
.sl{
  position:absolute;inset:0;
  background:var(--cream);
  font-family:var(--font-body);
  color:var(--ink);
  overflow:hidden;
}

/* השקופית העמוסה: הכל נדחס פנימה */
.sl--crowd{padding:6.6cqw 4cqw 3cqw}
.sl-logo{
  position:absolute;top:2.6cqw;right:3.4cqw;
  font-size:2.5cqw;font-weight:700;opacity:.5;letter-spacing:.02em;
}
.sl-h{
  font-size:4cqw;line-height:1.16;font-weight:700;
  max-width:70%;margin-bottom:1.3cqw;
}
.sl-sub{font-size:3cqw;line-height:1.3;opacity:.72;max-width:66%;margin-bottom:1.6cqw}
.sl-ul{list-style:none;max-width:66%}
.sl-ul li{
  font-size:2.6cqw;line-height:1.34;opacity:.82;
  padding-inline-start:3cqw;margin-bottom:.7cqw;position:relative;
}
.sl-ul li::before{
  content:"";position:absolute;inset-inline-start:0;top:.55em;
  width:1.3cqw;height:1.3cqw;border-radius:50%;background:var(--p3);
}
.sl-th{
  position:absolute;bottom:3cqw;right:3.6cqw;
  display:flex;gap:1.4cqw;
}
.sl-th i{
  display:block;width:11cqw;height:8cqw;border-radius:1.2cqw;
}
.sl-th i.a{background:var(--p2)}
.sl-th i.b{background:var(--p1);opacity:.75}
.sl-th i.c{background:var(--p3);opacity:.55}
.sl-pg{
  position:absolute;bottom:2.4cqw;left:3.4cqw;
  font-size:2.4cqw;font-weight:600;opacity:.4;
}
.sl-deco{
  position:absolute;top:3.4cqw;left:4cqw;
  width:7cqw;height:7cqw;border-radius:50%;
  border:.8cqw solid var(--p1);opacity:.6;
}

/* השקופית הנקייה: כתם, שתי מילים, ודמות בקצה */
.sl--clean .sl-blob{
  position:absolute;left:7cqw;top:50%;
  transform:translateY(-50%);
  margin:0;
}
.sl--clean .sl-fig{right:2cqw;left:auto}
.sl-blob{
  position:relative;
  display:inline-block;
  font-family:var(--font-head);
  font-size:11.5cqw;line-height:.86;
  padding:2.4cqw 4.6cqw 3cqw;
  z-index:1;
}
.sl-blob::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--p2);
  -webkit-mask-image:var(--blob-shape-a);mask-image:var(--blob-shape-a);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.sl--end .sl-blob{font-size:16cqw;margin:0}
.sl-fig{
  position:absolute;bottom:0;left:1cqw;
  height:88%;width:auto;
}

/* השקופית של הפלטה */
.sl--pal .sl-blob{
  position:absolute;left:7cqw;top:46%;
  transform:translateY(-50%);
  font-size:10cqw;
}
.sl--pal .sl-fig{right:2cqw;left:auto}
.sl--pal .sl-blob.p1::before{background:var(--p1)}
.sl-chip{
  position:absolute;top:7cqw;left:8cqw;
  font-size:2.8cqw;font-weight:700;
  padding:1cqw 2.6cqw;border-radius:99px;
  background:var(--p2);
}
.sl-bar{
  position:absolute;bottom:0;right:0;left:0;
  height:2.2cqw;background:var(--p3);
}

/* שקופיות הסיום */
.sl--end{display:flex;align-items:center;justify-content:center;text-align:center}
.sl-line{
  font-family:var(--font-head);
  font-size:11cqw;line-height:.94;
  max-width:70%;
}
.sl-hand{
  position:absolute;bottom:4cqw;right:0;left:0;
  text-align:center;
  font-size:2.9cqw;font-weight:700;opacity:.55;
}
.sl--end .sl-fig{height:72%}

/* ----------------------------------------------------------
   לפני ואחרי: שתי שקופיות חיות במקום שתי תמונות
   ---------------------------------------------------------- */
.ba__side{position:absolute;inset:0}
.ba__side--top{clip-path:inset(0 0 0 calc(var(--p) * 1%))}

/* ----------------------------------------------------------
   2. מבחן הריכוז
   ---------------------------------------------------------- */
.ct-stage{position:absolute;inset:0}
.ct-stage > .sl{opacity:0;transition:opacity .28s ease}
.ct-stage > .sl.is-on{opacity:1}

.ct{
  width:min(92vw, 330px);
  margin-top:16px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.ct__say{
  min-height:4.4em;
  font-size:17px;line-height:1.5;text-align:center;
  font-weight:600;
  max-width:300px;
}
.ct__say:empty{min-height:0}
.ct__say i{font-style:normal;opacity:0;transition:opacity .18s ease}
.ct__say i.on{opacity:1}
.ct__go{font-size:1rem;padding:11px 26px}
.ct__go.is-off{display:none}

.ct__q{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px}
.ct__qt{font-size:18px;font-weight:700}
.ct__opts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ct__opt{
  font-size:15.5px;font-weight:600;
  padding:8px 16px;border-radius:99px;
  background:var(--blob-sky);
  border:1.6px solid rgba(13,10,10,.18);
}
.ct__opt.is-right{background:var(--blob-blue);border-color:var(--ink)}
.ct__opt.is-wrong{opacity:.4}
.ct__res{
  font-size:16.5px;line-height:1.5;text-align:center;
  max-width:300px;
  background:var(--yellow-l);
  padding:12px 16px;
  position:relative;z-index:0;
}
.ct__res::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--yellow-l);
  -webkit-mask-image:var(--blob-shape-rect);mask-image:var(--blob-shape-rect);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.ct__res{background:none;padding:14px 20px}

/* ----------------------------------------------------------
   3. ניקוי התבנית
   ---------------------------------------------------------- */
.cl [data-cl]{
  cursor:pointer;
  transition:opacity .25s ease, transform .25s ease, filter .2s ease;
  outline:1.4px dashed rgba(13,10,10,.26);
  outline-offset:2px;
}
.cl [data-cl]:active{transform:scale(.96)}
.cl [data-cl].gone{opacity:0;transform:scale(.9);pointer-events:none}
.cl.is-clean [data-cl]{outline:none}

.btn--sm{font-size:.95rem;padding:9px 22px;margin-top:10px}

/* ----------------------------------------------------------
   5. מה הן רואות, ומה את רואה
   ---------------------------------------------------------- */
.nv{position:absolute;inset:0;display:flex;background:#eee8dc}
.nv__slide{position:relative;flex:1 1 100%;transition:flex-basis .42s ease}
.nv__slide .sl{position:absolute;inset:0}
.nv__notes{
  flex:0 0 0%;
  overflow:hidden;
  background:var(--cream);
  border-inline-start:1.6px solid rgba(13,10,10,.2);
  padding:0;
  transition:flex-basis .42s ease, padding .42s ease;
}
.nv[data-view="me"] .nv__slide{flex-basis:56%}
.nv[data-view="me"] .nv__notes{flex-basis:44%;padding:3.4cqw 3.4cqw}
.nv__lbl{
  display:block;
  font-size:2.5cqw;font-weight:700;opacity:.45;
  margin-bottom:1.6cqw;white-space:nowrap;
}
.nv__notes p{
  font-size:2.9cqw;line-height:1.38;
  margin-bottom:1.5cqw;
  padding-inline-start:2.6cqw;
  position:relative;white-space:normal;
}
.nv__notes p::before{
  content:"";position:absolute;inset-inline-start:0;top:.56em;
  width:1.2cqw;height:1.2cqw;border-radius:50%;background:var(--yellow);
}

/* ----------------------------------------------------------
   7. איך את עומדת מולן
   ---------------------------------------------------------- */
.stand{
  width:min(92vw, 330px);
  margin-top:8px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.stand__art{
  width:150px;height:150px;
}
.stand__q{
  font-size:17px;line-height:1.45;text-align:center;
  font-weight:600;max-width:300px;min-height:3em;
  transition:opacity .16s ease;
}
.stand.is-swapping .stand__q{opacity:0}

.rules{
  width:min(92vw, 330px);
  margin-top:26px;
  display:flex;flex-direction:column;align-items:center;
}
.rules__t{margin-bottom:14px}
.rules__l{list-style:none;width:100%;max-width:310px}
.rules__l li{
  font-size:16.5px;line-height:1.46;
  padding:11px 0 11px 0;
  padding-inline-start:30px;
  border-bottom:1.4px solid rgba(253,188,17,.5);
  position:relative;
}
.rules__l li:last-child{border-bottom:none}
.rules__l li b{font-weight:700}
.rules__l li::before{
  content:"";
  position:absolute;inset-inline-start:2px;top:16px;
  width:15px;height:9px;
  border-left:2.4px solid var(--blob-turq);
  border-bottom:2.4px solid var(--blob-turq);
  transform:rotate(-45deg);
  border-radius:1px;
}

/* ----------------------------------------------------------
   כיווני קריאה: מספרים ואנגלית בתוך משפט עברי
   ---------------------------------------------------------- */
.ltr{direction:ltr;display:inline-block}


/* ==========================================================
   תיקוני מקצה השיפורים · 1.10.2026
   ========================================================== */

/* 1. בשקופית הניקוי, שני האלמנטים הקטנים היו מתחת לתמונה ולא ניתן היה
      לגעת בהם בפלאפון, ולכן התרגיל לא הגיע לסיום. הם עולים מעל התמונה
      ומקבלים שטח נגיעה בגודל אצבע. */
.sl--crowd.cl .sl-pg,
.sl--crowd.cl .sl-deco{z-index:4}
.sl--crowd.cl .sl-pg::after,
.sl--crowd.cl .sl-deco::after{
  content:"";position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:max(100%,34px);height:max(100%,34px);
  border-radius:50%;
}

/* 2. הדמות בשקופית נגמרה בקו חד. אותה דהייה רכה כמו בפתיחה. */
.sl-fig{
  -webkit-mask-image:linear-gradient(to bottom,#000 76%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,#000 76%,rgba(0,0,0,0) 100%);
}

/* 3. הפס הצהוב עבר מאחורי הדמות ובצבץ ממנה. עכשיו הוא נעצר לפניה. */
.sl--pal .sl-bar{right:34%}

/* 4. שלושת ריבועי הצבע כיסו את השורה האחרונה ברשימה. */
.sl--crowd .sl-ul{margin-bottom:8.4cqw}
.sl--crowd .sl-ul li{font-size:2.5cqw;margin-bottom:.55cqw}

/* 5. פאנל ההערות מקופל, והמסגרת שלו הוסיפה קו אפור שני לצד קו היד. */
.nv:not([data-view="me"]) .nv__notes{border-inline-start-width:0}

/* 6. התוויות עמוסה ונקייה ישבו בתוך השקופית ונחתו על הכותרת שלה.
      הן יצאו החוצה, מעל המסך, ונשארו צמודות לצד שלהן. */
.ba__labels{
  width:var(--screen-w);
  margin:16px auto 0;
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:.82rem;font-weight:700;opacity:.6;
}
.ba__labels + .screen{margin-top:6px}

/* 7. הכרטיסייה הוצגה קטנה מכדי לקרוא אותה, והיא התוצר שנשאר ביד. */
.cardshot{width:min(76vw,290px)}
.sec--card .cardlink{display:block;text-decoration:none;color:inherit}

/* 8. במדריך עצמו הכרטיסייה נראית במלואה, בלי חיתוך ובלי דהייה,
      כי זה התוצר שהיא לוקחת. בדף המכירה היא נשארת הצצה. */
.sec--card .cardshot{aspect-ratio:9/16}
.sec--card .cardshot::after{content:none}

/* 9. המסגרות המקווקוות שאומרות מה אפשר למחוק נכנסו מאחורי הדמות
      ונקטעו באמצע. כולן עולות מעליה. */
.sl--crowd.cl .sl-logo,
.sl--crowd.cl .sl-sub,
.sl--crowd.cl .sl-ul{position:relative;z-index:3}
.sl--crowd.cl .sl-th{z-index:3}

/* 10. שלושה כפתורים נשברו בנייד לשניים ועוד אחד. */
@media (max-width:430px){
  .pills .pill{padding-inline:13px;font-size:.9rem}
}