<!-- ... existing code ... -->
        /* Kitchen Decor */
        .kitchen-window {
            position: absolute; top: 16%; left: 50%; transform: translateX(-50%);
            width: 100px; height: 80px; background: #bae6fd;
            border: 6px solid white; border-radius: 8px;
            box-shadow: inset 0 0 10px rgba(255,255,255,0.8);
            z-index: 2;
        }
        .kitchen-counter {
            position: absolute; bottom: 15%; left: 0; width: 100%; height: 80px;
            background: linear-gradient(to bottom, #f1f5f9 20px, #cbd5e1 20px);
            border-top: 4px solid #94a3b8; z-index: 8;
        }
        .fridge {
            position: absolute; bottom: 20%; left: 6%; font-size: 5rem; z-index: 9;
            filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.1));
        }

        /* Kitchen Chair & Dining Table */
        .kitchen-chair {
            position: absolute; bottom: 22%; left: 50%; transform: translateX(-50%);
            width: 150px; height: 130px; background: #fbbf24;
            border-radius: 24px 24px 0 0; border: 6px solid #d97706;
            box-shadow: 0 8px 15px rgba(0,0,0,0.15); z-index: 10;
        }
        .kitchen-table {
            position: absolute; bottom: 15%; left: 50%; transform: translateX(-50%);
            width: 250px; height: 75px; background: #fef08a;
            border-radius: 16px 16px 8px 8px; border: 6px solid #f59e0b;
            box-shadow: 0 10px 20px rgba(0,0,0,0.2); z-index: 25;
            display: flex; justify-content: center; align-items: center; padding-top: 6px;
        }
        .kitchen-plate {
            width: 95px; height: 30px; background: #ffffff;
            border-radius: 50%; border: 3px solid #cbd5e1;
            box-shadow: inset 0 3px 6px rgba(0,0,0,0.15);
            display: flex; justify-content: center; align-items: center;
            font-size: 1.4rem; transition: transform 0.2s;
        }

        /* Bathroom Mirror & Bathtub */
        .bathroom-mirror {
            position: absolute; top: 16%; left: 50%; transform: translateX(-50%);
            width: 120px; height: 140px; background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
            border: 8px solid #ffffff; border-radius: 60px 60px 20px 20px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1), inset 0 0 15px rgba(255,255,255,0.9);
            overflow: hidden; z-index: 2;
        }
        .mirror-reflection {
            position: absolute; top: -20px; left: 15px; width: 25px; height: 180px;
            background: rgba(255,255,255,0.6); transform: rotate(25deg);
        }
        .bathtub-container {
            position: absolute; bottom: 16%; left: 50%; transform: translateX(-50%);
            width: 260px; height: 110px; z-index: 25; pointer-events: none;
        }

        /* Toothbrush Animation (วางตรงปากสัตว์เลี้ยงพอดี) */
        .brush-anim {
            position: absolute; font-size: 2.8rem; z-index: 60;
            top: 55%; left: 50%;
            animation: brushTeeth 0.35s infinite alternate ease-in-out;
            pointer-events: none;
            filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
        }
        @keyframes brushTeeth {
            0% { transform: translate(-80%, -50%) rotate(-25deg); }
            100% { transform: translate(-20%, -50%) rotate(20deg); }
        }

        .foam-sparkle {
            position: absolute; font-size: 1.3rem; z-index: 60;
            animation: floatFoam 0.75s ease-out forwards; pointer-events: none;
        }
        @keyframes floatFoam {
            0% { transform: scale(0.4) translate(0, 0); opacity: 1; }
            100% { transform: scale(1.3) translate(var(--dx), var(--dy)); opacity: 0; }
        }

        /* Bedroom Decor & Blanket */
        .bed-headboard {
            position: absolute; bottom: 22%; left: 50%; transform: translateX(-50%);
            width: 300px; height: 210px; background: #7c3aed; border-radius: 30px 30px 0 0;
            border: 8px solid #5b21b6; box-shadow: 0 10px 20px rgba(0,0,0,0.2); z-index: 5;
        }
        .bed-mattress {
            position: absolute; bottom: 14%; left: 50%; transform: translateX(-50%);
            width: 280px; height: 140px; background: #ddd6fe; border-radius: 20px 20px 10px 10px;
            border: 6px solid #a78bfa; box-shadow: inset 0 -10px 15px rgba(0,0,0,0.1); z-index: 8;
        }
        .bed-pillow {
            position: absolute; bottom: 31%; left: 50%; transform: translateX(-50%);
            width: 150px; height: 55px; background: #ffffff;
            border-radius: 20px; border: 5px solid #f472b6;
            box-shadow: 0 6px 12px rgba(0,0,0,0.15), inset 0 -4px 8px rgba(244,114,182,0.2);
            z-index: 10; display: flex; justify-content: center; align-items: center;
        }
        .bed-pillow::after {
            content: '🌸'; font-size: 1.1rem; opacity: 0.7;
        }
        .night-window {
            position: absolute; top: 16%; left: 50%; transform: translateX(-50%);
            font-size: 4.5rem; opacity: 0.85; filter: drop-shadow(0 0 15px rgba(253,224,71,0.5));
            z-index: 2;
        }
        .blanket-overlay {
            position: absolute; bottom: 0; left: 0; width: 100%; height: 33%;
            background: linear-gradient(to top, #0284c7 0%, #38bdf8 85%, #bae6fd 100%);
            border-top: 10px solid #f0f9ff; border-radius: 35px 35px 0 0;
            z-index: 35; transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            transform: translateY(100%);
            box-shadow: 0 -10px 25px rgba(0,0,0,0.3);
            display: flex; justify-content: center; padding-top: 8px;
        }
        .blanket-overlay::after {
            content: '⭐ 🌙 ⭐'; font-size: 1.4rem; letter-spacing: 12px; color: #ffffff; opacity: 0.85;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        .blanket-active { transform: translateY(0); }

        .pet-container {
            position: absolute;
            bottom: 25%;
            left: 50%;
            transform: translateX(-50%);
            width: 180px;
            height: 220px;
            z-index: 20;
            transition: all 0.5s ease;
        }

        .pet-breathing {
            animation: breathe 3s infinite ease-in-out;
        }

        @keyframes breathe {
            0%, 100% { transform: translateX(-50%) translateY(0) scaleY(1); }
            50% { transform: translateX(-50%) translateY(-5px) scaleY(0.98); }
        }

        .pet-sleeping {
            /* วางบนเตียงและหนุนหมอน */
            bottom: 18% !important;
            transform: translateX(-50%) scale(0.88) !important;
            animation: sleepBreathe 3.5s infinite ease-in-out;
            z-index: 20 !important; /* อยู่บนหมอน (10) แต่อยู่ใต้ผ้าห่ม (35) */
        }

        /* Expressions & Sleep Eye Fix */
        .face-happy .eye, .face-smile .eye { height: 4px; border-radius: 10px; transform: translateY(4px); background: #222; }
        .face-happy .catchlight, .face-smile .catchlight { display: none; }
        .face-happy .mouth, .face-smile .mouth { transform: scale(1.6); color: #15803d; }
        
        .face-sad .eye { transform: rotate(15deg); }
        .face-sad .mouth { transform: rotate(180deg); margin-top: 5px; }

        .face-pout .eye { height: 5px; border-radius: 4px; transform: translateY(3px) rotate(-20deg); background: #991b1b; }
        .face-pout .mouth { transform: scale(1.4) translateY(-3px); font-weight: bold; color: #991b1b; }
        .pout-mark {
            position: absolute; top: -18px; right: 2px; font-size: 1.5rem; opacity: 0;
            transition: opacity 0.2s, transform 0.2s; pointer-events: none;
        }
        .face-pout .pout-mark { opacity: 1; animation: popPout 0.4s infinite alternate; }

        .face-laugh .eye { height: 4px; border-radius: 10px; transform: translateY(4px) rotate(20deg); background: #be123c; }
        .face-laugh .catchlight { display: none; }
        .face-laugh .mouth { font-size: 1.8rem; margin-top: -6px; transform: scale(1.5); color: #e11d48; }

        /* ตาหลับสนิทเมื่อนอน */
        .face-sleep .eye { height: 3px !important; border-radius: 10px !important; background: #333 !important; transform: translateY(6px) !important; }
        .face-sleep .catchlight { display: none !important; }
        .face-sleep .mouth { opacity: 0 !important; }

        /* Speech Bubble ง่วงนอน */
        .sleepy-bubble {
            position: absolute; top: -45px; left: 50%; transform: translateX(-50%);
            background: #ffffff; border: 3px solid #8b5cf6; border-radius: 20px;
            padding: 4px 12px; font-size: 0.85rem; font-weight: bold; color: #6d28d9;
            box-shadow: 0 4px 10px rgba(0,0,0,0.15); white-space: nowrap; z-index: 50;
            animation: pulseSleepy 1.5s infinite ease-in-out;
        }
        @keyframes pulseSleepy {
            0%, 100% { transform: translateX(-50%) scale(1); }
            50% { transform: translateX(-50%) scale(1.08); }
        }

        .sleep-timer-badge {
            position: absolute; top: 12px; right: 12px;
            background: rgba(0, 0, 0, 0.6); color: white;
            padding: 4px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: bold;
            z-index: 60; display: none;
        }

<!-- ... existing code ... -->
        <!-- Screen 3: Game Screen -->
        <div id="screen-game" class="screen flex-col">
            <!-- Room Background -->
            <div id="room-bg" class="room-bg room-living"></div>
            
            <!-- Room Decor Containers -->
            <div id="decor-living" class="room-decor active">
                <div class="big-window"></div>
                <div class="rug"></div>
                
                <!-- โซฟาห้องนั่งเล่น -->
                <div class="sofa-container">
                    <div class="sofa-back"></div>
                    <div class="sofa-seat"></div>
                    <div class="sofa-cushion sofa-cushion-left"></div>
                    <div class="sofa-cushion sofa-cushion-right"></div>
                </div>

                <!-- โทรทัศน์และตู้วาง TV -->
                <div class="tv-container">
                    <div class="tv-body">
                        <div class="tv-screen">📺</div>
                    </div>
                    <div class="tv-stand"></div>
                    <div class="tv-cabinet"></div>
                </div>
            </div>
            
            <div id="decor-kitchen" class="room-decor">
                <div class="kitchen-window"></div>
                <div class="kitchen-counter"></div>
                <div class="fridge">🧊</div>
                <div class="kitchen-chair"></div>
                <div class="kitchen-table">
                    <div class="kitchen-plate" id="kitchen-plate">🍽️</div>
                </div>
            </div>
            
            <div id="decor-bathroom" class="room-decor">
                <div class="bathroom-mirror">
                    <div class="mirror-reflection"></div>
                </div>
                <div class="bathtub-container">
                    <div class="bathtub-back"></div>
                    <div class="bathtub-water"></div>
                    <div class="bathtub-rim"></div>
                </div>
            </div>
            
            <div id="decor-bedroom" class="room-decor">
                <div class="night-window">🌙</div>
                <div class="bed-headboard"></div>
                <div class="bed-mattress"></div>
                <div class="bed-pillow"></div>
            </div>

            <!-- Sleep Timer Display -->
            <div id="sleep-timer-badge" class="sleep-timer-badge">กำลังหลับ... <span id="sleep-sec">10</span>s</div>

            <!-- Effects Container -->
            <div id="effect-container" class="effect-container"></div>

            <!-- Top Header Status (z-index 100 เพื่อให้อยู่ด้านบนหน้าต่างเสมอ) -->
            <div class="bg-white/95 backdrop-blur-sm p-3 rounded-b-3xl shadow-md relative flex flex-col gap-2" style="z-index: 100;">
                <div class="flex justify-between items-center">
                    <div class="font-bold text-gray-800 text-lg truncate" id="ui-player-name">Player</div>
                    <div class="bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-sm font-bold shadow-sm">
                        LVL <span id="ui-level">1</span> | วันที่ <span id="ui-days">1</span>
                    </div>
                </div>
                
                <!-- XP Bar -->
                <div class="flex items-center gap-2 text-xs font-semibold text-gray-500">
                    <span class="w-6">XP</span>
                    <div class="bar-container h-2 flex-1"><div id="bar-xp" class="bar-fill bar-xp" style="width: 0%"></div></div>
                    <span id="ui-xp-text" class="w-12 text-right">0/100</span>
                </div>

                <!-- Needs Bars Grid -->
                <div class="grid grid-cols-2 gap-x-4 gap-y-2 mt-1">
                    <!-- Hunger -->
                    <div class="flex items-center gap-2 text-xs font-bold text-red-500">
                        <span>🍖</span>
                        <div class="bar-container flex-1"><div id="bar-hunger" class="bar-fill bar-hunger" style="width: 100%"></div></div>
                    </div>
                    <!-- Hygiene -->
                    <div class="flex items-center gap-2 text-xs font-bold text-blue-500">
                        <span>🧼</span>
                        <div class="bar-container flex-1"><div id="bar-hygiene" class="bar-fill bar-hygiene" style="width: 100%"></div></div>
                    </div>
                    <!-- Energy -->
                    <div class="flex items-center gap-2 text-xs font-bold text-yellow-500">
                        <span>⚡</span>
                        <div class="bar-container flex-1"><div id="bar-energy" class="bar-fill bar-energy" style="width: 100%"></div></div>
                    </div>
                    <!-- Happiness -->
                    <div class="flex items-center gap-2 text-xs font-bold text-pink-500">
                        <span>❤️</span>
                        <div class="bar-container flex-1"><div id="bar-happy" class="bar-fill bar-happy" style="width: 100%"></div></div>
                    </div>
                </div>
            </div>

            <div class="flex-1 relative overflow-hidden">
                <!-- Blanket for Bedroom (ซ้อนทับตัวละคร) -->
                <div id="blanket-overlay" class="blanket-overlay"></div>

                <div id="pet-element" class="pet-container pet-dog pet-breathing">
                    <!-- Sleepy Bubble Prompt -->
                    <div id="sleepy-bubble" class="sleepy-bubble hidden">ง่วงนอนแล้วจ้า 😴</div>

                    <div class="pet-tail"></div>
                    <div class="pet-ear ear-left"></div>
                    <div class="pet-ear ear-right"></div>
                    
                    <div class="pet-body pet-part" onclick="interactPet('belly')"></div>
                    
                    <div class="pet-foot pet-foot-left pet-part" onclick="interactPet('feet')"></div>
                    <div class="pet-foot pet-foot-right pet-part" onclick="interactPet('feet')"></div>
                    
                    <div class="pet-head pet-part" onclick="interactPet('head')">
                        <div class="pet-face" id="pet-face">
                            <div class="blush blush-left"></div>
                            <div class="blush blush-right"></div>
                            <div class="pout-mark" id="pout-mark">💢</div>
                            
                            <!-- หนวดแมว (ซ่อนไว้ถ้าไม่ใช่แมว) -->
                            <div class="cat-whiskers hidden" id="cat-whiskers"></div>

                            <div class="eyes">
                                <div class="eye"><div class="catchlight"></div></div>
                                <div class="eye"><div class="catchlight"></div></div>
                            </div>
                            
                            <!-- จมูกและปากแบบสมจริง -->
                            <div class="pet-snout">
                                <div class="pet-nose"></div>
                                <div class="pet-nose hiddena" id="pig-nose-2"></div>
                                <div class="mouth">w</div>
                            </div>
                        </div>
                    </div>
                    <div class="z-zz" id="sleep-z">Zz</div>
                </div>
            </div>

            <!-- Action Panels for Rooms -->
            <!-- Kitchen Panel -->
            <div id="panel-kitchen" class="action-panel">
                <div class="action-btn" onclick="feedPet('🍎', 15)">🍎</div>
                <div class="action-btn" onclick="feedPet('🍖', 25)">🍖</div>
                <div class="action-btn" onclick="feedPet('🐟', 20)">🐟</div>
                <div class="action-btn" onclick="feedPet('🥕', 15)">🥕</div>
                <div class="action-btn" onclick="feedPet('🍼', 20)">🍼</div>
            </div>
            
            <!-- Bathroom Panel -->
            <div id="panel-bathroom" class="action-panel">
                <button id="btn-tub-toggle" class="action-btn text-xs font-bold px-2 w-auto bg-cyan-100 border-cyan-300" onclick="toggleTub()">
                    🛁 <span id="tub-btn-text">ลงอ่าง</span>
                </button>
                <div class="action-btn" onclick="washPet('brush', 20)">🪥</div>
                <div class="action-btn" onclick="washPet('soap', 25)">🧼</div>
                <div class="action-btn" onclick="washPet('rinse', 20)">🚿</div>
            </div>

            <div class="nav-bar grid grid-cols-4 pb-4 pt-2 px-2">
                <div class="nav-item active" id="nav-living" onclick="changeRoom('living')">
                    <span class="nav-icon">🛋️</span>
                    <span class="text-[10px] font-bold">นั่งเล่น</span>
                </div>
                <div class="nav-item" id="nav-kitchen" onclick="changeRoom('kitchen')">
                    <span class="nav-icon">🍽️</span>
                    <span class="text-[10px] font-bold">อาหาร</span>
                </div>
                <div class="nav-item" id="nav-bathroom" onclick="changeRoom('bathroom')">
                    <span class="nav-icon">🛁</span>
                    <span class="text-[10px] font-bold">ห้องน้ำ</span>
                </div>
                <div class="nav-item" id="nav-bedroom" onclick="changeRoom('bedroom')">
                    <span class="nav-icon">🛏️</span>
                    <span class="text-[10px] font-bold">ห้องนอน</span>
                </div>
            </div>
        </div>

        <!-- Screen 4: Summary Screen -->
        <div id="screen-summary" class="screen bg-gradient-to-br from-indigo-100 to-purple-200 justify-center items-center p-6 text-center">
            <div class="bg-white p-8 rounded-3xl shadow-2xl w-full flex flex-col items-center">
                <h1 id="sum-title" class="text-2xl font-bold text-gray-800 mb-2 leading-tight">สรุปผลการเลี้ยง</h1>
                <p id="sum-subtitle" class="text-sm text-gray-500 mb-6"></p>
                
                <div class="w-32 h-32 bg-purple-50 rounded-full mb-6 flex justify-center items-center text-6xl shadow-inner border-4 border-purple-200" id="summary-icon">
                    👑
                </div>

                <div class="w-full bg-indigo-50 p-4 rounded-2xl mb-6 text-left">
                    <div class="flex justify-between mb-2 border-b border-indigo-100 pb-2">
                        <span class="text-gray-600 font-semibold">ชื่อผู้เล่น:</span>
                        <span class="font-bold text-indigo-700" id="sum-name">Player</span>
                    </div>
                    <div class="flex justify-between mb-2 border-b border-indigo-100 pb-2">
                        <span class="text-gray-600 font-semibold">จำนวนวันที่เลี้ยงได้:</span>
                        <span class="font-bold text-indigo-700"><span id="sum-days">1</span> วัน</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-600 font-semibold">เลเวลสุดท้าย:</span>
                        <span class="font-bold text-indigo-700">LVL <span id="sum-level">1</span></span>
                    </div>
                </div>

                <button onclick="resetGame()" class="btn-clay bg-purple-500 w-full text-xl py-4 shadow-lg hover:bg-purple-600 transition">เลี้ยงใหม่อีกครั้ง</button>
            </div>
        </div>
    </div>

    <script>
        // Constants & Config
        const MAX_STAT = 100;
        const TICK_RATE = 1000; // Update every second
        const XP_THRESHOLDS = [0, 100, 250, 450, 700, 9999]; // Level 1 -> 5
        const SLEEP_DURATION = 10; // 10 วินาทีตามโจทย์
        
        // Game State
        let state = {
            playerName: '',
            petType: '',
            level: 1,
            xp: 0,
            days: 1, // เริ่มต้นวันที่ 1
            stats: { hunger: 100, hygiene: 100, energy: 100, happiness: 100 },
            currentRoom: 'living',
            inTub: false,
            intervals: { tick: null, sleepTimer: null },
            sleepCountdown: SLEEP_DURATION,
            isActionCooldown: false,
            gameOver: false
        };

        // DOM Elements
        const screens = {
            start: document.getElementById('screen-start'),
            select: document.getElementById('screen-select'),
            game: document.getElementById('screen-game'),
            summary: document.getElementById('screen-summary')
        };
        
        const petEl = document.getElementById('pet-element');
        const petFace = document.getElementById('pet-face');
        const roomBg = document.getElementById('room-bg');
        const effectContainer = document.getElementById('effect-container');

        // Helper: Switch Screens
        function showScreen(screenName) {
            Object.values(screens).forEach(s => {
                s.classList.remove('active');
            });
            screens[screenName].classList.add('active');
        }

        function goToSelectPet() {
            const nameInput = document.getElementById('player-name').value.trim();
            if (!nameInput) {
                document.getElementById('player-name').style.borderColor = 'red';
                setTimeout(() => document.getElementById('player-name').style.borderColor = '', 1000);
                return;
            }
            state.playerName = nameInput;
            showScreen('select');
        }

        function goToStart() {
            showScreen('start');
        }

        function selectPet(type) {
            state.petType = type;
            initGame();
        }

        function initGame() {
            // Reset State
            state.level = 1;
            state.xp = 0;
            state.days = 1; // เริ่มที่วันที่ 1
            state.stats = { hunger: 100, hygiene: 100, energy: 100, happiness: 100 };
            state.currentRoom = 'living';
            state.gameOver = false;
            
            // UI Setup
            document.getElementById('ui-player-name').innerText = state.playerName;
            
            // Pet Setup
            petEl.className = `pet-container pet-${state.petType} pet-breathing`;
            
            // Setup Specific Pet Details
            const catWhiskers = document.getElementById('cat-whiskers');
            const pigNose2 = document.getElementById('pig-nose-2');
            
            catWhiskers.classList.add('hidden');
            pigNose2.classList.add('hidden');
            document.querySelector('.pet-snout').style.flexDirection = 'column';

            if(state.petType === 'cat') {
                catWhiskers.classList.remove('hidden');
            } else if(state.petType === 'pig') {
                pigNose2.classList.remove('hidden');
                document.querySelector('.pet-snout').style.flexDirection = 'row';
            }
            
            resetFace();
            changeRoom('living');
            updateUI();
            showScreen('game');

            // Start Loops
            clearInterval(state.intervals.tick);
            clearInterval(state.intervals.sleepTimer);
            state.intervals.tick = setInterval(gameTick, TICK_RATE);
        }

        function gameTick() {
            if (state.gameOver) return;

            // ค่อยๆ ลดหลอดความต้องการลงทีละนิด
            if (state.currentRoom !== 'bedroom') {
                state.stats.hunger = Math.max(0, state.stats.hunger - 1.2);
                state.stats.hygiene = Math.max(0, state.stats.hygiene - 0.8);
                state.stats.happiness = Math.max(0, state.stats.happiness - 1.0);
                state.stats.energy = Math.max(0, state.stats.energy - 0.8);
            }

            updateUI();
            checkSleepyStatus();
            checkGameOver();
        }

        function checkSleepyStatus() {
            // เมื่อหลอดเต็ม หรือ สัตว์เลี้ยงเริ่มง่วง ให้ขึ้นแจ้งเตือนให้พาไปนอน
            const sleepyBubble = document.getElementById('sleepy-bubble');
            const isAllFull = state.stats.hunger >= 90 && state.stats.hygiene >= 90 && state.stats.happiness >= 90;
            
            if ((isAllFull || state.stats.energy <= 30) && state.currentRoom !== 'bedroom') {
                sleepyBubble.classList.remove('hidden');
            } else {
                sleepyBubble.classList.add('hidden');
            }
        }

        function checkGameOver() {
            const { hunger, hygiene, energy, happiness } = state.stats;
            // ถ้าปล่อยให้หลอดความต้องการลดลงจนหมด
            if (hunger <= 0 || hygiene <= 0 || energy <= 0 || happiness <= 0) {
                endGame(false); // แพ้
            }
        }

        function addXP(amount) {
            if(state.level >= 5) return; // Max level 5
            
            state.xp += amount;
            let nextThreshold = XP_THRESHOLDS[state.level];
            
            if (state.xp >= nextThreshold) {
                state.level++;
                spawnEffect('heart', 5);
            }
            if(state.level === 5) state.xp = XP_THRESHOLDS[4]; 
            updateUI();
        }

        function updateUI() {
            document.getElementById('ui-level').innerText = state.level;
            document.getElementById('ui-days').innerText = state.days;
            
            let currentLevelXP = XP_THRESHOLDS[state.level - 1];
            let nextLevelXP = XP_THRESHOLDS[state.level];
            let xpRange = nextLevelXP - currentLevelXP;
            let xpProgress = state.xp - currentLevelXP;
            let xpPercent = state.level >= 5 ? 100 : (xpProgress / xpRange) * 100;
            
            document.getElementById('bar-xp').style.width = `${xpPercent}%`;
            document.getElementById('ui-xp-text').innerText = state.level >= 5 ? 'MAX' : `${state.xp}/${nextLevelXP}`;

            // Update Need Bars
            document.getElementById('bar-hunger').style.width = `${state.stats.hunger}%`;
            document.getElementById('bar-hygiene').style.width = `${state.stats.hygiene}%`;
            document.getElementById('bar-energy').style.width = `${state.stats.energy}%`;
            document.getElementById('bar-happy').style.width = `${state.stats.happiness}%`;

            ['hunger', 'hygiene', 'energy', 'happy'].forEach(stat => {
                let s = stat === 'happy' ? 'happiness' : stat;
                let el = document.getElementById(`bar-${stat}`);
                if(state.stats[s] < 25) {
                    el.classList.add('animate-pulse');
                } else {
                    el.classList.remove('animate-pulse');
                }
            });
        }

        function changeRoom(room) {
            state.currentRoom = room;
            state.isActionCooldown = false;
            
            document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'));
            document.getElementById(`nav-${room}`).classList.add('active');

            roomBg.className = `room-bg room-${room}`;
            document.querySelectorAll('.room-decor').forEach(el => el.classList.remove('active'));
            document.getElementById(`decor-${room}`).classList.add('active');

            document.querySelectorAll('.action-panel').forEach(el => el.classList.remove('active'));
            if(room === 'kitchen') document.getElementById('panel-kitchen').classList.add('active');
            if(room === 'bathroom') document.getElementById('panel-bathroom').classList.add('active');

            if (room !== 'bathroom' && state.inTub) {
                state.inTub = false;
                petEl.classList.remove('pet-in-tub');
                updateTubButton();
            }

            clearInterval(state.intervals.sleepTimer);
            document.getElementById('sleep-timer-badge').style.display = 'none';

            petEl.classList.remove('pet-in-kitchen', 'pet-sleeping');

            if (room === 'kitchen') {
                petEl.classList.add('pet-in-kitchen', 'pet-breathing');
                resetFace();
            } else if (room === 'bedroom') {
                petEl.classList.remove('pet-breathing', 'action-bounce');
                petEl.classList.add('pet-sleeping');
                setFace('sleep'); // หลับตาสนิท
                document.getElementById('sleep-z').style.opacity = '1';
                document.getElementById('sleep-z').style.animation = 'floatZ 3s infinite';
                document.getElementById('blanket-overlay').classList.add('blanket-active');
                
                // เริ่มต้นเวลานอนหลับ 10 วินาที
                state.sleepCountdown = SLEEP_DURATION;
                const timerBadge = document.getElementById('sleep-timer-badge');
                const timerSec = document.getElementById('sleep-sec');
                timerBadge.style.display = 'block';
                timerSec.innerText = state.sleepCountdown;

                state.intervals.sleepTimer = setInterval(() => {
                    state.sleepCountdown--;
                    timerSec.innerText = state.sleepCountdown;

                    if (state.sleepCountdown <= 0) {
                        clearInterval(state.intervals.sleepTimer);
                        timerBadge.style.display = 'none';

                        // เมื่อนอนตื่นขึ้นมา 1 ครั้ง อัปผ่านไป 1 วัน
                        state.stats.energy = MAX_STAT;
                        spawnEffect('heart', 3);

                        // ตรวจสอบเงื่อนไขวัน
                        if (state.days >= 5) {
                            endGame(true); // เลี้ยงสำเร็จครบ 5 วัน!
                        } else {
                            state.days++;
                            updateUI();
                            changeRoom('living'); // ตื่นมาห้องนั่งเล่นทันที
                        }
                    }
                }, 1000);

            } else {
                petEl.classList.add('pet-breathing');
                resetFace();
                document.getElementById('sleep-z').style.opacity = '0';
                document.getElementById('sleep-z').style.animation = 'none';
                document.getElementById('blanket-overlay').classList.remove('blanket-active');
            }

            checkSleepyStatus();
        }

        function interactPet(part) {
            if (state.currentRoom === 'bedroom' || state.isActionCooldown) return;
            
            state.isActionCooldown = true;
            bouncePet();
            
            let xpGain = 15;
            let happyGain = 20;

            if (part === 'head') {
                // 1. คลิกศีรษะ -> ยิ้ม
                setFace('smile');
                spawnEffect('heart', 2);
            } else if (part === 'belly') {
                // 2. คลิกท้อง -> ทำหน้าบูด
                setFace('pout');
                spawnEffect('annoyed', 1);
                happyGain = -5;
                xpGain = 8;
            } else if (part === 'feet') {
                // 3. คลิกเท้า -> หัวเราะ
                setFace('laugh');
                spawnEffect('text-laugh', 2);
                happyGain = 25;
            }

            state.stats.happiness = Math.max(0, Math.min(MAX_STAT, state.stats.happiness + happyGain));
            addXP(xpGain);
            
            setTimeout(() => {
                if(state.currentRoom !== 'bedroom') resetFace();
                state.isActionCooldown = false;
            }, 1500);
        }

        function bouncePet() {
            petEl.classList.remove('action-bounce');
            void petEl.offsetWidth;
            petEl.classList.add('action-bounce');
            setTimeout(() => {
                petEl.classList.remove('action-bounce');
            }, 400);
        }

        function feedPet(foodEmoji, restoreAmount) {
            if (state.isActionCooldown) return;
            state.isActionCooldown = true;
            
            const plate = document.getElementById('kitchen-plate');
            if (plate) plate.innerText = foodEmoji;

            let effect = document.createElement('div');
            effect.innerHTML = foodEmoji;
            effect.className = 'absolute text-5xl z-50';
            effect.style.left = '50%';
            effect.style.top = '10%';
            effect.style.transform = 'translate(-50%, 0)';
            effect.style.animation = 'dropDownFood 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards';
            effectContainer.appendChild(effect);

            setTimeout(() => {
                effect.remove();
                
                petEl.classList.add('pet-chewing');
                setFace('smile');
                spawnEffect('text-eating', 1);

                setTimeout(() => {
                    petEl.classList.remove('pet-chewing');
                    if (plate) plate.innerText = '🍽️';
                    resetFace();
                    state.isActionCooldown = false;
                }, 1200);

            }, 800);

            state.stats.hunger = Math.min(MAX_STAT, state.stats.hunger + restoreAmount);
            addXP(10);
        }

        function toggleTub() {
            state.inTub = !state.inTub;
            
            if (state.inTub) {
                petEl.classList.add('pet-in-tub');
                spawnEffect('water-drop', 4);
                setFace('smile');
            } else {
                petEl.classList.remove('pet-in-tub');
                resetFace();
            }
            
            updateTubButton();
            
            setTimeout(() => {
                if (!state.inTub && state.currentRoom !== 'bedroom') resetFace();
            }, 1000);
        }

        function updateTubButton() {
            const btnText = document.getElementById('tub-btn-text');
            if (btnText) {
                btnText.innerText = state.inTub ? 'ขึ้นจากอ่าง' : 'ลงอ่าง';
            }
        }

        function washPet(action, restoreAmount) {
            if (state.isActionCooldown) return;
            state.isActionCooldown = true;
            
            if (!state.inTub) {
                toggleTub();
            }

            bouncePet();
            setFace('smile');
            
            if (action === 'brush') {
                // แปรงฟัน animation - แปรงขยับตรงปากพอดี
                let brushEl = document.createElement('div');
                brushEl.className = 'brush-anim';
                brushEl.innerText = '🪥';
                petEl.appendChild(brushEl);

                for (let i = 0; i < 7; i++) {
                    setTimeout(() => {
                        let foam = document.createElement('div');
                        foam.className = 'foam-sparkle';
                        foam.innerText = Math.random() > 0.4 ? '🫧' : '✨';
                        foam.style.left = `${45 + (Math.random() * 20 - 10)}%`;
                        foam.style.top = `${55 + (Math.random() * 10 - 5)}%`;
                        foam.style.setProperty('--dx', `${(Math.random() - 0.5) * 50}px`);
                        foam.style.setProperty('--dy', `${-20 - Math.random() * 30}px`);
                        effectContainer.appendChild(foam);
                        setTimeout(() => foam.remove(), 750);
                    }, i * 140);
                }

                setTimeout(() => {
                    brushEl.remove();
                }, 1200);

            } else if (action === 'soap' || action === 'rinse') {
                spawnEffect('bubble', action === 'soap' ? 6 : 3);
            }
            if (action === 'rinse') {
                spawnEffect('water-drop', 5);
            }

            state.stats.hygiene = Math.min(MAX_STAT, state.stats.hygiene + restoreAmount);
            addXP(15);
            
            setTimeout(() => {
                if(state.currentRoom !== 'bedroom') resetFace();
                state.isActionCooldown = false;
            }, 1200);
        }

        function setFace(mood) {
            petFace.className = `pet-face face-${mood}`;
            let mouth = document.querySelector('.mouth');
            if(state.petType === 'pig') {
                if(mood === 'sad' || mood === 'pout') mouth.innerText = '╭╮';
                else if(mood === 'laugh') mouth.innerText = '▽';
                else if(mood === 'smile' || mood === 'happy') mouth.innerText = '‿';
                else mouth.innerText = '';
            } else {
                if(mood === 'sad' || mood === 'pout') mouth.innerText = '╭╮';
                else if(mood === 'laugh') mouth.innerText = '▽';
                else if(mood === 'smile' || mood === 'happy') mouth.innerText = '‿';
                else if(state.petType === 'cat') mouth.innerText = 'w';
                else mouth.innerText = 'v';
            }
        }

        function resetFace() {
            petFace.className = 'pet-face';
            let mouth = document.querySelector('.mouth');
            if(state.petType === 'pig') {
                mouth.innerText = '';
            } else if(state.petType === 'cat') {
                mouth.innerText = 'w';
            } else {
                mouth.innerText = 'v';
            }
        }

        function spawnEffect(type, count) {
            for(let i=0; i<count; i++) {
                let el = document.createElement('div');
                
                if (type === 'bubble') {
                    el.className = 'bubble';
                    let size = Math.random() * 20 + 10;
                    el.style.width = `${size}px`;
                    el.style.height = `${size}px`;
                    el.style.left = `${40 + Math.random() * 20}%`;
                    el.style.bottom = `${30 + Math.random() * 10}%`;
                } 
                else if (type === 'heart') {
                    el.className = 'heart';
                    el.innerHTML = '💖';
                    el.style.left = `${40 + Math.random() * 20}%`;
                    el.style.bottom = `40%`;
                }
                else if (type === 'water-drop') {
                    el.className = 'water-drop';
                    el.style.left = `${45 + Math.random() * 10}%`;
                    el.style.top = `${20 + Math.random() * 10}%`;
                }
                else if (type === 'text-eating') {
                    el.className = 'heart text-xl font-bold text-amber-600';
                    el.innerHTML = 'ง่ำๆ! 😋';
                    el.style.left = '45%';
                    el.style.bottom = '45%';
                }
                else if (type === 'text-laugh') {
                    el.className = 'heart text-xl font-bold text-pink-500';
                    el.innerHTML = '5555! 😆';
                    el.style.left = `${35 + Math.random() * 20}%`;
                    el.style.bottom = '50%';
                }
                else if (type === 'annoyed') {
                    el.className = 'heart text-2xl';
                    el.innerHTML = '💢';
                    el.style.left = `${35 + Math.random() * 20}%`;
                    el.style.bottom = '50%';
                }

                effectContainer.appendChild(el);
                setTimeout(() => el.remove(), 2000);
            }
        }

        function endGame(isWin) {
            state.gameOver = true;
            clearInterval(state.intervals.tick);
            clearInterval(state.intervals.sleepTimer);
            
            const titleEl = document.getElementById('sum-title');
            const subTitleEl = document.getElementById('sum-subtitle');
            const iconEl = document.getElementById('summary-icon');

            document.getElementById('sum-name').innerText = state.playerName;
            document.getElementById('sum-days').innerText = state.days;
            document.getElementById('sum-level').innerText = state.level;
            
            if (isWin) {
                titleEl.innerText = "คุณเลี้ยงสำเร็จ\nคุณเป็นผู้เลี้ยงที่ดีเด่น";
                titleEl.className = "text-2xl font-bold text-purple-700 mb-2 leading-tight whitespace-pre-line";
                subTitleEl.innerText = "ยินดีด้วยนะ! คุณดูแลสัตว์เลี้ยงได้อย่างดีเยี่ยม 🎉";
                iconEl.innerText = '🏆';
            } else {
                titleEl.innerText = "คุณไม่สามารถเลี้ยงสัตว์ได้\n#บ้านใหม่ใกล้ฉัน";
                titleEl.className = "text-2xl font-bold text-rose-600 mb-2 leading-tight whitespace-pre-line";
                subTitleEl.innerText = "หลอดความต้องการหมด สัตว์เลี้ยงต้องไปหาบ้านใหม่แล้วนะ 🥺";
                iconEl.innerText = '🏚️';
            }

            showScreen('summary');
        }

        function resetGame() {
            showScreen('start');
            document.getElementById('player-name').value = '';
        }

    </script>
</body>
</html>
<script async src="https://app-137.gemigo.app/__gemigo/favicon-runtime.v1.js" data-gemigo-favicon-runtime></script><script defer src="https://app-137.gemigo.app/__gemigo/analytics.v2.js" data-gemigo-analytics></script>