<!doctype html>
<html lang="id" class="h-full">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Petualangan Harta Karun Matematika</title>
  <script src="https://cdn.tailwindcss.com/3.4.17"></script>
  <script src="https://cdn.jsdelivr.net/npm/lucide@0.263.0/dist/umd/lucide.min.js"></script>
  <script src="/_sdk/element_sdk.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&amp;family=Nunito:wght@400;600;700;800&amp;display=swap" rel="stylesheet">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; width: 100%; overflow: hidden; }
    body { font-family: 'Nunito', sans-serif; }

    .fredoka { font-family: 'Fredoka One', cursive; }

    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    @keyframes bobble {
      0%, 100% { transform: translateY(0) rotate(-2deg); }
      50% { transform: translateY(-5px) rotate(2deg); }
    }
    @keyframes sparkle {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(1.3); }
    }
    @keyframes wave-move {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    @keyframes sail {
      0%, 100% { transform: rotate(-3deg); }
      50% { transform: rotate(3deg); }
    }
    @keyframes treasure-glow {
      0%, 100% { filter: drop-shadow(0 0 8px #fbbf24); }
      50% { filter: drop-shadow(0 0 20px #f59e0b); }
    }
    @keyframes confetti-fall {
      0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
      100% { transform: translateY(400px) rotate(720deg); opacity: 0; }
    }
    @keyframes pop-in {
      0% { transform: scale(0); opacity: 0; }
      60% { transform: scale(1.15); }
      100% { transform: scale(1); opacity: 1; }
    }
    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      20% { transform: translateX(-8px); }
      40% { transform: translateX(8px); }
      60% { transform: translateX(-5px); }
      80% { transform: translateX(5px); }
    }
    @keyframes slide-up {
      0% { transform: translateY(30px); opacity: 0; }
      100% { transform: translateY(0); opacity: 1; }
    }

    .float-anim { animation: float 3s ease-in-out infinite; }
    .bobble-anim { animation: bobble 4s ease-in-out infinite; }
    .sparkle-anim { animation: sparkle 2s ease-in-out infinite; }
    .sail-anim { animation: sail 3s ease-in-out infinite; }
    .treasure-glow { animation: treasure-glow 2s ease-in-out infinite; }
    .pop-in { animation: pop-in 0.5s ease-out forwards; }
    .shake-anim { animation: shake 0.5s ease-in-out; }
    .slide-up { animation: slide-up 0.4s ease-out forwards; }

    .ocean-bg {
      background: linear-gradient(180deg, #38bdf8 0%, #0284c7 30%, #0369a1 60%, #1e3a5f 100%);
    }

    .island-btn {
      transition: all 0.3s ease;
      cursor: pointer;
    }
    .island-btn:hover {
      transform: scale(1.12);
      filter: brightness(1.15);
    }
    .island-btn.locked {
      opacity: 0.5;
      cursor: not-allowed;
      filter: grayscale(0.5);
    }
    .island-btn.locked:hover {
      transform: scale(1);
      filter: grayscale(0.5);
    }
    .island-btn.completed {
      filter: brightness(1.1);
    }

    .path-line {
      stroke-dasharray: 8 6;
      stroke-dashoffset: 0;
      animation: dash-move 1.5s linear infinite;
    }
    @keyframes dash-move {
      0% { stroke-dashoffset: 14; }
      100% { stroke-dashoffset: 0; }
    }

    .cloud {
      position: absolute;
      opacity: 0.7;
      animation: cloud-drift linear infinite;
    }
    @keyframes cloud-drift {
      0% { transform: translateX(0); }
      100% { transform: translateX(calc(-100% - 200px)); }
    }

    .wave-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 200%;
      height: 40px;
      background: repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(255,255,255,0.08) 40px, rgba(255,255,255,0.08) 80px);
      animation: wave-move 4s linear infinite;
    }

    .option-btn {
      transition: all 0.2s ease;
      border: 3px solid transparent;
    }
    .option-btn:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    }
    .option-btn.selected {
      border-color: #f59e0b;
      background: #fef3c7;
    }
    .option-btn.correct {
      border-color: #22c55e;
      background: #dcfce7;
    }
    .option-btn.wrong {
      border-color: #ef4444;
      background: #fee2e2;
    }

    .scroll-container {
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
    }
    .scroll-container::-webkit-scrollbar { width: 6px; }
    .scroll-container::-webkit-scrollbar-track { background: rgba(255,255,255,0.1); border-radius: 3px; }
    .scroll-container::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 3px; }

    .confetti-piece {
      position: fixed;
      width: 10px;
      height: 10px;
      animation: confetti-fall linear forwards;
    }
  </style>
  <style>body { box-sizing: border-box; }</style>
  <script src="/_sdk/data_sdk.js" type="text/javascript"></script>
 </head>
 <body class="h-full w-full"><!-- LOGIN SCREEN -->
  <div id="login-screen" class="h-full w-full ocean-bg flex items-center justify-center relative overflow-hidden">
   <div class="wave-bar"></div><!-- Decorative elements -->
   <div class="absolute top-6 left-8 text-5xl float-anim" style="animation-delay:0.5s">
    🏝️
   </div>
   <div class="absolute top-10 right-10 text-4xl bobble-anim">
    ⛵
   </div>
   <div class="absolute bottom-20 left-6 text-3xl sail-anim">
    🐠
   </div>
   <div class="absolute bottom-16 right-8 text-4xl float-anim" style="animation-delay:1s">
    🐙
   </div>
   <div class="absolute top-20 left-1/3 text-2xl sparkle-anim">
    ✨
   </div>
   <div class="absolute top-16 right-1/3 text-2xl sparkle-anim" style="animation-delay:0.7s">
    ⭐
   </div>
   <div class="relative z-10 bg-white/95 backdrop-blur rounded-3xl shadow-2xl p-8 mx-4 w-full max-w-md slide-up" style="border: 4px solid #fbbf24;">
    <div class="text-center mb-6">
     <div class="text-5xl mb-3">
      🗺️🏴‍☠️
     </div>
     <h1 id="login-title" class="fredoka text-2xl md:text-3xl text-amber-600 mb-1">Petualangan Harta Karun</h1>
     <p id="login-welcome" class="text-sky-600 font-bold text-sm">Selamat datang, Penjelajah!</p>
    </div>
    <form id="login-form" class="space-y-4">
     <div><label for="player-name" class="block font-bold text-gray-700 mb-1 text-sm"> <span class="mr-1">🧑‍🎓</span> Nama Penjelajah </label> <input type="text" id="player-name" placeholder="Masukkan namamu..." required class="w-full px-4 py-3 rounded-xl border-2 border-amber-300 focus:border-amber-500 focus:ring-2 focus:ring-amber-200 outline-none text-gray-700 font-semibold bg-amber-50/50 text-sm">
     </div>
     <div><label for="player-school" class="block font-bold text-gray-700 mb-1 text-sm"> <span class="mr-1">🏫</span> Asal Sekolah </label> <input type="text" id="player-school" placeholder="Masukkan nama sekolahmu..." required class="w-full px-4 py-3 rounded-xl border-2 border-sky-300 focus:border-sky-500 focus:ring-2 focus:ring-sky-200 outline-none text-gray-700 font-semibold bg-sky-50/50 text-sm">
     </div><button type="submit" class="w-full py-3 bg-gradient-to-r from-amber-400 to-orange-500 text-white fredoka text-lg rounded-xl shadow-lg hover:shadow-xl hover:from-amber-500 hover:to-orange-600 transition-all active:scale-95 mt-2"> 🚀 Mulai Petualangan! </button>
    </form>
    <p class="text-center text-xs text-gray-400 mt-4">Matematika Pecahan • Kelas 6 SD</p>
   </div>
  </div><!-- MAP SCREEN -->
  <div id="map-screen" class="h-full w-full ocean-bg relative overflow-hidden" style="display:none;">
   <div class="wave-bar"></div><!-- Top Bar -->
   <header class="relative z-20 bg-gradient-to-r from-amber-500 to-orange-500 px-4 py-2 flex items-center justify-between shadow-lg">
    <div class="flex items-center gap-2"><span class="text-2xl">🏴‍☠️</span>
     <div>
      <div id="map-title" class="fredoka text-white text-sm md:text-base leading-tight">
       Peta Harta Karun
      </div>
      <div id="player-info" class="text-amber-100 text-xs font-semibold"></div>
     </div>
    </div>
    <div class="flex items-center gap-3">
     <div class="bg-white/20 rounded-full px-3 py-1 text-white text-xs font-bold flex items-center gap-1">
      ⭐ <span id="score-display">0</span>
     </div>
     <div class="bg-white/20 rounded-full px-3 py-1 text-white text-xs font-bold flex items-center gap-1">
      🏝️ <span id="progress-display">0/25</span>
     </div>
    </div>
   </header><!-- Map Area -->
   <main id="map-area" class="scroll-container relative z-10" style="height: calc(100% - 52px);">
    <div id="map-content" class="relative w-full" style="min-height: 1600px; padding: 20px;"><!-- Islands rendered by JS -->
    </div>
   </main>
  </div><!-- QUESTION MODAL -->
  <div id="question-modal" class="fixed inset-0 z-50 flex items-center justify-center p-4" style="display:none; background: rgba(0,0,0,0.6);">
   <div id="question-card" class="bg-white rounded-3xl shadow-2xl w-full max-w-lg max-h-[90%] overflow-auto pop-in" style="border: 4px solid #fbbf24;">
    <div class="bg-gradient-to-r from-sky-400 to-cyan-500 rounded-t-2xl px-5 py-3 flex items-center justify-between">
     <div class="flex items-center gap-2"><span class="text-2xl" id="q-island-emoji">🏝️</span>
      <div>
       <div id="q-island-name" class="fredoka text-white text-sm">
        Pulau 1
       </div>
       <div id="q-island-sub" class="text-sky-100 text-xs font-semibold">
        Soal Pecahan
       </div>
      </div>
     </div><button id="q-close-btn" class="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center text-white hover:bg-white/40 transition-all" aria-label="Tutup"> ✕ </button>
    </div>
    <div class="p-5">
     <div id="q-text" class="text-gray-800 font-semibold text-sm md:text-base leading-relaxed mb-4 bg-sky-50 rounded-xl p-4 border-2 border-sky-100"></div>
     <div id="q-options" class="space-y-2 mb-4"></div>
     <div id="q-feedback" class="hidden rounded-xl p-4 mb-4 text-center font-bold"></div>
     <div id="q-actions" class="flex gap-2"><button id="q-check-btn" class="flex-1 py-3 bg-gradient-to-r from-amber-400 to-orange-500 text-white fredoka rounded-xl shadow-lg hover:shadow-xl transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed text-sm" disabled> ✅ Periksa Jawaban </button> <button id="q-next-btn" class="flex-1 py-3 bg-gradient-to-r from-emerald-400 to-green-500 text-white fredoka rounded-xl shadow-lg hover:shadow-xl transition-all active:scale-95 text-sm" style="display:none;"> ➡️ Lanjut </button>
     </div>
    </div>
   </div>
  </div><!-- TREASURE SCREEN -->
  <div id="treasure-screen" class="h-full w-full flex items-center justify-center relative overflow-hidden" style="display:none; background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 30%, #d97706 60%, #92400e 100%);">
   <div id="confetti-container"></div>
   <div class="relative z-10 text-center px-4 pop-in">
    <div class="text-7xl md:text-8xl mb-4 treasure-glow inline-block">
     🏆
    </div>
    <h1 class="fredoka text-3xl md:text-4xl text-white mb-2 drop-shadow-lg">HARTA KARUN DITEMUKAN!</h1>
    <p id="treasure-name" class="text-amber-100 font-bold text-lg mb-1"></p>
    <p id="treasure-school" class="text-amber-200 font-semibold text-sm mb-4"></p>
    <div class="bg-white/20 backdrop-blur rounded-2xl p-5 inline-block mb-6">
     <div class="text-5xl mb-2">
      💎
     </div>
     <div class="text-white fredoka text-xl">
      Skor Akhir
     </div>
     <div id="treasure-score" class="text-yellow-200 fredoka text-4xl"></div>
     <div class="text-amber-100 text-sm font-semibold mt-1">
      dari 25 soal benar
     </div>
    </div>
    <div class="flex flex-col gap-2 items-center">
     <div class="flex gap-2 text-4xl mb-2">
      🎉🥳🎊
     </div>
     <p class="text-white/90 font-bold text-sm max-w-xs">Selamat! Kamu telah menaklukkan semua pulau dan menemukan harta karun matematika!</p><button id="play-again-btn" class="mt-3 px-8 py-3 bg-white text-amber-600 fredoka text-lg rounded-xl shadow-lg hover:shadow-xl hover:bg-amber-50 transition-all active:scale-95"> 🔄 Main Lagi </button>
    </div>
   </div>
  </div>
  <script>
// ========== GAME DATA ==========
const ISLAND_NAMES = [
  "Pulau Kelapa", "Pulau Mutiara", "Pulau Bintang", "Pulau Karang", "Pulau Penyu",
  "Pulau Lumba-Lumba", "Pulau Pelangi", "Pulau Emas", "Pulau Kuda Laut", "Pulau Terumbu",
  "Pulau Rajawali", "Pulau Matahari", "Pulau Angin", "Pulau Permata", "Pulau Singa Laut",
  "Pulau Bulan", "Pulau Zamrud", "Pulau Duyung", "Pulau Api", "Pulau Kristal",
  "Pulau Topaz", "Pulau Safir", "Pulau Rubi", "Pulau Berlian", "Pulau Harta Karun"
];

const ISLAND_EMOJIS = [
  "🌴","🦪","⭐","🪸","🐢","🐬","🌈","✨","🦑","🐚",
  "🦅","☀️","💨","💎","🦁","🌙","🟢","🧜‍♀️","🔥","❄️",
  "🟡","🔵","🔴","💠","🏆"
];

const QUESTIONS = [
  {
    q: "Ibu membeli ¾ kg gula. Kemudian ia membeli lagi ½ kg gula. Berapa total gula yang dibeli Ibu?",
    options: ["1 kg", "1¼ kg", "1½ kg", "2 kg"],
    answer: 1
  },
  {
    q: "Andi memiliki tali sepanjang ⅗ meter. Ia memotong ¼ meter untuk membuat prakarya. Berapa sisa tali Andi?",
    options: ["7/20 meter", "⅖ meter", "½ meter", "¼ meter"],
    answer: 0
  },
  {
    q: "Sebuah kue dipotong menjadi 8 bagian sama besar. Rina makan ⅜ bagian dan Dina makan ¼ bagian. Berapa bagian kue yang sudah dimakan?",
    options: ["½", "⅝", "¾", "⅞"],
    answer: 1
  },
  {
    q: "Budi memiliki ⅔ liter susu. Ia memberikan ⅓ liter kepada adiknya. Berapa liter susu yang tersisa?",
    options: ["⅓ liter", "½ liter", "¼ liter", "⅙ liter"],
    answer: 0
  },
  {
    q: "Sinta berlari ⁴⁄₅ km pada hari Senin dan ³⁄₁₀ km pada hari Selasa. Berapa total jarak yang ia lari?",
    options: ["1 km", "1⅒ km", "⅘ km", "7/10 km"],
    answer: 1
  },
  {
    q: "Sebuah botol berisi ⅚ liter air. Doni menuangkan ½ liter ke gelas. Berapa liter air yang tersisa di botol?",
    options: ["⅓ liter", "⅙ liter", "¼ liter", "½ liter"],
    answer: 0
  },
  {
    q: "Harga 1 kg apel adalah Rp24.000. Berapa harga ¾ kg apel?",
    options: ["Rp12.000", "Rp16.000", "Rp18.000", "Rp20.000"],
    answer: 2
  },
  {
    q: "Pak Adi memiliki tanah seluas ⅘ hektar. Ia menjual ½ dari tanahnya. Berapa hektar tanah yang dijual?",
    options: ["⅖ hektar", "⅗ hektar", "¼ hektar", "⅕ hektar"],
    answer: 0
  },
  {
    q: "Risa membaca ⅔ dari sebuah buku pada hari pertama dan ¼ pada hari kedua. Berapa bagian buku yang sudah dibaca?",
    options: ["¾", "⅚", "11/12", "7/12"],
    answer: 2
  },
  {
    q: "Sebuah taman berbentuk persegi panjang memiliki panjang 3½ meter dan lebar 2 meter. Berapa luas taman tersebut?",
    options: ["5½ m²", "6 m²", "7 m²", "7½ m²"],
    answer: 2
  },
  {
    q: "Ani memiliki pita sepanjang 2¼ meter. Ia memotongnya menjadi potongan-potongan sepanjang ¾ meter. Berapa banyak potongan yang didapat?",
    options: ["2 potongan", "3 potongan", "4 potongan", "5 potongan"],
    answer: 1
  },
  {
    q: "Sebuah drum berisi 4⅕ liter cat. Tukang cat menggunakan 1¾ liter. Berapa liter cat yang tersisa?",
    options: ["2⁹⁄₂₀ liter", "2½ liter", "3 liter", "2¼ liter"],
    answer: 0
  },
  {
    q: "Ibu membuat 3 loyang kue. Setiap loyang dipotong menjadi 6 bagian. Keluarga makan ⅔ dari seluruh kue. Berapa potong kue yang dimakan?",
    options: ["10 potong", "12 potong", "14 potong", "9 potong"],
    answer: 1
  },
  {
    q: "Toko buah menjual semangka seharga Rp15.000 per kg. Deni membeli ⅖ kg semangka. Berapa yang harus dibayar Deni?",
    options: ["Rp3.000", "Rp5.000", "Rp6.000", "Rp7.500"],
    answer: 2
  },
  {
    q: "Sebuah kolam diisi air ⅚ bagian penuh. Setelah hujan, air bertambah ⅙ bagian. Apakah kolam penuh?",
    options: ["Ya, tepat penuh", "Tidak, masih kurang ⅙", "Kolam meluap", "Baru ¾ penuh"],
    answer: 0
  },
  {
    q: "Perbandingan uang Ali dan Beni adalah 3:5. Jika uang Beni Rp25.000, berapa uang Ali?",
    options: ["Rp10.000", "Rp12.000", "Rp15.000", "Rp20.000"],
    answer: 2
  },
  {
    q: "Berat sebuah paket adalah 2⅗ kg. Berat paket kedua ⅘ kg. Berapa total berat kedua paket?",
    options: ["3 kg", "3⅖ kg", "3⅗ kg", "4 kg"],
    answer: 1
  },
  {
    q: "Sebuah pizza dibagi menjadi 12 potong. Rina makan ¼ dan Dian makan ⅓ dari pizza. Berapa potong yang tersisa?",
    options: ["4 potong", "5 potong", "6 potong", "7 potong"],
    answer: 1
  },
  {
    q: "Pak Budi berjalan ⁷⁄₈ km ke utara, lalu ⅜ km ke selatan. Berapa jarak Pak Budi dari titik awal?",
    options: ["¼ km", "½ km", "⅝ km", "¾ km"],
    answer: 1
  },
  {
    q: "Sebuah tangki bensin berisi ⅗ dari kapasitas 50 liter. Berapa liter bensin di tangki?",
    options: ["25 liter", "30 liter", "35 liter", "40 liter"],
    answer: 1
  },
  {
    q: "Lia mengerjakan ⅖ dari 30 soal ujian dalam 1 jam. Berapa soal yang sudah dikerjakan?",
    options: ["10 soal", "12 soal", "15 soal", "18 soal"],
    answer: 1
  },
  {
    q: "Ibu membagi 2½ kg beras ke dalam kantong masing-masing ½ kg. Berapa kantong yang dibutuhkan?",
    options: ["3 kantong", "4 kantong", "5 kantong", "6 kantong"],
    answer: 2
  },
  {
    q: "Sebuah persegi panjang memiliki panjang 4⅓ cm dan lebar 3 cm. Berapa kelilingnya?",
    options: ["14 cm", "14⅔ cm", "13 cm", "15 cm"],
    answer: 1
  },
  {
    q: "Dari 36 siswa di kelas, ⅔ siswa suka matematika. Berapa siswa yang suka matematika?",
    options: ["18 siswa", "20 siswa", "24 siswa", "28 siswa"],
    answer: 2
  },
  {
    q: "Kapal bajak laut berlayar ⁵⁄₆ km ke timur lalu ²⁄₃ km ke timur lagi. Berapa total jarak ke timur?",
    options: ["1 km", "1¼ km", "1½ km", "1⅙ km"],
    answer: 2
  }
];

// ========== GAME STATE ==========
let gameState = {
  playerName: "",
  playerSchool: "",
  currentIsland: 0, // 0-indexed, the furthest unlocked island
  score: 0,
  completed: new Array(25).fill(false),
  selectedOption: -1,
  currentQuestion: -1,
  answered: false
};

// ========== ELEMENT SDK ==========
const defaultConfig = {
  game_title: "Petualangan Harta Karun",
  welcome_text: "Selamat datang, Penjelajah!",
  background_color: "#0284c7",
  surface_color: "#ffffff",
  text_color: "#1e3a5f",
  primary_action_color: "#f59e0b",
  secondary_action_color: "#0ea5e9"
};

function applyConfig(config) {
  const title = config.game_title || defaultConfig.game_title;
  const welcome = config.welcome_text || defaultConfig.welcome_text;

  const loginTitle = document.getElementById('login-title');
  if (loginTitle) loginTitle.textContent = title;
  const loginWelcome = document.getElementById('login-welcome');
  if (loginWelcome) loginWelcome.textContent = welcome;
  const mapTitle = document.getElementById('map-title');
  if (mapTitle) mapTitle.textContent = title;

  // Apply colors
  const bg = config.background_color || defaultConfig.background_color;
  const surface = config.surface_color || defaultConfig.surface_color;
  const text = config.text_color || defaultConfig.text_color;
  const primary = config.primary_action_color || defaultConfig.primary_action_color;
  const secondary = config.secondary_action_color || defaultConfig.secondary_action_color;

  document.documentElement.style.setProperty('--bg-color', bg);
  document.documentElement.style.setProperty('--surface-color', surface);
  document.documentElement.style.setProperty('--text-color', text);
  document.documentElement.style.setProperty('--primary-color', primary);
  document.documentElement.style.setProperty('--secondary-color', secondary);

  // Font
  const font = config.font_family || defaultConfig.font_family || 'Nunito';
  document.body.style.fontFamily = `${font}, Nunito, sans-serif`;

  const fontSize = config.font_size || 16;
  document.querySelectorAll('#q-text').forEach(el => el.style.fontSize = `${fontSize}px`);
}

if (window.elementSdk) {
  window.elementSdk.init({
    defaultConfig,
    onConfigChange: async (config) => applyConfig(config),
    mapToCapabilities: (config) => ({
      recolorables: [
        { get: () => config.background_color || defaultConfig.background_color, set: (v) => { config.background_color = v; window.elementSdk.setConfig({ background_color: v }); } },
        { get: () => config.surface_color || defaultConfig.surface_color, set: (v) => { config.surface_color = v; window.elementSdk.setConfig({ surface_color: v }); } },
        { get: () => config.text_color || defaultConfig.text_color, set: (v) => { config.text_color = v; window.elementSdk.setConfig({ text_color: v }); } },
        { get: () => config.primary_action_color || defaultConfig.primary_action_color, set: (v) => { config.primary_action_color = v; window.elementSdk.setConfig({ primary_action_color: v }); } },
        { get: () => config.secondary_action_color || defaultConfig.secondary_action_color, set: (v) => { config.secondary_action_color = v; window.elementSdk.setConfig({ secondary_action_color: v }); } }
      ],
      borderables: [],
      fontEditable: {
        get: () => config.font_family || 'Nunito',
        set: (v) => { config.font_family = v; window.elementSdk.setConfig({ font_family: v }); }
      },
      fontSizeable: {
        get: () => config.font_size || 16,
        set: (v) => { config.font_size = v; window.elementSdk.setConfig({ font_size: v }); }
      }
    }),
    mapToEditPanelValues: (config) => new Map([
      ["game_title", config.game_title || defaultConfig.game_title],
      ["welcome_text", config.welcome_text || defaultConfig.welcome_text]
    ])
  });
}

// ========== LOGIN ==========
document.getElementById('login-form').addEventListener('submit', function(e) {
  e.preventDefault();
  const name = document.getElementById('player-name').value.trim();
  const school = document.getElementById('player-school').value.trim();
  if (!name || !school) return;

  gameState.playerName = name;
  gameState.playerSchool = school;

  document.getElementById('login-screen').style.display = 'none';
  document.getElementById('map-screen').style.display = 'block';
  document.getElementById('player-info').textContent = `${name} • ${school}`;

  renderMap();
  updateScoreDisplay();
});

// ========== MAP RENDERING ==========
function renderMap() {
  const container = document.getElementById('map-content');
  container.innerHTML = '';

  const mapW = container.offsetWidth || 360;
  const totalIslands = 25;
  const rowHeight = 58;
  const containerH = totalIslands * rowHeight + 80;
  container.style.minHeight = containerH + 'px';

  // Add decorative clouds
  for (let c = 0; c < 4; c++) {
    const cloud = document.createElement('div');
    cloud.className = 'absolute text-3xl opacity-30 pointer-events-none';
    cloud.style.top = (80 + c * 340) + 'px';
    cloud.style.left = (c % 2 === 0 ? '5%' : '60%');
    cloud.textContent = '☁️';
    container.appendChild(cloud);
  }

  // SVG for path lines
  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.setAttribute('class', 'absolute inset-0 w-full h-full pointer-events-none');
  svg.style.zIndex = '1';
  container.appendChild(svg);

  const positions = [];
  for (let i = 0; i < totalIslands; i++) {
    // Zigzag pattern
    const row = i;
    const xPct = (i % 2 === 0) ? 0.25 + (i % 4 === 0 ? 0 : 0.1) : 0.65 + (i % 4 === 1 ? 0 : -0.1);
    const x = mapW * xPct;
    const y = 30 + row * rowHeight;
    positions.push({ x, y });
  }

  // Draw path lines
  for (let i = 0; i < positions.length - 1; i++) {
    const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    line.setAttribute('x1', positions[i].x);
    line.setAttribute('y1', positions[i].y + 18);
    line.setAttribute('x2', positions[i + 1].x);
    line.setAttribute('y2', positions[i + 1].y + 18);
    line.setAttribute('stroke', i < gameState.currentIsland ? 'rgba(251,191,36,0.7)' : 'rgba(255,255,255,0.25)');
    line.setAttribute('stroke-width', '3');
    line.setAttribute('class', 'path-line');
    svg.appendChild(line);
  }

  // Render islands
  positions.forEach((pos, i) => {
    const isCompleted = gameState.completed[i];
    const isUnlocked = i <= gameState.currentIsland;
    const isCurrent = i === gameState.currentIsland;

    const island = document.createElement('button');
    island.className = `island-btn absolute flex items-center gap-2 ${isCompleted ? 'completed' : ''} ${!isUnlocked ? 'locked' : ''}`;
    island.style.left = (pos.x - 22) + 'px';
    island.style.top = pos.y + 'px';
    island.style.zIndex = '10';
    island.setAttribute('aria-label', `${ISLAND_NAMES[i]} - ${isCompleted ? 'Selesai' : isUnlocked ? 'Terbuka' : 'Terkunci'}`);

    const emojiSize = isCurrent ? 'text-4xl' : 'text-2xl';
    const animClass = isCurrent ? 'float-anim' : '';
    const checkMark = isCompleted ? '<span class="text-xs">✅</span>' : '';
    const lockMark = !isUnlocked ? '<span class="text-xs">🔒</span>' : '';
    const numBadge = `<span class="absolute -top-1 -right-1 w-5 h-5 bg-amber-400 text-white text-xs font-bold rounded-full flex items-center justify-center shadow">${i + 1}</span>`;

    island.innerHTML = `
      <div class="relative ${animClass}">
        <span class="${emojiSize}">${ISLAND_EMOJIS[i]}</span>
        ${numBadge}
        ${checkMark}${lockMark}
      </div>
      <span class="text-white text-xs font-bold drop-shadow-md whitespace-nowrap ${!isUnlocked ? 'opacity-50' : ''}">${ISLAND_NAMES[i]}</span>
    `;

    if (isUnlocked && !isCompleted) {
      island.addEventListener('click', () => openQuestion(i));
    } else if (isCompleted) {
      island.addEventListener('click', () => openQuestion(i));
    }

    container.appendChild(island);
  });

  // Scroll to current island
  setTimeout(() => {
    const mapArea = document.getElementById('map-area');
    const targetY = positions[gameState.currentIsland].y - 150;
    mapArea.scrollTo({ top: Math.max(0, targetY), behavior: 'smooth' });
  }, 300);
}

function updateScoreDisplay() {
  document.getElementById('score-display').textContent = gameState.score;
  const completedCount = gameState.completed.filter(Boolean).length;
  document.getElementById('progress-display').textContent = `${completedCount}/25`;
}

// ========== QUESTION MODAL ==========
function openQuestion(index) {
  gameState.currentQuestion = index;
  gameState.selectedOption = -1;
  gameState.answered = false;

  const q = QUESTIONS[index];
  document.getElementById('q-island-name').textContent = ISLAND_NAMES[index];
  document.getElementById('q-island-emoji').textContent = ISLAND_EMOJIS[index];
  document.getElementById('q-island-sub').textContent = `Soal ${index + 1} dari 25`;
  document.getElementById('q-text').textContent = q.q;

  const optionsContainer = document.getElementById('q-options');
  optionsContainer.innerHTML = '';

  const labels = ['A', 'B', 'C', 'D'];
  q.options.forEach((opt, oi) => {
    const btn = document.createElement('button');
    btn.className = 'option-btn w-full text-left px-4 py-3 rounded-xl bg-gray-50 font-semibold text-gray-700 text-sm flex items-center gap-3';
    btn.innerHTML = `<span class="w-7 h-7 rounded-full bg-sky-100 text-sky-600 flex items-center justify-center text-xs font-bold flex-shrink-0">${labels[oi]}</span><span>${opt}</span>`;
    btn.addEventListener('click', () => selectOption(oi));
    btn.dataset.index = oi;
    optionsContainer.appendChild(btn);
  });

  document.getElementById('q-feedback').className = 'hidden rounded-xl p-4 mb-4 text-center font-bold';
  document.getElementById('q-feedback').textContent = '';
  document.getElementById('q-check-btn').style.display = 'block';
  document.getElementById('q-check-btn').disabled = true;
  document.getElementById('q-next-btn').style.display = 'none';

  document.getElementById('question-modal').style.display = 'flex';
  document.getElementById('question-card').className = 'bg-white rounded-3xl shadow-2xl w-full max-w-lg max-h-[90%] overflow-auto pop-in';
}

function selectOption(index) {
  if (gameState.answered) return;
  gameState.selectedOption = index;

  const options = document.querySelectorAll('#q-options .option-btn');
  options.forEach((btn, i) => {
    btn.classList.remove('selected');
    if (i === index) btn.classList.add('selected');
  });

  document.getElementById('q-check-btn').disabled = false;
}

document.getElementById('q-check-btn').addEventListener('click', checkAnswer);
document.getElementById('q-next-btn').addEventListener('click', handleNext);
document.getElementById('q-close-btn').addEventListener('click', closeQuestion);

function checkAnswer() {
  if (gameState.selectedOption === -1 || gameState.answered) return;
  gameState.answered = true;

  const q = QUESTIONS[gameState.currentQuestion];
  const isCorrect = gameState.selectedOption === q.answer;
  const options = document.querySelectorAll('#q-options .option-btn');

  options.forEach((btn, i) => {
    btn.disabled = true;
    if (i === q.answer) btn.classList.add('correct');
    if (i === gameState.selectedOption && !isCorrect) btn.classList.add('wrong');
  });

  const feedback = document.getElementById('q-feedback');
  feedback.classList.remove('hidden');

  if (isCorrect) {
    feedback.className = 'rounded-xl p-4 mb-4 text-center font-bold bg-emerald-100 text-emerald-700 border-2 border-emerald-300 slide-up';
    feedback.innerHTML = '🎉 Benar! Kamu hebat, Penjelajah!';
    gameState.score++;
    gameState.completed[gameState.currentQuestion] = true;
    if (gameState.currentIsland === gameState.currentQuestion && gameState.currentIsland < 24) {
      gameState.currentIsland++;
    }
  } else {
    feedback.className = 'rounded-xl p-4 mb-4 text-center font-bold bg-red-100 text-red-600 border-2 border-red-300 shake-anim';
    feedback.innerHTML = `😢 Sayang sekali! Jawaban yang benar: <strong>${q.options[q.answer]}</strong>`;
    // Go back one island if not at first
    if (gameState.currentIsland > 0 && !gameState.completed[gameState.currentQuestion]) {
      gameState.currentIsland = Math.max(0, gameState.currentIsland - 1);
    }
  }

  document.getElementById('q-check-btn').style.display = 'none';
  document.getElementById('q-next-btn').style.display = 'block';
  document.getElementById('q-next-btn').textContent = isCorrect && gameState.currentQuestion === 24 ? '🏆 Lihat Harta Karun!' : '➡️ Kembali ke Peta';
}

function handleNext() {
  // Check if all completed
  const allDone = gameState.completed.every(Boolean);
  closeQuestion();

  if (allDone) {
    showTreasure();
  } else {
    renderMap();
    updateScoreDisplay();
  }
}

function closeQuestion() {
  document.getElementById('question-modal').style.display = 'none';
}

// ========== TREASURE SCREEN ==========
function showTreasure() {
  document.getElementById('map-screen').style.display = 'none';
  document.getElementById('treasure-screen').style.display = 'flex';
  document.getElementById('treasure-name').textContent = `🧑‍🎓 ${gameState.playerName}`;
  document.getElementById('treasure-school').textContent = `🏫 ${gameState.playerSchool}`;
  document.getElementById('treasure-score').textContent = `${gameState.score} / 25`;

  // Confetti
  const container = document.getElementById('confetti-container');
  container.innerHTML = '';
  const colors = ['#ef4444', '#f59e0b', '#22c55e', '#3b82f6', '#a855f7', '#ec4899'];
  for (let i = 0; i < 50; i++) {
    const piece = document.createElement('div');
    piece.className = 'confetti-piece';
    piece.style.left = Math.random() * 100 + '%';
    piece.style.top = '-10px';
    piece.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
    piece.style.borderRadius = Math.random() > 0.5 ? '50%' : '2px';
    piece.style.animationDuration = (2 + Math.random() * 3) + 's';
    piece.style.animationDelay = Math.random() * 2 + 's';
    container.appendChild(piece);
  }
}

document.getElementById('play-again-btn').addEventListener('click', function() {
  gameState = {
    playerName: "",
    playerSchool: "",
    currentIsland: 0,
    score: 0,
    completed: new Array(25).fill(false),
    selectedOption: -1,
    currentQuestion: -1,
    answered: false
  };
  document.getElementById('treasure-screen').style.display = 'none';
  document.getElementById('login-screen').style.display = 'flex';
  document.getElementById('player-name').value = '';
  document.getElementById('player-school').value = '';
});

// Init Lucide
lucide.createIcons();
</script>
 <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9dc9941ca1404094',t:'MTc3MzU1NzM3MC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>