/* engine.css — the SHARED stylesheet of the games engine (all days).
 *
 * Extracted from the day pages (index.html = day 1, day2.html = day 2), which
 * used to carry byte-identical copies of all of this. A day page loads THIS
 * file first, then keeps a small inline <style> with ONLY its per-day sizing
 * overrides — the following selectors get their width/max-width/min-width in
 * the DAY page (values differ per day; everything else about them is here):
 *   .fruitbtn · .wt-obj .fruitbtn · .puzzle · .tgt · .src
 */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* מבטל גרירת-תמונה מובנית של הדפדפן (הצללית שגונבת את ה-pointerup בדסקטופ) */
img { -webkit-user-drag: none; user-drag: none; user-select: none; -webkit-user-select: none; }
html, body { margin: 0; height: 100%; font-family: system-ui, "Segoe UI", Arial, sans-serif; }
body { display: flex; flex-direction: column; background: #fbf7ef; color: #2c2c2a; }
#stagewrap { flex: 1; display: flex; align-items: center; justify-content: center;
             background: radial-gradient(circle at 50% 35%, #fffdf8, #f3ead7); padding: 16px; overflow: hidden; }
#stage { width: 100%; max-width: 900px; text-align: center; }
.single { display: flex; align-items: center; justify-content: center; }

/* ---- אובייקט כתמונה (PNG של אורן) ----
   הגודל (width/max/min) הוא פר-יום — יושב ב-<style> של דף היום. */
.fruitbtn { border: none; background: none; padding: 0; cursor: pointer; aspect-ratio: 1; }
.fruitbtn img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.12)); }
.fruitbtn:active { transform: scale(.96); }

/* ---- וידאו: מסך-מלא תמיד כשמוצג (בית/משחק מאחוריו לא נראה) ----
   כל סרטון בשלב המשחקים (this-is-a, watch-tap, touch-the-x, scratch) הוא
   .vplay — קבוע (fixed) על כל המסך, בלי תיבה/פינות/רקע-קרם סביבו. תפריט
   ההורה (pc-menu-btn, במסמך flow.html העוטף) נשאר מעליו בכוונה. */
