<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-9L198NC26X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-9L198NC26X');
</script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Lights - Your Emotional Light Experience</title>

<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png">
<link rel="shortcut icon" href="favicon.png" type="image/png">
<link rel="apple-touch-icon" href="favicon.png">

    <style>
        :root {
            --sage-green: #9caf88;
            --soft-lavender: #b19cd9;
            --warm-amber: #f4d03f;
            --gentle-blue: #a8d8ea;
            --cream-white: #faf9f6;
            --soft-gray: #e8e8e8;
            --deep-sage: #7a8471;
            --transition-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background-color: #000;
            min-height: 100vh;
            overflow-x: hidden;
        }

        .container {
            width: 100%;
            padding: 0 1rem;
            margin: 0 auto;
        }

        .mx-auto {
            margin-left: auto;
            margin-right: auto;
        }

        .px-4 {
            padding-left: 1rem;
            padding-right: 1rem;
        }

        .py-4 {
            padding-top: 1rem;
            padding-bottom: 1rem;
        }

        .min-h-screen {
            min-height: 100vh;
        }

        .flex {
            display: flex;
        }

        .flex-col {
            flex-direction: column;
        }

        .items-center {
            align-items: center;
        }

        .justify-center {
            justify-content: center;
        }

        .hidden {
            display: none;
        }

        .lg\:block {
            display: none;
        }

        .lg\:hidden {
            display: block;
        }

        .mb-1 { margin-bottom: 0.25rem; }
        .mb-2 { margin-bottom: 0.5rem; }
        .mb-4 { margin-bottom: 1rem; }
        .mb-6 { margin-bottom: 1.5rem; }
        .mt-10 { margin-top: 2.5rem; }
        .mt-20 { margin-top: 5rem; }

        .text-center {
            text-align: center;
        }

        .text-xl { font-size: 1.25rem; }
        .text-2xl { font-size: 1.5rem; }

        .zen-container {
            background-color: #000;
            min-height: 100vh;
            position: relative;
            overflow: hidden;
        }

        .game-title {
            color: white;
            text-align: center;
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            text-shadow: 0 0 10px rgba(255,255,255,0.3);
            padding-top: 1.5rem;
        }

        .game-subtitle {
            color: rgba(255,255,255,0.8);
            text-align: center;
            font-size: 1.1rem;
            font-weight: 400;
            margin-bottom: 1rem;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
        }

        .zen-switch-container {
            position: relative;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 30px;
            padding: 30px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            transition: all 0.5s var(--transition-ease);
            width: 380px;
            min-height: 420px;
            margin: 0 auto;
        }

        .zen-switch {
            width: 120px;
            height: 60px;
            background: linear-gradient(135deg, var(--soft-gray) 0%, var(--cream-white) 100%);
            border-radius: 30px;
            position: relative;
            cursor: pointer;
            transition: all 0.4s var(--transition-ease);
            box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.3);
        }

        .switch-handle {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            border-radius: 50%;
            position: absolute;
            top: 5px;
            left: 5px;
            transition: all 0.4s var(--transition-ease);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .zen-switch.active .switch-handle {
            transform: translateX(60px);
            background: linear-gradient(135deg, var(--warm-amber) 0%, #f7dc6f 100%);
            box-shadow: 0 6px 20px rgba(244, 208, 63, 0.4);
        }

        .switch-icon {
            font-size: 1.2rem;
            color: var(--deep-sage);
            transition: all 0.3s ease;
        }

        .zen-switch.active .switch-icon {
            color: #d4ac0d;
        }

        .switch-label {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.9rem;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.7);
            transition: all 0.3s ease;
        }

        .switch-label.on {
            right: -40px;
            opacity: 0;
        }

        .switch-label.off {
            left: -40px;
            opacity: 1;
        }

        .zen-switch.active .switch-label.on {
            opacity: 1;
        }

        .zen-switch.active .switch-label.off {
            opacity: 0;
        }

        .zen-light {
            width: 150px;
            height: 200px;
            margin: 20px auto;
            position: relative;
            transition: all 0.6s var(--transition-ease);
        }

        .light-bulb {
            width: 100px;
            height: 150px;
            background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
            border-radius: 50% 50% 30% 30%;
            position: relative;
            margin: 0 auto;
            transition: all 0.6s var(--transition-ease);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .emoji-face {
            font-size: 4rem;
            transition: all 0.4s ease;
            position: absolute;
            z-index: 10;
            user-select: none;
        }

        .light-bulb.active {
            box-shadow: 0 0 40px rgba(244, 208, 63, 0.6), 0 0 80px rgba(244, 208, 63, 0.3);
        }

        .light-bulb.active::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle, transparent 40%, rgba(255, 255, 255, 0.1) 70%, transparent 90%);
            border-radius: inherit;
            animation: glow-pulse 2s infinite alternate;
            z-index: 1;
        }

        @keyframes glow-pulse {
            0% { opacity: 0.7; transform: scale(1); }
            100% { opacity: 1; transform: scale(1.05); }
        }

        @keyframes emoji-bounce {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        .emoji-bounce {
            animation: emoji-bounce 0.6s ease;
        }

        .light-base {
            width: 40px;
            height: 30px;
            background: linear-gradient(135deg, #adb5bd 0%, #ced4da 100%);
            margin: -5px auto 0;
            border-radius: 0 0 5px 5px;
            position: relative;
        }

        .light-base::before {
            content: '';
            position: absolute;
            width: 30px;
            height: 5px;
            background: #6c757d;
            top: 8px;
            left: 5px;
            border-radius: 2px;
        }

        .light-glow {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(244, 208, 63, 0.3) 0%, transparent 70%);
            border-radius: 50%;
            opacity: 0;
            transition: all 0.6s var(--transition-ease);
            pointer-events: none;
        }

        .light-glow.active {
            opacity: 1;
            transform: translateX(-50%) scale(1.2);
        }

        .ad-space {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.9rem;
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }

        .status-text {
            text-align: center;
            margin-top: 20px;
            font-size: 1.5rem;
            color: white;
            font-weight: 600;
            transition: all 0.4s ease;
            height: 3rem;
        }

        .emotion-description {
            text-align: center;
            margin-top: 10px;
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.8);
            height: 2.5rem;
        }

        /* Light color themes */
        .light-happy { background: linear-gradient(135deg, #ffd93d 0%, #ff9500 100%); }
        .light-love { background: linear-gradient(135deg, #ff6b9d 0%, #ff3366 100%); }
        .light-cool { background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%); }
        .light-laugh { background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%); }
        .light-surprised { background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%); }
        .light-playful { background: linear-gradient(135deg, #55efc4 0%, #00b894 100%); }
        .light-peaceful { background: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 100%); }
        .light-confident { background: linear-gradient(135deg, #f368e0 0%, #ff9f43 100%); }
        .light-mysterious { background: linear-gradient(135deg, #5f27cd 0%, #341f97 100%); }
        .light-chill { background: linear-gradient(135deg, #1dd1a1 0%, #10ac84 100%); }

        /* Angel Mascot Styles */
        .angel-mascot-container {
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 100;
        }

        .angel-mascot-container a {
            display: inline-block;
            text-decoration: none;
        }

        .angel-face {
            display: inline-block;
            width: 40px;
            height: 40px;
            position: relative;
            vertical-align: middle;
            margin: 0 4px;
            border-radius: 50%;
            background: linear-gradient(145deg, #ffecd1, #ffb88c);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 2px 4px rgba(255, 255, 255, 0.3);
            transition: all 0.3s ease;
            overflow: visible;
        }

        /* Left Game Ads Box */
        .left-ad-box {
            position: fixed;
            left: 20px;
            top: 80px; /* Below the mascot */
            width: 160px;
            height: 600px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 10px;
            padding: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            z-index: 90;
        }

        .left-ad-box a {
            display: block;
            text-align: center;
        }

        .left-ad-box img {
            width: 100px;
            height: 100px;
            border-radius: 10px;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .left-ad-box img:hover {
            transform: scale(1.05);
        }

        /* Right Happy Ads Box */
        .right-ad-box {
            position: fixed;
            right: 20px;
            top: 80px; /* Aligned with left box */
            width: 160px;
            height: 600px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 10px;
            padding: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            z-index: 90;
        }

        .right-ad-box a {
            display: block;
            text-align: center;
        }

        .right-ad-box img {
            width: 100px;
            height: 100px;
            border-radius: 10px;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .right-ad-box img:hover {
            transform: scale(1.05);
        }

        /* Main Content Container */
        .main-content {
            width: 100%;
            max-width: 380px;
            margin: 0 auto;
            padding: 0 20px;
        }

        @media (min-width: 1024px) {
            .lg\:block {
                display: block;
            }
            .lg\:hidden {
                display: none;
            }
            .main-content {
                margin: 0 auto;
            }
        }

        @media (max-width: 768px) {
            .game-title {
                font-size: 2rem;
                padding-top: 1rem;
            }
            
            .game-subtitle {
                font-size: 0.95rem;
                padding: 0 1rem;
            }
            
            .zen-switch-container {
                width: 340px;
                padding: 25px 15px;
                min-height: 380px;
            }
            
            .zen-light {
                width: 120px;
                height: 180px;
                margin: 15px auto;
            }
            
            .light-bulb {
                width: 80px;
                height: 120px;
            }

            .emoji-face {
                font-size: 3rem;
            }
            
            .status-text {
                font-size: 1.3rem;
                height: 2.8rem;
            }
            
            .emotion-description {
                font-size: 0.9rem;
                height: 2.2rem;
            }
            
            .ad-space {
                height: 100px;
            }

            .left-ad-box,
            .right-ad-box {
                display: none;
            }
        }

        @media (max-width: 480px) {
            .game-title {
                font-size: 1.8rem;
            }
            
            .zen-switch-container {
                width: 300px;
                min-height: 360px;
            }
            
            .zen-switch {
                width: 100px;
                height: 50px;
            }
            
            .switch-handle {
                width: 40px;
                height: 40px;
            }
            
            .zen-switch.active .switch-handle {
                transform: translateX(50px);
            }
            
            .switch-label {
                font-size: 0.8rem;
            }
            
            .switch-label.on {
                right: -35px;
            }
            
            .switch-label.off {
                left: -35px;
            }
            
            .status-text {
                font-size: 1.2rem;
                height: 2.5rem;
            }
            
            .emotion-description {
                font-size: 0.85rem;
                height: 2rem;
            }
        }
    </style>
</head>
<body>
    <div class="zen-container">
        <!-- Angel Mascot with Home Link -->
        <div class="angel-mascot-container">
            <a href="../index.html">
                <div class="angel-face" id="angelFace">
                    <!-- Hair -->
                    <div style="
                        content: '';
                        position: absolute;
                        top: -8px;
                        left: -2px;
                        right: -2px;
                        height: 25px;
                        background: linear-gradient(145deg, #d4af37, #ffd700);
                        border-radius: 50% 50% 45% 45%;
                        z-index: 2;
                        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
                    "></div>
                    
                    <!-- Halo -->
                    <div style="
                        content: '';
                        position: absolute;
                        top: -15px;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 35px;
                        height: 6px;
                        border: 2px solid #ffd700;
                        border-radius: 50%;
                        background: transparent;
                        box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
                        z-index: 3;
                    "></div>
                    
                    <!-- Left Eye -->
                    <div class="left-eye" style="
                        position: absolute;
                        width: 8px;
                        height: 8px;
                        background: #fff;
                        border-radius: 50%;
                        top: 45%;
                        left: 28%;
                        border: 1px solid #e0e0e0;
                        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
                        z-index: 1;
                    ">
                        <div class="left-pupil" id="leftPupil" style="
                            position: absolute;
                            width: 4px;
                            height: 4px;
                            background: #2563eb;
                            border-radius: 50%;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            transition: all 0.1s ease;
                            z-index: 1;
                        ">
                            <div style="
                                content: '';
                                position: absolute;
                                width: 1.5px;
                                height: 1.5px;
                                background: white;
                                border-radius: 50%;
                                top: 20%;
                                left: 30%;
                            "></div>
                        </div>
                    </div>
                    
                    <!-- Right Eye -->
                    <div class="right-eye" style="
                        position: absolute;
                        width: 8px;
                        height: 8px;
                        background: #fff;
                        border-radius: 50%;
                        top: 45%;
                        left: 64%;
                        border: 1px solid #e0e0e0;
                        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
                        z-index: 1;
                    ">
                        <div class="right-pupil" id="rightPupil" style="
                            position: absolute;
                            width: 4px;
                            height: 4px;
                            background: #2563eb;
                            border-radius: 50%;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            transition: all 0.1s ease;
                            z-index: 1;
                        ">
                            <div style="
                                content: '';
                                position: absolute;
                                width: 1.5px;
                                height: 1.5px;
                                background: white;
                                border-radius: 50%;
                                top: 20%;
                                left: 30%;
                            "></div>
                        </div>
                    </div>
                    
                    <!-- Nose -->
                    <div class="nose" style="
                        position: absolute;
                        top: 55%;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 2px;
                        height: 3px;
                        background: #ffb88c;
                        border-radius: 0 0 50% 50%;
                        z-index: 1;
                    "></div>
                    
                    <!-- Smile -->
                    <div class="smile" style="
                        position: absolute;
                        top: 65%;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 12px;
                        height: 6px;
                        border: 1.5px solid #ff6b8a;
                        border-top: none;
                        border-radius: 0 0 12px 12px;
                        background: transparent;
                        z-index: 1;
                    "></div>
                    
                    <!-- Cheeks -->
                    <div class="left-cheek" style="
                        position: absolute;
                        width: 6px;
                        height: 4px;
                        background: rgba(255, 182, 193, 0.6);
                        border-radius: 50%;
                        top: 58%;
                        left: 15%;
                        z-index: 1;
                    "></div>
                    <div class="right-cheek" style="
                        position: absolute;
                        width: 6px;
                        height: 4px;
                        background: rgba(255, 182, 193, 0.6);
                        border-radius: 50%;
                        top: 58%;
                        right: 15%;
                        z-index: 1;
                    "></div>
                </div>
            </a>
        </div>

        <!-- Left Game Ads Box -->
        <div class="left-ad-box">
            <a href="../balloonblast/balloonblast.html">
                <img src="../balloonblast/balloonblast.png" alt="Balloon Blast">
            </a>
            <a href="../memorychallenge/memchal.html">
                <img src="../memorychallenge/memorychallenge.png" alt="Memory Challenge">
            </a>
            <a href="../mergetiles/mergetiles.html">
                <img src="../mergetiles/mergetiles.png" alt="Merge Tiles">
            </a>
            <a href="../multihorn/multihorn.html">
                <img src="../multihorn/multihorn.png" alt="Multi Horn">
            </a>
            <a href="../zenbreath/zenbreath.html">
                <img src="../zenbreath/zenbreath.png" alt="Zen Breath">
            </a>
        </div>

        <!-- Right Happy Ads Box -->
        <div class="right-ad-box">
            <a href="../numberflow/numberflowpro.html">
                <img src="../numberflow/numberflowpro.png" alt="NumberFlow Pro">
            </a>
            <a href="../quickmath/quickmath.html">
                <img src="../quickmath/quickmath.png" alt="Quick Math">
            </a>
            <a href="../aquarium/aquarium.html">
                <img src="../aquarium/aquarium.png" alt="Aquarium">
            </a>
            <a href="../nexusgrid/nexusgrid.html">
                <img src="../nexusgrid/nexusgrid.png" alt="Nexus Grid">
            </a>
            <a href="../interactivelights/interactivelights.html">
                <img src="../interactivelights/interactivelights.png" alt="Interactive Lights">
            </a>
        </div>

        <div class="container mx-auto px-4 py-4 min-h-screen">
            <div class="main-content">
                <h1 class="game-title">Interactive Lights</h1>
                <p class="game-subtitle">Flip the switch to reveal your emotional light!</p>
                
                <div class="zen-switch-container">
                    <div class="zen-light">
                        <div class="light-glow" id="lightGlow"></div>
                        <div class="light-bulb" id="lightBulb">
                            <div class="emoji-face" id="emojiFace">😴</div>
                        </div>
                        <div class="light-base"></div>
                    </div>
                    
                    <div class="flex justify-center mb-4 relative">
                        <div class="zen-switch" id="zenSwitch">
                            <div class="switch-handle">
                                <span class="switch-icon">⏻</span>
                            </div>
                            <span class="switch-label on">ON</span>
                            <span class="switch-label off">OFF</span>
                        </div>
                    </div>
                    
                    <div class="status-text" id="statusText">
                        Sleeping 💤
                    </div>
                    
                    <div class="emotion-description" id="emotionDescription">
                        Click to wake me up!
                    </div>
                </div>
            </div>
            
            <!-- Mobile Ad Spaces -->
            <div class="lg:hidden">
                <div class="ad-space h-24 mb-4">
                    <div class="text-center">
                        <span class="icon-mobile text-xl mb-1"></span>
                        <p>Mobile Game Ad • 320 x 50</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        class EmotionalLightBulb {
            constructor() {
                this.isActive = false;
                this.currentEmotionIndex = 0;
                
                // DOM elements
                this.zenSwitch = document.getElementById('zenSwitch');
                this.lightBulb = document.getElementById('lightBulb');
                this.lightGlow = document.getElementById('lightGlow');
                this.statusText = document.getElementById('statusText');
                this.emojiFace = document.getElementById('emojiFace');
                this.emotionDescription = document.getElementById('emotionDescription');
                
                // Emotions with corresponding colors and descriptions
                this.emotions = [
                    { emoji: '😊', color: 'light-happy', name: 'Happy', description: 'Feeling bright and cheerful!' },
                    { emoji: '😍', color: 'light-love', name: 'In Love', description: 'Spreading love and warmth everywhere!' },
                    { emoji: '😎', color: 'light-cool', name: 'Cool', description: 'Keeping it chill and stylish!' },
                    { emoji: '😂', color: 'light-laugh', name: 'Laughing', description: 'Having the best time ever!' },
                    { emoji: '😮', color: 'light-surprised', name: 'Surprised', description: 'Wow! What just happened?!' },
                    { emoji: '😋', color: 'light-playful', name: 'Playful', description: 'Let\'s have some fun!' },
                    { emoji: '😌', color: 'light-peaceful', name: 'Peaceful', description: 'Everything is calm and serene' },
                    { emoji: '😏', color: 'light-confident', name: 'Confident', description: 'I got this, no problem!' },
                    { emoji: '😶', color: 'light-mysterious', name: 'Mysterious', description: 'I know something you don\'t...' },
                    { emoji: '😑', color: 'light-chill', name: 'Chill', description: 'Just relaxing, no worries' }
                ];
                
                this.audioContext = null;
                
                this.init();
            }
            
            init() {
                this.zenSwitch.addEventListener('click', () => this.toggle());
                this.initAudio();
            }
            
            initAudio() {
                try {
                    this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
                } catch (e) {
                    console.log('Audio context not supported');
                }
            }
            
            playClickSound() {
                if (!this.audioContext) return;
                
                const oscillator = this.audioContext.createOscillator();
                const gainNode = this.audioContext.createGain();
                
                oscillator.connect(gainNode);
                gainNode.connect(this.audioContext.destination);
                
                oscillator.frequency.value = this.isActive ? 800 : 400;
                oscillator.type = 'sine';
                
                gainNode.gain.setValueAtTime(0.3, this.audioContext.currentTime);
                gainNode.gain.exponentialRampToValueAtTime(0.01, this.audioContext.currentTime + 0.1);
                
                oscillator.start(this.audioContext.currentTime);
                oscillator.stop(this.audioContext.currentTime + 0.1);
            }
            
            toggle() {
                this.isActive = !this.isActive;
                this.playClickSound();
                
                if (this.isActive) {
                    this.turnOn();
                } else {
                    this.turnOff();
                }
            }
            
            turnOn() {
                // Update visual states
                this.zenSwitch.classList.add('active');
                this.lightGlow.classList.add('active');
                
                // Change to next emotion
                this.changeEmotion();
                
                // Update status
                this.statusText.textContent = `${this.emotions[this.currentEmotionIndex].name} ${this.emotions[this.currentEmotionIndex].emoji}`;
                this.emotionDescription.textContent = this.emotions[this.currentEmotionIndex].description;
                
                // Add gentle haptic feedback
                if ('vibrate' in navigator) {
                    navigator.vibrate([50, 30, 50]);
                }
            }
            
            turnOff() {
                // Update visual states
                this.zenSwitch.classList.remove('active');
                this.lightGlow.classList.remove('active');
                
                // Reset to sleeping
                this.resetToSleep();
                
                // Add gentle haptic feedback
                if ('vibrate' in navigator) {
                    navigator.vibrate(100);
                }
            }
            
            changeEmotion() {
                // Move to next emotion
                this.currentEmotionIndex = (this.currentEmotionIndex + 1) % this.emotions.length;
                
                // Remove all bulb color classes
                this.lightBulb.className = 'light-bulb active';
                
                // Add new color class
                this.lightBulb.classList.add(this.emotions[this.currentEmotionIndex].color);
                
                // Update emoji with bounce animation
                this.emojiFace.classList.add('emoji-bounce');
                this.emojiFace.textContent = this.emotions[this.currentEmotionIndex].emoji;
                
                // Remove bounce animation after it completes
                setTimeout(() => {
                    this.emojiFace.classList.remove('emoji-bounce');
                }, 600);
            }
            
            resetToSleep() {
                // Remove all bulb color classes and active state
                this.lightBulb.className = 'light-bulb';
                
                // Reset to sleeping emoji
                this.emojiFace.textContent = '😴';
                this.emojiFace.classList.remove('emoji-bounce');
                
                // Reset status
                this.statusText.textContent = 'Sleeping 💤';
                this.emotionDescription.textContent = 'Click to wake me up!';
            }
        }
        
        // Initialize the emotional light bulb when DOM is loaded
        document.addEventListener('DOMContentLoaded', () => {
            // Resume audio context on first user interaction (required by browsers)
            document.addEventListener('click', function resumeAudio() {
                if (window.game && window.game.audioContext && window.game.audioContext.state === 'suspended') {
                    window.game.audioContext.resume();
                }
                document.removeEventListener('click', resumeAudio);
            }, { once: true });
            
            window.game = new EmotionalLightBulb();
            
            // Initialize angel mascot eye tracking
            const angelFace = document.getElementById('angelFace');
            const leftPupil = document.getElementById('leftPupil');
            const rightPupil = document.getElementById('rightPupil');
            
            if (angelFace && leftPupil && rightPupil) {
                document.addEventListener('mousemove', function(e) {
                    const rect = angelFace.getBoundingClientRect();
                    const faceCenterX = rect.left + rect.width / 2;
                    const faceCenterY = rect.top + rect.height / 2;
                    
                    const angle = Math.atan2(e.clientY - faceCenterY, e.clientX - faceCenterX);
                    
                    const maxMovement = 1.5;
                    const pupilX = Math.cos(angle) * maxMovement;
                    const pupilY = Math.sin(angle) * maxMovement;
                    
                    leftPupil.style.transform = `translate(calc(-50% + ${pupilX}px), calc(-50% + ${pupilY}px)`;
                    rightPupil.style.transform = `translate(calc(-50% + ${pupilX}px), calc(-50% + ${pupilY}px)`;
                });
                
                document.addEventListener('mouseleave', function() {
                    leftPupil.style.transform = 'translate(-50%, -50%)';
                    rightPupil.style.transform = 'translate(-50%, -50%)';
                });
            }
        });
    </script>
</body>
</html>