/* flow.css — the daily-content flow surface.
   Two full-screen phases (lesson video, then games iframe). Black stage so a
   letterboxed video reads clean; no chrome, no controls for the child. */

/* touch-callout/user-select על הכל — בלי זה לחיצה ארוכה (המחווה שחושפת את
   בקרות-ההורה!) מקפיצה ב-iOS את תפריט-המערכת או את זכוכית-המגדלת. */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; }
/* ר' engine.css — אותו נימוק. זה עמוד-האב שמארח את מסגרת-המשחקים, ולכן
   הוא זה שסופג את ה-overscroll אם המסגרת משרשרת החוצה. */
html, body { margin: 0; height: 100%; overscroll-behavior: none; }

/* ★ נסקופ ל-body.flow-active (24.7.26, איחוד בית+flow): הגיליון הזה נטען
   עכשיו גם במסך-הבית, כדי שהקשת המסקוט תפעיל את הזרימה **באותו מסמך** —
   ההקשה עצמה היא מחוות-המשתמש, ולכן הסרטון מתחיל עם קול בלי "פליי" ובלי
   מסך שחור (מדיניות ה-autoplay של iOS, הכרעת אורן 22.7). לפני שהזרימה
   הוזנקה, למסך-הבית אסור לקבל רקע שחור — ולכן הכללים חיים תחת המחלקה. */
body.flow-active {
  background: #000;
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
}
body { -webkit-user-select: none; user-select: none; }

/* סימוני-הזרימה קיימים במסמך-הבית עוד לפני ההזנקה — מוסתרים עד אז.
   (pc-menu-btn/pc-scrub ממילא נסתרים כברירת-מחדל ע"י parent-controls.css.) */
body:not(.flow-active) .lesson { display: none; }
/* ומהרגע שהזרימה חיה — מסך-הבית וכל שכבותיו יורדים. */
body.flow-active .home { display: none; }
body.flow-active [data-role="install-banner"] { display: none; }

/* ---- Phase 1: lesson video ---- */
.lesson {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  width: 100vw;
  height: 100vh; height: 100dvh;
  object-fit: contain;   /* whole frame visible, letterboxed on black */
  background: #000;
  display: block;
  -webkit-touch-callout: none;  /* iOS: no long-press callout (save/share menu) */
  -webkit-user-select: none; user-select: none;
  /* Android: without this, the browser's own long-press gesture recognizer
     cancels our pointer sequence (pointercancel) well before our 2s timer
     completes — contextmenu-prevention alone isn't enough. */
  touch-action: none;
}
/* Belt-and-braces: even if a UA tries to show native controls, keep them
   out of the child's reach. Skip-prevention is the SPEC's core principle. */
.lesson::-webkit-media-controls { display: none !important; }
.lesson::-webkit-media-controls-enclosure { display: none !important; }

/* חיווי-בלבד ל-autoplay חסום — עיצוב זהה ל-.vtap של המשחקים (engine.css).
   ★ pointer-events:none בכוונה (אורן 29.7.26, אחרי שנתפס בבדיקות): הטאפ
   האמיתי כבר מטופל ע"י wireScrub שרשום על הווידאו עצמו (resumeVideo —
   "טאפ קצר תמיד רק מחלץ", אורן 24.7.26); אם האלמנט הזה יקבל אירועי-מצביע
   הוא ימוקם *מעל* הווידאו בדיוק במרכז המסך ויבלע את הלחיצה-הארוכה של
   ההורה (שגם היא רשומה על הווידאו) — זה מה ששבר את tests/e2e/
   parent-controls.spec.js. האלמנט הזה הוא אפוא חיווי-ויזואלי טהור: אומר
   לילד/הורה "גע כאן", אבל הנגיעה עצמה עוברת מבעדו לווידאו שמתחתיו. */
.lesson-vtap {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; margin: auto;
  width: 92px; height: 92px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.92); color: #1d9e75; font-size: 40px;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  z-index: 5; pointer-events: none;
}
/* ★ טבעת-הזמנה פועמת (אורן 30.7.26, "לא ברור שצריך לעשות טאפ"): אותה שפה
   לא-מילולית של רמז-הטאפ מהמשחקים — הילד מזהה "כאן נוגעים" בלי מילים. */
