/* onboarding-story.css — סיפור-הפתיחה (state/onboarding-story.js, 1.10.26).
   איור ב-⅔ העליונים, כרטיס בז' בתחתית — בשפת טוקני-הכרטיס .ee-* של
   parent-controls.css (#FBF7EF / #F0E6D6 / --pc-ink).
   z-index 840: מעל הבית, **מתחת** לתווית-ההורים (850), לשער (1000), למסך-
   ההורים (1100+), להתקנה (1500) ולמסך-הקוד (2000) — כולם חייבים לעלות מעליו. */

.ob-overlay {
  position:fixed; top:0; right:0; bottom:0; left:0; inset:0;
  z-index:840;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#CFEFFF 0%,#E9F7FF 46%,#DDF2C8 46.2%,#C9E8A9 100%);
  font-family:'Fredoka', system-ui, sans-serif;
  direction:rtl;
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  overflow:hidden;
}

/* ── הבמה (האיור) ── */
.ob-stage { position:relative; flex:1 1 auto; min-height:0; }
.ob-scene { position:absolute; inset:0; top:0; right:0; bottom:0; left:0; overflow:hidden; }
.ob-deco { position:absolute; inset:0; top:0; right:0; bottom:0; left:0; pointer-events:none; }
.ob-row {
  position:absolute; left:0; right:0; bottom:4%; top:6%;
  display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(6px,2.4vw,28px);
}
.ob-tuli-wrap { position:relative; height:100%; display:flex; align-items:flex-end; }
.ob-tuli { height:96%; width:auto; max-width:30vw; object-fit:contain; display:block;
  filter:drop-shadow(0 8px 10px rgba(60,80,40,.18)); }
.ob-kid { height:70%; width:auto; max-width:17vw; object-fit:contain; object-position:50% 100%; display:block;
  transition:opacity .35s ease, transform .35s cubic-bezier(.3,1.6,.5,1);
  filter:drop-shadow(0 6px 8px rgba(60,80,40,.16)); }
.ob-kid.is-out { opacity:0; transform:translateY(30%) scale(.8); }

