<title>永光愛心傳遞站知識小遊戲</title> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { colors: { primary: '#5D5CDE' } } } } </script> <style> @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;600;700&display=swap');

    body {
        font-family: 'Noto Sans TC', sans-serif;
        background: linear-gradient(135deg, #e8d5ff 0%, #c7a6f7 100%);
        min-height: 100vh;
        position: relative;
        overflow-x: hidden;
    }
    
    body.dark {
        background: linear-gradient(135deg, #4c4570 0%, #8b7fb8 100%);
    }
    
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: 
            radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 40% 80%, rgba(120, 119, 198, 0.2) 0%, transparent 50%);
        pointer-events: none;
        z-index: 0;
    }
    
    body.dark::before {
        background-image: 
            radial-gradient(circle at 20% 50%, rgba(45, 27, 105, 0.4) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(17, 153, 142, 0.2) 0%, transparent 50%),
            radial-gradient(circle at 40% 80%, rgba(45, 27, 105, 0.3) 0%, transparent 50%);
    }
    
    .floating-shapes {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
    }
    
    .shape {
        position: absolute;
        opacity: 0.1;
        animation: float 20s infinite linear;
    }
    
    .shape:nth-child(1) {
        width: 80px;
        height: 80px;
        background: linear-gradient(45deg, #5D5CDE, #764ba2);
        border-radius: 50%;
        top: 10%;
        left: 10%;
        animation: float 20s infinite linear, pulse 3s infinite ease-in-out;
        animation-delay: 0s;
    }
    
    .shape:nth-child(2) {
        width: 60px;
        height: 60px;
        background: linear-gradient(45deg, #667eea, #5D5CDE);
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
        top: 20%;
        right: 10%;
        animation: float 25s infinite linear, morph 8s infinite ease-in-out;
        animation-delay: -5s;
    }
    
    .shape:nth-child(3) {
        width: 100px;
        height: 100px;
        background: linear-gradient(45deg, #764ba2, #667eea);
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        bottom: 20%;
        left: 20%;
        animation: float 18s infinite linear, rotate-color 6s infinite linear;
        animation-delay: -10s;
    }
    
    .shape:nth-child(4) {
        width: 70px;
        height: 70px;
        background: linear-gradient(45deg, #5D5CDE, #667eea);
        border-radius: 20px;
        top: 60%;
        right: 20%;
        animation: float 22s infinite linear, wiggle 4s infinite ease-in-out;
        animation-delay: -15s;
    }
    
    .shape:nth-child(5) {
        width: 90px;
        height: 90px;
        background: linear-gradient(45deg, #764ba2, #5D5CDE);
        border-radius: 50%;
        bottom: 10%;
        right: 30%;
        animation: float 30s infinite linear, scale-pulse 5s infinite ease-in-out;
        animation-delay: -3s;
    }
    
    .shape:nth-child(6) {
        width: 50px;
        height: 50px;
        background: linear-gradient(135deg, #ff6b6b, #ffa726);
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        top: 70%;
        left: 5%;
        animation: float 28s infinite linear, sparkle 2s infinite ease-in-out;
        animation-delay: -8s;
    }
    
    .shape:nth-child(7) {
        width: 75px;
        height: 75px;
        background: linear-gradient(45deg, #4ecdc4, #45b7d1);
        border-radius: 50% 20% 50% 20%;
        top: 5%;
        right: 40%;
        animation: float 35s infinite linear, wobble 7s infinite ease-in-out;
        animation-delay: -12s;
    }
    
    .shape:nth-child(8) {
        width: 65px;
        height: 65px;
        background: linear-gradient(225deg, #f093fb, #f5576c);
        border-radius: 20%;
        bottom: 40%;
        right: 5%;
        animation: float 24s infinite linear, spin-slow 15s infinite linear;
        animation-delay: -18s;
    }
    
    .particles {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
    }
    
    .particle {
        position: absolute;
        width: 4px;
        height: 4px;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 50%;
        animation: particle-float 15s infinite linear;
    }
    
    .particle:nth-child(odd) {
        background: rgba(93, 92, 222, 0.4);
        animation-duration: 20s;
    }
    
    .particle:nth-child(3n) {
        background: rgba(118, 75, 162, 0.5);
        animation-duration: 25s;
    }
    
    .wave-container {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 200px;
        pointer-events: none;
        z-index: 1;
        overflow: hidden;
    }
    
    .wave {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 200%;
        height: 100px;
        background: linear-gradient(90deg, 
            transparent 0%, 
            rgba(93, 92, 222, 0.1) 25%, 
            rgba(118, 75, 162, 0.15) 50%, 
            rgba(93, 92, 222, 0.1) 75%, 
            transparent 100%);
        animation: wave-move 20s infinite linear;
        border-radius: 50% 50% 0 0;
    }
    
    .wave:nth-child(2) {
        height: 80px;
        animation-duration: 25s;
        animation-direction: reverse;
        opacity: 0.7;
    }
    
    .wave:nth-child(3) {
        height: 60px;
        animation-duration: 15s;
        opacity: 0.5;
    }
    
    .orbit-container {
        position: fixed;
        top: 20%;
        right: 10%;
        width: 200px;
        height: 200px;
        pointer-events: none;
        z-index: 1;
    }
    
    .orbit {
        position: absolute;
        border: 1px solid rgba(93, 92, 222, 0.2);
        border-radius: 50%;
        animation: orbit-rotate 30s infinite linear;
    }
    
    .orbit:nth-child(1) {
        width: 100px;
        height: 100px;
        top: 50px;
        left: 50px;
    }
    
    .orbit:nth-child(2) {
        width: 150px;
        height: 150px;
        top: 25px;
        left: 25px;
        animation-duration: 45s;
        animation-direction: reverse;
    }
    
    .orbit-dot {
        position: absolute;
        width: 8px;
        height: 8px;
        background: linear-gradient(45deg, #5D5CDE, #667eea);
        border-radius: 50%;
        top: -4px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .stars-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
    }
    
    .star {
        position: absolute;
        background: #fff;
        clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
        animation: twinkle 3s infinite ease-in-out;
    }
    
    .star.small {
        width: 8px;
        height: 8px;
    }
    
    .star.medium {
        width: 12px;
        height: 12px;
    }
    
    .star.large {
        width: 16px;
        height: 16px;
    }
    
    .star:nth-child(2n) {
        background: linear-gradient(45deg, #5D5CDE, #667eea);
        animation-delay: -1s;
    }
    
    .star:nth-child(3n) {
        background: linear-gradient(45deg, #ff6b6b, #ffa726);
        animation-delay: -2s;
    }
    
    .star:nth-child(5n) {
        background: linear-gradient(45deg, #4ecdc4, #45b7d1);
        animation-delay: -0.5s;
    }
    
    .star:nth-child(7n) {
        background: linear-gradient(45deg, #f093fb, #f5576c);
        animation-delay: -1.5s;
    }
    
    body.dark .star {
        background: rgba(255, 255, 255, 0.9);
    }
    
    body.dark .star:nth-child(2n) {
        background: linear-gradient(45deg, #a29bfe, #74b9ff);
    }
    
    body.dark .star:nth-child(3n) {
        background: linear-gradient(45deg, #fd79a8, #fdcb6e);
    }
    
    body.dark .star:nth-child(5n) {
        background: linear-gradient(45deg, #00cec9, #0984e3);
    }
    
    body.dark .star:nth-child(7n) {
        background: linear-gradient(45deg, #e84393, #fd79a8);
    }
    
    .shooting-star {
        position: absolute;
        width: 2px;
        height: 2px;
        background: linear-gradient(45deg, #fff, transparent);
        border-radius: 50%;
        animation: shoot 4s linear infinite;
        opacity: 0;
    }
    
    .shooting-star::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 30px;
        height: 1px;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.8), transparent);
        transform: translateX(2px);
    }
    
    body.dark .shooting-star::after {
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), transparent);
    }
    
    @keyframes float {
        0%, 100% {
            transform: translateY(0px) rotate(0deg);
        }
        25% {
            transform: translateY(-20px) rotate(90deg);
        }
        50% {
            transform: translateY(-40px) rotate(180deg);
        }
        75% {
            transform: translateY(-20px) rotate(270deg);
        }
    }
    
    @keyframes pulse {
        0%, 100% { opacity: 0.1; }
        50% { opacity: 0.3; }
    }
    
    @keyframes morph {
        0%, 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
        25% { border-radius: 50% 50% 50% 50% / 40% 60% 40% 60%; }
        50% { border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%; }
        75% { border-radius: 40% 60% 40% 60% / 50% 50% 50% 50%; }
    }
    
    @keyframes rotate-color {
        0% { filter: hue-rotate(0deg); }
        100% { filter: hue-rotate(360deg); }
    }
    
    @keyframes wiggle {
        0%, 100% { transform: rotate(0deg); }
        25% { transform: rotate(2deg); }
        75% { transform: rotate(-2deg); }
    }
    
    @keyframes scale-pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.1); }
    }
    
    @keyframes sparkle {
        0%, 100% { opacity: 0.1; transform: scale(1); }
        50% { opacity: 0.4; transform: scale(1.2); }
    }
    
    @keyframes wobble {
        0%, 100% { border-radius: 50% 20% 50% 20%; }
        50% { border-radius: 20% 50% 20% 50%; }
    }
    
    @keyframes spin-slow {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    
    @keyframes particle-float {
        0% {
            transform: translateY(100vh) translateX(0);
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        90% {
            opacity: 1;
        }
        100% {
            transform: translateY(-100px) translateX(100px);
            opacity: 0;
        }
    }
    
    @keyframes wave-move {
        0% {
            transform: translateX(-50%);
        }
        100% {
            transform: translateX(0%);
        }
    }
    
    @keyframes orbit-rotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    
    @keyframes twinkle {
        0%, 100% {
            opacity: 0.3;
            transform: scale(0.8);
        }
        50% {
            opacity: 1;
            transform: scale(1.2);
        }
    }
    
    @keyframes shoot {
        0% {
            transform: translateX(-100px) translateY(100px);
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        80% {
            opacity: 1;
        }
        100% {
            transform: translateX(300px) translateY(-100px);
            opacity: 0;
        }
    }
    
    .content-wrapper {
        position: relative;
        z-index: 2;
    }
    
    .animate-bounce-gentle {
        animation: bounce-gentle 2s infinite;
    }
    
    @keyframes bounce-gentle {
        0%, 20%, 50%, 80%, 100% {
            transform: translateY(0);
        }
        40% {
            transform: translateY(-10px);
        }
        60% {
            transform: translateY(-5px);
        }
    }
    
    .fade-in {
        animation: fadeIn 0.5s ease-in;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .success-confetti {
        position: relative;
        overflow: hidden;
    }
    
    .confetti {
        position: absolute;
        width: 10px;
        height: 10px;
        background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #f9ca24, #f0932b);
        animation: confetti-fall 3s linear infinite;
    }
    
    @keyframes confetti-fall {
        0% {
            transform: translateY(-100vh) rotate(0deg);
            opacity: 1;
        }
        100% {
            transform: translateY(100vh) rotate(720deg);
            opacity: 0;
        }
    }
</style>

<div class="particles" id="particles"></div>

<div class="wave-container">
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
</div>

<div class="orbit-container">
    <div class="orbit">
        <div class="orbit-dot"></div>
    </div>
    <div class="orbit">
        <div class="orbit-dot"></div>
    </div>
</div>

<div class="stars-container" id="stars-container"></div>

<div class="container mx-auto px-4 py-8 max-w-4xl content-wrapper">
    <!-- Header -->
    <div class="text-center mb-8 fade-in">
        <div class="inline-block p-6 bg-gradient-to-r from-primary to-purple-600 rounded-full mb-4">
            <svg class="w-12 h-12 text-white" fill="currentColor" viewBox="0 0 20 20">
                <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
        </div>
        <h1 class="text-4xl font-bold text-gray-800 dark:text-white mb-2">
            永光愛心傳遞站
        </h1>
        <h2 class="text-2xl font-semibold text-primary mb-4">知識小遊戲</h2>
        <p class="text-gray-600 dark:text-gray-300 text-lg mb-3">
            測試您對我們服務團隊的了解程度！
        </p>
        <p class="text-purple-600 dark:text-purple-300 text-base font-medium bg-purple-50 dark:bg-purple-900 dark:bg-opacity-30 rounded-lg p-3 border border-purple-200 dark:border-purple-700">
            所有題目回答正確，可以獲取手工小禮物，並到Room14進行活動哦！
        </p>
    </div>

    <!-- Game Container -->
    <div id="gameContainer" class="bg-white bg-opacity-90 dark:bg-gray-800 dark:bg-opacity-95 backdrop-blur-sm rounded-2xl shadow-2xl p-8 border border-gray-200 border-opacity-30 dark:border-gray-700 dark:border-opacity-30">
        <!-- Welcome Screen -->
        <div id="welcomeScreen" class="text-center">
            <div class="mb-6">
                <div class="inline-block p-4 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full mb-4 animate-bounce-gentle">
                    <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                    </svg>
                </div>
                <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">遊戲規則</h3>
                <div class="bg-blue-50 dark:bg-blue-900 rounded-lg p-6 text-left">
                    <ul class="space-y-3 text-gray-700 dark:text-gray-300">
                        <li class="flex items-start">
                            <span class="flex-shrink-0 w-6 h-6 bg-primary text-white rounded-full flex items-center justify-center text-sm font-bold mr-3 mt-0.5">1</span>
                            <span>每局遊戲包含 <strong>5 道題目</strong></span>
                        </li>
                        <li class="flex items-start">
                            <span class="flex-shrink-0 w-6 h-6 bg-primary text-white rounded-full flex items-center justify-center text-sm font-bold mr-3 mt-0.5">2</span>
                            <span>所有題目均基於公益少年團的真實資料</span>
                        </li>
                        <li class="flex items-start">
                            <span class="flex-shrink-0 w-6 h-6 bg-primary text-white rounded-full flex items-center justify-center text-sm font-bold mr-3 mt-0.5">3</span>
                            <span>答對 <strong>2 道題目</strong> 即可獲得小禮物提示</span>
                        </li>
                    </ul>
                </div>
            </div>
            <button id="startBtn" class="bg-gradient-to-r from-primary to-purple-600 hover:from-purple-600 hover:to-primary text-white font-bold py-4 px-8 rounded-full text-lg transition-all duration-300 transform hover:scale-105 shadow-lg">
                開始遊戲 🎮
            </button>
        </div>

        <!-- Game Screen -->
        <div id="gameScreen" class="hidden">
            <div class="mb-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-xl font-bold text-gray-800 dark:text-white">
                        題目 <span id="currentQuestion">1</span> / 5
                    </h3>
                    <div class="text-sm text-gray-500 dark:text-gray-400">
                        答對: <span id="score" class="font-bold text-green-600">0</span> / 5
                    </div>
                </div>
                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                    <div id="progressBar" class="bg-gradient-to-r from-primary to-purple-600 h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
                </div>
            </div>

            <div id="questionCard" class="mb-6 fade-in">
                <div class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-700 dark:to-gray-600 rounded-lg p-6 border-l-4 border-primary">
                    <h4 id="questionText" class="text-lg font-medium text-gray-800 dark:text-white mb-4">
                        <!-- Question will be inserted here -->
                    </h4>
                    <div id="optionsContainer" class="space-y-3">
                        <!-- Options will be inserted here -->
                    </div>
                </div>
            </div>

            <div id="feedback" class="hidden mb-6">
                <div id="feedbackContent" class="p-4 rounded-lg">
                    <!-- Feedback will be inserted here -->
                </div>
            </div>

            <button id="nextBtn" class="hidden w-full bg-primary hover:bg-purple-600 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300">
                下一題 →
            </button>
        </div>

        <!-- Success Screen -->
        <div id="successScreen" class="hidden text-center success-confetti">
            <div class="mb-6">
                <div class="inline-block p-6 bg-gradient-to-r from-green-400 to-blue-500 rounded-full mb-4">
                    <svg class="w-16 h-16 text-white" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <h3 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">🎉 恭喜您！🎉</h3>
                <p class="text-xl text-gray-600 dark:text-gray-300 mb-6">
                    您已成功達到勝利條件！
                </p>
                
                <div class="bg-gradient-to-r from-yellow-50 to-orange-50 dark:from-yellow-900 dark:to-orange-900 rounded-lg p-6 border border-yellow-200 dark:border-yellow-700 mb-6">
                    <h4 class="text-lg font-bold text-orange-800 dark:text-orange-200 mb-3">🎁 獲得獎勵</h4>
                    <p class="text-orange-700 dark:text-orange-300 text-lg">
                        請找老師或學生工作人員領取小手工材料，並到Room14製作小手工禮物！
                    </p>
                </div>
            </div>
            <button id="playAgainBtn" class="bg-gradient-to-r from-primary to-purple-600 hover:from-purple-600 hover:to-primary text-white font-bold py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105">
                再玩一次 🎮
            </button>
        </div>

        <!-- Failure Screen -->
        <div id="failureScreen" class="hidden text-center">
            <div class="mb-6">
                <div class="inline-block p-6 bg-gradient-to-r from-red-400 to-pink-500 rounded-full mb-4">
                    <svg class="w-16 h-16 text-white" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"></path>
                    </svg>
                </div>
                <h3 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">加油！</h3>
                <p class="text-xl text-gray-600 dark:text-gray-300 mb-6">
                    這次沒有達到勝利條件，不要氣餒！<br>
                    再試一次，您一定可以的！
                </p>
            </div>
            <button id="retryBtn" class="bg-gradient-to-r from-primary to-purple-600 hover:from-purple-600 hover:to-primary text-white font-bold py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105">
                重新挑戰 💪
            </button>
        </div>
    </div>

    <!-- Footer -->
    <div class="text-center mt-8 text-gray-500 dark:text-gray-400">
        <p>永光愛心傳遞站 © 2025 | 用心服務 以愛同行</p>
    </div>
</div>

<script>
    // Dark mode support
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.documentElement.classList.add('dark');
    }
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
        if (event.matches) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
    });

    // Game questions database
    const questions = [
        {
            question: "永光書院公益少年團曾獲得多少次冠軍？",
            options: ["7次", "9次", "11次", "13次"],
            correct: 1,
            explanation: "根據資料顯示，公益少年團共獲得9次冠軍和2次亞軍。"
        },
        {
            question: "獲得一等榮譽級（紅星章）需要累積多少服務時數？",
            options: ["126小時", "162小時", "198小時", "220小時"],
            correct: 2,
            explanation: "一等榮譽級（紅星章）需要累積198小時的服務時數。"
        },
        {
            question: "公益少年團連續多少年有學生當選為「傑出團員」？",
            options: ["10年", "12年", "13年", "15年"],
            correct: 2,
            explanation: "從2012年至今，連續13年有學生當選為公益少年團「傑出團員」。"
        },
        {
            question: "二等榮譽級（白星章）需要累積多少服務時數？",
            options: ["90小時", "126小時", "162小時", "198小時"],
            correct: 2,
            explanation: "二等榮譽級（白星章）需要累積162小時的服務時數。"
        },
        {
            question: "公益少年團近年獲得「積極團體獎或優秀團隊獎」多少次？",
            options: ["9次", "10次", "11次", "12次"],
            correct: 2,
            explanation: "根據資料，公益少年團近年獲得積極團體獎或優秀團隊獎11次。"
        },
        {
            question: "2025年的傑出團員是誰？",
            options: ["張志峰", "曾煦蓁", "李慧烔", "梁琸嵎"],
            correct: 0,
            explanation: "2025年的傑出團員是張志峰。"
        },
        {
            question: "中學高級（紫章）需要累積多少服務時數？",
            options: ["90小時", "126小時", "162小時", "198小時"],
            correct: 0,
            explanation: "中學高級（紫章）需要累積90小時的服務時數。"
        },
        {
            question: "公益少年團曾在哪些年份進行少數族裔探訪活動？",
            options: ["2013年、2017年、2020年", "2014年、2019年、2021年", "2015年、2018年、2022年", "2016年、2020年、2023年"],
            correct: 1,
            explanation: "根據資料，公益少年團在2014年、2019年、2021年進行少數族裔探訪活動。"
        },
        {
            question: "公益少年團的服務精神是什麼？",
            options: ["服務、關愛、分享", "認識、關懷、服務", "愛心、服務、奉獻", "關愛、互助、成長"],
            correct: 1,
            explanation: "公益少年團的精神是「認識、關懷、服務」。"
        },
        {
            question: "2022年的傑出團員梁琸嵎參與了哪個地方的交流團？",
            options: ["日本交流團", "韓國交流團", "新加坡交流團", "台灣交流團"],
            correct: 2,
            explanation: "2022年的傑出團員梁琸嵎參與了新加坡交流團。"
        }
    ];

    // Game state
    let currentQuestionIndex = 0;
    let score = 0;
    let gameQuestions = [];
    let answeredQuestions = 0;

    // DOM elements
    const welcomeScreen = document.getElementById('welcomeScreen');
    const gameScreen = document.getElementById('gameScreen');
    const successScreen = document.getElementById('successScreen');
    const failureScreen = document.getElementById('failureScreen');
    const startBtn = document.getElementById('startBtn');
    const nextBtn = document.getElementById('nextBtn');
    const playAgainBtn = document.getElementById('playAgainBtn');
    const retryBtn = document.getElementById('retryBtn');

    // Initialize game
    function initGame() {
        // Reset game state
        currentQuestionIndex = 0;
        score = 0;
        answeredQuestions = 0;
        
        // Select 5 random questions
        gameQuestions = getRandomQuestions(5);
        
        // Show game screen
        showScreen('game');
        showQuestion();
    }

    function getRandomQuestions(count) {
        const shuffled = [...questions].sort(() => 0.5 - Math.random());
        return shuffled.slice(0, count);
    }

    function showScreen(screen) {
        // Hide all screens
        welcomeScreen.classList.add('hidden');
        gameScreen.classList.add('hidden');
        successScreen.classList.add('hidden');
        failureScreen.classList.add('hidden');
        
        // Show selected screen
        switch(screen) {
            case 'welcome':
                welcomeScreen.classList.remove('hidden');
                break;
            case 'game':
                gameScreen.classList.remove('hidden');
                break;
            case 'success':
                successScreen.classList.remove('hidden');
                createConfetti();
                break;
            case 'failure':
                failureScreen.classList.remove('hidden');
                break;
        }
    }

    function showQuestion() {
        const question = gameQuestions[currentQuestionIndex];
        
        // Update progress
        document.getElementById('currentQuestion').textContent = currentQuestionIndex + 1;
        document.getElementById('score').textContent = score;
        document.getElementById('progressBar').style.width = ((currentQuestionIndex + 1) / 5) * 100 + '%';
        
        // Display question
        document.getElementById('questionText').textContent = question.question;
        
        // Display options
        const optionsContainer = document.getElementById('optionsContainer');
        optionsContainer.innerHTML = '';
        
        question.options.forEach((option, index) => {
            const button = document.createElement('button');
            button.className = 'w-full text-left p-4 rounded-lg border-2 border-gray-200 dark:border-gray-600 hover:border-primary hover:bg-primary hover:bg-opacity-10 transition-all duration-200 text-gray-700 dark:text-gray-300';
            button.textContent = `${String.fromCharCode(65 + index)}. ${option}`;
            button.onclick = () => selectAnswer(index);
            optionsContainer.appendChild(button);
        });
        
        // Hide feedback and next button
        document.getElementById('feedback').classList.add('hidden');
        nextBtn.classList.add('hidden');
    }

    function selectAnswer(selectedIndex) {
        const question = gameQuestions[currentQuestionIndex];
        const isCorrect = selectedIndex === question.correct;
        
        if (isCorrect) {
            score++;
        }
        
        // Disable all option buttons
        const optionButtons = document.querySelectorAll('#optionsContainer button');
        optionButtons.forEach((button, index) => {
            button.disabled = true;
            if (index === question.correct) {
                button.classList.add('border-green-500', 'bg-green-100', 'dark:bg-green-900');
            } else if (index === selectedIndex && !isCorrect) {
                button.classList.add('border-red-500', 'bg-red-100', 'dark:bg-red-900');
            }
        });
        
        // Show feedback
        showFeedback(isCorrect, question.explanation);
        
        answeredQuestions++;
        
        // Check if won (scored 2 correct answers) or end game
        if (score >= 2) {
            // Player has won! Show success immediately
            setTimeout(() => {
                endGame();
            }, 2000);
        } else if (currentQuestionIndex < gameQuestions.length - 1) {
            nextBtn.textContent = '下一題 →';
            nextBtn.classList.remove('hidden');
        } else {
            // All questions answered but didn't score 2
            setTimeout(() => {
                endGame();
            }, 2000);
        }
    }

    function showFeedback(isCorrect, explanation) {
        const feedback = document.getElementById('feedback');
        const feedbackContent = document.getElementById('feedbackContent');
        
        if (isCorrect) {
            feedbackContent.className = 'p-4 rounded-lg bg-green-100 border border-green-300 dark:bg-green-900 dark:border-green-700';
            feedbackContent.innerHTML = `
                <div class="flex items-center mb-2">
                    <svg class="w-5 h-5 text-green-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"></path>
                    </svg>
                    <span class="font-bold text-green-800 dark:text-green-200">答對了！</span>
                </div>
                <p class="text-green-700 dark:text-green-300">${explanation}</p>
            `;
        } else {
            feedbackContent.className = 'p-4 rounded-lg bg-red-100 border border-red-300 dark:bg-red-900 dark:border-red-700';
            feedbackContent.innerHTML = `
                <div class="flex items-center mb-2">
                    <svg class="w-5 h-5 text-red-600 mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"></path>
                    </svg>
                    <span class="font-bold text-red-800 dark:text-red-200">答錯了</span>
                </div>
                <p class="text-red-700 dark:text-red-300">${explanation}</p>
            `;
        }
        
        feedback.classList.remove('hidden');
    }

    function nextQuestion() {
        currentQuestionIndex++;
        showQuestion();
    }

    function endGame() {
        if (score >= 2) {
            showScreen('success');
        } else {
            showScreen('failure');
        }
    }

    function createConfetti() {
        const container = document.getElementById('successScreen');
        for (let i = 0; i < 50; i++) {
            const confetti = document.createElement('div');
            confetti.className = 'confetti';
            confetti.style.left = Math.random() * 100 + '%';
            confetti.style.animationDelay = Math.random() * 3 + 's';
            confetti.style.backgroundColor = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#f9ca24', '#f0932b'][Math.floor(Math.random() * 5)];
            container.appendChild(confetti);
            
            // Remove confetti after animation
            setTimeout(() => {
                confetti.remove();
            }, 3000);
        }
    }

    // Event listeners
    startBtn.onclick = initGame;
    nextBtn.onclick = nextQuestion;
    playAgainBtn.onclick = initGame;
    retryBtn.onclick = initGame;

    // Create floating particles
    function createParticles() {
        const particleContainer = document.getElementById('particles');
        const particleCount = 30;
        
        for (let i = 0; i < particleCount; i++) {
            const particle = document.createElement('div');
            particle.className = 'particle';
            
            // Random starting position
            particle.style.left = Math.random() * 100 + '%';
            particle.style.animationDelay = Math.random() * 15 + 's';
            particle.style.animationDuration = (15 + Math.random() * 10) + 's';
            
            // Random size variation
            const size = 2 + Math.random() * 4;
            particle.style.width = size + 'px';
            particle.style.height = size + 'px';
            
            particleContainer.appendChild(particle);
        }
    }

    // Create twinkling stars
    function createStars() {
        const starsContainer = document.getElementById('stars-container');
        const starCount = 50;
        
        for (let i = 0; i < starCount; i++) {
            const star = document.createElement('div');
            star.className = 'star';
            
            // Random size
            const sizes = ['small', 'medium', 'large'];
            const randomSize = sizes[Math.floor(Math.random() * sizes.length)];
            star.classList.add(randomSize);
            
            // Random position
            star.style.left = Math.random() * 100 + '%';
            star.style.top = Math.random() * 100 + '%';
            
            // Random animation delay
            star.style.animationDelay = Math.random() * 3 + 's';
            star.style.animationDuration = (2 + Math.random() * 3) + 's';
            
            starsContainer.appendChild(star);
        }
    }

    // Create shooting stars
    function createShootingStars() {
        const starsContainer = document.getElementById('stars-container');
        
        setInterval(() => {
            const shootingStar = document.createElement('div');
            shootingStar.className = 'shooting-star';
            
            // Random starting position (top and right edge)
            shootingStar.style.top = Math.random() * 30 + '%';
            shootingStar.style.right = '0px';
            
            // Random animation delay
            shootingStar.style.animationDelay = Math.random() * 2 + 's';
            
            starsContainer.appendChild(shootingStar);
            
            // Remove shooting star after animation
            setTimeout(() => {
                shootingStar.remove();
            }, 6000);
        }, 8000 + Math.random() * 12000); // Random interval between 8-20 seconds
    }

    // Initialize all animations and show welcome screen
    createParticles();
    createStars();
    createShootingStars();
    showScreen('welcome');
</script>