.lesson-vtap::after {
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  border: 4px solid rgba(29,158,117,.85);
  animation: lesson-vtap-pulse 1.2s ease-out infinite;
  pointer-events: none;
}
@keyframes lesson-vtap-pulse {
  0%   { transform: scale(.9);  opacity: .9; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* ---- מסך-ההזמנה: "הכול מתחיל מהמסקוט" (30.7.26) ----
   מוצג בכל כניסה שנולדה בלי מחוות-משתמש (flow.html עצמאי: ריפליי/שחזור-מרקע).
   רקע רך כמו הבית, עיגול-המסקוט עם טבעת פועמת ונשימה — אותה שפה בדיוק כמו
   הכפתור בבית (home.css .hero-*), כדי שהילד יזהה "כאן נוגעים" בלי מילים.
   הקשה בכל מקום על השכבה מתחילה את היום (flow.js showInvite). */
.ee-invite {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 600;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(8px, 2vh, 20px);
  background: #F7F1E6;
  cursor: pointer;
}
.ee-invite-stage { position: relative; display: grid; place-items: center; }
.ee-invite-ring {
  position: absolute; left: 50%; top: 50%;
  width: 106%; height: 106%;
  border-radius: 50%;
  border: 5px solid rgba(245,154,46,.6);
  transform: translate(-50%,-50%);
  animation: eeInviteRing 1.9s ease-out infinite;
  pointer-events: none;
}
@keyframes eeInviteRing {
  0%       { transform: translate(-50%,-50%) scale(1);    opacity: .85; }
  70%,100% { transform: translate(-50%,-50%) scale(1.22); opacity: 0; }
}
.ee-invite-disc {
  --size: clamp(150px, 54vh, 240px);
  width: var(--size); height: var(--size);
  border-radius: 50%;
  background: linear-gradient(160deg, #FFE3A8, #F7C56E);
  box-shadow: 0 10px 26px rgba(120,90,40,.28);
  display: flex; align-items: flex-end; justify-content: center;
  position: relative; overflow: hidden;
  animation: eeInviteBreathe 3.2s ease-in-out infinite;
}
.ee-invite-disc::after {
  content: ""; position: absolute;
  top: 12%; inset-inline-start: 14%;
  width: 34%; height: 30%;
  background: rgba(255,255,255,.55);
  border-radius: 50%;
  filter: blur(10px);
  pointer-events: none;
}
.ee-invite-mascot {
  width: 78%; height: 88%;
  object-fit: contain; object-position: bottom center;
  display: block;
  filter: drop-shadow(0 8px 12px rgba(80,60,40,.18));
  position: relative; z-index: 1;
}
@keyframes eeInviteBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.ee-invite-sub {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: clamp(.8rem, 2.8vh, 1.05rem);
  color: #8a7a63;
}
@media (prefers-reduced-motion: reduce) {
  .ee-invite-ring { animation: none; opacity: .6; }
  .ee-invite-disc { animation: none; }
}

/* ---- חלונות-הווידאו של המשחקים (30.7.26, סעיף ג') ----
   שני נגנים קבועים של המעטפת, מוטבלים בהקשת-המסקוט/ההזמנה. המנוע (same-origin)
   ממקם אותם מעל ה-iframe בדיוק על מלבן-הסרטון שבמשחק וכותב להם inline-style;
   כאן רק ברירת-המחדל: נסתרים, ובלי אירועי-מצביע — כל הקשה עוברת מבעדם למשחק.
   z-index 40: מעל ה-iframe (auto), הרחק מתחת לבקרות-ההורה (800+) ולהזמנה (600). */
.ee-vwin {
  position: fixed; display: none; pointer-events: none; z-index: 40;
  background: #000;
}

/* ---- Phase 2: games engine (mounted after the video) ---- */
.games-frame {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0; inset: 0;
  width: 100vw;
  height: 100vh; height: 100dvh;
  border: 0;
  display: block;
  background: #fbf7ef;   /* matches the engine's own background */
}