@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap');
        body, html { 
            margin: 0; padding: 0;
            width: 100%; height: 100%; 
            overflow: hidden; font-family: 'Rubik', sans-serif;
            background: radial-gradient(circle at center, #fffde7 0%, #ffecb3 100%);
            transition: background 1s ease-in-out;
            overscroll-behavior: none; touch-action: pan-x pan-y;
            -webkit-text-size-adjust: 100%;
        }
        * { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
        input, textarea, select { font-size: 16px; } /* מונע זום אוטומטי באייפון */

        /* ===== התאמות כלליות לפלאפון ===== */
        @media (max-width: 640px) {
            #status-panel { top: 96px !important; left: 10px !important; padding: 10px 16px !important; }
            .status-item { font-size: 15px !important; }
            #shop-panel, #admin-panel, #tamagotchi-panel, #larva-panel, #bag-panel {
                width: 94% !important; max-width: 94vw !important; padding: 16px !important;
                height: 88vh !important; border-radius: 18px !important;
            }
            /* 🆕 בפלאפון החווה במסך מלא אמיתי - זו אפליקציה לנייד בראש ובראשונה! בלי שוליים,
               בלי פינות מעוגלות, כל פיקסל הולך לשדה עצמו - גם בדו-ממד וגם בתלת-ממד */
            #farm-panel {
                width: 100vw !important; max-width: 100vw !important;
                height: 100dvh !important; border-radius: 0 !important;
                top: 0 !important; left: 0 !important; transform: none !important;
                padding: 6px 6px calc(6px + env(safe-area-inset-bottom)) 6px !important;
                border-width: 0 !important;
            }
            .farm-title { font-size: 16px; margin: 42px 0 2px 0; } /* פינוי מקום לשורת הכפתורים העליונה */
            .farm-subtitle { font-size: 11px; padding: 3px 10px; margin-bottom: 5px; }
            #farmer-level-badge { padding: 3px 10px; font-size: 11.5px; gap: 5px; margin-bottom: 5px; }
            .farmer-level-bar { width: 64px; height: 7px; }
            .placement-toolbar {
                flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
                gap: 6px; padding: 3px 2px; margin-bottom: 5px;
                -webkit-overflow-scrolling: touch; scrollbar-width: none;
            }
            .placement-toolbar::-webkit-scrollbar { display: none; }
            .placement-toolbar button { flex: 0 0 auto; height: 38px; font-size: 12px; padding: 0 11px; }
            #farm-area { border-radius: 10px; border-width: 2px; margin-bottom: 6px; }
            #farm-hint { font-size: 11px; min-height: 14px; margin-bottom: 2px; }
            #farm-bees-raised-label { font-size: 11px !important; margin: 3px 0 !important; }
            .farm-close-btn { margin-top: 5px; height: 40px; font-size: 14px; }
            /* ג'ויסטיק גדול יותר לאגודל בנייד */
            #farm-joystick { width: 110px !important; height: 110px !important; }
            #farm-joystick-knob { width: 48px !important; height: 48px !important; margin: -24px 0 0 -24px !important; }
            #farm-minimap { width: 92px !important; height: 92px !important; top: 8px; right: 8px; }
            #ui { width: 94%; bottom: 12px; gap: 10px; }
            #bubble { font-size: 15px; padding: 12px 14px; max-height: 30vh; overflow-y: auto; }
            button { font-size: 15px; padding: 0 20px; height: 46px; }
            input { font-size: 16px; padding: 12px 18px; }
            .shop-icon { font-size: 26px; }
            .item-row { font-size: 13px; padding: 10px; }
        }

        #canvas-wrapper { 
            width: 100vw;
            height: 100dvh; /* 🆕 גובה דינמי אמיתי בנייד - עוקב אחרי שורת הכתובת שנפתחת/נסגרת, בלי שטח מת */
            position: fixed; top: 0; left: 0; z-index: 1; 
            display: flex; justify-content: center; align-items: center;
        }
        /* 🆕 הקנבס הראשי תמיד ממלא את העטיפה חזותית - גם אם רזולוציית הציור מתעדכנת רגע אחר-כך,
           לא נשארים "שטחים מתים" ריקים במסך כמו שקרה בנייד */
        #canvas-wrapper canvas { width: 100% !important; height: 100% !important; display: block; }

        #ui { 
            position: absolute;
            bottom: 30px; left: 50%; transform: translateX(-50%); 
            width: 90%; max-width: 700px; z-index: 10; 
            display: flex; flex-direction: column; align-items: center; gap: 15px;
            pointer-events: none; 
        }

        #bubble { 
            background: rgba(255, 255, 255, 0.95);
            padding: 25px; border-radius: 25px; 
            border-bottom-right-radius: 5px; border: 2px solid #f9a825;
            color: #3e2723; font-size: 20px; line-height: 1.5; font-weight: bold; 
            text-align: center;
            width: 100%; box-shadow: 0 10px 30px rgba(0,0,0,0.15); 
            display: none; pointer-events: auto;
            animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        @keyframes popIn {
            from { opacity: 0; transform: scale(0.8) translateY(20px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }

        .input-group { 
            display: flex; width: 100%; gap: 10px; pointer-events: auto; 
            background: rgba(255,255,255,0.6); padding: 10px; border-radius: 60px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }

        input { 
            flex: 1; padding: 15px 25px; border-radius: 50px; border: 2px solid #f9a825;
            font-size: 18px; outline: none; text-align: right; background: white;
        }

        button { 
            background: linear-gradient(135deg, #f9a825, #f57f17);
            color: white; border: none; padding: 0 35px; 
            border-radius: 50px; font-weight: bold; cursor: pointer; font-size: 18px;
            box-shadow: 0 5px 10px rgba(0,0,0,0.2); transition: transform 0.2s;
        }

        button:hover { transform: scale(1.05); }

        /* 🆕 כפתור הקלטה קולית - זיהוי דיבור בעברית / אנגלית / פורטוגזית */
        #mic-btn {
            background: linear-gradient(135deg, #4fc3f7, #0288d1);
            color: white; border: none; width: 54px; height: 54px; border-radius: 50%;
            font-size: 22px; cursor: pointer; box-shadow: 0 5px 10px rgba(0,0,0,0.2);
            display: flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0;
            transition: transform 0.2s;
        }
        #mic-btn:hover { transform: scale(1.05); }
        #mic-btn.listening {
            background: linear-gradient(135deg, #ef5350, #c62828);
            animation: micPulse 1.1s infinite;
        }
        @keyframes micPulse {
            0% { box-shadow: 0 0 0 0 rgba(239,83,80,0.6); }
            70% { box-shadow: 0 0 0 14px rgba(239,83,80,0); }
            100% { box-shadow: 0 0 0 0 rgba(239,83,80,0); }
        }
        @media (max-width: 640px) {
            #mic-btn { width: 46px; height: 46px; font-size: 19px; }
        }
        /* 🆕 קרדיט יוצר - דניאל - מוצג באופן קבוע וגלוי כדי לשמר את זכויות היוצר על הדמות */
        #creator-credit-overlay {
            margin-top: 22px; font-size: 14px; color: #ffe082; opacity: 0.9; text-align: center; line-height: 1.6;
        }
        #creator-credit-badge {
            position: fixed; bottom: 8px; left: 8px; z-index: 50;
            background: rgba(62,39,35,0.55); color: #ffe082; font-size: 11px; font-weight: bold;
            padding: 4px 10px; border-radius: 12px; pointer-events: none; letter-spacing: 0.2px;
            font-family: 'Rubik', sans-serif; user-select: none;
        }
        @media (max-width: 640px) {
            #creator-credit-badge { font-size: 10px; padding: 3px 8px; bottom: 6px; left: 6px; }
        }

        #start-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            /* 🆕 רקע חם ומזמין יותר - גרדיאנט דבש-שקיעה במקום חום כהה שטוח */
            background: linear-gradient(160deg, #4e342e 0%, #5d4037 45%, #6d4c41 100%);
            z-index: 9999;
            display: flex; flex-direction: column;
            justify-content: center; align-items: center;
            color: white; text-align: center;
            overflow: hidden;
        }
        /* 🆕 פתיחה ידידותית: הכותרת והכפתור מופיעים ברכות בהדרגה */
        #start-overlay h1 { animation: welcomeIn 0.9s ease-out both; }
        #start-overlay p { animation: welcomeIn 0.9s 0.25s ease-out both; }
        #start-btn { animation: welcomeIn 0.9s 0.5s ease-out both, pulse 2s 1.4s infinite; }
        #creator-credit-overlay, #bazzy-version-stamp { animation: welcomeIn 1s 0.7s ease-out both; }
        @keyframes welcomeIn {
            from { opacity: 0; transform: translateY(18px) scale(0.96); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        /* 🆕 דבורה קטנה שמרחפת לרוחב מסך הפתיחה - קבלת פנים חיה וחמודה */
        #start-overlay::before {
            content: '🐝'; position: absolute; top: 18%; left: -60px; font-size: 34px;
            animation: welcomeBeeFly 7s linear infinite;
            filter: drop-shadow(0 3px 5px rgba(0,0,0,0.4));
        }
        @keyframes welcomeBeeFly {
            0% { left: -60px; top: 18%; transform: rotate(8deg); }
            25% { top: 12%; transform: rotate(-6deg); }
            50% { top: 22%; transform: rotate(8deg); }
            75% { top: 14%; transform: rotate(-6deg); }
            100% { left: calc(100% + 60px); top: 18%; transform: rotate(8deg); }
        }
        /* 🆕 יציאה רכה מהמסך - דהייה החוצה עם התקרבות קלה, במקום היעלמות פתאומית */
        #start-overlay.overlay-fade-out {
            opacity: 0; transform: scale(1.04);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
            pointer-events: none;
        }
        #start-btn {
            margin-top: 30px; padding: 15px 50px; font-size: 24px;
            background: #ffcc00; color: #3e2723; border: 4px solid white;
            cursor: pointer; border-radius: 50px; animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        /* ===== TOP BUTTON BAR - flex-wrapping row so it works on any screen width ===== */
        #top-bar {
            /* 🆕 safe-area - מכבד את ה"נוץ'" והפינות המעוגלות של אייפונים/אנדרואידים מודרניים */
            position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); left: max(12px, env(safe-area-inset-left)); z-index: 100;
            display: flex; flex-direction: row-reverse; flex-wrap: wrap; gap: 10px;
            justify-content: flex-start; pointer-events: none;
        }
        .top-btn {
            position: static; z-index: 100;
            background: rgba(255, 255, 255, 0.9); border: 2px solid #f9a825; border-radius: 50%;
            width: 48px; height: 48px; cursor: pointer; font-size: 22px;
            pointer-events: auto; padding: 0; display: flex; justify-content: center; align-items: center;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1); touch-action: manipulation; flex: 0 0 auto;
        }
        @media (max-width: 640px) {
            /* 🆕 שורת כפתורים אחת נגללת אופקית במקום גלישה לכמה שורות - חוסך המון גובה מסך יקר בטלפון
               ונראה כמו אפליקציה מקצועית. הגלילה חלקה במגע, ומוסתר פס הגלילה עצמו. */
            #top-bar {
                top: max(8px, env(safe-area-inset-top)); right: 8px; left: 8px; gap: 8px;
                flex-wrap: nowrap; overflow-x: auto; overflow-y: visible; padding-bottom: 4px;
                -webkit-overflow-scrolling: touch; scrollbar-width: none; pointer-events: auto;
            }
            #top-bar::-webkit-scrollbar { display: none; }
            .top-btn { width: 42px; height: 42px; font-size: 18px; }
        }
        @media (max-width: 400px) {
            .top-btn { width: 38px; height: 38px; font-size: 16px; }
        }
        /* 🆕 רקע כהה עדין מאחורי תפריט פתוח בטלפון - ממקד את העין ומבהיר שסוגרים בלחיצה בחוץ */
        #menu-backdrop {
            position: fixed; inset: 0; z-index: 100; display: none;
            background: rgba(0,0,0,0.35); backdrop-filter: blur(1.5px);
        }
        @media (min-width: 641px) { #menu-backdrop { display: none !important; } } /* רק בטלפון */

        /* 🆕 תפריט בחירת שפה - נגיש למבקר ישירות מהמסך הראשי */
        #lang-menu {
            position: fixed; top: 68px; right: 12px; z-index: 101;
            background: rgba(255,255,255,0.98); border: 2px solid #f9a825; border-radius: 16px;
            padding: 10px; box-shadow: 0 8px 20px rgba(0,0,0,0.2); min-width: 190px;
            display: none;
        }
        #lang-menu .lang-menu-title {
            font-weight: bold; text-align: center; margin-bottom: 8px; color: #3e2723; font-size: 14px;
        }
        .lang-option {
            display: block; width: 100%; text-align: right; background: #fff8e1; border: 2px solid transparent;
            border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; font-size: 15px; cursor: pointer;
            color: #3e2723; font-family: 'Rubik', sans-serif;
        }
        .lang-option:last-child { margin-bottom: 0; }
        .lang-option-active { border-color: #f9a825; background: #ffe082; font-weight: bold; }
        @media (max-width: 640px) {
            /* 🆕 בטלפון התפריט צמוד מתחת לשורת הכפתורים היחידה, ולא חופף אותה */
            #lang-menu { top: calc(max(8px, env(safe-area-inset-top)) + 52px); right: 8px; left: 8px; min-width: 0; max-height: 55vh; overflow-y: auto; }
        }

        /* 🆕 פאנל עוצמת קול של באזי - נפרד מהמוזיקה/השתקה, כדי לאפשר לשמוע שירים ברקע בלי שבאזי ידבר חזק מדי */
        #voice-vol-menu {
            position: fixed; top: 68px; right: 12px; z-index: 101;
            background: rgba(255,255,255,0.98); border: 2px solid #f9a825; border-radius: 16px;
            padding: 14px; box-shadow: 0 8px 20px rgba(0,0,0,0.2); min-width: 220px;
            display: none;
        }
        #voice-vol-menu .lang-menu-title {
            font-weight: bold; text-align: center; margin-bottom: 10px; color: #3e2723; font-size: 14px;
        }
        #voice-vol-slider { width: 100%; accent-color: #f9a825; cursor: pointer; }
        @media (max-width: 640px) {
            #voice-vol-menu { top: calc(max(8px, env(safe-area-inset-top)) + 52px); right: 8px; left: 8px; min-width: 0; max-height: 55vh; overflow-y: auto; }
        }

        #status-panel {
            position: fixed; top: 80px; left: 20px; z-index: 100;
            background: rgba(255, 255, 255, 0.9); padding: 15px 25px;
            border-radius: 20px; border: 3px solid #f9a825; display: none; 
            flex-direction: column; gap: 10px; align-items: center;
            box-shadow: 0 5px 15px rgba(0,0,0,0.15); pointer-events: auto;
        }

        .status-item { font-size: 20px; font-weight: bold; color: #3e2723; }

        #feed-btn {
            background: #4caf50; font-size: 16px; padding: 10px 20px;
            display: none; animation: pulse 1.5s infinite;
        }

        #shop-panel, #admin-panel, #farm-panel { 
            position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); 
            width: 90%; max-width: 550px; background: white; 
            z-index: 1000; padding: 25px; border-radius: 25px; 
            box-shadow: 0 0 60px rgba(0,0,0,0.4); display: none; 
            flex-direction: column; border: 5px solid #f9a825; pointer-events: auto;
        }
        #shop-panel { height: 80vh; }
        #admin-panel { height: 85vh; }
        
        #farm-panel {
            max-width: 1400px; width: 98%; height: 93vh; 
            background: linear-gradient(to bottom, #dcedc8, #aed581); 
            border: 5px solid #33691e;
        }
        .farm-title {
            color:#1b5e20; margin: 0 0 4px 0; text-align:center; font-size: 24px;
            text-shadow: 0 2px 0 rgba(255,255,255,0.6), 0 1px 4px rgba(0,0,0,0.15);
            letter-spacing: 0.3px;
        }
        .farm-title-icon { display:inline-block; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25)); }
        .farm-subtitle {
            text-align:center; font-weight:600; margin:0 0 10px 0; color:#33691e; font-size:13.5px;
            background: rgba(255,255,255,0.35); border-radius: 20px; padding: 5px 14px;
            display: block; width: fit-content; margin-left:auto; margin-right:auto;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
        }
        /* 🆕 שמש מונפשת בפינת השדה - ליבה זוהרת + קרניים מסתובבות לאט, חיה ולא סטטית */
        #farm-sun { position: absolute; top: 4%; right: 8%; width: 64px; height: 64px; z-index: 1; pointer-events: none; }
        .farm-sun-core {
            position: absolute; inset: 12px; border-radius: 50%;
            background: radial-gradient(circle, #fff9c4 15%, #ffe082 55%, rgba(255,213,79,0.0) 100%);
            box-shadow: 0 0 22px 8px rgba(255,224,130,0.55);
            animation: sunPulse 5s ease-in-out infinite;
        }
        .farm-sun-rays {
            position: absolute; inset: 0; border-radius: 50%;
            background: repeating-conic-gradient(rgba(255,224,130,0.5) 0deg 9deg, rgba(255,224,130,0) 9deg 30deg);
            animation: sunSpin 26s linear infinite;
        }
        @keyframes sunSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        @keyframes sunPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
        /* 🆕 מצב לילה בחווה הדו-ממדית - גוון כחול-סגול עדין + הסתרת השמש, לפי שעון המכשיר */
        #farm-night-overlay {
            position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0;
            background: linear-gradient(to bottom, rgba(13,27,61,0.5) 0%, rgba(13,27,61,0.32) 40%, rgba(26,35,64,0.38) 100%);
            transition: opacity 1.2s ease-in-out;
        }
        #farm-area.farm-night #farm-night-overlay { opacity: 1; }
        #farm-area.farm-night #farm-sun { display: none; }
        #farm-area.farm-night .farm-butterfly, #farm-area.farm-night .farm-bug { display: none; } /* פרפרים וחיפושיות ישנים בלילה */
        #farm-area.farm-night .farm-pollen {
            background: radial-gradient(circle, rgba(212,255,79,0.95) 0%, rgba(212,255,79,0) 75%);
            box-shadow: 0 0 6px rgba(212,255,79,0.8); /* 🆕 בלילה חלקיקי האבקה הופכים לגחליליות זוהרות */
        }
        /* 🆕 חלקיקי אבקה מרחפים - נקודות צהבהבות זעירות שנעות לאט באוויר של החווה, עומק ואווירה */
        .farm-pollen {
            position: absolute; width: 5px; height: 5px; border-radius: 50%;
            background: radial-gradient(circle, rgba(255,235,120,0.9) 0%, rgba(255,235,120,0) 75%);
            pointer-events: none; z-index: 3;
            animation: pollenFloat 9s infinite ease-in-out;
        }
        .pollen1 { top: 30%; left: 15%; animation-delay: 0s; }
        .pollen2 { top: 55%; left: 70%; animation-delay: -1.8s; animation-duration: 11s; }
        .pollen3 { top: 40%; left: 45%; animation-delay: -3.5s; animation-duration: 8s; }
        .pollen4 { top: 65%; left: 25%; animation-delay: -5s; animation-duration: 12s; }
        .pollen5 { top: 25%; left: 85%; animation-delay: -6.5s; animation-duration: 10s; }
        .pollen6 { top: 75%; left: 55%; animation-delay: -8s; animation-duration: 9.5s; }
        @keyframes pollenFloat {
            0%, 100% { transform: translate(0, 0); opacity: 0.35; }
            25% { transform: translate(14px, -18px); opacity: 0.85; }
            50% { transform: translate(-8px, -30px); opacity: 0.55; }
            75% { transform: translate(10px, -12px); opacity: 0.8; }
        }
        /* 🆕 תג דרגת הדבוראי - מציג את הדרגה הנוכחית + פס התקדמות ל-XP, כמו במשחק אמיתי */
        #farmer-level-badge {
            display: flex; align-items: center; gap: 8px; justify-content: center; flex-wrap: wrap;
            margin: 0 auto 8px auto; padding: 5px 16px; width: fit-content; max-width: 94%;
            background: linear-gradient(135deg, rgba(255,213,79,0.35), rgba(255,183,77,0.28));
            border: 1.5px solid rgba(245,127,23,0.5); border-radius: 20px;
            font-size: 13.5px; font-weight: bold; color: #4e342e;
            box-shadow: 0 2px 6px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.4);
        }
        .farmer-level-icon { font-size: 17px; }
        .farmer-level-xp { font-size: 11.5px; color: #6d4c41; font-weight: 600; }
        .farmer-level-bar {
            display: inline-block; width: 90px; height: 8px; border-radius: 6px; overflow: hidden;
            background: rgba(255,255,255,0.55); border: 1px solid rgba(0,0,0,0.12); vertical-align: middle;
        }
        .farmer-level-fill {
            display: block; height: 100%; border-radius: 6px;
            background: linear-gradient(to right, #ffb300, #f57f17);
            transition: width 0.5s ease-out;
        }
        .farm-close-btn {
            background: linear-gradient(135deg, #757575, #424242) !important; color:white;
            display:block; margin: 10px auto 0 auto;
            box-shadow: 0 3px 10px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
        }

        #farm-area {
            position: relative; flex: 1; 
            background:
                radial-gradient(circle at 80% 12%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 9%),   /* שמש */
                radial-gradient(ellipse at 18% 14%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 8%),   /* ענן */
                radial-gradient(ellipse at 42% 9%, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 7%),     /* ענן */
                /* 🆕 מרקם דשא עשיר יותר - שני שכבות שיבולים בזוויות שונות ובגדלים שונים, לא רק פס דק אחד */
                repeating-linear-gradient(95deg, rgba(255,255,255,0.07) 0px, rgba(255,255,255,0.07) 2px, transparent 2px, transparent 9px),
                repeating-linear-gradient(85deg, rgba(0,40,0,0.06) 0px, rgba(0,40,0,0.06) 1px, transparent 1px, transparent 13px),
                repeating-linear-gradient(105deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 21px),
                linear-gradient(to bottom,
                    #aee1f9 0%, #cdeafb 12%,      /* שמיים */
                    #dff3c4 20%, #a8d472 34%,      /* קו אופק - רחוק ומעומעם */
                    #8bc34a 55%, #6ba83a 75%,      /* אמצע השדה */
                    #558b2f 100%);                 /* קרוב וכהה יותר - תחושת עומק */
            background-size: auto, auto, auto, auto, auto, auto, 100% 100%;
            border-radius: 15px; border: 4px solid #33691e; overflow: hidden; 
            cursor: crosshair; margin-bottom: 15px; box-shadow: inset 0 0 30px rgba(0,0,0,0.4);
            touch-action: none;
        }
        /* 🆕 טפטופי דשא קטנים ומפוזרים (SVG חוזר) - נותנים תחושת דשא אמיתי במקום גרדיאנט שטוח בלבד */
        #farm-area::before {
            content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40'%3E%3Cpath d='M6 40 Q4 30 7 22' stroke='%23ffffff' stroke-opacity='0.10' stroke-width='1.5' fill='none'/%3E%3Cpath d='M18 40 Q20 28 16 20' stroke='%23003300' stroke-opacity='0.10' stroke-width='1.5' fill='none'/%3E%3Cpath d='M34 40 Q33 29 37 21' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='1.5' fill='none'/%3E%3Cpath d='M48 40 Q50 30 46 23' stroke='%23003300' stroke-opacity='0.09' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
            background-repeat: repeat; background-position: 0 30%;
            opacity: 0.8;
        }
        /* 🆕 גדר עץ לאורך תחתית השדה - נותנת תחושת חווה תחומה ומקצועית, לא רק שטח דשא פתוח */
        #farm-area::after {
            content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; pointer-events: none; z-index: 2;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='22'%3E%3Crect x='2' y='6' width='36' height='3' fill='%236d4222' fill-opacity='0.55'/%3E%3Crect x='6' y='0' width='5' height='22' fill='%238d5a2b'/%3E%3Crect x='6' y='0' width='5' height='22' fill='%23000' fill-opacity='0.08'/%3E%3Crect x='28' y='0' width='5' height='22' fill='%238d5a2b'/%3E%3C/svg%3E");
            background-repeat: repeat-x; background-position: bottom left;
            opacity: 0.85;
        }
        /* 🆕 עננים נודדים באיטיות בשמי החווה - תחושת אווירה חיה במקום רקע סטטי */
        .farm-cloud {
            position: absolute; top: 6%; width: 90px; height: 34px; z-index: 1; pointer-events: none;
            background: radial-gradient(ellipse at 30% 60%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 70%),
                        radial-gradient(ellipse at 55% 40%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 65%),
                        radial-gradient(ellipse at 75% 55%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
            animation: farmCloudDrift 42s linear infinite;
        }
        .farm-cloud.cloud2 { top: 15%; animation-duration: 58s; animation-delay: -20s; transform: scale(0.7); }
        @keyframes farmCloudDrift {
            0% { left: -15%; }
            100% { left: 115%; }
        }
        /* 🆕 פרפרים אמביינטליים - מסלול נדידה "אורגני" עם כמה נקודות ביניים, לא רק קו ישר כמו הענן -
           מרגיש הרבה יותר כמו פרפר אמיתי שמרפרף בין פרחים */
        .farm-butterfly {
            position: absolute; font-size: 18px; z-index: 6; pointer-events: none;
            filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25));
            animation: butterflyDrift1 16s ease-in-out infinite, butterflyFlap 0.35s ease-in-out infinite alternate;
        }
        .farm-butterfly.bfly2 { animation-name: butterflyDrift2, butterflyFlap; animation-duration: 21s, 0.3s; top: 55%; animation-delay: -6s, 0s; }
        .farm-butterfly.bfly3 { animation-name: butterflyDrift3, butterflyFlap; animation-duration: 18s, 0.4s; top: 30%; animation-delay: -11s, 0s; font-size: 15px; }
        @keyframes butterflyDrift1 {
            0%   { left: 8%;  top: 20%; transform: scale(1) rotate(0deg); }
            25%  { left: 30%; top: 45%; transform: scale(1) rotate(8deg); }
            50%  { left: 55%; top: 15%; transform: scale(1) rotate(-6deg); }
            75%  { left: 75%; top: 40%; transform: scale(1) rotate(5deg); }
            100% { left: 8%;  top: 20%; transform: scale(1) rotate(0deg); }
        }
        @keyframes butterflyDrift2 {
            0%   { left: 85%; top: 55%; transform: scale(1) rotate(0deg); }
            30%  { left: 60%; top: 25%; transform: scale(1) rotate(-8deg); }
            60%  { left: 35%; top: 60%; transform: scale(1) rotate(6deg); }
            100% { left: 85%; top: 55%; transform: scale(1) rotate(0deg); }
        }
        @keyframes butterflyDrift3 {
            0%   { left: 20%; top: 30%; transform: scale(1) rotate(0deg); }
            40%  { left: 45%; top: 60%; transform: scale(1) rotate(7deg); }
            70%  { left: 68%; top: 20%; transform: scale(1) rotate(-5deg); }
            100% { left: 20%; top: 30%; transform: scale(1) rotate(0deg); }
        }
        @keyframes butterflyFlap {
            0% { transform: scaleX(1); }
            100% { transform: scaleX(0.6); }
        }
        /* 🆕 חיפושית/חרק קטן שמטייל לאט על הקרקע - עוד שכבת חיים לחווה */
        .farm-bug {
            position: absolute; font-size: 14px; z-index: 5; pointer-events: none; bottom: 6%;
            animation: bugCrawl 24s linear infinite;
        }
        @keyframes bugCrawl {
            0%   { left: 5%;  transform: scaleX(1); }
            48%  { left: 70%; transform: scaleX(1); }
            50%  { left: 70%; transform: scaleX(-1); }
            98%  { left: 5%;  transform: scaleX(-1); }
            100% { left: 5%;  transform: scaleX(1); }
        }
        #farm-area.placement-mode { cursor: copy; outline: 3px dashed #fff59d; outline-offset: -3px; }
        /* 🆕 פאנל משימות החווה - רשימת יעדים קטנה עם התקדמות ופרס, נותנת לחווה תחושת "משחק אמיתי" עם מטרה */
        #farm-quests-panel {
            display: none; position: absolute; z-index: 50; top: 46px; left: 50%; transform: translateX(-50%);
            width: 90%; max-width: 480px; background: rgba(255,255,255,0.97); border: 3px solid #00897b;
            border-radius: 16px; padding: 12px 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); max-height: 60%;
            overflow-y: auto;
        }
        #farm-quests-panel.open { display: block; }
        #farm-quests-panel h3 { margin: 0 0 8px 0; color: #00695c; font-size: 15px; text-align: center; }
        .farm-quest-item {
            display: flex; align-items: center; gap: 8px; padding: 7px 4px; border-bottom: 1px solid #e0e0e0; font-size: 13px;
        }
        .farm-quest-item:last-child { border-bottom: none; }
        .farm-quest-check { font-size: 17px; width: 22px; text-align:center; flex-shrink:0; }
        .farm-quest-text { flex: 1; color: #3e2723; }
        .farm-quest-text .quest-done-label { color: #2e7d32; font-weight: bold; }
        .farm-quest-progress { font-size: 11px; color: #757575; font-weight: bold; flex-shrink:0; }
        .farm-quest-reward { font-size: 12px; color: #e65100; font-weight: bold; flex-shrink:0; }
        .tiny-bee { position:absolute; font-size:14px; pointer-events:none; z-index:8; transition: left 1.8s linear, top 1.8s linear; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3)); }
        /* 🆕 --depth-scale נקבע inline לפי מיקום אנכי (top%) כדי לדמות פרספקטיבה: רחוק=קטן, קרוב=גדול */
        .farm-plant { position:absolute; font-size:30px; cursor:pointer; transform-origin: center bottom; animation: plantSway 3.2s ease-in-out infinite; }
        .farm-plant:hover { animation-play-state: paused; transform: scale(calc(var(--depth-scale, 1) * 1.2)) !important; transition: transform 0.2s; }
        /* 🆕 נבט צעיר עדיין גדל - קצת שקוף יותר ובלי נדנוד רוח מלא, כדי לתת תחושה של "עוד לא בשל" */
        .farm-plant.farm-plant-sprout { opacity: 0.85; animation-duration: 2s; }
        /* 🆕 נדנוד עדין ברוח - כל פרח מתחיל בפאזה מעט שונה (nth-child) כדי שלא ינדנדו כולם באותו קצב בדיוק */
        @keyframes plantSway {
            0%, 100% { transform: scale(var(--depth-scale, 1)) rotate(-2.5deg); }
            50% { transform: scale(var(--depth-scale, 1)) rotate(2.5deg); }
        }
        .farm-plant:nth-of-type(2n) { animation-duration: 3.7s; animation-delay: -1.1s; }
        .farm-plant:nth-of-type(3n) { animation-duration: 2.8s; animation-delay: -0.6s; }
        .farm-decor { position:absolute; font-size:26px; cursor:pointer; transform: scale(var(--depth-scale, 1)); transform-origin: center bottom; }
        /* 🆕 עיטורים "חיים" בתצוגה הדו-ממדית - טחנת הרוח מסתובבת, הדגלונים מתנדנדים, הפנס מהבהב - לא רק אייקון קפוא */
        .farm-decor-windmill { display:inline-block; animation: windmill-spin 2.4s linear infinite; }
        .farm-decor-flag { display:inline-block; animation: flag-wave 1.6s ease-in-out infinite; transform-origin: left center; }
        .farm-decor-lantern { display:inline-block; animation: lantern-flicker 1.8s ease-in-out infinite; }
        .farm-decor-scarecrow { display:inline-block; animation: scarecrow-sway 3.2s ease-in-out infinite; transform-origin: bottom center; }
        @keyframes windmill-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        @keyframes flag-wave { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(6deg); } }
        @keyframes lantern-flicker { 0%, 100% { filter: drop-shadow(0 0 3px rgba(255,193,7,0.5)) brightness(1); } 50% { filter: drop-shadow(0 0 9px rgba(255,193,7,0.9)) brightness(1.25); } }
        @keyframes scarecrow-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
        .farm-ground-shadow { position:absolute; width:36px; height:10px; margin-left:-4px; border-radius:50%; background:radial-gradient(ellipse at center, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 75%); pointer-events:none; transform: scale(var(--depth-scale, 1)); transform-origin: left center; }

        /* ===== 🆕 חווה תלת-ממדית (בטא) ===== */
        #farm-3d-wrapper {
            position: absolute; inset: 0; display: none; z-index: 15;
        }
        #farm-3d-wrapper canvas:not(#farm-minimap) { width: 100% !important; height: 100% !important; display: block; touch-action: none; }
        #farm-joystick {
            position: absolute; bottom: 20px; left: 20px; width: 90px; height: 90px;
            border-radius: 50%; background: rgba(255,255,255,0.25); border: 2px solid rgba(255,255,255,0.6);
            z-index: 20; touch-action: none;
        }
        #farm-joystick-knob {
            position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
            border-radius: 50%; background: rgba(255,255,255,0.85); box-shadow: 0 2px 8px rgba(0,0,0,0.4);
            transition: transform 0.05s linear;
        }
        #farm-3d-actions {
            position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
            display: none; gap: 10px; z-index: 20;
        }
        #farm-3d-actions button {
            font-size: 13px; padding: 0 16px; height: 42px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
            border: 1.5px solid rgba(0,0,0,0.15);
        }
        #farm-3d-actions button[onclick="smokeHive3D()"] { background: linear-gradient(135deg, #a1887f, #6d4c41) !important; }
        #farm-3d-actions button[onclick="harvestHive3D()"] { background: linear-gradient(135deg, #ffca28, #f9a825) !important; color:#3e2723 !important; }
        /* 🆕 מיני-מפה - עיגול קטן בפינה העליונה, מציג מלמעלה את מיקום הדבוראי, הכוורות וגבולות השטח */
        #farm-minimap {
            position: absolute; top: 12px; right: 12px; z-index: 21;
            width: 130px !important; height: 130px !important; border-radius: 50%;
            background: rgba(20,40,15,0.55); border: 3px solid rgba(255,255,255,0.75);
            box-shadow: 0 4px 12px rgba(0,0,0,0.45); pointer-events: none;
        }
        #farm-3d-hint {
            position: absolute; bottom: 14px; right: 20px; left: 130px; text-align: center;
            color: white; font-size: 12px; font-weight: bold; text-shadow: 0 2px 4px rgba(0,0,0,0.6);
            z-index: 20; pointer-events: none;
        }

        /* ===== 🆕 שיפורי דו-ממד ברמה גבוהה: הודעות לא-חוסמות, כלים ביד, פתיחת כוורת, חלקיקים ===== */
        .farm-toast {
            position:absolute; left:50%; top:8%; transform:translateX(-50%); max-width:82%;
            background:rgba(20,20,20,0.88); color:#fff; padding:10px 18px; border-radius:14px;
            font-size:13.5px; font-weight:bold; text-align:center; z-index:60; line-height:1.4;
            box-shadow:0 6px 16px rgba(0,0,0,0.4); animation: toastPop 0.3s ease; pointer-events:none;
        }
        @keyframes toastPop {
            from { opacity:0; transform:translateX(-50%) translateY(-10px) scale(0.9); }
            to { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
        }
        .farm-confirm-box {
            position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:80%; max-width:320px;
            background:linear-gradient(135deg,#fff3e0,#ffe0b2); border-radius:18px; padding:18px 20px; z-index:70;
            box-shadow:0 10px 34px rgba(0,0,0,0.45); text-align:center; border:3px solid #ef6c00;
            animation: toastPop 0.25s ease;
        }
        .farm-confirm-box .farm-confirm-btns { display:flex; gap:10px; justify-content:center; margin-top:14px; }
        .farm-confirm-box button { font-size:14px; height:40px; padding:0 18px; }

        .hive-roof { display:inline-block; transition: transform 0.4s cubic-bezier(.34,1.56,.64,1); transform-origin: center bottom; }
        .hive-roof.lid-open { transform: translateY(-16px) rotate(-14deg); }

        /* 🆕 טוסט גלובלי - זהה בעיצובו לטוסט של החווה, אבל קבוע למסך כולו (למסכי חנות/תיק) */
        .app-toast {
            position:fixed; left:50%; top:18px; transform:translateX(-50%); max-width:88%;
            background:rgba(20,20,20,0.9); color:#fff; padding:12px 20px; border-radius:14px;
            font-size:14px; font-weight:bold; text-align:center; z-index:2000; line-height:1.4;
            box-shadow:0 6px 18px rgba(0,0,0,0.45); animation: toastPop 0.3s ease; pointer-events:none;
        }
        .app-picker-box {
            position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:85%; max-width:360px;
            max-height:70vh; overflow-y:auto; background:linear-gradient(135deg,#fff3e0,#ffe0b2); border-radius:18px;
            padding:18px 20px; z-index:2000; box-shadow:0 10px 34px rgba(0,0,0,0.45); text-align:center;
            border:3px solid #ef6c00; animation: toastPop 0.25s ease;
        }
        .app-picker-box .picker-item {
            display:flex; align-items:center; gap:10px; background:white; border-radius:12px;
            padding:10px 14px; margin-bottom:8px; cursor:pointer; font-size:14px; font-weight:bold;
            color:#3e2723; border:2px solid transparent; transition: border-color 0.15s, transform 0.15s;
        }
        .app-picker-box .picker-item:hover { border-color:#f9a825; transform: scale(1.02); }
        .app-picker-box .picker-item .picker-icon { font-size:24px; }
        .app-picker-cancel { margin-top:6px; background:#999; color:white; }

        .farm-smoke-btn {
            position:absolute; top:-38px; right:-6px; font-size:17px; background:rgba(255,255,255,0.95);
            border-radius:50%; width:32px; height:32px; display:flex; align-items:center; justify-content:center;
            box-shadow:0 3px 8px rgba(0,0,0,0.35); cursor:pointer; border:2px solid #8d6e63; z-index:12; padding:0;
        }
        /* 🆕 כשיש מזיקים בכוורת, כפתור העישון דוחק ומהבהב - מסמן לילד בבירור שצריך לפעול עכשיו */
        .farm-smoke-btn.farm-smoke-btn-urgent { border-color:#c62828; animation: pulse 0.7s infinite; }
        .farm-hive-object.hive-has-pest { filter: drop-shadow(0 6px 4px rgba(0,0,0,0.35)) drop-shadow(0 0 8px rgba(198,40,40,0.55)); }
        .farm-hand-tool {
            position:absolute; left:46px; top:26px; font-size:22px; pointer-events:none; z-index:11;
            animation: toolBob 0.6s ease-in-out infinite alternate; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
        }
        @keyframes toolBob { from{ transform:translateY(0); } to{ transform:translateY(-5px); } }

        .farm-smoke-puff, .farm-honey-drop { position:absolute; font-size:22px; pointer-events:none; z-index:14; }
        .farm-smoke-puff { animation: smokeRise 1.4s ease-out forwards; }
        .farm-honey-drop { animation: honeyFloat 1.2s ease-out forwards; }
        @keyframes smokeRise {
            0% { opacity:0.9; transform:translate(0,0) scale(0.6); }
            100% { opacity:0; transform:translate(var(--dx,10px), -70px) scale(1.7); }
        }
        @keyframes honeyFloat {
            0% { opacity:1; transform:translate(0,0) scale(0.7); }
            100% { opacity:0; transform:translate(var(--dx,0px), -55px) scale(1.3); }
        }
        .level-badge { background:linear-gradient(135deg,#8e24aa,#5e35b1); color:white; border-radius:16px; padding:4px 14px; font-size:14px; font-weight:bold; box-shadow:0 3px 6px rgba(0,0,0,0.2); }
        #bag-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 550px; height: 78vh; background: linear-gradient(135deg,#fff3e0,#ffe0b2); z-index: 1000; padding: 25px; border-radius: 25px; box-shadow: 0 0 60px rgba(0,0,0,0.4); display: none; flex-direction: column; border: 5px solid #ef6c00; pointer-events: auto; }
        .bag-item { display:flex; justify-content:space-between; align-items:center; background:white; border-radius:12px; padding:10px 14px; margin-bottom:8px; font-size:14px; }
        .placement-toolbar { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:10px; padding:6px 8px; }
        .placement-toolbar button {
            font-size:13px; padding:0 16px; height:40px; letter-spacing:0.2px;
            box-shadow: 0 3px 8px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.25);
            border: 1.5px solid rgba(0,0,0,0.12);
        }
        .placement-toolbar button:hover { box-shadow: 0 5px 14px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3); }
        .placement-toolbar button.active-mode {
            background:linear-gradient(135deg,#66bb6a,#2e7d32) !important;
            box-shadow: 0 0 0 3px rgba(76,175,80,0.35), 0 3px 10px rgba(0,0,0,0.3);
        }
        /* 🆕 גרדיאנטים עקביים לכל כפתורי סרגל הכלים של החווה במקום צבע שטוח - נראה מקצועי ואחיד יותר */
        #farm-panel .placement-toolbar button[onclick="changeCharacter()"] { background: linear-gradient(135deg, #8d6e63, #5d4037) !important; }
        #place-hive-btn { background: linear-gradient(135deg, #ffb300, #f57f17) !important; }
        #place-plant-btn { background: linear-gradient(135deg, #81c784, #43a047) !important; }
        #farm-panel .placement-toolbar button[onclick="openBag()"] { background: linear-gradient(135deg, #ff9800, #ef6c00) !important; }
        #farm-3d-toggle-btn { background: linear-gradient(135deg, #7e57c2, #5e35b1) !important; }
        #farm-quests-btn { background: linear-gradient(135deg, #26a69a, #00897b) !important; }

        /* 🆕 שיפוץ מלא לדמות הדבוראי הדו-ממדית - קודם זה היה אמוג'י בודד (🧑‍🌾) שרק זז ומתנדנד כגוף אחד,
           בלי שום ידיים/רגליים אמיתיות. עכשיו זו דמות "בובת נייר" מורכבת מכמה חלקים (גוף, ראש, שתי
           זרועות ושתי רגליים) שכל אחד יכול לנוע בנפרד - בדיוק כמו הדמות התלת-ממדית - כך שהליכה נראית
           כמו הליכה אמיתית עם נדנוד ידיים ורגליים, לא רק קפיצה של כל הדמות.
        */
        #beekeeper {
            position: absolute; width: 90px; height: 96px;
            top: 50%; left: 50%;
            /* 🆕 --face שולט בכיוון (1 ימינה / -1 שמאלה) כדי שהדבוראי יסתובב לכיוון ההליכה */
            transform: translate(-50%, -50%) scaleX(var(--face, 1));
            pointer-events: none; z-index: 10;
            /* 🆕 left/top עוברים דרך JS עם משך-זמן דינמי (ראה walkBeekeeperTo) ולא עם transition קבוע -
               כך שהמהירות נשארת אחידה גם למרחקים ארוכים וגם קצרים, כמו הליכה אמיתית ולא "קפיצה" */
            animation: floatBeekeeper 2s infinite ease-in-out;
        }
        #beekeeper.walking { animation: walkBeekeeper 0.35s infinite ease-in-out; }

        @keyframes floatBeekeeper {
            0%, 100% { transform: translate(-50%, -50%) scaleX(var(--face, 1)) rotate(-2deg) scale(1); }
            50% { transform: translate(-50%, -53%) scaleX(var(--face, 1)) rotate(2deg) scale(1.03); }
        }
        /* 🆕 הליכה - נדנוד עדין וקצבי יותר של כל הדמות (הפרטים האמיתיים - ידיים ורגליים - מתנדנדים בנפרד למטה) */
        @keyframes walkBeekeeper {
            0%, 100% { transform: translate(-50%, -50%) scaleX(var(--face, 1)) rotate(-2deg) translateY(0); }
            50% { transform: translate(-50%, -50%) scaleX(var(--face, 1)) rotate(2deg) translateY(-4px); }
        }

        /* 🆕 צל קרקע קבוע מתחת לדמות - "מעגן" אותה חזותית לרצפה, נראה הרבה יותר מקצועי מדמות "מרחפת" */
        .bk-shadow {
            position: absolute; width: 34px; height: 10px; left: 50%; bottom: -2px; margin-left: -17px;
            background: radial-gradient(ellipse, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0) 72%); z-index: 1;
        }
        /* 🆕 גוף - חליפת דבוראי בגוון שמנת עם חגורה צהובה-דבש, גוון-הצללה עדין וקו מתאר דק לתחושת "מדבקה מצוירת" מקצועית */
        .bk-body {
            position: absolute; width: 30px; height: 33px; left: 50%; top: 33px; margin-left: -15px;
            background: linear-gradient(115deg, #ffffff 0%, #f7f5ef 35%, #e8e4da 100%);
            border-radius: 14px 14px 9px 9px; border: 1.3px solid rgba(50,35,20,0.32);
            box-shadow: inset -4px -2px 5px rgba(0,0,0,0.12), inset 3px 2px 3px rgba(255,255,255,0.5);
            z-index: 5; overflow: hidden;
        }
        .bk-body::after {
            /* חגורת דבש צהובה בתחתית הגוף */
            content: ''; position: absolute; left: 0; right: 0; bottom: 22%; height: 22%;
            background: linear-gradient(to bottom, #ffc107, #ff9800); box-shadow: inset 0 1px 2px rgba(255,255,255,0.4);
        }
        .bk-head {
            /* 🆕 תיקון באג חזותי קריטי: overflow:hidden חתך את הכובע כולו (שממוקם ב-top שלילי מעל
               הראש) - הדמות נראתה קירחת עם עיגול חשוף, ממש לא מקצועי. הוסר; הרשת והשיער נחתכים
               עכשיו בעיגול משלהם. נוספו גם לחיים ורודות עדינות למראה חי וידידותי יותר. */
            position: absolute; width: 29px; height: 29px; left: 50%; top: 3px; margin-left: -14.5px;
            background:
                radial-gradient(circle at 26% 62%, rgba(255,140,120,0.35) 0%, rgba(255,140,120,0) 26%),
                radial-gradient(circle at 74% 62%, rgba(255,140,120,0.35) 0%, rgba(255,140,120,0) 26%),
                radial-gradient(circle at 35% 30%, #e6bd94 0%, #d8a878 55%, #c79764 100%);
            border: 1.3px solid rgba(90,55,25,0.35); border-radius: 50%; z-index: 6;
        }
        /* 🆕 רשת הכובע - שקופה בעדינות כך שהפנים (עיניים) עדיין נראות דרכה, בדיוק כמו בתלת-ממד */
        .bk-veil {
            /* 🆕 נחתכת בעיגול עצמאי משלה (במקום ה-overflow:hidden שנחתך גם הכובע) */
            position: absolute; inset: 40% 1px 1px 1px; background: rgba(92,122,138,0.26);
            border-radius: 0 0 14px 14px;
        }
        .bk-eye {
            position: absolute; width: 3.4px; height: 3.4px; border-radius: 50%; background: #2b1a0f; top: 46%; z-index: 2;
            box-shadow: 1px -1px 0 rgba(255,255,255,0.85);
        }
        .bk-eye-l { left: 30%; }
        .bk-eye-r { left: 61%; }
        .bk-hat-brim {
            position: absolute; width: 40px; height: 9px; left: 50%; top: -4px; margin-left: -20px;
            background: linear-gradient(to bottom, #ffffff, #ece8de);
            border: 1.2px solid rgba(50,35,20,0.3); border-radius: 50%; box-shadow: 0 3px 4px rgba(0,0,0,0.3); z-index: 7;
        }
        .bk-hat-top {
            position: absolute; width: 18px; height: 13px; left: 50%; top: -13px; margin-left: -9px;
            background: linear-gradient(115deg, #ffffff, #ece8de);
            border: 1.2px solid rgba(50,35,20,0.3); border-bottom: none; border-radius: 6px 6px 0 0; z-index: 6;
        }
        .bk-hat-top::after {
            /* פס קטן צבעוני על הכובע - נגיעת אופי, תואם לחגורת הדבש */
            content: ''; position: absolute; left: -1px; right: -1px; bottom: 0; height: 3px; background: #ffb300;
        }
        /* 🆕 זרועות ורגליים - כל אחת עם transform-origin למעלה (כתף/ירך) כדי שתוכל "להתנדנד" באמת
           סביב הפרק, בדיוק כמו שרירי הליכה אמיתיים ולא רק הזזה שטוחה */
        .bk-arm {
            position: absolute; width: 8px; height: 24px; top: 33px;
            background: linear-gradient(to bottom, #ffffff, #e8e4da);
            border: 1.1px solid rgba(50,35,20,0.28); border-radius: 4px; transform-origin: 50% 0%;
        }
        /* 🆕 "פרק כתף" קטן ועגול בראש הזרוע - מחבר אותה חזותית לגוף בצורה חלקה, בדיוק כמו בתלת-ממד,
           כדי שהזרוע תיראה כאילו יוצאת מהכתף ולא כמו חתיכה נפרדת שרק "צמודה" לידה */
        .bk-arm::before {
            content: ''; position: absolute; top: -3px; left: -1.5px; width: 11px; height: 11px;
            background: linear-gradient(to bottom, #ffffff, #e8e4da);
            border: 1.1px solid rgba(50,35,20,0.28); border-radius: 50%; z-index: -1;
        }
        .bk-arm::after {
            content: ''; position: absolute; bottom: -3px; left: -2px; width: 11px; height: 9px;
            background: radial-gradient(circle at 35% 30%, #e9cd9d, #d9bb87);
            border: 1px solid rgba(90,55,25,0.3); border-radius: 50%;
        }
        .bk-arm-back { left: 24px; z-index: 3; filter: brightness(0.88); }
        .bk-arm-front { right: 24px; z-index: 8; }
        .bk-leg {
            position: absolute; width: 9px; height: 25px; top: 62px;
            background: linear-gradient(to bottom, #ffffff, #e3e0d6);
            border: 1.1px solid rgba(50,35,20,0.28); border-radius: 3px; transform-origin: 50% 0%;
        }
        .bk-leg::after {
            content: ''; position: absolute; bottom: -4px; left: -1.5px; width: 11px; height: 8px;
            background: linear-gradient(to bottom, #5d4037, #3e2723); border-radius: 3px;
        }
        .bk-leg-back { left: 25px; z-index: 4; filter: brightness(0.9); }
        .bk-leg-front { left: 39px; z-index: 8; }

        /* 🆕 מחזור הליכה אמיתי - זרועות ורגליים מתנדנדות בפאזה הפוכה זו מזו, בדיוק כמו הליכה אנושית טבעית */
        #beekeeper.walking .bk-leg-front { animation: legSwingFront 0.35s infinite ease-in-out; }
        #beekeeper.walking .bk-leg-back { animation: legSwingBack 0.35s infinite ease-in-out; }
        #beekeeper.walking .bk-arm-front { animation: armSwingFront 0.35s infinite ease-in-out; }
        #beekeeper.walking .bk-arm-back { animation: armSwingBack 0.35s infinite ease-in-out; }
        @keyframes legSwingFront { 0%,100% { transform: rotate(22deg); } 50% { transform: rotate(-22deg); } }
        @keyframes legSwingBack { 0%,100% { transform: rotate(-22deg); } 50% { transform: rotate(22deg); } }
        @keyframes armSwingFront { 0%,100% { transform: rotate(-24deg); } 50% { transform: rotate(24deg); } }
        @keyframes armSwingBack { 0%,100% { transform: rotate(24deg); } 50% { transform: rotate(-24deg); } }
        /* 🆕 כשעומדים במקום, הידיים/רגליים חוזרות לתנוחת מנוחה טבעית בהדרגה ולא נשארות תקועות בזווית הליכה */
        #beekeeper:not(.walking) .bk-arm, #beekeeper:not(.walking) .bk-leg { transition: transform 0.3s ease-out; transform: rotate(0deg); }

        /* 🆕 שיער הדמות - צבע נשלט מהאזור האישי דרך --hair-color, מופיע בכל התלבושות */
        #beekeeper .bk-head::before {
            /* פוני קצר לבן (ברירת מחדל) - פס שיער קטן מציץ מתחת לכובע */
            content: ''; position: absolute; top: 10%; left: 14%; right: 14%; height: 20%;
            background: var(--hair-color, #5d4037); border-radius: 46% 46% 34% 34%; z-index: 1;
        }
        /* 🆕 דמות בת - "קסדת" שיער עוטפת + שתי קוקיות צד עגולות בצדדים, אותה בובת-נייר מקצועית */
        #beekeeper[data-body="girl"] .bk-head::before {
            top: 8%; left: 4%; right: 4%; height: 46%;
            border-radius: 50% 50% 42% 42%;
        }
        #beekeeper[data-body="girl"] .bk-head::after {
            content: ''; position: absolute; top: 38%; left: -22%; width: 13px; height: 13px;
            background: var(--hair-color, #5d4037); border-radius: 50%;
            box-shadow: 33px 0 0 var(--hair-color, #5d4037); /* הקוקייה השנייה בצד השני באותו אלמנט */
            z-index: 0;
        }

        /* 🆕 האזור האישי - פאנל עריכת הדמות */
        #avatar-editor-panel {
            display: none; position: absolute; top: 8%; left: 50%; transform: translateX(-50%);
            width: min(430px, 94%); max-height: 80%; overflow-y: auto; z-index: 60; /* 🆕 מעל הכל, כולל מצב תלת-ממד */
            background: linear-gradient(to bottom, #fffdf5, #fff3d6); border: 3px solid #f9a825;
            border-radius: 20px; padding: 14px 16px; box-shadow: 0 10px 32px rgba(0,0,0,0.35);
        }
        #avatar-editor-panel.open { display: block; }
        .avatar-editor-header { text-align: center; font-weight: bold; font-size: 17px; color: #4e342e; margin-bottom: 8px; }
        .avatar-section-title { font-weight: bold; font-size: 14px; color: #5d4037; margin: 10px 0 6px 0; }
        .avatar-options-row { display: flex; flex-wrap: wrap; gap: 8px; }
        .avatar-opt {
            font-size: 13.5px; padding: 0 14px; height: 40px; border-radius: 14px;
            background: linear-gradient(135deg, #fff8e1, #ffecb3) !important; color: #4e342e !important;
            border: 2px solid rgba(249,168,37,0.35); box-shadow: 0 2px 5px rgba(0,0,0,0.12);
        }
        .avatar-opt-active { border-color: #f57f17 !important; background: linear-gradient(135deg, #ffe082, #ffca28) !important; font-weight: bold; box-shadow: 0 0 0 3px rgba(255,193,7,0.3); }
        .avatar-opt-locked { opacity: 0.55; filter: grayscale(0.4); }
        .avatar-hair-swatch {
            width: 38px; height: 38px; border-radius: 50%; padding: 0;
            border: 3px solid rgba(255,255,255,0.8); box-shadow: 0 2px 6px rgba(0,0,0,0.3);
        }
        .avatar-hair-swatch.avatar-opt-active { border-color: #f57f17; box-shadow: 0 0 0 3px rgba(255,193,7,0.5); }
        .avatar-hint { font-size: 12px; color: #6d4c41; margin-top: 10px; text-align: center; }
        .avatar-close-btn { display: block; margin: 12px auto 0 auto; background: linear-gradient(135deg, #66bb6a, #43a047) !important; }

        /* 🆕 ערכות צבע לתלבושות שנרכשות בחנות - אותה דמות מפורקת (עם ידיים/רגליים אמיתיות),
           רק בצבעים שונים לכל תלבושת, כדי לא לאבד את שיפור ההליכה גם כשמחליפים תחפושת. */
        #beekeeper[data-skin="ninja"] .bk-body { background: linear-gradient(to bottom, #263238 82%, #37474f 82%, #37474f 92%, #263238 92%); }
        #beekeeper[data-skin="ninja"] .bk-hat-brim, #beekeeper[data-skin="ninja"] .bk-hat-top, #beekeeper[data-skin="ninja"] .bk-arm { background: #263238; }
        #beekeeper[data-skin="ninja"] .bk-veil { background: rgba(0,0,0,0.55); }

        #beekeeper[data-skin="wizard"] .bk-body { background: linear-gradient(to bottom, #6a1b9a 82%, #ab47bc 82%, #ab47bc 92%, #6a1b9a 92%); }
        #beekeeper[data-skin="wizard"] .bk-hat-brim, #beekeeper[data-skin="wizard"] .bk-arm { background: #6a1b9a; }
        #beekeeper[data-skin="wizard"] .bk-hat-top { background: #4a148c; height: 16px; border-radius: 8px 8px 0 0; top: -15px; }

        #beekeeper[data-skin="hero"] .bk-body { background: linear-gradient(to bottom, #c62828 82%, #1565c0 82%, #1565c0 92%, #c62828 92%); }
        #beekeeper[data-skin="hero"] .bk-hat-brim, #beekeeper[data-skin="hero"] .bk-hat-top, #beekeeper[data-skin="hero"] .bk-arm { background: #c62828; }
        #beekeeper[data-skin="hero"] .bk-veil { background: rgba(21,101,192,0.3); }

        #beekeeper[data-skin="robot"] .bk-body { background: linear-gradient(to bottom, #78909c 82%, #37474f 82%, #37474f 92%, #78909c 92%); }
        #beekeeper[data-skin="robot"] .bk-hat-brim, #beekeeper[data-skin="robot"] .bk-hat-top, #beekeeper[data-skin="robot"] .bk-arm { background: #78909c; }
        #beekeeper[data-skin="robot"] .bk-head { background: #b0bec5; }
        #beekeeper[data-skin="robot"] .bk-eye { background: #00e5ff; box-shadow: 0 0 3px #00e5ff; }

        #beekeeper[data-skin="royal"] .bk-body { background: linear-gradient(to bottom, #6a1b9a 82%, #ffd54f 82%, #ffd54f 92%, #6a1b9a 92%); }
        #beekeeper[data-skin="royal"] .bk-hat-brim { background: #ffd54f; }
        #beekeeper[data-skin="royal"] .bk-hat-top { background: linear-gradient(to bottom, #6a1b9a, #4a148c); }
        #beekeeper[data-skin="royal"] .bk-hat-top::after { background: #ffd54f; }
        #beekeeper[data-skin="royal"] .bk-arm { background: #6a1b9a; }
        #beekeeper[data-skin="royal"] .bk-veil { background: rgba(255,213,79,0.18); }

        #beekeeper[data-skin="fairy"] .bk-body { background: linear-gradient(to bottom, #f8bbd0 82%, #ba68c8 82%, #ba68c8 92%, #f8bbd0 92%); }
        #beekeeper[data-skin="fairy"] .bk-hat-brim, #beekeeper[data-skin="fairy"] .bk-hat-top { background: #ba68c8; }
        #beekeeper[data-skin="fairy"] .bk-arm { background: #f8bbd0; }
        #beekeeper[data-skin="fairy"] .bk-veil { background: rgba(186,104,200,0.25); }
        /* 🆕 ענן אבק קטן שמופיע מתחת לרגליים בזמן הליכה - פרט קטן שנותן תחושת תנועה על הקרקע */
        .footstep-puff {
            position: absolute; width: 14px; height: 6px; border-radius: 50%;
            background: rgba(255,255,255,0.55); pointer-events: none; z-index: 9;
            animation: footstepFade 0.5s ease-out forwards;
        }
        @keyframes footstepFade {
            0% { opacity: 0.7; transform: scale(0.6); }
            100% { opacity: 0; transform: scale(1.4) translateY(4px); }
        }

        .farm-hive-object {
            position: absolute; display: flex; flex-direction: column; align-items: center;
            cursor: pointer; transition: transform 0.2s; transform: scale(var(--depth-scale, 1)); transform-origin: center bottom;
            /* 🆕 צל רך תחת הכוורת - נותן תחושת "יושבת על הקרקע" ולא "מודבקת" */
            filter: drop-shadow(0 6px 4px rgba(0,0,0,0.35));
        }
        .farm-hive-object:hover { transform: scale(calc(var(--depth-scale, 1) * 1.15)); z-index: 20; }
        /* 🆕 כוורות שהתקדמו ברמה מקבלות זוהר עדין יותר מכובד - תגמול חזותי על ניסיון בדבורים */
        .farm-hive-object.hive-tier-2 { filter: drop-shadow(0 6px 4px rgba(0,0,0,0.35)) drop-shadow(0 0 6px rgba(255,193,7,0.45)); }
        .farm-hive-object.hive-tier-3 { filter: drop-shadow(0 6px 4px rgba(0,0,0,0.35)) drop-shadow(0 0 10px rgba(255,215,0,0.7)); }
        .farm-hive-tier-badge {
            position: absolute; top: -34px; left: 50%; transform: translateX(-50%);
            background: linear-gradient(135deg, #fff8e1, #ffe082); color: #5d4037; font-size: 11px; font-weight: bold;
            padding: 2px 8px; border-radius: 10px; white-space: nowrap; box-shadow: 0 2px 5px rgba(0,0,0,0.3);
            border: 1px solid #ffca28;
        }
        /* 🆕 תג בונוס מיקום (⚡+30%) - ירקרק וקטן, בפינת הכוורת - פידבק מיידי על אסטרטגיית מיקום חכמה */
        .farm-hive-synergy {
            position: absolute; top: 4px; left: -14px;
            background: linear-gradient(135deg, #dcedc8, #aed581); color: #33691e; font-size: 10.5px; font-weight: bold;
            padding: 1.5px 6px; border-radius: 9px; white-space: nowrap; box-shadow: 0 2px 4px rgba(0,0,0,0.25);
            border: 1px solid #7cb342; z-index: 3;
        }

        #game-ui-overlay {
            position: fixed; top: 80px; left: 50%; transform: translateX(-50%);
            z-index: 99; background: rgba(0,0,0,0.8); color: #fff; padding: 12px 25px;
            border-radius: 30px; font-weight: bold; font-size: 18px; display: none; pointer-events: none;
            border: 2px solid #ff5252; box-shadow: 0 5px 15px rgba(255,0,0,0.2); text-align: center;
            flex-direction: column; align-items: center;
        }

        #game-over-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(20, 0, 0, 0.9); z-index: 2000;
            display: none; flex-direction: column; justify-content: center; align-items: center;
            color: white; text-align: center; pointer-events: auto;
        }
        
        .admin-scroll { 
            flex: 1; overflow-y: auto; margin: 15px 0; padding: 10px; 
            border: 1px solid #eee; border-radius: 10px; background: #fafafa;
        }
        
        .keyword-item, .item-row { 
            display: flex; justify-content: space-between; align-items: center; 
            padding: 12px; border-bottom: 1px solid #ddd; font-size: 14px; 
            background: white; margin-bottom: 8px; border-radius: 8px;
            transition: background 0.2s;
        }
        
        .item-row:hover { background: #fffde7; }
        .shop-icon { font-size: 32px; margin-left: 15px; text-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        
        .delete-btn { background: #ff5252; padding: 5px 10px; font-size: 12px; border-radius: 5px; }
        .admin-section { border-bottom: 2px solid #eee; padding-bottom: 15px; margin-bottom: 15px; }
        .sync-btn { background: #4caf50; font-size: 14px; padding: 10px; margin-top: 5px; }
        .export-code-btn { background: #2196f3; font-size: 14px; padding: 10px; margin-top: 5px; }

        /* ===== TAMAGOTCHI PANEL ===== */
        #tamagotchi-panel {
            position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 90%; max-width: 480px; background: linear-gradient(135deg, #fff9c4, #fff3e0);
            z-index: 1000; padding: 25px; border-radius: 30px;
            box-shadow: 0 0 60px rgba(0,0,0,0.4); display: none;
            flex-direction: column; border: 5px solid #f9a825; pointer-events: auto;
            align-items: center; text-align: center;
        }
        .tama-bee { font-size: 80px; animation: floatBee 2s ease-in-out infinite; }
        @keyframes floatBee {
            0%,100%{ transform: translateY(0) rotate(-5deg); }
            50%{ transform: translateY(-15px) rotate(5deg); }
        }
        .tama-bee.dead { animation: none; filter: grayscale(1); opacity: 0.5; transform: rotate(90deg); }
        .tama-bar-wrap { width: 100%; background: #eee; border-radius: 20px; height: 22px; margin: 5px 0; overflow:hidden; }
        .tama-bar { height: 100%; border-radius: 20px; transition: width 0.5s; }
        .bar-hunger { background: linear-gradient(90deg,#ff9800,#f44336); }
        .bar-happy { background: linear-gradient(90deg,#ffeb3b,#8bc34a); }
        .bar-health { background: linear-gradient(90deg,#4caf50,#2196f3); }
        .tama-action-btn { background: linear-gradient(135deg,#f9a825,#f57f17); color:white; border:none; padding:10px 20px; border-radius:20px; font-size:16px; font-weight:bold; cursor:pointer; margin:5px; }
        .tama-action-btn:hover { transform:scale(1.08); }
        .tama-status-text { font-size: 18px; font-weight: bold; color: #3e2723; margin: 8px 0; }
        .tama-day-badge { background: #f9a825; color: white; border-radius: 20px; padding: 5px 18px; font-weight:bold; font-size:16px; display:inline-block; margin-bottom:10px; }

        /* ===== LARVA / BEE GROWTH PANEL ===== */
        #larva-panel {
            position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 95%; max-width: 700px; height: 85vh;
            background: linear-gradient(135deg, #e8f5e9, #f3e5f5);
            z-index: 1000; padding: 20px; border-radius: 30px;
            box-shadow: 0 0 80px rgba(0,0,0,0.5); display: none;
            flex-direction: column; border: 5px solid #6a1b9a; pointer-events: auto;
            overflow-y: auto;
        }
        #larva-panel h2 { color: #6a1b9a; margin-top:0; text-align:center; }
        .larva-stage-card {
            background: rgba(255,255,255,0.9); border-radius: 20px; padding: 18px;
            margin-bottom: 15px; border: 3px solid #ce93d8; text-align: center;
        }
        .larva-stage-emoji { font-size: 60px; display:block; margin: 10px 0; }
        .larva-day-counter { font-size: 22px; font-weight:bold; color:#6a1b9a; }
        .larva-desc { font-size: 16px; color: #3e2723; line-height: 1.5; margin: 8px 0; }
        .larva-feed-btn { background: linear-gradient(135deg,#ab47bc,#6a1b9a); color:white; border:none; padding:12px 28px; border-radius:20px; font-size:18px; font-weight:bold; cursor:pointer; margin: 8px 4px; }
        .larva-feed-btn:hover { transform:scale(1.06); }
        .larva-feed-btn:disabled { background: #bbb; cursor:default; transform:none; }
        .larva-progress { font-size:15px; color:#666; margin-top:5px; }
        .larva-celebration { font-size:40px; animation: celebrate 0.5s ease infinite alternate; }
        @keyframes celebrate { from{transform:scale(1) rotate(-10deg);} to{transform:scale(1.3) rotate(10deg);} }
        #queen-video-area {
            background: #1a1a2e; border-radius: 20px; padding: 20px; margin-bottom:15px;
            text-align:center; border: 3px solid #6a1b9a; position:relative; overflow:hidden;
            min-height: 200px;
        }
        #queen-canvas { width:100%; max-width:400px; border-radius:10px; }
        .video-label { color:#ce93d8; font-size:16px; font-weight:bold; margin-bottom:10px; }
        /* Progress timeline */
        .timeline-wrap { display:flex; gap:4px; flex-wrap:wrap; justify-content:center; margin:10px 0; }
        .timeline-day { width:22px; height:22px; border-radius:50%; background:#ddd; font-size:10px; display:flex; align-items:center; justify-content:center; font-weight:bold; cursor:default; }
        .timeline-day.done { background:#ab47bc; color:white; }
        .timeline-day.today { background:#ff9800; color:white; box-shadow:0 0 8px rgba(255,152,0,0.8); }

        /* celebration overlay */
        #celebration-overlay {
            position:fixed; top:0; left:0; width:100%; height:100%;
            background: rgba(0,0,0,0.85); z-index:5000; display:none;
            flex-direction:column; align-items:center; justify-content:center;
            color:white; text-align:center;
        }
        .confetti-emoji { font-size:50px; animation:confettiFall 2s linear infinite; }
        @keyframes confettiFall {
            from{transform:translateY(-50px) rotate(0deg); opacity:1;}
            to{transform:translateY(100vh) rotate(360deg); opacity:0;}
        }

        /* ===== 🆕 משוב חזותי למשחק המעוף - ניקוד צף וקומבו ===== */
        .floating-score {
            position: absolute; font-size: 26px; font-weight: bold; z-index: 50;
            pointer-events: none; text-shadow: 0 2px 6px rgba(0,0,0,0.5);
            animation: floatScoreUp 0.9s ease-out forwards;
        }
        @keyframes floatScoreUp {
            0% { opacity: 0; transform: translate(-50%, 0) scale(0.6); }
            15% { opacity: 1; transform: translate(-50%, -10px) scale(1.15); }
            100% { opacity: 0; transform: translate(-50%, -90px) scale(1); }
        }
        #combo-display {
            display: none; font-size: 16px; font-weight: bold; color: #ffcc00;
            margin-top: 4px; text-shadow: 0 0 6px rgba(255,204,0,0.7);
            animation: comboPulse 0.4s ease;
        }
        @keyframes comboPulse { from { transform: scale(1.3); } to { transform: scale(1); } }

        /* ===== 🆕 רעידת מסך עדינה בפגיעת צרעה ===== */
        @keyframes screenShake {
            0%, 100% { transform: translate(0, 0); }
            25% { transform: translate(-6px, 4px); }
            50% { transform: translate(6px, -4px); }
            75% { transform: translate(-4px, -3px); }
        }
        #canvas-wrapper.shake { animation: screenShake 0.3s ease; }


        /* ===== 🆕 התאמות טאבלט (641-1024px) - עד עכשיו טאבלטים קיבלו את פריסת המחשב המלאה, צפוף מדי ===== */
        @media (min-width: 641px) and (max-width: 1024px) {
            #shop-panel, #admin-panel, #tamagotchi-panel, #larva-panel, #bag-panel {
                width: 92% !important; max-width: 92vw !important; height: 88vh;
            }
            #farm-panel { width: 96% !important; max-width: 96vw !important; height: 92vh; padding: 16px; }
            .placement-toolbar button { font-size: 12.5px; padding: 0 12px; height: 42px; }
            .farm-title { font-size: 21px; }
            #ui { width: 88%; }
            button { min-height: 44px; } /* 🆕 יעד מגע נוח לאצבע לפי הנחיות נגישות */
            .top-btn { width: 46px; height: 46px; }
            #farm-minimap { width: 110px !important; height: 110px !important; }
        }
        /* 🆕 טלפון במצב רוחב (גובה נמוך) - החווה מנצלת את כל הגובה, כפתורים מוקטנים */
        @media (max-height: 500px) and (orientation: landscape) {
            #farm-panel { height: 97vh !important; padding: 8px !important; }
            .farm-title { font-size: 16px; margin-bottom: 2px; }
            .farm-subtitle { display: none; } /* חוסך שורה יקרה בגובה */
            #farmer-level-badge { padding: 2px 10px; font-size: 11px; margin-bottom: 3px; }
            .placement-toolbar { gap: 5px; margin-bottom: 4px; }
            .placement-toolbar button { height: 32px; font-size: 11px; padding: 0 8px; }
            #farm-minimap { width: 84px !important; height: 84px !important; }
            #farm-joystick { transform: scale(0.8); transform-origin: bottom left; }
        }
        /* 🆕 מסכים גדולים מאוד (מחשב נייד גדול/מסך חיצוני) - מגבילים רוחב שלא "יימרח" */
        @media (min-width: 1700px) {
            #farm-panel { max-width: 1560px; }
        }


        /* ===== 🆕 "היי באזי" - פאנל עוזר קולי בסגנון סירי ===== */
        #hey-bazzi-toggle.hey-active { border-color: #26a69a; box-shadow: 0 0 0 3px rgba(38,166,154,0.4), 0 4px 8px rgba(0,0,0,0.1); }
        #hey-bazzi-overlay {
            position: fixed; left: 50%; bottom: -220px; transform: translateX(-50%);
            width: min(420px, 92vw); z-index: 5000; pointer-events: none;
            background: linear-gradient(160deg, rgba(38,50,56,0.96), rgba(55,71,79,0.96));
            border: 2px solid rgba(128,222,234,0.5); border-radius: 26px 26px 0 0;
            padding: 18px 20px calc(16px + env(safe-area-inset-bottom)) 20px; text-align: center;
            box-shadow: 0 -8px 40px rgba(0,229,255,0.25);
            transition: bottom 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        #hey-bazzi-overlay.hey-open { bottom: 0; }
        /* 🆕 פרצוף באזי החי - ראש חום, עיניים גדולות ממצמצות, פה שנפתח ונסגר בזמן דיבור */
        .hey-face { position: relative; width: 92px; height: 86px; margin: 0 auto; animation: heyBeeBob 1.6s ease-in-out infinite; }
        @keyframes heyBeeBob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
        .hey-head {
            position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
            width: 84px; height: 74px; border-radius: 50%;
            background: radial-gradient(circle at 36% 30%, #6d4c41 0%, #58372a 60%, #4a2c20 100%);
            box-shadow: 0 4px 12px rgba(0,0,0,0.45), inset 0 3px 6px rgba(255,255,255,0.12);
        }
        .hey-antenna {
            position: absolute; top: -4px; width: 3.5px; height: 22px; background: #212121; border-radius: 2px;
        }
        .hey-antenna::after { content: ''; position: absolute; top: -8px; left: -3.5px; width: 10px; height: 10px; border-radius: 50%; background: #212121; }
        .hey-antenna-l { left: 26px; transform: rotate(-16deg); }
        .hey-antenna-r { right: 26px; transform: rotate(16deg); }
        .hey-eye {
            position: absolute; top: 16px; width: 26px; height: 30px; border-radius: 50%;
            background: white; overflow: hidden;
            animation: heyBlink 4.2s infinite;
        }
        .hey-eye-l { left: 12px; }
        .hey-eye-r { right: 12px; }
        .hey-pupil {
            position: absolute; left: 50%; top: 50%; width: 12px; height: 13px; margin: -6.5px 0 0 -6px;
            border-radius: 50%; background: #111;
        }
        .hey-pupil::after { content: ''; position: absolute; top: 2px; left: 2px; width: 4px; height: 4px; border-radius: 50%; background: white; }
        @keyframes heyBlink {
            0%, 91%, 100% { height: 30px; }
            94%, 97% { height: 3px; margin-top: 13px; } /* מצמוץ חמוד */
        }
        .hey-mouth {
            position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
            width: 26px; height: 12px; background: #f0827b;
            border-radius: 0 0 20px 20px; transition: height 0.12s;
        }
        /* 🆕 השפתיים זזות בזמן שבאזי מדבר - נפתחות ונסגרות בקצב דיבור אמיתי */
        #hey-bazzi-overlay.hey-speaking .hey-mouth { animation: heyTalk 0.28s ease-in-out infinite; }
        @keyframes heyTalk {
            0%, 100% { height: 6px; width: 22px; border-radius: 8px; }
            50% { height: 17px; width: 27px; border-radius: 0 0 22px 22px; }
        }
        .hey-text { color: #b2ebf2; font-weight: bold; font-size: 15px; margin-top: 6px; }
        .hey-rings { position: absolute; top: -26px; left: 50%; width: 0; height: 0; }
        .hey-rings span {
            position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
            border: 2px solid rgba(0,229,255,0.55); border-radius: 50%;
            animation: heyRing 1.6s ease-out infinite;
        }
        .hey-rings span:nth-child(2) { animation-delay: 0.5s; }
        .hey-rings span:nth-child(3) { animation-delay: 1s; }
        @keyframes heyRing {
            0% { transform: scale(0.5); opacity: 0.9; }
            100% { transform: scale(2.1); opacity: 0; }
        }


        /* 🆕 חיווי האזנה חי על כפתור "היי באזי" - נקודת דופק ירוקה כשהוא באמת מאזין */
        #hey-bazzi-toggle { position: relative; }
        #hey-bazzi-toggle.hey-listening::after {
            content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px;
            border-radius: 50%; background: #00e676; border: 1.5px solid white;
            animation: wakePulse 1.4s ease-in-out infinite;
        }
        @keyframes wakePulse {
            0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,230,118,0.5); }
            50% { transform: scale(1.15); box-shadow: 0 0 0 5px rgba(0,230,118,0); }
        }