PECINTA IPA

Tuesday, November 10, 2026

Game Herak dan Gaya

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Teyvat Science: Petualangan Gerak & Gaya</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Google Fonts: Poppins & Genshin-like vibe -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <!-- FontAwesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        genshin: {
                            dark: '#121629',
                            card: '#1e2337',
                            border: '#3a4163',
                            gold: '#f3c653',
                            goldHover: '#ffd76a',
                            accent: '#47d1d8',
                            blueDark: '#0b0f19',
                            pu  purprple: '#b275ff',
                            pyro: '#ef4444',
                            hydro:
                             '#3b82f6',
                            anemo: '#10b981',
                            cryo: '#67e8f9',
                            electro: '#a855f7',
                            geo: '#eab308',
                            dendro: '#84cc16'
                        }
                    },
                    fontFamily: {
                        sans: ['Poppins', 'sans-serif'],
                    }
                }
            }
        }
    </script>
    <style>
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #0b0f19;
            color: #e5e7eb;
            overflow-x: hidden;
            background-image: radial-gradient(circle at 50% 20%, #1a2238 0%, #0b0f19 100%);
            min-height: 100vh;
        }
        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #121629;
        }
        ::-webkit-scrollbar-thumb {
            background: #3a4163;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #f3c653;
        }
        .glow-gold {
            box-shadow: 0 0 20px rgba(243, 198, 83, 0.4);
        }
        .glow-blue {
            box-shadow: 0 0 20px rgba(71, 209, 216, 0.4);
        }
        .genshin-panel {
            background: linear-gradient(135deg, rgba(30, 35, 55, 0.95) 0%, rgba(18, 22, 41, 0.98) 100%);
            border: 2px solid #3a4163;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(10px);
        }
        .genshin-button {
            background: linear-gradient(to bottom, #f3c653, #d9a735);
            color: #121629;
            font-weight: 700;
            border: 1px solid #fff5c0;
            transition: all 0.2s ease;
            box-shadow: 0 4px 12px rgba(243, 198, 83, 0.3);
        }
        .genshin-button:hover {
            background: linear-gradient(to bottom, #ffd76a, #f3c653);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(243, 198, 83, 0.5);
        }
        .genshin-button:active {
            transform: translateY(1px);
        }
        .genshin-button-blue {
            background: linear-gradient(to bottom, #47d1d8, #2a9ea5);
            color: #0b0f19;
            font-weight: 700;
            border: 1px solid #a5f3fc;
            transition: all 0.2s ease;
            box-shadow: 0 4px 12px rgba(71, 209, 216, 0.3);
        }
        .genshin-button-blue:hover {
            background: linear-gradient(to bottom, #67e8f9, #47d1d8);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(71, 209, 216, 0.5);
        }
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
        }
        .floating {
            animation: float 3s ease-in-out infinite;
        }
        @keyframes pulseGlow {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; }
        }
        .pulse-glow {
            animation: pulseGlow 2s ease-in-out infinite;
        }
    </style>
</head>
<body class="min-h-screen flex flex-col justify-between select-none">

    <!-- Top Header / Navigation Bar -->
    <header class="w-full bg-genshin-card border-b border-genshin-border px-4 py-3 sticky top-0 z-50 shadow-md">
        <div class="max-w-7xl mx-auto flex flex-wrap justify-between items-center">
            <div class="flex items-center space-x-3">
                <div class="w-10 h-10 rounded-full bg-gradient-to-tr from-yellow-500 to-amber-300 flex items-center justify-center text-genshin-dark font-black text-xl shadow-lg border border-amber-200">
                    <i class="fa-solid fa-atom"></i>
                </div>
                <div>
                    <h1 class="text-base md:text-lg font-bold text-genshin-gold tracking-wide">Teyvat Science</h1>
                    <p class="text-xs text-slate-400">SMPN 4 Banjar • Guru: Ketut Supeksa, S.Pd</p>
                </div>
            </div>

            <!-- In-game Status Header (Hidden on landing page) -->
            <div id="game-status-bar" class="hidden items-center space-x-4 md:space-x-6 mt-2 sm:mt-0">
                <div class="flex items-center space-x-2 bg-genshin-dark px-3 py-1.5 rounded-full border border-genshin-border">
                    <i class="fa-solid fa-coins text-genshin-gold animate-bounce"></i>
                    <span id="score-display" class="font-bold text-genshin-gold">0</span>
                    <span class="text-xs text-slate-400">Mora</span>
                </div>
                <div class="flex items-center space-x-2 bg-genshin-dark px-3 py-1.5 rounded-full border border-genshin-border">
                    <i class="fa-solid fa-gem text-cyan-400"></i>
                    <span id="primogem-display" class="font-bold text-cyan-400">0</span>
                    <span class="text-xs text-slate-400">Primogems</span>
                </div>
                <div class="flex items-center space-x-2 bg-genshin-dark px-3 py-1.5 rounded-full border border-genshin-border">
                    <i class="fa-solid fa-heart text-red-500"></i>
                    <div class="w-20 bg-slate-700 h-2.5 rounded-full overflow-hidden">
                        <div id="hp-bar" class="bg-red-500 h-full w-full transition-all duration-300"></div>
                    </div>
                    <span id="hp-text" class="text-xs font-bold text-red-400">100/100</span>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Container -->
    <main class="flex-grow flex items-center justify-center p-4 md:p-6 max-w-6xl mx-auto w-full">

        <!-- SCREEN 1: LOGIN / IDENTITAS SISWA -->
        <div id="screen-login" class="w-full max-w-xl genshin-panel rounded-2xl p-6 md:p-8 relative overflow-hidden">
            <div class="absolute -right-16 -top-16 w-48 h-48 bg-amber-500/10 rounded-full blur-3xl pointer-events-none"></div>
            <div class="absolute -left-16 -bottom-16 w-48 h-48 bg-cyan-500/10 rounded-full blur-3xl pointer-events-none"></div>

            <div class="text-center mb-6">
                <span class="bg-amber-500/20 text-genshin-gold text-xs font-semibold px-3 py-1 rounded-full border border-amber-500/30 uppercase tracking-widest">Fase D • Kelas 7 IPA</span>
                <h2 class="text-2xl md:text-3xl font-extrabold text-white mt-2">Petualangan Gerak & Gaya</h2>
                <p class="text-sm text-slate-300 mt-1">Eksplorasi Hukum Newton & Jenis Gaya di Dunia Teyvat bersama Paimon dan Para Traveler!</p>
            </div>

            <form id="form-login" class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-1"><i class="fa-solid fa-user text-genshin-gold mr-2"></i>Nama Lengkap Siswa</label>
                    <input type="text" id="input-name" required placeholder="Contoh: Kadek Ari Pratama" 
                        class="w-full bg-genshin-dark border border-genshin-border rounded-xl px-4 py-3 text-white placeholder-slate-500 focus:outline-none focus:border-genshin-gold transition-colors text-base">
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-1"><i class="fa-solid fa-graduation-cap text-genshin-gold mr-2"></i>Kelas</label>
                        <select id="input-class" required class="w-full bg-genshin-dark border border-genshin-border rounded-xl px-4 py-3 text-white focus:outline-none focus:border-genshin-gold transition-colors text-base">
                            <option value="" disabled selected>Pilih Kelas</option>
                            <option value="7A">Kelas 7A</option>
                            <option value="7B">Kelas 7B</option>
                            <option value="7C">Kelas 7C</option>
                            <option value="7D">Kelas 7D</option>
                            <option value="7E">Kelas 7E</option>
                            <option value="7F">Kelas 7F</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-300 mb-1"><i class="fa-solid fa-id-badge text-genshin-gold mr-2"></i>No Absen</label>
                        <input type="number" id="input-absen" min="1" max="50" required placeholder="Contoh: 18" 
                            class="w-full bg-genshin-dark border border-genshin-border rounded-xl px-4 py-3 text-white placeholder-slate-500 focus:outline-none focus:border-genshin-gold transition-colors text-base">
                    </div>
                </div>

                <div class="pt-4">
                    <button type="submit" class="w-full genshin-button py-3.5 px-6 rounded-xl text-lg flex items-center justify-center space-x-3 shadow-lg">
                        <span>Mulai Petualangan</span>
                        <i class="fa-solid fa-arrow-right"></i>
                    </button>
                </div>
            </form>

            <div class="mt-6 pt-4 border-t border-slate-700/50 text-center text-xs text-slate-400">
                <p>Mata Pelajaran: Ilmu Pengetahuan Alam (IPA) • SMPN 4 Banjar</p>
                <p class="text-amber-300/80 mt-0.5">Guru Pengampu: Ketut Supeksa, S.Pd</p>
            </div>
        </div>


        <!-- SCREEN 2: PILIH KARAKTER -->
        <div id="screen-character" class="hidden w-full max-w-5xl genshin-panel rounded-2xl p-6 md:p-8">
            <div class="text-center mb-6">
                <span class="text-genshin-gold text-xs font-semibold uppercase tracking-widest">Pilih Pahlawan Teyvat-mu</span>
                <h2 class="text-2xl md:text-3xl font-extrabold text-white mt-1">Siapa yang Akan Menemanimu Belajar?</h2>
                <p class="text-sm text-slate-300 mt-1">Referensi resmi poster Teyvat. Pilih salah satu karakter di bawah untuk memulai!</p>
            </div>

            <!-- Reference Poster Showcase for Selection -->
            <div class="mb-6 bg-slate-900 border-2 border-genshin-border rounded-2xl p-4 shadow-xl overflow-hidden">
                <p class="text-xs text-amber-300 font-semibold mb-3 text-center"><i class="fa-solid fa-image mr-1"></i> Poster Resmi Referensi Karakter (Klik Tombol di Bawah untuk Memilih)</p>
                <div class="relative w-full rounded-xl overflow-hidden border border-slate-700 shadow-inner max-h-[350px] flex items-center justify-center bg-slate-950">
                    <img src="https://storage.googleapis.com/gen-at-prod/images/ffb80c54-ee54-4645-a74c-f1e149f1db13.png" alt="Genshin Impact Character Lineup Poster" class="w-full h-full object-contain max-h-[320px]">
                </div>
            </div>

            <!-- Character Grid Selection Buttons -->
            <div id="character-grid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3 mb-6 max-h-[40vh] overflow-y-auto p-1">
                <!-- Dynamically populated via JS -->
            </div>

            <div class="flex justify-between items-center pt-4 border-t border-slate-700">
                <button id="btn-back-to-login" class="bg-slate-700 hover:bg-slate-600 text-slate-200 font-semibold px-5 py-2.5 rounded-xl transition-colors text-sm">
                    <i class="fa-solid fa-arrow-left mr-2"></i> Kembali
                </button>
                <button id="btn-start-game" disabled class="genshin-button px-8 py-3 rounded-xl text-base opacity-50 cursor-not-allowed">
                    Masuk ke Domain <i class="fa-solid fa-dungeon ml-2"></i>
                </button>
            </div>
        </div>


        <!-- SCREEN 3: OVERWORLD / DOMAIN SELECTOR -->
        <div id="screen-overworld" class="hidden w-full max-w-5xl genshin-panel rounded-2xl p-6 md:p-8 relative">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 pb-4 border-b border-slate-700 gap-4">
                <div class="flex items-center space-x-4">
                    <div id="selected-char-avatar" class="w-14 h-14 rounded-full border-2 border-genshin-gold bg-slate-800 flex items-center justify-center text-2xl shadow-lg">
                        ⭐
                    </div>
                    <div>
                        <h3 id="player-welcome-text" class="text-xl font-bold text-white">Halo, Traveler!</h3>
                        <p class="text-xs text-genshin-gold font-medium" id="selected-char-name">Karakter: -</p>
                    </div>
                </div>
                <div class="bg-slate-800/80 border border-slate-700 rounded-xl px-4 py-2 text-xs flex items-center space-x-3">
                    <div class="flex items-center space-x-1.5">
                        <i class="fa-solid fa-user-graduate text-genshin-gold"></i>
                        <span id="info-nama-kelas" class="font-semibold text-slate-200">-</span>
                    </div>
                    <span class="text-slate-600">|</span>
                    <div class="flex items-center space-x-1.5">
                        <i class="fa-solid fa-chalkboard-user text-cyan-400"></i>
                        <span class="text-slate-300">Ketut Supeksa, S.Pd</span>
                    </div>
                </div>
            </div>

            <div class="mb-6">
                <h4 class="text-lg font-bold text-white mb-2 flex items-center">
                    <i class="fa-solid fa-map text-amber-400 mr-2"></i> Pilih Domain Misi Gerak & Gaya (Fase D)
                </h4>
                <p class="text-xs text-slate-300">Selesaikan ketiga Domain di bawah ini untuk mendapatkan sertifikat kelulusan dari Akademi Sumeru & SMPN 4 Banjar!</p>
            </div>

            <!-- Domain Cards Grid -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                <!-- Domain 1 -->
                <div onclick="startDomain(1)" class="bg-gradient-to-b from-slate-800 to-slate-900 border-2 border-amber-500/40 hover:border-amber-400 rounded-2xl p-5 cursor-pointer transition-all duration-300 hover:transform hover:-translate-y-1 shadow-lg group relative overflow-hidden">
                    <div class="absolute top-0 right-0 bg-amber-500/20 text-amber-300 text-[10px] font-bold px-3 py-1 rounded-bl-xl border-l border-b border-amber-500/30">BABAK 1</div>
                    <div class="w-12 h-12 rounded-xl bg-amber-500/20 border border-amber-500/40 flex items-center justify-center text-amber-400 text-xl mb-4 group-hover:scale-110 transition-transform">
                        <i class="fa-solid fa-hand-fist"></i>
                    </div>
                    <h5 class="text-base font-bold text-white mb-1">Domain 1: Jenis Gaya</h5>
                    <p class="text-xs text-slate-400 mb-4">Eksplorasi Gaya Gesek, Gaya Otot, Gaya Magnet, dan Gaya Gravitasi di Teyvat.</p>
                    <div class="flex justify-between items-center text-xs pt-3 border-t border-slate-700">
                        <span id="domain1-status" class="text-amber-400 font-semibold"><i class="fa-solid fa-play mr-1"></i> Mulai Misi</span>
                        <span id="domain1-score" class="text-slate-400">Skor: 0/100</span>
                    </div>
                </div>

                <!-- Domain 2 -->
                <div onclick="startDomain(2)" class="bg-gradient-to-b from-slate-800 to-slate-900 border-2 border-cyan-500/40 hover:border-cyan-400 rounded-2xl p-5 cursor-pointer transition-all duration-300 hover:transform hover:-translate-y-1 shadow-lg group relative overflow-hidden">
                    <div class="absolute top-0 right-0 bg-cyan-500/20 text-cyan-300 text-[10px] font-bold px-3 py-1 rounded-bl-xl border-l border-b border-cyan-500/30">BABAK 2</div>
                    <div class="w-12 h-12 rounded-xl bg-cyan-500/20 border border-cyan-500/40 flex items-center justify-center text-cyan-400 text-xl mb-4 group-hover:scale-110 transition-transform">
                        <i class="fa-solid fa-scale-balanced"></i>
                    </div>
                    <h5 class="text-base font-bold text-white mb-1">Domain 2: Hukum Newton</h5>
                    <p class="text-xs text-slate-400 mb-4">Pahami Hukum I, II, dan III Newton dalam petualangan sehari-hari di Mondstadt & Liyue.</p>
                    <div class="flex justify-between items-center text-xs pt-3 border-t border-slate-700">
                        <span id="domain2-status" class="text-cyan-400 font-semibold"><i class="fa-solid fa-play mr-1"></i> Mulai Misi</span>
                        <span id="domain2-score" class="text-slate-400">Skor: 0/100</span>
                    </div>
                </div>

                <!-- Domain 3 -->
                <div onclick="startDomain(3)" class="bg-gradient-to-b from-slate-800 to-slate-900 border-2 border-purple-500/40 hover:border-purple-400 rounded-2xl p-5 cursor-pointer transition-all duration-300 hover:transform hover:-translate-y-1 shadow-lg group relative overflow-hidden">
                    <div class="absolute top-0 right-0 bg-purple-500/20 text-purple-300 text-[10px] font-bold px-3 py-1 rounded-bl-xl border-l border-b border-purple-500/30">BABAK 3</div>
                    <div class="w-12 h-12 rounded-xl bg-purple-500/20 border border-purple-500/40 flex items-center justify-center text-purple-400 text-xl mb-4 group-hover:scale-110 transition-transform">
                        <i class="fa-solid fa-gauge-high"></i>
                    </div>
                    <h5 class="text-base font-bold text-white mb-1">Domain 3: Kelajuan & Kecepatan</h5>
                    <p class="text-xs text-slate-400 mb-4">Uji kemampuan hitung gerak lurus beraturan (GLB) & percepatan di dunia Teyvat.</p>
                    <div class="flex justify-between items-center text-xs pt-3 border-t border-slate-700">
                        <span id="domain3-status" class="text-purple-400 font-semibold"><i class="fa-solid fa-play mr-1"></i> Mulai Misi</span>
                        <span id="domain3-score" class="text-slate-400">Skor: 0/100</span>
                    </div>
                </div>
            </div>

            <!-- Certificate Button Banner -->
            <div id="certificate-banner-container" class="hidden bg-gradient-to-r from-amber-500/20 via-yellow-500/10 to-amber-500/20 border border-amber-500/50 rounded-2xl p-5 flex flex-col sm:flex-row items-center justify-between gap-4">
                <div class="flex items-center space-x-3">
                    <div class="w-12 h-12 rounded-full bg-amber-500 text-genshin-dark flex items-center justify-center text-2xl font-bold shadow-lg animate-bounce">
                        <i class="fa-solid fa-award"></i>
                    </div>
                    <div>
                        <h5 class="text-base font-bold text-amber-300">Semua Domain Telah Ditaklukkan!</h5>
                        <p class="text-xs text-slate-300">Sertifikat kelulusan Akademik Teyvat Science siap diterbitkan.</p>
                    </div>
                </div>
                <button onclick="showCertificate()" class="genshin-button px-6 py-3 rounded-xl text-sm font-bold flex items-center space-x-2">
                    <i class="fa-solid fa-certificate"></i>
                    <span>Buka Sertifikat Kelulusan</span>
                </button>
            </div>
        </div>


        <!-- SCREEN 4: QUIZ / BATTLE DOMAIN -->
        <div id="screen-quiz" class="hidden w-full max-w-3xl genshin-panel rounded-2xl p-6 md:p-8 relative">
            <!-- Quiz Header -->
            <div class="flex justify-between items-center mb-6 pb-3 border-b border-slate-700">
                <div class="flex items-center space-x-3">
                    <button onclick="backToOverworld()" class="text-slate-400 hover:text-white transition-colors">
                        <i class="fa-solid fa-arrow-left text-lg"></i>
                    </button>
                    <div>
                        <h4 id="quiz-domain-title" class="text-base md:text-lg font-bold text-genshin-gold">Domain 1: Jenis-jenis Gaya</h4>
                        <p id="quiz-progress-text" class="text-xs text-slate-400">Pertanyaan 1 dari 5</p>
                    </div>
                </div>
                <div class="flex items-center space-x-2 bg-slate-800 px-3 py-1.5 rounded-xl border border-slate-700 text-xs">
                    <i class="fa-solid fa-star text-amber-400"></i>
                    <span id="quiz-score-live" class="font-bold text-amber-300">0 Poin</span>
                </div>
            </div>

            <!-- Paimon Guide Box -->
            <div class="bg-blue-950/40 border border-blue-500/30 rounded-2xl p-4 mb-6 flex items-start space-x-4">
                <div class="w-12 h-12 rounded-full bg-blue-500/20 border border-blue-400/50 flex-shrink-0 flex items-center justify-center text-2xl floating">
                    🧚‍♀️
                </div>
                <div>
                    <div class="text-xs font-bold text-cyan-300 mb-1">Paimon (Pemandu Petualangan):</div>
                    <p id="paimon-dialog" class="text-xs md:text-sm text-slate-200 leading-relaxed">
                        "Wahai Traveler, perhatikan baik-baik soal di bawah ini! Guru Ketut Supeksa bilang konsep ini sangat penting untuk ulangan IPA kalian lho!"
                    </p>
                </div>
            </div>

            <!-- Question Card -->
            <div class="mb-6">
                <h3 id="question-text" class="text-base md:text-lg font-bold text-white mb-4 leading-snug">
                    <!-- Pertanyaan dimuat di sini -->
                </h3>

                <!-- Options List -->
                <div id="options-container" class="space-y-3">
                    <!-- Opsi jawaban dimuat di sini -->
                </div>
            </div>

            <!-- Explanation Box (Hidden until answered) -->
            <div id="explanation-box" class="hidden bg-slate-900/90 border rounded-2xl p-4 mt-4 transition-all">
                <div class="flex items-center space-x-2 mb-1">
                    <i id="explanation-icon" class="fa-solid fa-circle-check text-green-400"></i>
                    <span id="explanation-title" class="font-bold text-sm text-white">Benar!</span>
                </div>
                <p id="explanation-text" class="text-xs md:text-sm text-slate-300 leading-relaxed mb-4">
                    <!-- Penjelasan IPA -->
                </p>
                <button onclick="nextQuestion()" class="w-full genshin-button py-2.5 rounded-xl text-sm font-bold flex items-center justify-center space-x-2">
                    <span id="next-btn-text">Lanjut Pertanyaan Berikutnya</span>
                    <i class="fa-solid fa-arrow-right"></i>
                </button>
            </div>
        </div>

        <!-- SCREEN 5: SERTIFIKAT KELULUSAN AKADEMI TEYVAT -->
        <div id="screen-certificate" class="hidden w-full max-w-4xl genshin-panel rounded-2xl p-6 md:p-10 relative overflow-hidden">
            <div class="absolute -right-20 -top-20 w-64 h-64 bg-amber-500/10 rounded-full blur-3xl pointer-events-none"></div>
            <div class="absolute -left-20 -bottom-20 w-64 h-64 bg-cyan-500/10 rounded-full blur-3xl pointer-events-none"></div>

            <div class="text-center border-b border-amber-500/30 pb-6 mb-6">
                <div class="inline-flex items-center space-x-2 bg-amber-500/20 text-amber-300 text-xs font-bold px-4 py-1.5 rounded-full border border-amber-500/40 mb-3">
                    <i class="fa-solid fa-award"></i>
                    <span>SERTIFIKAT RESMI AKADEMI TEYVAT & SMPN 4 BANJAR</span>
                </div>
                <h2 class="text-2xl md:text-4xl font-extrabold text-white tracking-wide">Sertifikat Kelulusan Sains</h2>
                <p class="text-xs md:text-sm text-slate-300 mt-1">Diberikan sebagai penghargaan atas keberhasilan menyelesaikan misi materi Gerak & Gaya (Fase D)</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                <div class="bg-slate-900/80 border border-slate-700 rounded-xl p-4 flex flex-col justify-center">
                    <span class="text-xs text-slate-400">Identitas Siswa</span>
                    <h4 id="cert-nama" class="text-lg font-bold text-white mt-1">-</h4>
                    <p class="text-xs text-amber-300 mt-0.5">Kelas: <span id="cert-kelas">-</span> | No Absen: <span id="cert-absen">-</span></p>
                </div>
                <div class="bg-slate-900/80 border border-slate-700 rounded-xl p-4 flex items-center space-x-4">
                    <div id="cert-char-avatar" class="w-12 h-12 rounded-full border border-amber-400 bg-slate-800 overflow-hidden flex items-center justify-center">⭐</div>
                    <div>
                        <span class="text-xs text-slate-400">Karakter Pendamping</span>
                        <h4 id="cert-char-name" class="text-sm font-bold text-white mt-0.5">-</h4>
                    </div>
                </div>
                <div class="bg-slate-900/80 border border-slate-700 rounded-xl p-4 flex flex-col justify-center">
                    <span class="text-xs text-slate-400">Predikat Kelulusan</span>
                    <h4 id="cert-predikat" class="text-lg font-bold text-green-400 mt-1">Sangat Baik (A)</h4>
                    <p class="text-xs text-slate-400 mt-0.5">Mata Pelajaran IPA Kelas 7</p>
                </div>
            </div>

            <!-- Domain Score breakdown -->
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
                <div class="bg-amber-950/30 border border-amber-500/30 rounded-xl p-3 text-center">
                    <span class="text-xs text-amber-300 font-semibold">Domain 1 (Jenis Gaya)</span>
                    <h3 id="cert-score-1" class="text-xl font-extrabold text-white mt-1">0/100</h3>
                </div>
                <div class="bg-cyan-950/30 border border-cyan-500/30 rounded-xl p-3 text-center">
                    <span class="text-xs text-cyan-300 font-semibold">Domain 2 (Hukum Newton)</span>
                    <h3 id="cert-score-2" class="text-xl font-extrabold text-white mt-1">0/100</h3>
                </div>
                <div class="bg-purple-950/30 border border-purple-500/30 rounded-xl p-3 text-center">
                    <span class="text-xs text-purple-300 font-semibold">Domain 3 (Kelajuan & Kecepatan)</span>
                    <h3 id="cert-score-3" class="text-xl font-extrabold text-white mt-1">0/100</h3>
                </div>
            </div>

            <div class="bg-gradient-to-r from-slate-900 to-amber-950/50 border border-slate-700 rounded-2xl p-5 mb-6 flex flex-wrap items-center justify-between gap-4">
                <div class="flex items-center space-x-4">
                    <div class="flex items-center space-x-2">
                        <i class="fa-solid fa-coins text-genshin-gold text-xl"></i>
                        <div>
                            <span class="text-[10px] text-slate-400 block">Total Mora Diperoleh</span>
                            <span id="cert-total-score" class="text-base font-bold text-genshin-gold">0</span>
                        </div>
                    </div>
                    <div class="flex items-center space-x-2 border-l border-slate-700 pl-4">
                        <i class="fa-solid fa-gem text-cyan-400 text-xl"></i>
                        <div>
                            <span class="text-[10px] text-slate-400 block">Primogems Bonus</span>
                            <span id="cert-total-primogem" class="text-base font-bold text-cyan-400">0</span>
                        </div>
                    </div>
                </div>
                <div class="text-right">
                    <span class="text-xs text-slate-300 block font-medium">Guru Pengampu Mata Pelajaran IPA:</span>
                    <span class="text-sm font-bold text-amber-300">Ketut Supeksa, S.Pd</span>
                    <span class="text-[11px] text-slate-400 block">SMPN 4 Banjar</span>
                </div>
            </div>

            <div class="flex flex-col sm:flex-row justify-between items-center gap-4 pt-2">
                <button onclick="backToOverworld()" class="w-full sm:w-auto bg-slate-700 hover:bg-slate-600 text-slate-200 font-semibold px-6 py-3 rounded-xl transition-colors text-sm">
                    <i class="fa-solid fa-arrow-left mr-2"></i> Kembali ke Overworld
                </button>
                <div class="flex space-x-3 w-full sm:w-auto">
                    <button onclick="window.print()" class="flex-1 sm:flex-none genshin-button-blue px-6 py-3 rounded-xl text-sm font-bold flex items-center justify-center space-x-2">
                        <i class="fa-solid fa-print"></i>
                        <span>Cetak / Simpan PDF</span>
                    </button>
                    <button onclick="resetGame()" class="flex-1 sm:flex-none bg-red-600/80 hover:bg-red-600 text-white font-bold px-6 py-3 rounded-xl text-sm transition-colors flex items-center justify-center space-x-2">
                        <i class="fa-solid fa-rotate-right"></i>
                        <span>Main Ulang</span>
                    </button>
                </div>
            </div>
        </div>

    </main>

    <!-- Footer -->
    <footer class="w-full bg-genshin-card border-t border-genshin-border py-3 px-4 text-center text-xs text-slate-400">
        <p>Teyvat Science Game • Kurikulum Merdeka Fase D Kelas 7 • SMPN 4 Banjar</p>
        <p class="text-amber-400/90 font-medium mt-0.5">Guru Pengampu: Ketut Supeksa, S.Pd</p>
    </footer>

    <!-- Script Game Logics -->
    <script>
        // Global Game State Initialization
        let gameState = {
            studentName: '',
            studentClass: '',
            studentAbsen: '',
            selectedCharacter: null,
            score: 0,
            primogems: 0,
            hp: 100,
            currentDomain: 1,
            currentQuestionIndex: 0,
            domainScores: { 1: 0, 2: 0, 3: 0 },
            domainCompleted: { 1: false, 2: false, 3: false }
        };

        // Data Domain Soal IPA Gerak & Gaya (Fase D - Kelas 7)
        const domainsData = {
            1: {
                title: "Domain 1: Jenis-jenis Gaya",
                questions: [
                    {
                        question: "Saat Aether mendorong kotak kargo di pelabuhan Liyue, terjadi gaya sentuh antara tangan Aether dan kotak tersebut. Gaya apakah ini?",
                        options: ["Gaya Magnet", "Gaya Otot", "Gaya Gravitasi", "Gaya Listrik"],
                        correct: 1,
                        explanation: "Benar! Gaya otot adalah gaya yang dihasilkan oleh kerja otot tubuh manusia atau hewan untuk mendorong, menarik, atau mengangkat benda."
                    },
                    {
                        question: "Paimon melihat buah Sunsettia jatuh dari pohon di Mondstadt langsung ke tanah akibat ditarik oleh gaya...",
                        options: ["Gaya Gesek", "Gaya Pegas", "Gaya Gravitasi Bumi", "Gaya Otot"],
                        correct: 2,
                        explanation: "Tepat sekali! Gaya gravitasi bumi adalah gaya tarik yang dialami oleh semua benda bermassa menuju ke pusat bumi."
                    },
                    {
                        question: "Ketika Kaeya meluncur di atas es Dragonspine, gesekan antara sepatu es dan permukaan es menjadi sangat kecil karena...",
                        options: ["Es sangat kasar", "Es sangat licin / koefisien gesek kecil", "Adanya gaya magnet", "Adanya dorongan angin"],
                        correct: 1,
                        explanation: "Benar! Permukaan es yang licin memperkecil gaya gesek sehingga benda lebih mudah meluncur."
                    },
                    {
                        question: "Gaya yang timbul karena dua permukaan benda saling bersentuhan langsung dan berlawanan arah dengan arah gerak benda disebut...",
                        options: ["Gaya Gesek", "Gaya Magnet", "Gaya Gravitasi", "Gaya Normal"],
                        correct: 0,
                        explanation: "Tepat! Gaya gesek selalu menentang arah gerak benda atau arah kecenderungan benda bergerak."
                    },
                    {
                        question: "Manakah di bawah ini yang merupakan contoh pemanfaatan Gaya Pegas?",
                        options: ["Memanah menggunakan busur panah", "Mendorong batu besar", "Menjemur pakaian di bawah matahari", "Menghidupkan lampu senter"],
                        correct: 0,
                        explanation: "Benar! Busur panah memanfaatkan sifat elastisitas tali busur (gaya pegas) untuk melontarkan anak panah."
                    }
                ]
            },
            2: {
                title: "Domain 2: Hukum Newton tentang Gerak",
                questions: [
                    {
                        question: "Hukum I Newton sering disebut juga sebagai hukum kelembaman (inersia). Manakah pernyataan yang paling tepat?",
                        options: [
                            "Benda yang diam akan cenderung tetap diam jika resultan gaya sama dengan nol",
                            "Percepatan berbanding lurus dengan gaya",
                            "Setiap aksi menimbulkan reaksi",
                            "Berat benda tergantung gravitasi"
                        ],
                        correct: 0,
                        explanation: "Benar! Hukum I Newton menyatakan bahwa sifat kelembaman benda membuat benda mempertahankan keadaan diam atau gerak lurus beraturannya (Sigma F = 0)."
                    },
                    {
                        question: "Rumus matematis dari Hukum II Newton adalah F = m × a. Jika massa benda (m) besar dan percepatan (a) tetap, maka gaya (F) yang dibutuhkan adalah...",
                        options: ["Semakin kecil", "Semakin besar", "Tetap sama", "Nol"],
                        correct: 1,
                        explanation: "Tepat! Karena gaya berbanding lurus dengan massa benda (F = m × a), semakin besar massa benda, semakin besar pula gaya yang diperlukan."
                    },
                    {
                        question: "Ketika kamu mendayung perahu di danau Mondstadt, dayung mendorong air ke belakang, dan perahu bergerak ke depan. Ini adalah contoh dari...",
                        options: ["Hukum I Newton", "Hukum II Newton", "Hukum III Newton (Aksi-Reaksi)", "Hukum Archimedes"],
                        correct: 2,
                        explanation: "Benar! Hukum III Newton menyatakan bahwa jika benda A memberikan gaya pada benda B (aksi), maka benda B akan memberikan gaya yang sama besar namun berlawanan arah pada benda A (reaksi)."
                    },
                    {
                        question: "Mengapa penumpang di dalam gerobak kuda akan terdorong ke depan ketika kuda secara mendadak berhenti?",
                        options: [
                            "Karena Hukum I Newton (tubuh ingin mempertahankan gerak)",
                            "Karena ada gaya dorong angin",
                            "Karena gaya gravitasi hilang",
                            "Karena gaya gesek bertambah besar"
                        ],
                        correct: 0,
                        explanation: "Tepat! Ini adalah inersia atau kelembaman tubuh yang mempertahankan kecepatan geraknya semula ke depan."
                    },
                    {
                        question: "Sebuah kotak bermassa 10 kg didorong dengan percepatan 2 m/s². Berdasarkan Hukum II Newton, berapakah gaya yang diberikan?",
                        options: ["5 Newton", "12 Newton", "20 Newton", "100 Newton"],
                        correct: 2,
                        explanation: "Benar! F = m × a = 10 kg × 2 m/s² = 20 Newton."
                    }
                ]
            },
            3: {
                title: "Domain 3: Kelajuan, Kecepatan, & Percepatan",
                questions: [
                    {
                        question: "Apakah perbedaan utama antara kelajuan dan kecepatan?",
                        options: [
                            "Kelajuan memiliki arah, kecepatan tidak",
                            "Kelajuan adalah besaran skalar (jarak/waktu), kecepatan adalah besaran vektor (perpindahan/waktu)",
                            "Kelajuan selalu lebih kecil dari kecepatan",
                            "Tidak ada perbedaan sama sekali"
                        ],
                        correct: 1,
                        explanation: "Tepat sekali! Kelajuan memperhitungkan jarak tempuh total (skalar), sedangkan kecepatan memperhitungkan arah dan perpindahan posisi (vektor)."
                    },
                    {
                        question: "Aether berlari menempuh jarak 100 meter dalam waktu 20 detik. Berapakah kelajuan rata-rata Aether?",
                        options: ["2 m/s", "5 m/s", "10 m/s", "20 m/s"],
                        correct: 1,
                        explanation: "Benar! Kelajuan = Jarak / Waktu = 100 meter / 20 sekon = 5 m/s."
                    },
                    {
                        question: "Sebuah mobil Slime bergerak dengan kelajuan tetap pada lintasan lurus. Gerak benda ini disebut sebagai...",
                        options: ["GLBB Dipercepat", "GLBB Diperlambat", "GLB (Gerak Lurus Beraturan)", "Gerak Melingkar Beraturan"],
                        correct: 2,
                        explanation: "Tepat! Gerak Lurus Beraturan (GLB) adalah gerak benda pada lintasan lurus dengan kecepatan tetap (percepatan = 0)."
                    },
                    {
                        question: "Apa arti fisik dari percepatan (acceleration) bernilai positif?",
                        options: [
                            "Kecepatan benda semakin bertambah seiring waktu",
                            "Kecepatan benda berkurang",
                            "Benda dalam keadaan diam",
                            "Benda bergerak dengan kecepatan konstan"
                        ],
                        correct: 0,
                        explanation: "Benar! Percepatan positif menunjukkan bahwa kecepatan benda bertambah tiap detiknya (GLBB dipercepat)."
                    },
                    {
                        question: "Jika sebuah objek mengalami percepatan konstan dari 0 hingga 20 m/s dalam waktu 4 detik, berapa percepatannya?",
                        options: ["2 m/s²", "4 m/s²", "5 m/s²", "80 m/s²"],
                        correct: 2,
                        explanation: "Benar! Percepatan (a) = (Kecepatan Akhir - Kecepatan Awal) / Waktu = (20 - 0) / 4 = 5 m/s²."
                    }
                ]
            }
        };

        // Data Karakter Genshin Impact dengan Potret Resmi High-Resolution Sesuai Poster Referensi
        const characters = [
            { 
                id: 'aether', 
                name: 'Aether', 
                element: 'anemo', 
                desc: 'Traveler Utama • Elemen Anemo & Multi', 
                icon: 'fa-wind', 
                color: 'border-amber-500', 
                bg: 'from-amber-900/40 to-slate-900', 
                imgUrl: 'https://storage.googleapis.com/gen-at-prod/images/ffb80c54-ee54-4645-a74c-f1e149f1db13.png',
                fallbackImg: 'https://rerollcdn.com/GENSHIN/Characters/Aether.png',
                paimonGreeting: "Wahai Aether! Mari kita tunjukkan semangat belajar IPA kepada Pak Ketut Supeksa!" 
            },
            { 
                id: 'lumine', 
                name: 'Lumine', 
                element: 'dendro', 
                desc: 'Traveler Utama • Elemen Dendro & Multi', 
                icon: 'fa-seedling', 
                color: 'border-yellow-400', 
                bg: 'from-yellow-900/40 to-slate-900', 
                imgUrl: 'https://storage.googleapis.com/gen-at-prod/images/ffb80c54-ee54-4645-a74c-f1e149f1db13.png',
                fallbackImg: 'https://rerollcdn.com/GENSHIN/Characters/Lumine.png',
                paimonGreeting: "Semangat Lumine! Kita pasti bisa menjawab semua teka-teki hukum Newton hari ini!" 
            },
            { 
                id: 'paimon', 
                name: 'Paimon', 
                element: 'geo', 
                desc: 'Pemandu Terbaik • Makanan Darurat Kesayangan', 
                icon: 'fa-star', 
                color: 'border-cyan-400', 
                bg: 'from-cyan-900/40 to-slate-900', 
                imgUrl: 'https://storage.googleapis.com/gen-at-prod/images/ffb80c54-ee54-4645-a74c-f1e149f1db13.png',
                fallbackImg: 'https://rerollcdn.com/GENSHIN/Characters/Paimon.png',
                paimonGreeting: "Hehe! Paimon juga bisa ikut bertualang menjawab soal IPA kalau kamu pilih Paimon!" 
            },
            { 
                id: 'diluc', 
                name: 'Diluc', 
                element: 'pyro', 
                desc: 'Master Ragnvindr • Elemen Pyro Membara', 
                icon: 'fa-fire', 
                color: 'border-red-500', 
                bg: 'from-red-900/40 to-slate-900', 
                imgUrl: 'https://storage.googleapis.com/gen-at-prod/images/ffb80c54-ee54-4645-a74c-f1e149f1db13.png',
                fallbackImg: 'https://rerollcdn.com/GENSHIN/Characters/Diluc.png',
                paimonGreeting: "Tuan Diluc yang keren! Kecepatan dan kekuatan Pyro-nya tidak tertandingi di Mondstadt!" 
            },
            { 
                id: 'jean', 
                name: 'Jean', 
                element: 'anemo', 
                desc: 'Pelaksana Grand Master • Elemen Anemo', 
                icon: 'fa-feather', 
                color: 'border-teal-400', 
                bg: 'from-teal-900/40 to-slate-900', 
                imgUrl: 'https://storage.googleapis.com/gen-at-prod/images/ffb80c54-ee54-4645-a74c-f1e149f1db13.png',
                fallbackImg: 'https://rerollcdn.com/GENSHIN/Characters/Jean.png',
                paimonGreeting: "Jean sangat disiplin! Beliau pasti sangat teliti dalam menghitung percepatan dan gaya gesek." 
            },
            { 
                id: 'kaeya', 
                name: 'Kaeya', 
                element: 'cryo', 
                desc: 'Kavaleri Kapten • Elemen Cryo', 
                icon: 'fa-snowflake', 
                color: 'border-sky-400', 
                bg: 'from-sky-900/40 to-slate-900', 
                imgUrl: 'https://storage.googleapis.com/gen-at-prod/images/ffb80c54-ee54-4645-a74c-f1e149f1db13.png',
                fallbackImg: 'https://rerollcdn.com/GENSHIN/Characters/Kaeya.png',
                paimonGreeting: "Kapten Kaeya yang misterius siap membantumu menaklukkan fisika dengan senyuman es!" 
            },
            { 
                id: 'xiao', 
                name: 'Xiao', 
                element: 'anemo', 
                desc: 'Yaksha Penjaga • Elemen Anemo Penguasa', 
                icon: 'fa-wind', 
                color: 'border-emerald-500', 
                bg: 'from-emerald-900/40 to-slate-900', 
                imgUrl: 'https://storage.googleapis.com/gen-at-prod/images/ffb80c54-ee54-4645-a74c-f1e149f1db13.png',
                fallbackImg: 'https://rerollcdn.com/GENSHIN/Characters/Xiao.png',
                paimonGreeting: "Yak! Xiao melompat sangat tinggi menggunakan gaya otot dan gravitasi yang minimal!" 
            },
            { 
                id: 'zhongli', 
                name: 'Zhongli', 
                element: 'geo', 
                desc: 'Archon Geo • Perisai Batu Tak Tergoyahkan', 
                icon: 'fa-shield-halved', 
                color: 'border-amber-600', 
                bg: 'from-amber-950 to-slate-900', 
                imgUrl: 'https://storage.googleapis.com/gen-at-prod/images/ffb80c54-ee54-4645-a74c-f1e149f1db13.png',
                fallbackImg: 'https://rerollcdn.com/GENSHIN/Characters/Zhongli.png',
                paimonGreeting: "Tuan Zhongli tahu semua tentang hukum alam dan batu-batu di bumi Teyvat!" 
            },
            { 
                id: 'raiden', 
                name: 'Raiden Shogun', 
                element: 'electro', 
                desc: 'Archon Electro • Kecepatan Petir Abadi', 
                icon: 'fa-bolt', 
                color: 'border-purple-500', 
                bg: 'from-purple-900/40 to-slate-900', 
                imgUrl: 'https://storage.googleapis.com/gen-at-prod/images/ffb80c54-ee54-4645-a74c-f1e149f1db13.png',
                fallbackImg: 'https://rerollcdn.com/GENSHIN/Characters/Raiden_Shogun.png',
                paimonGreeting: "Kecepatan sambaran petir Shogun Raiden sangat relevan dengan materi kelajuan dan kecepatan kita!" 
            },
            { 
                id: 'nahida', 
                name: 'Nahida', 
                element: 'dendro', 
                desc: 'Archon Dendro • Kebijaksanaan Sumeru', 
                icon: 'fa-brain', 
                color: 'border-lime-400', 
                bg: 'from-lime-950 to-slate-900', 
                imgUrl: 'https://storage.googleapis.com/gen-at-prod/images/ffb80c54-ee54-4645-a74c-f1e149f1db13.png',
                fallbackImg: 'https://rerollcdn.com/GENSHIN/Characters/Nahida.png',
                paimonGreeting: "Kecerdasan Archon Nahida akan membimbing pikiran kita untuk memahami sains dengan mudah!" 
            }
        ];

        // Inisialisasi Tampilan Karakter di Layar 2 dengan Potret Gambar Berkualitas Tinggi
        function initCharacterGrid() {
            const grid = document.getElementById('character-grid');
            grid.innerHTML = '';
            characters.forEach(char => {
                const card = document.createElement('div');
                card.className = `bg-slate-900/90 border-2 ${char.color} rounded-2xl p-2.5 cursor-pointer transition-all duration-200 hover:scale-105 flex flex-col items-center text-center group relative overflow-hidden shadow-lg`;
                card.onclick = () => selectCharacter(char.id);
                card.id = `char-card-${char.id}`;

                card.innerHTML = `
                    <div class="w-16 h-16 rounded-xl bg-gradient-to-tr ${char.bg} border border-slate-700 overflow-hidden mb-1.5 relative flex items-center justify-center shadow-inner">
                        <img src="${char.imgUrl}" onerror="this.onerror=null; this.src='${char.fallbackImg}';" alt="${char.name}" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
                        <div class="absolute bottom-0 inset-x-0 bg-black/70 text-[8px] text-amber-300 font-bold uppercase tracking-wider py-0.5">${char.element}</div>
                    </div>
                    <h5 class="font-bold text-white text-xs mb-0.5">${char.name}</h5>
                    <p class="text-[9px] text-slate-400 leading-tight line-clamp-1">${char.desc}</p>
                `;
                grid.appendChild(card);
            });
        }

        function selectCharacter(id) {
            characters.forEach(c => {
                const el = document.getElementById(`char-card-${c.id}`);
                if (el) el.classList.remove('ring-4', 'ring-amber-400', 'bg-amber-500/10');
            });

            const selectedEl = document.getElementById(`char-card-${id}`);
            if (selectedEl) {
                selectedEl.classList.add('ring-4', 'ring-amber-400', 'bg-amber-500/10');
            }

            gameState.selectedCharacter = characters.find(c => c.id === id);
            
            const startBtn = document.getElementById('btn-start-game');
            startBtn.disabled = false;
            startBtn.classList.remove('opacity-50', 'cursor-not-allowed');
        }

        // Form Login Submit
        document.getElementById('form-login').onsubmit = function(e) {
            e.preventDefault();
            const name = document.getElementById('input-name').value.trim();
            const kelas = document.getElementById('input-class').value;
            const absen = document.getElementById('input-absen').value;

            if (!name || !kelas || !absen) {
                alert("Mohon lengkapi Nama, Kelas, dan No Absen terlebih dahulu!");
                return;
            }

            gameState.studentName = name;
            gameState.studentClass = kelas;
            gameState.studentAbsen = absen;

            // Pindah ke Screen 2 (Pilih Karakter)
            document.getElementById('screen-login').classList.add('hidden');
            document.getElementById('screen-character').classList.remove('hidden');
            initCharacterGrid();
        };

        // Tombol Kembali ke Login
        document.getElementById('btn-back-to-login').onclick = function() {
            document.getElementById('screen-character').classList.add('hidden');
            document.getElementById('screen-login').classList.remove('hidden');
        };

        // Tombol Mulai dari Karakter ke Overworld
        document.getElementById('btn-start-game').onclick = function() {
            if (!gameState.selectedCharacter) return;

            // Setup Overworld UI
            document.getElementById('screen-character').classList.add('hidden');
            document.getElementById('screen-overworld').classList.remove('hidden');
            document.getElementById('game-status-bar').classList.remove('hidden');
            document.getElementById('game-status-bar').classList.add('flex');

            document.getElementById('player-welcome-text').innerText = `Halo, ${gameState.studentName}!`;
            document.getElementById('selected-char-name').innerText = `Karakter: ${gameState.selectedCharacter.name} (${gameState.selectedCharacter.element.toUpperCase()})`;
            document.getElementById('info-nama-kelas').innerText = `${gameState.studentName} (${gameState.studentClass} - Absen ${gameState.studentAbsen})`;
            
            // Set Avatar ikon / gambar
            const avatarEl = document.getElementById('selected-char-avatar');
            avatarEl.innerHTML = `<img src="${gameState.selectedCharacter.imgUrl}" onerror="this.onerror=null; this.src='${gameState.selectedCharacter.fallbackImg}';" alt="${gameState.selectedCharacter.name}" class="w-full h-full object-cover">`;
            avatarEl.className = "w-14 h-14 rounded-full border-2 border-genshin-gold bg-slate-800 overflow-hidden flex items-center justify-center shadow-lg";

            updateStatusBar();
        };

        function updateStatusBar() {
            document.getElementById('score-display').innerText = gameState.score;
            document.getElementById('primogem-display').innerText = gameState.primogems;
            document.getElementById('hp-bar').style.width = `${gameState.hp}%`;
            document.getElementById('hp-text').innerText = `${gameState.hp}/100`;
        }

        // Mulai Domain Misi (1, 2, or 3)
        function startDomain(domainNum) {
            gameState.currentDomain = domainNum;
            gameState.currentQuestionIndex = 0;

            document.getElementById('screen-overworld').classList.add('hidden');
            document.getElementById('screen-quiz').classList.remove('hidden');

            loadQuestion();
        }

        function loadQuestion() {
            const domain = domainsData[gameState.currentDomain];
            const q = domain.questions[gameState.currentQuestionIndex];

            document.getElementById('quiz-domain-title').innerText = domain.title;
            document.getElementById('quiz-progress-text').innerText = `Pertanyaan ${gameState.currentQuestionIndex + 1} dari ${domain.questions.length}`;
            document.getElementById('quiz-score-live').innerText = `${gameState.score} Poin`;

            // Paimon Greeting
            if (gameState.currentQuestionIndex === 0) {
                document.getElementById('paimon-dialog').innerText = gameState.selectedCharacter.paimonGreeting;
            } else {
                document.getElementById('paimon-dialog').innerText = "Pertanyaan berikutnya semakin menantang! Tetap fokus ya, Traveler!";
            }

            document.getElementById('question-text').innerText = q.question;

            const optionsContainer = document.getElementById('options-container');
            optionsContainer.innerHTML = '';

            q.options.forEach((opt, idx) => {
                const btn = document.createElement('button');
                btn.className = 'w-full text-left bg-slate-800/90 hover:bg-slate-700/90 border border-slate-700 hover:border-amber-400 p-4 rounded-xl text-sm md:text-base text-slate-200 transition-all flex items-center justify-between group';
                btn.innerHTML = `
                    <span>${opt}</span>
                    <i class="fa-solid fa-chevron-right text-slate-500 group-hover:text-amber-400 transition-colors"></i>
                `;
                btn.onclick = () => checkAnswer(idx);
                optionsContainer.appendChild(btn);
            });

            document.getElementById('explanation-box').classList.add('hidden');
        }

        function checkAnswer(selectedIdx) {
            const domain = domainsData[gameState.currentDomain];
            const q = domain.questions[gameState.currentQuestionIndex];
            const optionsContainer = document.getElementById('options-container');
            const buttons = optionsContainer.getElementsByTagName('button');

            // Disable all buttons after choice
            for (let i = 0; i < buttons.length; i++) {
                buttons[i].disabled = true;
                if (i === q.correct) {
                    buttons[i].classList.remove('bg-slate-800/90', 'border-slate-700');
                    buttons[i].classList.add('bg-green-900/40', 'border-green-500', 'text-green-300');
                } else if (i === selectedIdx && selectedIdx !== q.correct) {
                    buttons[i].classList.remove('bg-slate-800/90', 'border-slate-700');
                    buttons[i].classList.add('bg-red-900/40', 'border-red-500', 'text-red-300');
                }
            }

            const isCorrect = (selectedIdx === q.correct);
            const expBox = document.getElementById('explanation-box');
            const expIcon = document.getElementById('explanation-icon');
            const expTitle = document.getElementById('explanation-title');
            const expText = document.getElementById('explanation-text');

            expBox.classList.remove('hidden');
            expText.innerText = q.explanation;

            if (isCorrect) {
                expBox.className = 'bg-green-950/40 border border-green-500/50 rounded-2xl p-4 mt-4 transition-all';
                expIcon.className = 'fa-solid fa-circle-check text-green-400';
                expTitle.className = 'font-bold text-sm text-green-300';
                expTitle.innerText = 'Benar! Jawabanmu Luar Biasa!';
                
                gameState.score += 20;
                gameState.primogems += 5;
                document.getElementById('paimon-dialog').innerText = "Hebat sekali! Paimon bangga kepadamu! Kamu mendapatkan Mora dan Primogems!";
            } else {
                expBox.className = 'bg-red-950/40 border border-red-500/50 rounded-2xl p-4 mt-4 transition-all';
                expIcon.className = 'fa-solid fa-circle-xmark text-red-400';
                expTitle.className = 'font-bold text-sm text-red-300';
                expTitle.innerText = 'Kurang Tepat, Traveler!';
                
                gameState.hp = Math.max(0, gameState.hp - 15);
                document.getElementById('paimon-dialog').innerText = "Jangan menyerah! Pelajari penjelasan di bawah ini agar tidak salah lagi ya.";
            }

            updateStatusBar();

            // Cek jika ini soal terakhir di domain
            if (gameState.currentQuestionIndex === domain.questions.length - 1) {
                document.getElementById('next-btn-text').innerText = "Selesaikan Domain Ini";
            } else {
                document.getElementById('next-btn-text').innerText = "Lanjut Pertanyaan Berikutnya";
            }
        }

        function nextQuestion() {
            const domain = domainsData[gameState.currentDomain];
            gameState.currentQuestionIndex++;

            if (gameState.currentQuestionIndex < domain.questions.length) {
                loadQuestion();
            } else {
                // Domain selesai
                gameState.domainScores[gameState.currentDomain] = 100;
                gameState.domainCompleted[gameState.currentDomain] = true;

                // Update status di overworld UI
                document.getElementById(`domain${gameState.currentDomain}-status`).innerHTML = `<i class="fa-solid fa-circle-check text-green-400 mr-1"></i> Selesai`;
                document.getElementById(`domain${gameState.currentDomain}-score`).innerText = `Skor: 100/100`;

                // Cek apakah semua domain selesai
                if (gameState.domainCompleted[1] && gameState.domainCompleted[2] && gameState.domainCompleted[3]) {
                    document.getElementById('certificate-banner-container').classList.remove('hidden');
                }

                backToOverworld();
            }
        }

        function backToOverworld() {
            document.getElementById('screen-quiz').classList.add('hidden');
            document.getElementById('screen-certificate').classList.add('hidden');
            document.getElementById('screen-overworld').classList.remove('hidden');
        }

        // Tampilkan Sertifikat
        function showCertificate() {
            document.getElementById('screen-overworld').classList.add('hidden');
            document.getElementById('screen-quiz').classList.add('hidden');
            document.getElementById('screen-certificate').classList.remove('hidden');

            // Isi data sertifikat
            document.getElementById('cert-nama').innerText = gameState.studentName;
            document.getElementById('cert-kelas').innerText = gameState.studentClass;
            document.getElementById('cert-absen').innerText = gameState.studentAbsen;
            document.getElementById('cert-char-name').innerText = `${gameState.selectedCharacter.name} (${gameState.selectedCharacter.element.toUpperCase()})`;
            document.getElementById('cert-char-avatar').innerHTML = `<img src="${gameState.selectedCharacter.imgUrl}" onerror="this.onerror=null; this.src='${gameState.selectedCharacter.fallbackImg}';" alt="${gameState.selectedCharacter.name}" class="w-full h-full object-cover">`;
            document.getElementById('cert-char-avatar').className = "w-12 h-12 rounded-full border border-amber-400 bg-slate-800 overflow-hidden flex items-center justify-center";

            document.getElementById('cert-score-1').innerText = `${gameState.domainScores[1]}/100`;
            document.getElementById('cert-score-2').innerText = `${gameState.domainScores[2]}/100`;
            document.getElementById('cert-score-3').innerText = `${gameState.domainScores[3]}/100`;

            const totalMora = gameState.score * 500;
            document.getElementById('cert-total-score').innerText = totalMora.toLocaleString();
            document.getElementById('cert-total-primogem').innerText = gameState.primogems;

            const avgScore = (gameState.domainScores[1] + gameState.domainScores[2] + gameState.domainScores[3]) / 3;
            let predikat = "Sangat Baik (A)";
            if (avgScore < 70) predikat = "Cukup (C)";
            else if (avgScore < 85) predikat = "Baik (B)";
            document.getElementById('cert-predikat').innerText = predikat;
        }

        function resetGame() {
            if (confirm("Apakah kamu yakin ingin mengulang petualangan dari awal?")) {
                location.reload();
            }
        }
    </script>
</body>
</html>```