.vwrap { position: relative; display: inline-block; }
.vplay { position: fixed; inset: 0; width: 100vw; height: 100dvh; object-fit: contain;
         background: #000; z-index: 40; }
.vtap { position: fixed; inset: 0; margin: auto; width: 92px; height: 92px; border-radius: 50%; border: none;
        background: rgba(255,255,255,.92); color: #1d9e75; font-size: 40px; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.25);
        z-index: 41; }
.vtap:active { transform: scale(.95); }

/* ---- touch-the-x (where is) ----
   בכוונה NOT מסך-מלא: הסרטון ושורת הפירות גלויים יחד באותו מסך —
   הסרטון גדול בצד ימין, הפירות טור אנכי בצד שמאל (עמוד ה-RTL כבר שם
   את האיבר הראשון ב-DOM מימין, אז מספיק לשים את הסרטון קודם). */
.wherex { display: flex; align-items: center; justify-content: center; gap: clamp(16px,4vw,40px); width: 100%; height: 88vh; }
/* flex:1 (לא flex:0 0 auto עם תקרת vmin) — הסרטון תופס את כל הרוחב הפנוי,
   לא רק גודל-מוגבל; height:100% ממלא את כל הגובה שהוקצה ל-.wherex. */
#qvideo { display: block; flex: 1 1 0; min-width: 0; height: 100%; object-fit: contain; border-radius: 18px; background: #000; box-shadow: 0 8px 20px rgba(0,0,0,.18); }
/* טור-פירות במשולש, לא בקו ישר: הראשון נוטה לצד אחד, האמצעי במרכז,
   האחרון נוטה לצד השני. */
.row { display: flex; flex-direction: column; flex: 0 0 auto; gap: 2vh; align-items: center; justify-content: center; width: clamp(170px,44vh,270px); transition: opacity .35s ease; }
.row .fruititem:nth-child(1) { align-self: flex-end; }
.row .fruititem:nth-child(2) { align-self: center; }
.row .fruititem:nth-child(3) { align-self: flex-start; }
/* 3 פריטים בטור, לא בשורה — הגודל חייב להיגזר מהגובה (vh), לא vw/vmin;
   min-width:120px (הכללי, .fruitbtn/.fruititem) יכריח 3×120+gaps לגלוש
   כל מסך לרוחב נמוך מ~400px, ואיבר עליון ייצא מחוץ למסך. */
.row .fruititem { width: 24vh; max-width: 130px; min-width: 56px; }
.row.locked { pointer-events: none; opacity: .55; }   /* נראות מיד, לחיצות רק אחרי שהסרטון נגמר */
.fruititem { position: relative; border: none; background: none; padding: 0; cursor: pointer; width: 26vmin; max-width: 210px; min-width: 120px; aspect-ratio: 1;
             border-radius: 24px; transition: transform .15s ease, filter .25s ease, opacity .25s ease; }
.fruititem img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.12)); }
.fruititem:active { transform: scale(.96); }
.dim { opacity: .4; }
.wrong { animation: nudge .5s ease; } .wrong img { filter: grayscale(.7) opacity(.6); }
@keyframes nudge { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }
.wiggle { animation: wiggle 2.6s ease-in-out infinite; } @keyframes wiggle { 0%,100%{transform:rotate(-4deg)} 50%{transform:rotate(4deg)} }
.celebrate { animation: celebrate .9s ease; } @keyframes celebrate { 0%{transform:scale(1)} 25%{transform:scale(1.2) rotate(-5deg)} 55%{transform:scale(1.1) rotate(4deg)} 100%{transform:scale(1.12)} }
.correctring { box-shadow: 0 0 0 8px #1d9e75, 0 0 32px 6px rgba(29,158,117,.45); background: rgba(29,158,117,.10); border-radius: 24px; }

/* ---- tap-object ×3 (אנימציה שונה בכל טאפ) ---- */
.tap-a1 { animation: tb1 .75s cubic-bezier(.3,1.3,.5,1); } @keyframes tb1 { 0%{transform:translateY(0) scale(1)} 35%{transform:translateY(-48%) scale(1.08,.92)} 70%{transform:translateY(0) scale(1.08,.88)} 100%{transform:translateY(0) scale(1)} }
.tap-a2 { animation: tb2 .8s ease; } @keyframes tb2 { 0%,100%{transform:rotate(0)} 18%{transform:rotate(-26deg)} 50%{transform:rotate(24deg)} 78%{transform:rotate(-12deg)} }
.tap-a3 { animation: tb3 .8s cubic-bezier(.3,1.4,.5,1); } @keyframes tb3 { 0%{transform:scale(1) rotate(0)} 45%{transform:scale(1.6) rotate(18deg)} 100%{transform:scale(1) rotate(0)} }
.tapfruit.locked { opacity: .4; }   /* פרי לא-פעיל עד שהסרטון נגמר */

/* ---- watch-tap: סרטון "מה זה" מסך-מלא, ואז נעלם ומגלה את הפרי-ללחיצה ----
   הגודל של .wt-obj .fruitbtn הוא פר-יום — יושב ב-<style> של דף היום. */
.watchtap { display: flex; flex-direction: column; align-items: center; gap: 2.4vh; }
.wt-video { position: relative; display: inline-block; }

/* ---- puzzle "הקש להמשך" ---- */
.puzzle.invite { animation: invitePulse 1.3s ease-in-out infinite; }
@keyframes invitePulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }

/* ---- puzzle (4 חלקים, טאפ/גרירה) ----
   ה-width של .puzzle הוא פר-יום — יושב ב-<style> של דף היום. */
.puzzle { position: relative; aspect-ratio: 1; margin: 0 auto; }  /* מקום לשורת החלקים מעל */
.puzzle .ghost { position: absolute; inset: 0; background-size: contain; background-repeat: no-repeat; background-position: center; opacity: .13; }
.puzzle .piece { position: absolute; background-repeat: no-repeat;   /* width/height/size נקבעים inline לפי מצב (רבעים/רצועות) */
                 filter: drop-shadow(0 3px 5px rgba(0,0,0,.16)); transition: transform .3s cubic-bezier(.34,1.3,.5,1); cursor: pointer; touch-action: none; }
.puzzle.withbg .piece { background-color: rgba(120,90,50,.09); border-radius: 10px; }   /* רקע קלוש רק לבננה — כדי שהרבע הריק יהיה לחיץ */
/* רצועות אנכיות — כל רצועה חוצה את הפרי, אז לכל חלק יש תוכן (גם לבננה האלכסונית), בלי ריבועים */

/* ---- match-board (תבניות) ----
   הגודל (width/max) של .tgt ו-.src הוא פר-יום — יושב ב-<style> של דף היום. */
.board { display: flex; flex-direction: column; gap: 3vh; align-items: center; }
.targets, .sources { display: flex; gap: 5vmin; justify-content: center; }
.tgt { aspect-ratio: 1; border-radius: 22px; display: flex; align-items: center; justify-content: center;
       box-shadow: inset 0 0 0 4px rgba(255,255,255,.45), 0 6px 14px rgba(0,0,0,.10); }
.tgt img { width: 70%; height: 70%; object-fit: contain; opacity: .26; transition: opacity .3s ease; }
.tgt.filled img { opacity: 0; }
.src { aspect-ratio: 1; border: none; background: none; padding: 0; cursor: pointer;
       transition: transform .6s cubic-bezier(.34,1.3,.5,1); touch-action: none; }
