* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            overflow: hidden;
            font-family: 'Arial Rounded MT Bold', 'Arial','Comic Sans MS', cursive, sans-serif;
            height: 100vh;
            background-color: #000;
            position: relative;
        }

        #game-container {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }

        #earth-scene {
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url('../image/1.avif'); /* Replace with your Earth photo URL */
            background-size: cover;          /* Ensures the image covers the entire element */
            background-position: center;     /* Centers the image */
            background-repeat: no-repeat;    /* Prevents the image from repeating */
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            transition: opacity 2s ease-in-out;
            z-index: 10;
        }

        #kid-earth {
            font-size: 3rem;
            animation: bounce 1s infinite alternate;
            position: absolute;
            bottom: 450px;
            left: 45%;
            transform: translateX(-50%);
            z-index: 20;
        }

        #space-scene {
            position: absolute;
            width: 100%;
            height: 100%;
            background: #000 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 800 800"><g fill="none" stroke="rgba(255, 255, 255, 0.5)" stroke-width="1"><path d="M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63"/><path d="M-31 229L237 261 390 382 731 737M520 660L309 538 295 764 731 737M520 660L309 538 40 599 309 538"/><path d="M520 660L309 538 295 764M-31 229L237 261 390 382 731 737M520 660L309 538 40 599 309 538"/></g><g fill="rgba(255, 255, 255, 0.5)"><circle cx="769" cy="229" r="1"/><circle cx="539" cy="269" r="1"/><circle cx="603" cy="493" r="1"/><circle cx="731" cy="737" r="1"/><circle cx="520" cy="660" r="1"/><circle cx="309" cy="538" r="1"/><circle cx="295" cy="764" r="1"/><circle cx="40" cy="599" r="1"/><circle cx="102" cy="382" r="1"/><circle cx="127" cy="80" r="1"/><circle cx="370" cy="105" r="1"/><circle cx="578" cy="42" r="1"/><circle cx="237" cy="261" r="1"/><circle cx="390" cy="382" r="1"/></g></svg>');
            opacity: 0;
            transition: opacity 2s ease-in-out;
            z-index: 5;
        }

        .planet {
            position: absolute;
            border-radius: 50%;
            background: radial-gradient(circle at 60% 45%, #383492 0%, #7268a6 50%, #C7B8C3 100%);
            box-shadow: inset -8px -8px 20px rgba(0, 0, 0, 0.6),
                        inset 8px 8px 15px rgba(255, 255, 255, 0.1),
                        -5px 5px 10px rgba(0, 0, 0, 0.3);
            background-size: cover;
            transform: translateZ(0);
        }

        .background-emoji {
            position: absolute;
            font-size: 2.5rem;
            z-index: 1;
            pointer-events: none;
            user-select: none;
            filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.7));
            opacity: 0.7;
        }


        #sun {
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, #fff7e6, #ffcc66, #ffad33, #ff8c00);
            box-shadow: 0 0 80px #ffcc66, 0 0 150px #ffad33;
            bottom: -50px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1;
        }

        #venus {
            width: 80px;
            height: 80px;
            background: radial-gradient(circle at 40% 40%, #f7f1e1, #e6d8b8 60%, #cbb87a 90%);
            top: 20%;
            left: 25%;
            animation: float 2s infinite alternate ease-in-out;
            border-radius: 50%;
            box-shadow: inset -5px -5px 10px rgba(255, 255, 255, 0.6),
                        inset 5px 5px 15px rgba(200, 180, 140, 0.3);
        }


        #mars {
            width: 90px;
            height: 90px;
            background: radial-gradient(circle at 40% 40%, #d17f5a, #a63f2a 60%, #6b2a1a 90%);
            top: 15%;
            right: 20%;
            animation: float 2s infinite alternate-reverse ease-in-out;
            border-radius: 50%;
            box-shadow: inset -5px -5px 15px rgba(255, 140, 90, 0.6),
                        inset 5px 5px 15px rgba(100, 40, 20, 0.5);
        }

        #jupiter {
            width: 150px;
            height: 150px;
            background: radial-gradient(circle at 50% 50%, #7AC7C4 0%, #4B7F7D 65%, #2E4F4D 100%);
            top: 60%;
            left: 15%;
            animation: float 2s infinite alternate ease-in-out;
            border-radius: 50%;
            box-shadow: inset -10px -10px 30px rgba(120, 190, 190, 0.6),
                        inset 10px 10px 40px rgba(40, 70, 70, 0.7);
        }

        #saturn {
            width: 120px;
            height: 120px;
            background: radial-gradient(circle at 50% 40%, #f5f1c8 0%, #d4c47f 60%, #a8905a 90%);
            top: 40%;
            right: 10%;
            animation: float 2s infinite alternate-reverse ease-in-out;
            border-radius: 50%;
            box-shadow: inset -8px -8px 20px rgba(255, 255, 220, 0.6),
                        inset 8px 8px 25px rgba(150, 130, 90, 0.5),
                        0 0 15px rgba(210, 180, 140, 0.4);
        }

        .saturn-ring {
            position: absolute;
            width: 180px;
            height: 30px;
            background: linear-gradient(to bottom, 
                rgba(200, 180, 140, 0.8),  /* sandy beige */
                rgba(170, 150, 110, 0.6),  /* bronze tones */
                rgba(130, 120, 100, 0.4),  /* grayish middle */
                rgba(170, 150, 110, 0.6), 
                rgba(200, 180, 140, 0.8));
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotateX(75deg);
            box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
            filter: drop-shadow(0 0 2px rgba(210, 180, 140, 0.5));
            opacity: 0.9;
        }


        #kid {
            position: absolute;
            font-size: 2.5rem;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 100;
            transition: top 0.1s ease-out, left 0.1s ease-out;
            filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
        }

        .alien {
            position: absolute;
            font-size: 2.5rem;
            z-index: 50;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            filter: drop-shadow(0 0 8px rgba(0, 255, 0, 0.7));
        }

        .key {
            position: absolute;
            font-size: 2rem;
            z-index: 40;
            animation: float 3s infinite ease-in-out;
            filter: drop-shadow(0 0 8px gold);
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        @keyframes bounce {
            0% { transform: translateY(0); }
            100% { transform: translateY(-10px); }
        }

        @keyframes twinkle {
            0%, 100% { opacity: 0.1; }
            50% { opacity: 1; }
        }

        .star {
            position: absolute;
            width: 2px;
            height: 2px;
            background-color: white;
            border-radius: 50%;
        }

        .mission-screen {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50%;
            height: 80%;
            background: rgba(0, 0, 0, 0.8);
            border: 3px solid #4CAF50;
            border-radius: 20px;
            box-shadow: 0 0 30px rgba(76, 175, 80, 0.7);
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: white;
            text-align: center;
            z-index: 200;
            backdrop-filter: blur(5px);
        }

        .mission-screen h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
            color: #4CAF50;
            text-shadow: 0 0 10px rgba(76, 175, 80, 0.7);
        }
        .mission-screen p {
            font-size: 1.5rem;
            margin-bottom: 30px;
            line-height: 1.5;
        }

        .mission-screen button {
            padding: 15px 30px;
            font-size: 1.5rem;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Comic Sans MS', cursive, sans-serif;
            box-shadow: 0 0 15px rgba(76, 175, 80, 0.7);
        }

        .mission-screen button:hover {
            transform: scale(1.1);
            background: #45a049;
            box-shadow: 0 0 20px rgba(76, 175, 80, 0.9);
        }

        /* mission1 */
        #chinese-exercise {
            margin: 20px 0;
            text-align: center;
        }

        .chinese-phrase {
            margin: 15px 0;
            font-size: 1.8rem;
        }

        .chinese-word {
            display: inline-block;
            font-size: 3.2rem;
            margin: 0 8px;
            padding: 8px 12px;
            background: rgba(255, 255, 255, 0.1);
            border: 3px solid #4CAF50;
            border-radius: 8px;
            cursor: pointer;
            position: relative;
            transition: all 0.3s ease;
            user-select: none;
        }

        .chinese-word:hover {
            background: rgba(76, 175, 80, 0.3);
            transform: scale(1.05);
        }

        .chinese-word.marked::after {
            content: '❌';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.5em;
            background: rgba(255, 0, 0, 0.8);
            border-radius: 50%;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .chinese-word.correct::after {
            content: '✅';
            position: absolute;
            top: -10px;
            right: -10px;
            font-size: 1.2em;
        }

        .chinese-word.incorrect::after {
            content: '❎';
            position: absolute;
            top: -10px;
            right: -10px;
            font-size: 1.2em;
        }

        .submit-btn {
            padding: 10px 20px;
            font-size: 1.2rem;
            background: #2196F3;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            margin: 15px 0;
            transition: all 0.3s ease;
            display: none;
        }

        .submit-btn:hover {
            background: #1976D2;
            transform: scale(1.05);
        }

        .submit-btn.show {
            display: inline-block;
        }


        /* mission2 */
        .fill-words {
        margin-top: 20px;
        text-align: center;
        }


        .fill-statement {
            font-size: 1.8rem;
            margin: 20px 0;
            line-height: 1.5;
            color: white;
        }

        .blank-space {
            display: inline-block;
            min-width: 80px;
            min-height: 40px;
            border: 2px dashed #4CAF50;
            border-radius: 8px;
            background: rgba(76, 175, 80, 0.1);
            margin: 0 5px;
            vertical-align: middle;
            position: relative;
            transition: all 0.3s ease;
        }

        .blank-space.drag-over {
            background: rgba(76, 175, 80, 0.3);
            border-color: #8BC34A;
            transform: scale(1.05);
        }

        .word-options {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 30px 0;
            flex-wrap: wrap;
        }

        .draggable-word {
            padding: 10px 20px;
            background: linear-gradient(135deg, #4CAF50, #45a049);
            color: white;
            border-radius: 10px;
            cursor: grab;
            font-size: 1.4rem;
            font-weight: bold;
            border: 2px solid transparent;
            transition: all 0.3s ease;
            user-select: none;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }

        .draggable-word:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
            border-color: #8BC34A;
        }

        .draggable-word:active {
            cursor: grabbing;
            transform: scale(0.95);
        }

        .draggable-word.dragging {
            opacity: 0.7;
            transform: rotate(5deg);
        }

        .dropped-word {
            padding: 8px 16px;
            background: linear-gradient(135deg, #2196F3, #1976D2);
            color: white;
            border-radius: 8px;
            font-size: 1.4rem;
            font-weight: bold;
            display: inline-block;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .dropped-word:hover {
            background: linear-gradient(135deg, #1976D2, #1565C0);
        }

        .submit-btn {
            padding: 12px 25px;
            font-size: 1.0rem;
            background: #FF9800;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            margin: 20px 10px;
            transition: all 0.3s ease;
            font-family: 'Comic Sans MS', cursive, sans-serif;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }

        .submit-btn:hover {
            background: #F57C00;
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
        }

        .submit-btn:disabled {
            background: #666;
            cursor: not-allowed;
            transform: none;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .feedback {
            font-size: 2.5rem;
            margin: 15px 0;
            min-height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .completion-message {
            font-size: 1.8rem;
            color: #4CAF50;
            font-weight: bold;
            text-shadow: 0 0 10px rgba(76, 175, 80, 0.7);
            margin: 20px 0;
        }

        /*mission 3*/
        .word-bank {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
            min-height: 60px;
        }
        .word-bubble {
            display: inline-block;
            padding: 10px 20px;
            background: linear-gradient(135deg, #98ce2b, #c4c935);
            color: white;
            border-radius: 10px;
            cursor: pointer;
            font-size: 1.4rem;
            font-weight: bold;
            transition: all 0.3s ease;
            user-select: none;
        }
        .sentence-area{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            min-height: 100px;
            border: 2px dashed #29e765;
            border-radius: 10px;
            padding: 20px;
            background: rgba(255, 152, 0, 0.1);
        }
        .slot {
            width: 100px;
            height: 50px;
            border: 2px dashed #19d320;
            border-radius: 10px;
            margin: 0 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: #22d20f;
        }
        .slot.filled {
            background: rgba(255, 152, 0, 0.3);
            border-color: #0cc346;
            color: white;
        }
        #submit-btn {
            padding: 10px 20px;
            font-size: 1.2rem;
            margin-top: 50px;
            background: #12c64e;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Comic Sans MS', cursive, sans-serif;
        }
        #feedback {
            font-size: 1.5rem;
            margin-top: 20px;
            color: #0eb474;
            text-align: center;
        }

        /* mission 4 */
        /* mission4 choices – reuse your mission button hover */
        .mission4-choice,
            #mission4-next,
            #finish-mission4 {
            padding: 12px 24px;
            margin: 8px;
            font-size: 1.3rem;
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 0 10px rgba(76,175,80,0.7);
        }

        .mission4-choice:hover,
            #mission4-next:hover,
            #finish-mission4:hover {
            transform: scale(1.1);
            background: #45a049;
            box-shadow: 0 0 15px rgba(76,175,80,0.9);
        }
        .mission4-choice.selected {
            outline: 3px solid #FFD700;
            /* or any highlight you prefer */
        }




        #caught-screen {
            background: rgba(255, 0, 0, 0.3);
            border-color: #FF0000;
            box-shadow: 0 0 30px rgba(255, 0, 0, 0.7);
        }

        #caught-screen h2 {
            color: #FF0000;
            text-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
        }

        #end-screen {
            background: rgba(24, 94, 63, 0.3); 
            border-color: #185E3F; 
            box-shadow: 0 0 30px rgba(24, 94, 63, 0.7); 
        }

        #end-screen h2 {
            color: #3bd690; 
            text-shadow: 0 0 10px rgba(24, 94, 63, 0.7); 
        }

        #progress-container {
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 150;
            color: white;
            font-size: 1.2rem;
            background: rgba(0, 0, 0, 0.5);
            padding: 10px;
            border-radius: 10px;
            display: none;
        }

        #progress-bar {
            width: 200px;
            height: 20px;
            background: #333;
            border-radius: 10px;
            margin-top: 5px;
            overflow: hidden;
        }

        #progress {
            height: 100%;
            background: linear-gradient(to right, #4CAF50, #8BC34A);
            width: 0%;
            transition: width 0.5s ease-in-out;
        }

        #instructions {
            position: absolute;
            bottom: 20px;
            left: 20px;
            color: white;
            font-size: 1rem;
            background: rgba(0, 0, 0, 0.5);
            padding: 10px;
            border-radius: 10px;
            z-index: 150;
            display: none;
        }

        .glow {
            animation: glow 2s infinite alternate;
        }

        @keyframes glow {
            0% { text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); }
            100% { text-shadow: 0 0 20px rgba(255, 255, 255, 1); }
        }

        /* Mobile Controls */
        #mobile-controls {
        display: none; /* Hidden by default */
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 300; /* Ensure it's above other elements */
        transform: scale(0.9);
        transform-origin: bottom right;

        }

        .dpad {
        display: flex;
        flex-direction: column;
        align-items: center;
        }

        .middle-row {
        display: flex;
        justify-content: space-between;
        width: 130px; /* Adjust as needed */
        margin: 5px 0;
        }

        .control-btn {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: rgba(76, 175, 80, 0.7);
        border: 2px solid white;
        color: white;
        font-size: 24px;
        margin: 5px;
        touch-action: manipulation; /* Prevent browser touch behaviors */
        }

        /* Show controls on mobile devices */
        @media (max-width: 768px), (pointer: coarse) {
        #mobile-controls {
            display: block;
        }
        #instructions {
            display: none !important;
        }
        /* Adjust the mission screen for mobile */
        .mission-screen {
            width: 90%;
            height: 80%;
            padding: 15px;
            font-size: 1.2rem;
        }
        .mission-screen h2 {
            font-size: 2rem;
        }
        .mission-screen p {
            font-size: 1.2rem;
        }
        .mission-screen button {
            padding: 5px 15px;
            font-size: 0.9rem;
        }  
        #chinese-exercise {
            font-size: 1.5rem;
        }
        .chinese-phrase {
            font-size: 1.5rem;
        }    
        .chinese-word {
            font-size: 1.2rem;
            padding: 10px 5px;
        }
    }
        @media (max-width: 480px) {
            .control-btn {
                width: 50px;
                height: 50px;
                font-size: 20px;
            }
            
            .middle-row {
                width: 110px;
            }
        }

            @media (max-width: 350px) {
            .control-btn {
                width: 45px;
                height: 45px;
                font-size: 18px;
            }
            
            .middle-row {
                width: 100px;
            }
            
            #mobile-controls {
                bottom: 10px;
                right: 10px;
            }
        }