/* האיור הסופי (FINAL_ART_READY) — ממלא את הבמה */
/* האיור הסופי — ממוקם ב-JS (layoutArt): רצועת-התוכן בגובה הבמה, רצועות-צד בצבעי השוליים */
.ob-scene--final { background:#F8F1D8; }
.ob-art { position:absolute; left:0; top:0; width:100%; height:100%; }
.ob-final { position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; display:block;
  animation:ob-art-in .35s ease-out both; }
.ob-edge { position:absolute; top:0; height:100%; width:0; }
.ob-edge[hidden] { display:none; }
.ob-edge-l { left:0; } .ob-edge-r { right:0; }
.ob-tuli-anchor--final { position:absolute; width:1px; height:1px; }
.ob-tuli-anchor--final .ob-replay { top:0; left:0; transform:translate(-50%,-50%); }
.ob-tuli-anchor--final .ob-replay:active { transform:translate(-50%,-50%) scale(.94); }
/* מסך 2: גזירי החברים.
   ★ big-onb (ממצא 12) — כולם על המסך מההתחלה. is-named = טולי אומר את שמו עכשיו (הילה + קפיצה קטנה);
   is-hi = החבר אומר Hi (באיור הם כבר מנפנפים ביד — הגזיר מתנדנד, ובועת 👋 קופצת מעל הראש; ee-v317 — היה "Hi!"). */
.ob-kidcut { position:absolute; display:block; object-fit:contain; transform-origin:50% 100%;
  transition:opacity .35s ease, transform .3s cubic-bezier(.3,1.6,.5,1), filter .25s ease; }
.ob-kidcut.is-out { opacity:0; transform:translateY(14%) scale(.9); }
.ob-kidcut.is-named { transform:translateY(-5%) scale(1.07);
  filter:drop-shadow(0 0 6px rgba(255,205,70,.95)) drop-shadow(0 0 16px rgba(255,205,70,.8)); }
.ob-kidcut.is-hi { animation:ob-kid-hi .32s ease-in-out infinite alternate;
  filter:drop-shadow(0 0 6px rgba(255,205,70,.9)); }
.ob-hibubble { position:absolute; transform:translate(-50%,-50%) scale(.4); opacity:0; pointer-events:none;
  padding:.18em .55em; border-radius:999px; background:#fff; color:#5a3d1e; font-weight:800; white-space:nowrap;
  font-size:clamp(16px,3.2vw,34px); line-height:1.15; box-shadow:0 3px 10px rgba(80,60,30,.22);
  transition:opacity .15s ease, transform .22s cubic-bezier(.3,1.6,.5,1); }
.ob-hibubble::after { content:""; position:absolute; left:50%; bottom:-.32em; transform:translateX(-50%);
  border:.36em solid transparent; border-bottom:0; border-top-color:#fff; }
.ob-hibubble.is-hi { opacity:1; transform:translate(-50%,-50%) scale(1); }
@keyframes ob-kid-hi { from { transform:rotate(-5deg) translateY(-3%); } to { transform:rotate(5deg) translateY(-3%); } }
/* ★ ee-v295 (ממצאים 3/14) — הסלקטורים חוזקו (.ob-claps.ob-claps--final): לפני כן הכלל הכללי של .ob-claps
   (שבא אחריהם בקובץ, באותה ספציפיות) דרס אותם — right:-14% + left מה-JS מתחו את ה-span לרוחב, וה-👏
   ישב בקצה הימני של האיור (בפינה / מחוץ למסך בלפטופ), והקפיצה רצה בלי translate. */
.ob-claps.ob-claps--final { position:absolute; right:auto; width:auto; transform:translate(-50%,-50%); }
.ob-claps.ob-claps--final.is-pop { animation:ob-pop-c .38s ease-out; }
/* ★ ee-v295 (ממצאים 2/14) — בשלב הגילוי ה-👏 נשאר על המסך (פעימה עדינה), לא מהבהב פנימה-החוצה בלי סוף */
.ob-scene-4.is-revealed .ob-claps.ob-claps--final { opacity:1; animation:ob-beat-c .84s ease-in-out infinite; }
@keyframes ob-beat-c { 0%,100% { transform:translate(-50%,-50%) scale(1); } 50% { transform:translate(-50%,-50%) scale(1.18); } }
@keyframes ob-pop-c { 0% { opacity:0; transform:translate(-50%,-50%) scale(.6); } 40% { opacity:1; transform:translate(-50%,-50%) scale(1.15); } 100% { opacity:0; transform:translate(-50%,-50%) scale(1); } }
@keyframes ob-art-in { from { opacity:0; } to { opacity:1; } }
.ob-wait { font-weight:600; color:var(--pc-ink-soft,#7C746C); font-size:clamp(13px,1.8vw,16px); }
.ob-wait[hidden] { display:none; }

/* ── 🔊 ליד טולי ── */
.ob-replay {
  position:absolute; top:4%; left:-10px; transform:translateX(-100%);
  width:clamp(42px,6vw,58px); height:clamp(42px,6vw,58px); border-radius:50%;
  border:none; background:#FFFFFF; box-shadow:0 6px 14px rgba(80,60,40,.22);
  font-size:clamp(20px,3vw,28px); line-height:1; cursor:pointer;
  display:grid; place-items:center; padding:0;
  -webkit-tap-highlight-color:transparent;
}
.ob-replay[hidden] { display:none; }
.ob-replay:active { transform:translateX(-100%) scale(.94); }
/* מסך 4: ה-🔊 בולט — ההורה ישמיע שוב כשהוא מבקש מהילד לנחש */
.ob-replay.is-loud { background:#F59A2E; box-shadow:0 0 0 6px rgba(245,154,46,.28), 0 6px 14px rgba(80,60,40,.25);
  animation:ob-pulse 1.6s ease-in-out infinite; }

/* ── כרטיס-ההורה ── */
.ob-card {
  flex:0 0 auto;
  margin:0 clamp(10px,2vw,24px) clamp(10px,2vh,20px);
  margin-bottom:max(10px, env(safe-area-inset-bottom));
  min-height:22vh; max-height:46vh;
  display:flex; align-items:center; gap:clamp(10px,2vw,22px);
  padding:clamp(10px,1.8vh,18px) clamp(14px,2.4vw,26px);
  border-radius:18px; background:#FBF7EF; border:1px solid #F0E6D6;
  box-shadow:0 -4px 18px rgba(80,60,40,.10);
  color:var(--pc-ink,#44403C);
  overflow:auto;
}
.ob-body { flex:1 1 auto; min-width:0; }
.ob-text {
  margin:0; font-weight:600; line-height:1.42;
  font-size: 2.3vw; font-size:clamp(15px,2.3vw,22px);
  opacity:0; transition:opacity .35s ease;
}
.ob-hint {
  margin:6px 0 0; font-weight:500; line-height:1.35; color:#9A928A;
  font-size: 1.7vw; font-size:clamp(12px,1.7vw,16px);
  opacity:0; transition:opacity .35s ease;
}
.ob-hint[hidden] { display:none; }
.ob-card.is-ready .ob-text, .ob-card.is-ready .ob-hint { opacity:1; }
.ob-text bdi { font-family:'Fredoka', system-ui, sans-serif; }

.ob-next {
  flex:0 0 auto; align-self:flex-end;
  border:none; cursor:pointer; border-radius:16px;
  padding:clamp(10px,1.6vh,14px) clamp(22px,3vw,34px);
  background:linear-gradient(180deg,#C9761E 0%,#A85F1E 100%); color:#FFF7EA;
  font-family:inherit; font-weight:800; font-size: 2.2vw; font-size:clamp(16px,2.2vw,21px);
  box-shadow:0 6px 14px rgba(168,95,30,.28);
  -webkit-tap-highlight-color:transparent;
}
.ob-next[hidden] { display:none; }
.ob-next:active { transform:scale(.97); }
.ob-next:disabled { opacity:.6; }
/* ★ ee-v295 (ממצא 1) — "הקודם": משני, ליד "הבא" */
.ob-prev { background:#FFFFFF; color:#A85F1E; box-shadow:inset 0 0 0 2px #E2C9A8; }

/* כרטיס-הפתיחה */
.ob-card.is-intro { flex-wrap:wrap; max-height:none; min-height:0; }   /* ★ ee-v332 — כרטיס-הפתיחה (עם שדה התאריך) בלי תקרת-גובה בכל גודל: ב-900×520 / 960×540 (מעל כלל ה-500 שלמטה) התוכן חרג מ-46vh ב-6–7px ונדרשה גלילה פנימית. הבמה (טולי) מתכווצת. */
.ob-intro-title { display:block; color:#A85F1E; font-weight:800; margin-bottom:4px;
  font-size: 2.6vw; font-size:clamp(17px,2.6vw,24px); }
.ob-intro-body { display:block; font-weight:500; color:var(--pc-ink-soft,#7C746C); }
.ob-intro-actions { display:flex; align-items:center; gap:10px; flex:0 0 auto; align-self:flex-end; }
.ob-ask { font-weight:700; color:var(--pc-ink,#44403C); font-size:clamp(14px,1.9vw,18px); }
.ob-gender { min-width:clamp(70px,9vw,96px); }
/* ★ ee-v326 — תאריך-הלידה בכרטיס-הפתיחה (פעם אחת, רשות) */
.ob-birth { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; flex:1 1 100%; margin:6px 0 2px;
  font-size:clamp(14px,1.9vw,18px); }
.ob-birth-label { font-weight:700; color:var(--pc-ink,#44403C); }
.ob-birth-input { font:inherit; font-size:16px; padding:6px 10px; border-radius:10px; border:2px solid #E2C9A8;
  background:#FFFFFF; color:var(--pc-ink,#44403C); min-height:40px; -webkit-user-select:text; user-select:text; touch-action:manipulation; }
.ob-birth-why { color:var(--pc-ink-soft,#7C746C); font-weight:500; font-size:clamp(12px,1.6vw,15px); }
.ob-birth-err { color:#B42318; font-weight:700; }
.ob-birth-err[hidden] { display:none; }

/* ── קישוטי-מציין-המקום ── */
.ob-sun { position:absolute; top:8%; right:9%; width:clamp(48px,8vw,90px); height:clamp(48px,8vw,90px);
  border-radius:50%; background:radial-gradient(circle,#FFE680 0%,#FFD23F 60%,rgba(255,210,63,0) 72%); }
.ob-balloon { position:absolute; top:4%; left:12%; font-size:clamp(60px,12vw,140px); filter:drop-shadow(0 6px 8px rgba(0,0,0,.15)); }
.ob-ball { align-self:flex-end; font-size:clamp(28px,5vw,56px); margin-bottom:2%; }
.ob-claps { position:absolute; top:30%; right:-14%; font-size:clamp(36px,7vw,84px); line-height:1; opacity:0;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; pointer-events:none; z-index:2; }
.ob-claps.is-pop { animation:ob-pop .38s ease-out; }
.ob-scene-4.is-revealed .ob-clapper { animation:ob-clap .42s ease-in-out infinite; }
.ob-scene-4.is-revealed .ob-claps:not(.ob-claps--final) { animation:ob-pop .42s ease-out infinite; }

.ob-ring { position:relative; height:100%; max-width:96vw; display:flex; align-items:flex-end; justify-content:center; gap:clamp(4px,1.6vw,24px); }
.ob-scene-5 .ob-tuli { height:82%; }
.ob-ring .ob-kid { height:62%; }
.ob-empty { position:relative; align-self:stretch; width:clamp(70px,12vw,150px); flex:0 0 auto; }
.ob-sparkle { position:absolute; width:clamp(56px,9vw,110px); height:clamp(56px,9vw,110px);
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle,rgba(255,250,200,.95) 0%,rgba(255,230,120,.55) 40%,rgba(255,230,120,0) 70%);
  animation:ob-glow 1.8s ease-in-out infinite; pointer-events:none; }
.ob-spark { position:absolute; color:#FFC83D; font-style:normal; font-size:clamp(14px,2.2vw,26px);
  animation:ob-twinkle 1.4s ease-in-out infinite; }
.ob-spark-0 { top:-6%; left:44%; }
.ob-spark-1 { top:40%; left:-8%; animation-delay:.35s; }
.ob-spark-2 { top:40%; right:-8%; animation-delay:.7s; }
.ob-spark-3 { bottom:-6%; left:44%; animation-delay:1.05s; }

/* לילה ⇒ זריחה: שכבת-בוקר שקופה נחשפת (gradient אינו ניתן לאנימציה — opacity כן) */
.ob-scene-6 { background:linear-gradient(180deg,#22325E 0%,#3A4C86 60%,#4F6A62 60.2%,#3F5A4D 100%); }
.ob-scene-6::before { content:""; position:absolute; top:0; right:0; bottom:0; left:0;
  background:linear-gradient(180deg,#FFD9A8 0%,#CFEFFF 60%,#DDF2C8 60.2%,#C9E8A9 100%);
  opacity:0; animation:ob-fadein 3.2s ease-in-out 1.2s forwards; }
.ob-moon { position:absolute; top:8%; right:12%; font-size:clamp(40px,7vw,84px); animation:ob-moonset 3.2s ease-in 1.2s forwards; }
.ob-sunrise { position:absolute; bottom:40%; left:14%; width:clamp(50px,8vw,96px); height:clamp(50px,8vw,96px); border-radius:50%;
  background:radial-gradient(circle,#FFE680 0%,#FFB347 62%,rgba(255,179,71,0) 72%); opacity:0; transform:translateY(60%);
  animation:ob-rise 2.6s ease-out 2.4s forwards; }

.ob-disc { width:clamp(150px,30vh,280px); height:clamp(150px,30vh,280px); border-radius:50%; overflow:hidden;
  align-self:center; margin-bottom:4%; box-shadow:0 10px 24px rgba(80,60,40,.22); }
.ob-disc-teal { background:#D6F0EE; } .ob-disc-purple { background:#E9E3F7; }
.ob-disc-img { width:100%; height:100%; object-fit:cover; display:block; }
.ob-glow { animation:ob-bookglow 1.8s ease-in-out infinite; }
.ob-scene-7 .ob-tuli-wrap, .ob-scene-8 .ob-tuli-wrap { align-items:center; }
.ob-note { position:absolute; color:#1d9e75; font-size:clamp(22px,4vw,44px); opacity:0; animation:ob-float 3s ease-in-out infinite; }
.ob-note:nth-child(1) { left:28%; top:40%; }
.ob-note:nth-child(2) { left:66%; top:30%; animation-delay:.8s; }
.ob-note:nth-child(3) { left:36%; top:16%; animation-delay:1.6s; }
.ob-note:nth-child(4) { left:58%; top:52%; animation-delay:2.2s; }
.ob-path { position:absolute; bottom:0; left:50%; width:44%; height:52%; transform:translateX(-50%);
  background:linear-gradient(180deg,#E9D9B4 0%,#DCC596 100%);
  clip-path:polygon(42% 0, 58% 0, 100% 100%, 0 100%); opacity:.9; }

.ob-jump-in { animation:ob-jump .9s cubic-bezier(.3,1.5,.5,1) both, ob-wave-k 1.4s ease-in-out .9s 2; transform-origin:50% 100%; }
.ob-wave { animation:ob-wave-k 1.4s ease-in-out .3s 2; transform-origin:50% 100%; }

@keyframes ob-jump { 0% { transform:translateY(120%) scale(.8); } 70% { transform:translateY(-8%) scale(1.03); } 100% { transform:none; } }
@keyframes ob-wave-k { 0%,100% { transform:rotate(0); } 25% { transform:rotate(-5deg); } 75% { transform:rotate(5deg); } }
@keyframes ob-clap { 0%,100% { transform:scale(1); } 50% { transform:scale(1.05,.96); } }
@keyframes ob-pop { 0% { opacity:0; transform:scale(.6); } 40% { opacity:1; transform:scale(1.15); } 100% { opacity:0; transform:scale(1); } }
@keyframes ob-pulse { 0%,100% { box-shadow:0 0 0 4px rgba(245,154,46,.30), 0 6px 14px rgba(80,60,40,.25); } 50% { box-shadow:0 0 0 12px rgba(245,154,46,.10), 0 6px 14px rgba(80,60,40,.25); } }
@keyframes ob-glow { 0%,100% { opacity:.65; transform:translate(-50%,-50%) scale(.92); } 50% { opacity:1; transform:translate(-50%,-50%) scale(1.08); } }
@keyframes ob-twinkle { 0%,100% { opacity:.2; transform:scale(.7) rotate(0); } 50% { opacity:1; transform:scale(1.2) rotate(20deg); } }
@keyframes ob-fadein { to { opacity:1; } }
@keyframes ob-moonset { to { opacity:0; transform:translateY(-40%); } }
@keyframes ob-rise { to { opacity:1; transform:none; } }
@keyframes ob-bookglow { 0%,100% { box-shadow:0 0 0 0 rgba(255,215,90,.0), 0 10px 24px rgba(80,60,40,.22); } 50% { box-shadow:0 0 34px 12px rgba(255,215,90,.75), 0 10px 24px rgba(80,60,40,.22); } }
@keyframes ob-float { 0% { opacity:0; transform:translateY(16px); } 30% { opacity:1; } 100% { opacity:0; transform:translateY(-36px); } }

@media (prefers-reduced-motion: reduce) {
  .ob-overlay *, .ob-overlay, .ob-overlay *::before { animation:none !important; transition:none !important; }
  .ob-kid.is-out, .ob-kidcut.is-out { opacity:0; }
  /* ★ big-onb (ממצא 12) — בלי תנועה: ההילה ובועת ה-Hi מוצגות סטטית (מי מדבר — עדיין ברור) */
  .ob-hibubble.is-hi { opacity:1 !important; transform:translate(-50%,-50%) !important; }
  /* בלי תנועה — מה שהיה מופיע באנימציה מוצג סטטית, לא נשאר שקוף לנצח */
  .ob-scene-4.is-revealed .ob-claps, .ob-scene-4.is-revealed .ob-claps--final, .ob-note, .ob-sunrise { opacity:1 !important; transform:none !important; }
  /* ★ ee-v295 (ממצא 14) — "הפחתת תנועה" (נפוץ בלפטופים) ביטלה את הקפיצה ⇒ ה-👏 נשאר שקוף. עכשיו: מוצג. */
  .ob-claps.is-pop { opacity:1 !important; }
  .ob-scene-6::before { opacity:1; }
  .ob-scene-4.is-revealed .ob-claps--final, .ob-claps.ob-claps--final.is-pop { transform:translate(-50%,-50%) !important; }
  .ob-moon { opacity:0; }
}

/* ★ ee-v330 (סבב 2c, צ'קליסט-המכשירים) — טלפון לרוחב (גובה ≤ 500): מאז שנוסף שדה התאריך (ee-v326) כרטיס-הפתיחה
   חרג מ-46vh, ו"בן"/"בת" ישבו מתחת לקו — נראו רק בגלילה בתוך הכרטיס (ובאייפון פס-הגלילה מוסתר). כאן כרטיס-הפתיחה
   בלבד: בלי תקרת-גובה (הבמה, flex:1 + min-height:0, מתכווצת — טולי קטן יותר), ריווח צפוף, והשדה + הכפתורים
   באותה שורה כשיש רוחב. נבדק ב-667×375 · 740×360 · 844×390 (tests/e2e/round2b-v326.spec.js "(3b)"). */
@media (orientation: landscape) and (max-height: 500px) {
  .ob-card.is-intro { max-height:none; min-height:0; row-gap:4px; column-gap:12px;
    padding-top:8px; padding-bottom:8px; margin-bottom:max(6px, env(safe-area-inset-bottom)); }
  .ob-card.is-intro .ob-text { line-height:1.3; font-size:15px; }
  .ob-card.is-intro .ob-intro-title { margin-bottom:2px; font-size:17px; }
  .ob-card.is-intro .ob-birth { flex:1 1 300px; margin:0; gap:2px 8px; font-size:14px; }
  .ob-card.is-intro .ob-birth-input { min-height:36px; padding:4px 8px; }
  .ob-card.is-intro .ob-birth-why { font-size:12px; }
  .ob-card.is-intro .ob-intro-actions { align-self:center; gap:8px; }
  .ob-card.is-intro .ob-intro-actions .ob-next { padding:8px 18px; font-size:16px; }
  .ob-card.is-intro .ob-ask { font-size:14px; }
}

/* פורטרט (מוצג רק כשההורה בחר "המשך בכל זאת" במסך-הסיבוב) */
@media (orientation: portrait) {
  .ob-card { flex-direction:column; align-items:stretch; max-height:52vh; }
  .ob-next { align-self:stretch; }
  .ob-tuli { max-width:44vw; }
  /* ★ ee-v331 (סוקר עיוור על ee-v330, נכנס ב-ee-v326) — כרטיס-הפתיחה עם שדה התאריך לאורך: בכיוון-עמודה
     flex-wrap:wrap (.is-intro) + flex-basis:100% של .ob-birth = 100% מה**גובה** ⇒ התוכן נשבר לעמודות נוספות, וב-RTL
     הן נוספו משמאל — מחוץ למסך (שדה התאריך, בן/בת). עכשיו: עמודה אחת, השדה בגובה התוכן, ובלי תקרת-גובה לכרטיס-
     הפתיחה (הבמה מתכווצת) כדי שהכל ייכנס בלי גלילה. נבדק ב-375×667 · 390×844 · 768×1024 (round2b-v326.spec.js "(3c)"). */
  .ob-card.is-intro { flex-wrap:nowrap; max-height:none; min-height:0; }
  .ob-card.is-intro .ob-birth { flex:0 0 auto; }
  .ob-card.is-intro .ob-intro-actions { align-self:stretch; flex-wrap:wrap; justify-content:flex-start; }
}