.src img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.12)); }
.src.placed { pointer-events: none; }

/* ---- scratch ---- */
/* מסך-מלא ממש (כמו .vplay) — לא תיבה מוגבלת: התמונה (object-fit:cover
   למטה) ממלאת את כל המסך קצה-לקצה, בלי פינות/רקע-קרם סביבה. */
.scratch { position: fixed; inset: 0; width: 100vw; height: 100dvh; background: #000; overflow: hidden; }
.scratch .scimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scratch .cover { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); touch-action: none; }
.stile { background: #cdbfa0; border: 1px solid #c3b48f; transition: transform .3s ease, opacity .3s ease; transform-origin: center; }
.stile:nth-child(even) { background: #d4c6a6; }
.stile.gone { transform: scale(0); opacity: 0; }

/* ---- thank-you: אייקון בצד ימין (RTL — ראשון ב-DOM), וידאו גדול בצד שמאל,
   בדיוק כמו .wherex (touch-the-x) — רק שכאן הימין הוא אייקון-לחיצה, לא פרי. */
.thankyou { display: flex; align-items: center; justify-content: center; gap: clamp(16px,4vw,40px); width: 100%; height: 88vh; }
.ty-icon { flex: 0 0 auto; width: clamp(230px,46vh,420px); aspect-ratio: 1; border: none; background: none; padding: 0; cursor: pointer; border-radius: 50%; }
.ty-icon svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 10px rgba(0,0,0,.14)); }
.ty-icon.locked { pointer-events: none; opacity: .75; }
/* טבעת-הזמנה מתרחבת שמדגישה "הקש כאן" בלי מילים — עוזרת לפעוט בן 2 להבין שיש כאן פעולה */
.ty-icon.invite { animation: invitePulse 1.3s ease-in-out infinite, tyRipple 1.3s ease-in-out infinite; }
@keyframes tyRipple { 0%{box-shadow:0 0 0 0 rgba(242,193,78,.6)} 100%{box-shadow:0 0 0 26px rgba(242,193,78,0)} }
#ty-video { display: block; flex: 1 1 0; min-width: 0; height: 100%; object-fit: contain; border-radius: 18px; background: #000; box-shadow: 0 8px 20px rgba(0,0,0,.18); }
@keyframes tyBow { 0%,100%{transform:rotate(0deg)} 50%{transform:rotate(6deg)} }
@keyframes tyHeartbeat { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }
.ty-face.ty-anim { animation: tyBow 1.3s ease-in-out infinite; transform-origin: 60px 52px; }
.ty-hearts.ty-anim { animation: tyHeartbeat .8s ease-in-out infinite; transform-origin: 60px 90px; }

/* ---- yes / no ---- */
.yesno { display: flex; gap: 6vmin; justify-content: center; align-items: flex-start; }
.yncol { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ynvid { width: min(34vmin, 300px); aspect-ratio: 1; border-radius: 18px; background: #000; box-shadow: 0 8px 20px rgba(0,0,0,.18); object-fit: cover; }
.ynbtn { width: 76px; height: 76px; border-radius: 50%; border: none; font-size: 38px; cursor: pointer; box-shadow: 0 5px 14px rgba(0,0,0,.2); }
.ynbtn.yes { background: #e7f6ec; } .ynbtn.no { background: #fdecea; }
.ynbtn:active { transform: scale(.94); }
.ynbtn:disabled { opacity: .45; cursor: default; }   /* חסום בזמן שסרטון מתנגן */

/* ---- let's cut the X (נוסף ביום 2; חלק מהמנוע המשותף) ---- */
.cutstage { display: flex; flex-direction: column; align-items: center; gap: 6vh; padding-top: 2vh; }
.cutrow { display: flex; gap: 7vmin; justify-content: center; }
.cutslot { position: relative; width: min(25vw, 44vh, 270px); aspect-ratio: 1; overflow: visible; }
/* חיתוך: החלפת הפרי-השלם בתמונת-פרי-חתוך אמיתית (Nano Banana) — בלי clip-path */
.cutslot img.whole, .cutslot img.cut { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.12)); }
.cutslot img.whole { opacity: 1; transition: opacity .2s ease; }
.cutslot img.cut   { opacity: 0; transform: scale(.86); transition: opacity .25s ease, transform .4s cubic-bezier(.34,1.55,.5,1); }
.cutslot.done img.whole { opacity: 0; }
.cutslot.done img.cut   { opacity: 1; transform: scale(1); }
.flash { position:absolute; inset:0; background:#fff; opacity:0; border-radius:50%; pointer-events:none; }
.cutslot.flash-on .flash { animation: flashPop .3s ease; }
@keyframes flashPop { 0%{opacity:.85; transform:scale(.3)} 100%{opacity:0; transform:scale(1.4)} }
.knifewrap { width: min(22vw, 26vh, 200px); touch-action: none; cursor: pointer; }
.knifewrap img { width: 100%; display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)); transition: transform .35s cubic-bezier(.34,1.3,.5,1); }
.cutlabel { font-size: clamp(15px,3vmin,22px); font-weight: 500; color: #6b6a64; }

/* ---- an X for [child] (נוסף ביום 2; חלק מהמנוע המשותף) —
   שתי שורות; חייב להיכנס בגובה נמוך (landscape) ---- */
.giftstage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5vh; padding-top: 0; height: 100%; }
.kidsrow { display: flex; gap: 5vmin; justify-content: center; }
.kidtgt { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.kidcircle { width: min(22vw, 34vh, 210px); aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center;
             box-shadow: inset 0 0 0 4px rgba(255,255,255,.4), 0 6px 14px rgba(0,0,0,.12); position: relative; overflow: hidden; }
/* תמונת הילד ממלאת את העיגול; צבע-הרקע של העיגול (מהתוכן) נשאר מתחתיה כטבעת/
   גיבוי אם התמונה לא נטענת. ה-slot (משבצת נחיתת-הפרי) מצויר מעליה. */
.kidcircle .kidphoto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.kidcircle .slot { width: 62%; height: 62%; border-radius: 50%; background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; position: relative; }
.kidcircle .slot img { width: 78%; height: 78%; object-fit: contain; opacity: 0; transition: opacity .3s ease; filter: drop-shadow(0 4px 8px rgba(0,0,0,.2)); }
.kidtgt.filled .kidcircle .slot img { opacity: 1; }
.kidtgt.filled .kidcircle { box-shadow: inset 0 0 0 4px #fff, 0 0 0 6px rgba(29,158,117,.5), 0 6px 14px rgba(0,0,0,.12); }
.kidname { font-size: clamp(13px,2.6vmin,18px); font-weight: 500; }
.fruitsrow { display: flex; gap: 5vmin; justify-content: center; }
.giftfruit { width: min(20vw, 30vh, 190px); aspect-ratio: 1; border: none; background: none; padding: 0; cursor: pointer; touch-action: none; }
.giftfruit img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.12)); transition: transform .5s cubic-bezier(.34,1.3,.5,1); }
.giftfruit.placed { opacity: 0; pointer-events: none; }

/* ---- feedback ---- */
.badge { position: absolute; top: -8%; right: -8%; width: 38%; height: 38%; border-radius: 50%; display: flex; align-items: center; justify-content: center;
         color: #fff; font-size: 7vmin; font-weight: 700; box-shadow: 0 4px 12px rgba(0,0,0,.25); animation: pop .4s ease; background: #1d9e75; }
@keyframes pop { 0%{transform:scale(0)} 70%{transform:scale(1.25)} 100%{transform:scale(1)} }
.spark { position: absolute; width: 14px; height: 14px; border-radius: 50%; left: 50%; top: 40%; background: #ffd23f; pointer-events: none; animation: spark .8s ease-out forwards; }
@keyframes spark { 0%{transform:scale(0);opacity:1} 100%{transform:scale(1.6) translate(var(--dx),var(--dy));opacity:0} }

/* מוצג רק עם ?debug=1 (כלי-פיתוח, לא לילד/הורה בשימוש רגיל) */
#panel { display: none; background: #1f1e1c; color: #e9e6df; font-family: ui-monospace, "Consolas", monospace; max-height: 30vh; overflow-y: auto; padding: 10px 14px; border-top: 3px solid #d8c89e; }
#panel.is-visible { display: block; }
#panel h2 { font-family: system-ui, sans-serif; font-size: 13px; font-weight: 500; margin: 0 0 8px; color: #d8c89e; }
.ev { font-size: 12px; line-height: 1.5; padding: 3px 0; border-bottom: 1px solid #34322e; white-space: pre-wrap; word-break: break-word; }
.ev .ty { color: #c3b3f0; } .ev .ok { color: #8fd28f; } .ev .no { color: #e8a06a; } .ev .na { color: #b9b6ae; } .ev .k { color: #8fb4e0; }

#overlay { position: fixed; inset: 0; background: #fbf7ef; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; z-index: 10; }
#overlay h1 { font-weight: 500; font-size: clamp(20px,4vmin,30px); margin: 0; }
#overlay p { color: #6b6a64; margin: 0; max-width: 460px; text-align: center; line-height: 1.6; }
#startbtn { font-size: 22px; font-weight: 500; padding: 16px 42px; border: none; border-radius: 16px; background: #1d9e75; color: #fff; cursor: pointer; }
#startbtn:active { transform: scale(.97); }