Kode Game Word Puasa

🎮 Assalamu’alaikum hai teman-teman! 🎮
Lagi cari hiburan seru buat ngisi waktu luang? Yuk main game bareng! 😄
Di postingan ini aku sudah menyiapkan kode game yang bisa langsung kamu tempel ke halaman Blogger kamu sendiri ✨
📌 Tinggal copy, paste, lalu edit sesuai keinginanmu.
Cocok banget buat mempercantik blog dan bikin pengunjung makin betah 👀🔥
👇 Langsung saja, berikut kodenya:
    
    
    
    
    <!doctype html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>Kata Ramadhan - Family 100 Style Sound</title>
  <!-- Menggunakan CDN publik yang stabil -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Font Awesome untuk ikon bintang -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>
    /* ======================================================
       SEMUA CSS DIBUNGKUS DENGAN .game-container AGAR TIDAK MENGGANGGU CSS DEFAULT BLOGGER
       TIDAK MENGGUNAKAN SELECTOR GLOBAL (*, body, html) YANG BISA MENGGANGGU
    ======================================================== */
    
    /* Hanya style untuk container game - tidak menggangluar */
    .game-container {
      all: initial;
      display: block;
      position: relative;
      font-family: 'Poppins', sans-serif;
      box-sizing: border-box;
    }
    
    .game-container * {
      font-family: 'Poppins', sans-serif;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    .game-container .arabic-font {
      font-family: 'Amiri', serif;
    }
    
    @keyframes game-twinkle {
      0%, 100% { opacity: 0.3; transform: scale(0.8); }
      50% { opacity: 1; transform: scale(1.2); }
    }
    
    @keyframes game-float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-10px); }
    }
    
    @keyframes game-glow {
      0%, 100% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
      50% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.9), 0 0 60px rgba(255, 215, 0, 0.5); }
    }
    
    @keyframes game-correctPulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }
    
    @keyframes game-slideIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes game-shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-5px); }
      75% { transform: translateX(5px); }
    }
    
    @keyframes game-celebrateStar {
      0% { transform: scale(0) rotate(0deg); opacity: 1; }
      100% { transform: scale(1.5) rotate(180deg); opacity: 0; }
    }
    
    .game-container .star { 
      animation: game-twinkle 2s ease-in-out infinite; 
      position: absolute;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'Font Awesome', 'Segoe UI', 'Arial', sans-serif;
      font-weight: 900;
      text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }
    
    .game-container .star:before { content: "\f005"; }
    .game-container .star:nth-child(2n):before { content: "\f006"; }
    .game-container .star:nth-child(3n):before { content: "\f005"; }
    .game-container .star:nth-child(5n):before { content: "\f7a2"; }
    .game-container .star:nth-child(7n):before { content: "\f621"; }
    .game-container .star:nth-child(2n) { animation-delay: 0.5s; }
    .game-container .star:nth-child(3n) { animation-delay: 1s; }
    .game-container .star:nth-child(5n) { animation-delay: 1.5s; }
    .game-container .star:nth-child(7n) { animation-delay: 2s; }
    
    .game-container #stars-container {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      z-index: 1;
    }
    
    .game-container .moon { animation: game-float 4s ease-in-out infinite; }
    
    .game-container .letter-circle {
      transition: all 0.2s ease;
      cursor: pointer;
      user-select: none;
      touch-action: manipulation;
    }
    
    .game-container .letter-circle:active, 
    .game-container .letter-circle.selected {
      transform: scale(0.9);
      background: linear-gradient(135deg, #ffd700, #ffed4a);
      color: #1a1a2e;
    }
    
    .game-container .letter-box {
      transition: all 0.3s ease;
    }
    
    .game-container .letter-box.filled {
      animation: game-correctPulse 0.3s ease;
    }
    
    .game-container .letter-box.correct {
      animation: game-glow 1s ease-in-out;
      background: linear-gradient(135deg, #10b981, #059669);
    }
    
    .game-container .shake { animation: game-shake 0.3s ease; }
    
    .game-container .celebrate-star {
      position: absolute;
      animation: game-celebrateStar 1s ease-out forwards;
      z-index: 100;
      font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'Font Awesome', sans-serif;
      font-weight: 900;
      color: gold;
      text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
    }
    
    .game-container .line-connector {
      stroke: rgba(255, 215, 0, 0.6);
      stroke-width: 4;
      stroke-linecap: round;
      filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
    }
    
    .game-container .hint-popup {
      animation: game-slideIn 0.3s ease;
    }
    
    .game-container .btn-game {
      transition: all 0.2s ease;
      touch-action: manipulation;
      cursor: pointer;
    }
    
    .game-container .btn-game:active {
      transform: scale(0.95);
    }
    
    .game-container .progress-bar {
      transition: width 0.5s ease;
    }
    
    .game-container .modal-overlay {
      backdrop-filter: blur(8px);
    }
    
    .game-container .timer-badge {
      background: rgba(0,0,0,0.5);
      backdrop-filter: blur(8px);
      font-family: monospace;
      letter-spacing: 1px;
    }
    
    /* Kelas utilitas Tailwind yang diperlukan - discope dengan .game-container */
    .game-container .h-full {
      height: 100%;
    }
    
    .game-container .min-h-full {
      min-height: 100%;
    }
    
    .game-container .overflow-auto {
      overflow: auto;
    }
    
    .game-container .overflow-hidden {
      overflow: hidden;
    }
    
    .game-container .relative {
      position: relative;
    }
    
    .game-container .absolute {
      position: absolute;
    }
    
    .game-container .fixed {
      position: fixed;
    }
    
    .game-container .inset-0 {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    
    .game-container .z-10 {
      z-index: 10;
    }
    
    .game-container .z-50 {
      z-index: 50;
    }
    
    .game-container .pointer-events-none {
      pointer-events: none;
    }
    
    .game-container .flex {
      display: flex;
    }
    
    .game-container .flex-col {
      flex-direction: column;
    }
    
    .game-container .items-center {
      align-items: center;
    }
    
    .game-container .justify-center {
      justify-content: center;
    }
    
    .game-container .justify-between {
      justify-content: space-between;
    }
    
    .game-container .gap-2 {
      gap: 0.5rem;
    }
    
    .game-container .gap-3 {
      gap: 0.75rem;
    }
    
    .game-container .gap-4 {
      gap: 1rem;
    }
    
    .game-container .p-4 {
      padding: 1rem;
    }
    
    .game-container .px-3 {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
    }
    
    .game-container .py-1 {
      padding-top: 0.25rem;
      padding-bottom: 0.25rem;
    }
    
    .game-container .mb-2 {
      margin-bottom: 0.5rem;
    }
    
    .game-container .mb-4 {
      margin-bottom: 1rem;
    }
    
    .game-container .mb-6 {
      margin-bottom: 1.5rem;
    }
    
    .game-container .mt-3 {
      margin-top: 0.75rem;
    }
    
    .game-container .rounded-full {
      border-radius: 9999px;
    }
    
    .game-container .rounded-xl {
      border-radius: 0.75rem;
    }
    
    .game-container .rounded-3xl {
      border-radius: 1.5rem;
    }
    
    .game-container .bg-black\/40 {
      background-color: rgba(0, 0, 0, 0.4);
    }
    
    .game-container .bg-black\/60 {
      background-color: rgba(0, 0, 0, 0.6);
    }
    
    .game-container .bg-black\/70 {
      background-color: rgba(0, 0, 0, 0.7);
    }
    
    .game-container .bg-white\/10 {
      background-color: rgba(255, 255, 255, 0.1);
    }
    
    .game-container .bg-white\/20 {
      background-color: rgba(255, 255, 255, 0.2);
    }
    
    .game-container .backdrop-blur {
      backdrop-filter: blur(8px);
    }
    
    .game-container .border {
      border-width: 1px;
    }
    
    .game-container .border-2 {
      border-width: 2px;
    }
    
    .game-container .border-amber-400\/20 {
      border-color: rgba(245, 158, 11, 0.2);
    }
    
    .game-container .border-amber-400\/30 {
      border-color: rgba(245, 158, 11, 0.3);
    }
    
    .game-container .border-amber-400\/40 {
      border-color: rgba(245, 158, 11, 0.4);
    }
    
    .game-container .border-amber-400\/50 {
      border-color: rgba(245, 158, 11, 0.5);
    }
    
    .game-container .shadow-lg {
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }
    
    .game-container .shadow-2xl {
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }
    
    .game-container .text-white {
      color: #ffffff;
    }
    
    .game-container .text-amber-400 {
      color: #fbbf24;
    }
    
    .game-container .text-amber-300 {
      color: #fcd34d;
    }
    
    .game-container .text-amber-200 {
      color: #fde68a;
    }
    
    .game-container .text-emerald-200 {
      color: #a7f3d0;
    }
    
    .game-container .text-emerald-400 {
      color: #34d399;
    }
    
    .game-container .text-xs {
      font-size: 0.75rem;
    }
    
    .game-container .text-sm {
      font-size: 0.875rem;
    }
    
    .game-container .text-lg {
      font-size: 1.125rem;
    }
    
    .game-container .text-xl {
      font-size: 1.25rem;
    }
    
    .game-container .text-2xl {
      font-size: 1.5rem;
    }
    
    .game-container .text-3xl {
      font-size: 1.875rem;
    }
    
    .game-container .text-4xl {
      font-size: 2.25rem;
    }
    
    .game-container .text-6xl {
      font-size: 3.75rem;
    }
    
    .game-container .font-bold {
      font-weight: 700;
    }
    
    .game-container .font-semibold {
      font-weight: 600;
    }
    
    .game-container .font-mono {
      font-family: monospace;
    }
    
    .game-container .tracking-widest {
      letter-spacing: 0.1em;
    }
    
    .game-container .leading-tight {
      line-height: 1.25;
    }
    
    .game-container .leading-relaxed {
      line-height: 1.625;
    }
    
    .game-container .w-full {
      width: 100%;
    }
    
    .game-container .w-10 {
      width: 2.5rem;
    }
    
    .game-container .w-12 {
      width: 3rem;
    }
    
    .game-container .w-14 {
      width: 3.5rem;
    }
    
    .game-container .w-64 {
      width: 16rem;
    }
    
    .game-container .h-2 {
      height: 0.5rem;
    }
    
    .game-container .h-10 {
      height: 2.5rem;
    }
    
    .game-container .h-12 {
      height: 3rem;
    }
    
    .game-container .h-14 {
      height: 3.5rem;
    }
    
    .game-container .h-32 {
      height: 8rem;
    }
    
    .game-container .h-64 {
      height: 16rem;
    }
    
    .game-container .max-w-sm {
      max-width: 24rem;
    }
    
    .game-container .bg-gradient-to-br {
      background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
    }
    
    .game-container .from-emerald-900 {
      --tw-gradient-from: #064e3b;
      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(6, 78, 59, 0));
    }
    
    .game-container .to-purple-900 {
      --tw-gradient-to: #581c87;
    }
    
    .game-container .from-emerald-600 {
      --tw-gradient-from: #059669;
      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(5, 150, 105, 0));
    }
    
    .game-container .to-emerald-800 {
      --tw-gradient-to: #065f46;
    }
    
    .game-container .from-purple-500 {
      --tw-gradient-from: #a855f7;
      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(168, 85, 247, 0));
    }
    
    .game-container .to-purple-700 {
      --tw-gradient-to: #7e22ce;
    }
    
    .game-container .from-amber-500 {
      --tw-gradient-from: #f59e0b;
      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(245, 158, 11, 0));
    }
    
    .game-container .to-amber-700 {
      --tw-gradient-to: #b45309;
    }
    
    .game-container .from-rose-500 {
      --tw-gradient-from: #f43f5e;
      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(244, 63, 94, 0));
    }
    
    .game-container .to-rose-700 {
      --tw-gradient-to: #be123c;
    }
    
    .game-container .from-amber-400 {
      --tw-gradient-from: #fbbf24;
      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(251, 191, 36, 0));
    }
    
    .game-container .to-emerald-400 {
      --tw-gradient-to: #34d399;
    }
    
    .game-container .bg-emerald-800\/50 {
      background-color: rgba(6, 78, 59, 0.5);
    }
    
    .game-container .bg-gradient-to-r {
      background-image: linear-gradient(to right, var(--tw-gradient-stops));
    }
    
    .game-container .hidden {
      display: none;
    }
    
    .game-container .flex-wrap {
      flex-wrap: wrap;
    }
    
    .game-container .text-center {
      text-align: center;
    }
    
    .game-container .outline-none {
      outline: none;
    }
    
    .game-container .focus\:ring-2:focus {
      ring-width: 2px;
    }
    
    .game-container .focus\:ring-amber-400:focus {
      --tw-ring-color: #fbbf24;
    }
    
    .game-container .transform {
      transform: translateZ(0);
    }
    
    .game-container .transition-all {
      transition-property: all;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 150ms;
    }
    
    /* Reset untuk elemen input agar tidak terpengaruh style luar */
    .game-container input {
      background: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(245, 158, 11, 0.5);
      border-radius: 0.75rem;
      padding: 0.75rem 1rem;
      color: white;
      font-family: inherit;
    }
    
    .game-container input::placeholder {
      color: rgba(167, 243, 208, 0.7);
    }
    
    .game-container input:focus {
      outline: none;
      ring: 2px solid #fbbf24;
    }
    
    /* Memastikan button tidak terpengaruh style luar */
    .game-container button {
      background: none;
      border: none;
      cursor: pointer;
      font-family: inherit;
    }
  </style>
</head>
<body>
  <!-- TIDAK ADA CLASS h-full atau overflow-auto pada body untuk menghindari konflik -->
  <div class="game-container">
    <div id="app" style="min-height: 100vh; width: 100%; position: relative; overflow: hidden; background: linear-gradient(180deg, #1a1a2e 0%, #16213e 30%, #0f3460 70%, #533483 100%);">
      
      <div id="stars-container" style="position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1;"></div>
      
      <!-- MODAL INPUT NAMA (sebelum mulai main) -->
      <div id="modal-name-input" style="position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(12px);">
        <div style="background: linear-gradient(to bottom right, #064e3b, #581c87); border-radius: 1.5rem; padding: 1.5rem; max-width: 24rem; width: 100%; border: 2px solid rgba(245, 158, 11, 0.5); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);">
          <div style="text-align: center;">
            <div style="font-size: 3.75rem; margin-bottom: 1rem;">🌙✨</div>
            <h2 style="font-size: 1.5rem; font-weight: 700; color: #fbbf24; margin-bottom: 0.5rem;">Bismillah!</h2>
            <p style="color: #a7f3d0; font-size: 0.875rem; margin-bottom: 1rem;">Masukkan nama untuk memulai petualangan Ramadhan</p>
            <input type="text" id="player-name-input" maxlength="20" placeholder="Nama Anda" style="width: 100%; padding: 0.75rem 1rem; border-radius: 0.75rem; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(245, 158, 11, 0.5); color: white; text-align: center; font-weight: 600; outline: none; margin-bottom: 1rem; font-family: inherit;">
            <button id="btn-start-game" style="width: 100%; padding: 0.75rem; background: linear-gradient(to right, #f59e0b, #10b981); color: white; font-weight: 700; border-radius: 0.75rem; font-size: 1.125rem; transition: all 0.2s ease; cursor: pointer; border: none;"> Mulai Bermain ➜ </button>
          </div>
        </div>
      </div>
      
      <div style="position: relative; z-index: 10; min-height: 100%; display: none; flex-direction: column; padding: 1rem; padding-bottom: 2rem;" id="game-main-container">
        
        <header style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;">
          <div style="display: flex; align-items: center; gap: 0.5rem;">
            <div style="font-size: 1.5rem;">🌙</div>
            <div>
              <h1 style="font-size: 1.125rem; font-weight: 700; color: #fbbf24; line-height: 1.25;">Kata Ramadhan</h1>
              <p style="font-size: 0.75rem; color: rgba(253, 230, 138, 0.8);" id="level-indicator">Level 1</p>
            </div>
          </div>
          <div style="display: flex; align-items: center; gap: 0.75rem;">
            <div style="background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); border-radius: 9999px; padding: 0.25rem 0.75rem; display: flex; align-items: center; gap: 0.25rem; border: 1px solid rgba(245, 158, 11, 0.4);">
              <span style="color: #fcd34d; font-size: 0.875rem;">⏱️</span>
              <span id="game-timer-display" style="color: white; font-family: monospace; font-weight: 700; font-size: 0.875rem;">00:00</span>
            </div>
            <div style="background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); border-radius: 9999px; padding: 0.25rem 0.75rem; display: flex; align-items: center; gap: 0.25rem;">
              <span style="color: #fbbf24;">⭐</span> 
              <span id="score-display" style="color: white; font-weight: 600; font-size: 0.875rem;">0</span>
            </div>
            <div style="background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); border-radius: 9999px; padding: 0.25rem 0.75rem; display: flex; align-items: center; gap: 0.25rem;">
              <span>💡</span> 
              <span id="hints-display" style="color: white; font-weight: 600; font-size: 0.875rem;">3</span>
            </div>
          </div>
        </header>
        
        <div style="width: 100%; background: rgba(255, 255, 255, 0.1); border-radius: 9999px; height: 0.5rem; margin-bottom: 1rem; overflow: hidden;">
          <div id="progress-bar" style="transition: width 0.5s ease; height: 100%; background: linear-gradient(to right, #fbbf24, #34d399); border-radius: 9999px; width: 0%;"></div>
        </div>
        
        <div style="position: relative; background: linear-gradient(to bottom right, rgba(6, 78, 59, 0.5), rgba(88, 28, 135, 0.5)); backdrop-filter: blur(8px); border-radius: 1.5rem; padding: 1rem; margin-bottom: 1rem; border: 1px solid rgba(245, 158, 11, 0.2); overflow: hidden;">
          <div style="position: absolute; top: 0.5rem; right: 0.5rem; font-size: 2.25rem; animation: game-float 4s ease-in-out infinite;">🌙</div>
          <div id="illustration-container" style="display: flex; align-items: center; justify-content: center; height: 8rem; position: relative;"></div>
          <div id="word-meaning" style="display: none; margin-top: 0.75rem; padding: 0.75rem; background: rgba(6, 78, 59, 0.5); border-radius: 0.75rem; border: 1px solid rgba(52, 211, 153, 0.3);">
            <p style="color: #a7f3d0; font-size: 0.75rem; text-align: center; line-height: 1.625;"></p>
          </div>
        </div>
        
        <div id="answer-container" style="display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap;"></div>
        
        <div style="height: 2.5rem; display: flex; justify-content: center; align-items: center; margin-bottom: 1rem;">
          <div id="selected-letters" style="font-size: 1.5rem; font-weight: 700; color: #fbbf24; letter-spacing: 0.1em;"></div>
        </div>
        
        <div style="flex: 1; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;">
          <div style="position: relative; width: 16rem; height: 16rem;">
            <svg id="line-svg" style="position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1;"></svg>
            <div id="letter-circle" style="position: absolute; inset: 0;"></div>
          </div>
        </div>
        
        <div style="display: flex; justify-content: center; gap: 1rem; margin-bottom: 1rem;">
          <button id="btn-shuffle" style="cursor: pointer; width: 3.5rem; height: 3.5rem; border-radius: 9999px; background: linear-gradient(to bottom right, #a855f7, #7e22ce); color: white; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border: 2px solid rgba(168, 85, 247, 0.5); transition: all 0.2s ease;"> 🔄 </button> 
          <button id="btn-hint" style="cursor: pointer; width: 3.5rem; height: 3.5rem; border-radius: 9999px; background: linear-gradient(to bottom right, #f59e0b, #b45309); color: white; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border: 2px solid rgba(245, 158, 11, 0.5); transition: all 0.2s ease;"> 💡 </button> 
          <button id="btn-clear" style="cursor: pointer; width: 3.5rem; height: 3.5rem; border-radius: 9999px; background: linear-gradient(to bottom right, #f43f5e, #be123c); color: white; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border: 2px solid rgba(244, 63, 94, 0.5); transition: all 0.2s ease;"> ⌫ </button>
        </div>
        
        <div id="badges-container" style="display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap;"></div>
      </div>
      
      <div id="modal-complete" style="display: none; position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px);">
        <div style="background: linear-gradient(to bottom right, #064e3b, #581c87); border-radius: 1.5rem; padding: 1.5rem; max-width: 24rem; width: 100%; border: 2px solid rgba(245, 158, 11, 0.5); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);">
          <div style="text-align: center;">
            <div style="font-size: 3.75rem; margin-bottom: 1rem;">🎉</div>
            <h2 style="font-size: 1.5rem; font-weight: 700; color: #fbbf24; margin-bottom: 0.5rem;">Alhamdulillah!</h2>
            <p style="color: #a7f3d0; margin-bottom: 1rem;">Level selesai dengan sempurna!</p>
            <div style="background: rgba(255, 255, 255, 0.1); border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem;">
              <div style="display: flex; justify-content: center; gap: 1.5rem;">
                <div style="text-align: center;"><p style="font-size: 1.875rem; font-weight: 700; color: #fbbf24;" id="modal-score">+10</p><p style="font-size: 0.75rem; color: #a7f3d0;">Poin</p></div>
                <div style="text-align: center;"><p style="font-size: 1.875rem; font-weight: 700; color: #34d399;" id="modal-total">10</p><p style="font-size: 0.75rem; color: #a7f3d0;">Total</p></div>
              </div>
            </div>
            <button id="btn-next-level" style="width: 100%; padding: 0.75rem; background: linear-gradient(to right, #f59e0b, #10b981); color: white; font-weight: 700; border-radius: 0.75rem; font-size: 1.125rem; transition: all 0.2s ease; cursor: pointer; border: none;"> Level Selanjutnya ➜ </button>
          </div>
        </div>
      </div>
      
      <div id="modal-game-complete" style="display: none; position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px);">
        <div style="background: linear-gradient(to bottom right, #064e3b, #581c87); border-radius: 1.5rem; padding: 1.5rem; max-width: 24rem; width: 100%; border: 2px solid rgba(245, 158, 11, 0.5); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);">
          <div style="text-align: center;">
            <div style="font-size: 3.75rem; margin-bottom: 1rem;">🏆</div>
            <h2 style="font-size: 1.5rem; font-weight: 700; color: #fbbf24; margin-bottom: 0.5rem;">MasyaAllah!</h2>
            <p style="color: #a7f3d0; margin-bottom: 0.5rem;">Kamu telah menyelesaikan semua level!</p>
            <div style="background: rgba(255, 255, 255, 0.1); border-radius: 0.75rem; padding: 1rem; margin-bottom: 1rem;">
              <p style="font-size: 2.25rem; font-weight: 700; color: #fbbf24;" id="final-score">50</p>
              <p style="color: #a7f3d0; font-size: 0.875rem;">Total Poin</p>
              <div style="margin-top: 0.5rem; padding-top: 0.25rem;">
                <p style="color: #a7f3d0; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem;">
                  <span>👤</span> 
                  <span id="player-name-display" style="color: #fcd34d; font-weight: 600;">Pemain</span>
                </p>
              </div>
              <div style="margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid rgba(245, 158, 11, 0.3);">
                <p style="color: #a7f3d0; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem;">
                  <span>⏱️</span> 
                  <span id="final-duration" style="font-family: monospace; color: #fcd34d; font-weight: 700;">00:00</span>
                  <span>durasi permainan</span>
                </p>
              </div>
            </div>
            <div id="earned-badges" style="display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem;"></div>
            <button id="btn-restart" style="width: 100%; padding: 0.75rem; background: linear-gradient(to right, #f59e0b, #10b981); color: white; font-weight: 700; border-radius: 0.75rem; font-size: 1.125rem; transition: all 0.2s ease; cursor: pointer; border: none;"> Main Lagi 🔄 </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <script>
    // ======================================================
    // EFEK SUARA GAYA FAMILY 100 (sama seperti sebelumnya)
    // ======================================================
    const Family100Sound = (function() {
      let audioCtx = null;
      let isEnabled = true;
      
      function initAudio() {
        if (audioCtx) return audioCtx;
        try {
          audioCtx = new (window.AudioContext || window.webkitAudioContext)();
          return audioCtx;
        } catch(e) {
          console.warn("Web Audio API tidak didukung", e);
          isEnabled = false;
          return null;
        }
      }
      
      function playCorrectSound() {
        if (!isEnabled) return;
        const ctx = initAudio();
        if (!ctx) return;
        
        const resumeAndPlay = () => {
          if (ctx.state === 'suspended') {
            ctx.resume().then(() => generateCorrectSequence(ctx)).catch(e=>console.log(e));
          } else {
            generateCorrectSequence(ctx);
          }
        };
        if (ctx.state === 'closed') return;
        resumeAndPlay();
      }
      
      function generateCorrectSequence(ctx) {
        const now = ctx.currentTime;
        const masterGain = ctx.createGain();
        masterGain.gain.setValueAtTime(0.4, now);
        masterGain.gain.exponentialRampToValueAtTime(0.0001, now + 1.2);
        masterGain.connect(ctx.destination);
        
        const osc1 = ctx.createOscillator();
        osc1.frequency.value = 1046.50;
        osc1.type = "sine";
        osc1.connect(masterGain);
        osc1.start(now);
        osc1.stop(now + 0.25);
        
        const osc2 = ctx.createOscillator();
        osc2.frequency.value = 1318.52;
        osc2.type = "sine";
        osc2.connect(masterGain);
        osc2.start(now + 0.25);
        osc2.stop(now + 0.5);
        
        const osc3 = ctx.createOscillator();
        osc3.frequency.value = 1567.98;
        osc3.type = "sine";
        osc3.connect(masterGain);
        osc3.start(now + 0.5);
        osc3.stop(now + 0.75);
        
        const osc4 = ctx.createOscillator();
        osc4.frequency.value = 2093.00;
        osc4.type = "triangle";
        osc4.connect(masterGain);
        osc4.start(now + 0.85);
        osc4.stop(now + 1.1);
        
        const noiseBuffer = (() => {
          const bufferSize = ctx.sampleRate * 0.15;
          const buffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate);
          const data = buffer.getChannelData(0);
          for (let i = 0; i < bufferSize; i++) data[i] = (Math.random() * 2 - 1) * 0.2;
          return buffer;
        })();
        const noiseSrc = ctx.createBufferSource();
        noiseSrc.buffer = noiseBuffer;
        const noiseGain = ctx.createGain();
        noiseGain.gain.setValueAtTime(0.15, now + 0.95);
        noiseGain.gain.exponentialRampToValueAtTime(0.0001, now + 1.2);
        noiseSrc.connect(noiseGain);
        noiseGain.connect(ctx.destination);
        noiseSrc.start(now + 0.95);
      }
      
      function playWrongSound() {
        if (!isEnabled) return;
        const ctx = initAudio();
        if (!ctx) return;
        
        const resumeAndPlay = () => {
          if (ctx.state === 'suspended') {
            ctx.resume().then(() => generateWrongSequence(ctx)).catch(e=>console.log(e));
          } else {
            generateWrongSequence(ctx);
          }
        };
        if (ctx.state === 'closed') return;
        resumeAndPlay();
      }
      
      function generateWrongSequence(ctx) {
        const now = ctx.currentTime;
        const masterGain = ctx.createGain();
        masterGain.gain.setValueAtTime(0.35, now);
        masterGain.gain.exponentialRampToValueAtTime(0.0001, now + 0.6);
        masterGain.connect(ctx.destination);
        
        const osc1 = ctx.createOscillator();
        osc1.frequency.value = 180;
        osc1.type = "sawtooth";
        osc1.connect(masterGain);
        osc1.start(now);
        osc1.stop(now + 0.35);
        
        const osc2 = ctx.createOscillator();
        osc2.frequency.value = 240;
        osc2.type = "square";
        osc2.connect(masterGain);
        osc2.start(now + 0.05);
        osc2.stop(now + 0.4);
        
        const bufferSize = ctx.sampleRate * 0.25;
        const buffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate);
        const data = buffer.getChannelData(0);
        for (let i = 0; i < bufferSize; i++) data[i] = (Math.random() * 2 - 1) * 0.4;
        const noiseSrc = ctx.createBufferSource();
        noiseSrc.buffer = buffer;
        const noiseGain = ctx.createGain();
        noiseGain.gain.setValueAtTime(0.25, now);
        noiseGain.gain.exponentialRampToValueAtTime(0.0001, now + 0.45);
        noiseSrc.connect(noiseGain);
        noiseGain.connect(ctx.destination);
        noiseSrc.start(now);
        
        const osc3 = ctx.createOscillator();
        osc3.frequency.setValueAtTime(320, now);
        osc3.frequency.exponentialRampToValueAtTime(200, now + 0.35);
        osc3.type = "triangle";
        osc3.connect(masterGain);
        osc3.start(now + 0.1);
        osc3.stop(now + 0.5);
      }
      
      function bindFirstInteraction() {
        const events = ['click', 'touchstart', 'pointerdown'];
        const activator = () => {
          if (audioCtx && audioCtx.state === 'suspended') {
            audioCtx.resume().then(() => console.log("Audio Family100 siap")).catch(e=>{});
          } else if (!audioCtx) {
            initAudio();
            if(audioCtx) audioCtx.resume();
          }
          events.forEach(ev => document.removeEventListener(ev, activator));
        };
        events.forEach(ev => document.addEventListener(ev, activator, { once: true }));
      }
      
      return {
        playCorrect: playCorrectSound,
        playWrong: playWrongSound,
        init: bindFirstInteraction
      };
    })();
    
    // ===========================================
    // KONFIGURASI GAME (sama seperti sebelumnya)
    // ===========================================
    const levels = [
      { id: 1, letters: ['P', 'U', 'A', 'S', 'A'], answer: 'PUASA', meaning: 'Puasa adalah menahan diri dari makan dan minum dari terbit fajar hingga terbenam matahari sebagai ibadah kepada Allah SWT.', illustration: '🕌', theme: 'mosque' },
      { id: 2, letters: ['S', 'A', 'H', 'U', 'R'], answer: 'SAHUR', meaning: 'Sahur adalah makan dan minum sebelum fajar sebagai persiapan menjalankan ibadah puasa. Rasulullah SAW bersabda: "Bersahurlah karena pada sahur itu ada berkah."', illustration: '🍽️', theme: 'food' },
      { id: 3, letters: ['T', 'A', 'R', 'A', 'W', 'I', 'H'], answer: 'TARAWIH', meaning: 'Tarawih adalah shalat sunnah yang dikerjakan pada malam bulan Ramadhan setelah shalat Isya. Shalat ini sangat dianjurkan untuk memperoleh pahala.', illustration: '🤲', theme: 'prayer' },
      { id: 4, letters: ['Z', 'A', 'K', 'A', 'T'], answer: 'ZAKAT', meaning: 'Zakat adalah harta yang wajib dikeluarkan untuk membersihkan jiwa dan harta. Zakat fitrah wajib dikeluarkan sebelum shalat Idul Fitri.', illustration: '💝', theme: 'charity' },
      { id: 5, letters: ['I', 'M', 'S', 'A', 'K'], answer: 'IMSAK', meaning: 'Imsak adalah waktu berhenti makan dan minum menjelang terbit fajar. Waktu ini menandakan dimulainya ibadah puasa.', illustration: '⏰', theme: 'time' }
    ];

    const badges = [
      { id: 'beginner', name: 'Pemula Ramadhan', icon: '🌙', requirement: 1 },
      { id: 'learner', name: 'Pencari Ilmu', icon: '📚', requirement: 3 },
      { id: 'expert', name: 'Ahli Ibadah', icon: '⭐', requirement: 5 },
      { id: 'master', name: 'Bintang Tarawih', icon: '🏆', requirement: 5 }
    ];

    let gameState = {
      currentLevel: 0,
      score: 0,
      hints: 3,
      selectedLetters: [],
      selectedPositions: [],
      completedLevels: new Set(),
      earnedBadges: []
    };
    
    let playerName = "";
    let gameStartTime = null;
    let timerInterval = null;
    let finalDurationSeconds = 0;
    
    function startGameTimer() {
      if (timerInterval) clearInterval(timerInterval);
      gameStartTime = Date.now();
      timerInterval = setInterval(() => {
        if (!gameStartTime) return;
        const elapsed = Math.floor((Date.now() - gameStartTime) / 1000);
        const mins = Math.floor(elapsed / 60);
        const secs = elapsed % 60;
        const timerElem = document.getElementById('game-timer-display');
        if (timerElem) timerElem.textContent = `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
      }, 1000);
    }
    
    function stopAndGetDuration() {
      if (timerInterval) {
        clearInterval(timerInterval);
        timerInterval = null;
      }
      if (!gameStartTime) return 0;
      const durationSec = Math.floor((Date.now() - gameStartTime) / 1000);
      finalDurationSeconds = durationSec;
      return durationSec;
    }
    
    function resetAndStartTimer() {
      stopAndGetDuration();
      gameStartTime = Date.now();
      startGameTimer();
    }
    
    function formatDuration(seconds) {
      const mins = Math.floor(seconds / 60);
      const secs = seconds % 60;
      return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
    }
    
    function updateFinalDurationDisplay() {
      const durationElem = document.getElementById('final-duration');
      if (durationElem) {
        durationElem.textContent = formatDuration(finalDurationSeconds > 0 ? finalDurationSeconds : 0);
      }
    }
    
    function updatePlayerNameOnLeaderboard() {
      const nameSpan = document.getElementById('player-name-display');
      if (nameSpan && playerName) {
        nameSpan.textContent = playerName;
      } else if (nameSpan) {
        nameSpan.textContent = "Pemain";
      }
    }
    
    function shuffleArray(arr) {
      for (let i = arr.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [arr[i], arr[j]] = [arr[j], arr[i]];
      }
      return arr;
    }
    
    let letterElements = [];
    let isProcessing = false;
    let isDragging = false;

    function createStars() {
      const container = document.getElementById('stars-container');
      if (!container) return;
      container.innerHTML = '';
      for (let i = 0; i < 50; i++) {
        const star = document.createElement('div');
        star.className = 'star';
        star.style.left = `${Math.random() * 100}%`;
        star.style.top = `${Math.random() * 90}%`;
        const size = Math.random() * 18 + 8;
        star.style.fontSize = `${size}px`;
        star.style.opacity = Math.random() * 0.7 + 0.3;
        if (i % 5 === 0) star.style.color = '#ffd700';
        else if (i % 7 === 0) star.style.color = '#87ceeb';
        else if (i % 11 === 0) star.style.color = '#ffa07a';
        else star.style.color = '#ffffff';
        star.style.animationDelay = `${Math.random() * 3}s`;
        container.appendChild(star);
      }
    }

    function renderIllustration(level) {
      const container = document.getElementById('illustration-container');
      const illustrations = {
        mosque: `<div style="display: flex; flex-direction: column; align-items: center;"><div style="font-size: 3.75rem; margin-bottom: 0.5rem;">🕌</div><div style="display: flex; gap: 0.5rem;"><span style="font-size: 1.5rem;">🌙</span><span style="font-size: 1.5rem;">⭐</span><span style="font-size: 1.5rem;">🌙</span></div></div>`,
        food: `<div style="display: flex; flex-direction: column; align-items: center;"><div style="font-size: 3rem; margin-bottom: 0.5rem;">🍽️</div><div style="display: flex; gap: 0.5rem;"><span style="font-size: 1.5rem;">🥛</span><span style="font-size: 1.5rem;">🍇</span><span style="font-size: 1.5rem;">🫐</span></div></div>`,
        prayer: `<div style="display: flex; flex-direction: column; align-items: center;"><div style="font-size: 3rem; margin-bottom: 0.5rem;">🤲</div><div style="display: flex; gap: 0.5rem;"><span style="font-size: 1.5rem;">📿</span><span style="font-size: 1.5rem;">🕋</span><span style="font-size: 1.5rem;">📿</span></div></div>`,
        charity: `<div style="display: flex; flex-direction: column; align-items: center;"><div style="font-size: 3rem; margin-bottom: 0.5rem;">💝</div><div style="display: flex; gap: 0.5rem;"><span style="font-size: 1.5rem;">🤝</span><span style="font-size: 1.5rem;">💰</span><span style="font-size: 1.5rem;">🤝</span></div></div>`,
        time: `<div style="display: flex; flex-direction: column; align-items: center;"><div style="font-size: 3rem; margin-bottom: 0.5rem;">⏰</div><div style="display: flex; gap: 0.5rem;"><span style="font-size: 1.5rem;">🌅</span><span style="font-size: 1.5rem;">☀️</span><span style="font-size: 1.5rem;">🌄</span></div></div>`
      };
      container.innerHTML = illustrations[level.theme] || illustrations.mosque;
    }

    function createAnswerBoxes(answer) {
      const container = document.getElementById('answer-container');
      container.innerHTML = '';
      for (let i = 0; i < answer.length; i++) {
        const box = document.createElement('div');
        box.className = 'letter-box';
        box.style.width = '2.5rem';
        box.style.height = '3rem';
        box.style.background = 'rgba(255, 255, 255, 0.1)';
        box.style.border = '2px solid rgba(245, 158, 11, 0.5)';
        box.style.borderRadius = '0.5rem';
        box.style.display = 'flex';
        box.style.alignItems = 'center';
        box.style.justifyContent = 'center';
        box.style.fontSize = '1.25rem';
        box.style.fontWeight = '700';
        box.style.color = 'white';
        box.style.backdropFilter = 'blur(8px)';
        box.dataset.index = i;
        container.appendChild(box);
      }
    }

    function createLetterCircle(letters) {
      const container = document.getElementById('letter-circle');
      const svg = document.getElementById('line-svg');
      container.innerHTML = '';
      svg.innerHTML = '';
      letterElements = [];
      const centerX = 128, centerY = 128, radius = 90;
      const shuffledLetters = shuffleArray([...letters]);
      
      shuffledLetters.forEach((letter, index) => {
        const angle = (index * 2 * Math.PI / shuffledLetters.length) - Math.PI / 2;
        const x = centerX + radius * Math.cos(angle);
        const y = centerY + radius * Math.sin(angle);
        const letterEl = document.createElement('div');
        letterEl.className = 'letter-circle';
        letterEl.style.position = 'absolute';
        letterEl.style.width = '3rem';
        letterEl.style.height = '3rem';
        letterEl.style.background = 'linear-gradient(to bottom right, #059669, #065f46)';
        letterEl.style.borderRadius = '9999px';
        letterEl.style.display = 'flex';
        letterEl.style.alignItems = 'center';
        letterEl.style.justifyContent = 'center';
        letterEl.style.fontSize = '1.25rem';
        letterEl.style.fontWeight = '700';
        letterEl.style.color = 'white';
        letterEl.style.boxShadow = '0 10px 15px -3px rgba(0, 0, 0, 0.1)';
        letterEl.style.border = '2px solid rgba(52, 211, 153, 0.5)';
        letterEl.style.left = `${x - 24}px`;
        letterEl.style.top = `${y - 24}px`;
        letterEl.style.zIndex = '10';
        letterEl.textContent = letter;
        letterEl.dataset.letter = letter;
        letterEl.dataset.index = index;
        letterEl.dataset.x = x;
        letterEl.dataset.y = y;
        letterEl.addEventListener('pointerdown', handleLetterStart);
        letterEl.addEventListener('pointerenter', handleLetterEnter);
        container.appendChild(letterEl);
        letterElements.push(letterEl);
      });
      document.addEventListener('pointerup', handleLetterEnd);
      document.addEventListener('pointercancel', handleLetterEnd);
    }

    function handleLetterStart(e) { if (isProcessing) return; e.preventDefault(); isDragging = true; selectLetter(e.target.closest('.letter-circle')); }
    function handleLetterEnter(e) { if (!isDragging || isProcessing) return; const target = e.target.closest('.letter-circle'); if (target && !target.classList.contains('selected')) selectLetter(target); }
    function handleLetterEnd() { if (!isDragging) return; isDragging = false; submitWord(); }

    function selectLetter(element) {
      if (!element || element.classList.contains('selected')) return;
      element.classList.add('selected');
      gameState.selectedLetters.push(element.dataset.letter);
      gameState.selectedPositions.push({ x: parseFloat(element.dataset.x), y: parseFloat(element.dataset.y), element: element });
      updateSelectedDisplay();
      drawConnectingLines();
    }

    function updateSelectedDisplay() { document.getElementById('selected-letters').textContent = gameState.selectedLetters.join(''); }
    function drawConnectingLines() {
      const svg = document.getElementById('line-svg'); svg.innerHTML = '';
      if (gameState.selectedPositions.length < 2) return;
      for (let i = 0; i < gameState.selectedPositions.length - 1; i++) {
        const start = gameState.selectedPositions[i], end = gameState.selectedPositions[i+1];
        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        line.setAttribute('x1', start.x); line.setAttribute('y1', start.y);
        line.setAttribute('x2', end.x); line.setAttribute('y2', end.y);
        line.classList.add('line-connector');
        svg.appendChild(line);
      }
    }

    function clearSelection() {
      gameState.selectedLetters = [];
      gameState.selectedPositions = [];
      letterElements.forEach(el => el.classList.remove('selected'));
      updateSelectedDisplay();
      document.getElementById('line-svg').innerHTML = '';
    }

    async function submitWord() {
      if (gameState.selectedLetters.length === 0 || isProcessing) return;
      const word = gameState.selectedLetters.join('');
      const currentLevel = levels[gameState.currentLevel];
      if (word === currentLevel.answer) {
        Family100Sound.playCorrect();
        isProcessing = true;
        await handleCorrectAnswer(currentLevel);
      } else {
        Family100Sound.playWrong();
        handleWrongAnswer();
      }
    }

    async function handleCorrectAnswer(level) {
      const boxes = document.querySelectorAll('.letter-box');
      for (let i = 0; i < level.answer.length; i++) {
        setTimeout(() => {
          boxes[i].textContent = level.answer[i];
          boxes[i].classList.add('filled', 'correct');
        }, i * 100);
      }
      createCelebrationEffect();
      gameState.score += 10;
      updateScoreDisplay();
      setTimeout(() => showMeaning(level.meaning), level.answer.length * 100 + 300);
      await saveProgress(level.id);
      checkBadges();
      setTimeout(() => {
        if (gameState.currentLevel < levels.length - 1) showLevelCompleteModal();
        else {
          stopAndGetDuration();
          updateFinalDurationDisplay();
          updatePlayerNameOnLeaderboard();
          showGameCompleteModal();
        }
        isProcessing = false;
      }, 2500);
    }

    function handleWrongAnswer() {
      const container = document.getElementById('answer-container');
      container.classList.add('shake');
      setTimeout(() => container.classList.remove('shake'), 300);
      clearSelection();
    }

    function createCelebrationEffect() {
      const container = document.getElementById('app');
      for (let i = 0; i < 12; i++) {
        const star = document.createElement('div');
        star.className = 'celebrate-star';
        const icons = ['⭐', '🌟', '✨', '💫', '⭐', '🌟'];
        star.textContent = icons[Math.floor(Math.random() * icons.length)];
        star.style.left = `${30 + Math.random() * 40}%`;
        star.style.top = `${20 + Math.random() * 30}%`;
        star.style.fontSize = `${Math.random() * 20 + 20}px`;
        star.style.color = Math.random() > 0.5 ? '#ffd700' : '#ffffff';
        container.appendChild(star);
        setTimeout(() => star.remove(), 1500);
      }
    }

    function showMeaning(meaning) { 
      const c = document.getElementById('word-meaning'); 
      c.querySelector('p').textContent = meaning; 
      c.style.display = 'block'; 
      c.classList.add('hint-popup'); 
    }
    function hideMeaning() { 
      document.getElementById('word-meaning').style.display = 'none'; 
    }
    function useHint() {
      if (gameState.hints <= 0 || isProcessing) return;
      const currentLevel = levels[gameState.currentLevel];
      const boxes = document.querySelectorAll('.letter-box');
      let hintIndex = -1;
      for (let i = 0; i < boxes.length; i++) if (!boxes[i].textContent) { hintIndex = i; break; }
      if (hintIndex >= 0) { gameState.hints--; updateHintsDisplay(); boxes[hintIndex].textContent = currentLevel.answer[hintIndex]; boxes[hintIndex].classList.add('filled'); boxes[hintIndex].style.opacity = '0.7'; }
    }
    function shuffleLetters() {
      if (isProcessing) return;
      const currentLevel = levels[gameState.currentLevel];
      const shuffled = shuffleArray([...currentLevel.letters]);
      clearSelection();
      const centerX = 128, centerY = 128, radius = 90;
      letterElements.forEach((el, index) => {
        const angle = (index * 2 * Math.PI / shuffled.length) - Math.PI / 2;
        const x = centerX + radius * Math.cos(angle), y = centerY + radius * Math.sin(angle);
        el.textContent = shuffled[index]; el.dataset.letter = shuffled[index];
        el.dataset.x = x; el.dataset.y = y;
        el.style.left = `${x - 24}px`; el.style.top = `${y - 24}px`;
      });
    }
    function updateScoreDisplay() { document.getElementById('score-display').textContent = gameState.score; }
    function updateHintsDisplay() { document.getElementById('hints-display').textContent = gameState.hints; }
    function updateProgressBar() { const progress = ((gameState.currentLevel + 1) / levels.length) * 100; document.getElementById('progress-bar').style.width = `${progress}%`; }
    function showLevelCompleteModal() { 
      document.getElementById('modal-score').textContent = '+10'; 
      document.getElementById('modal-total').textContent = gameState.score; 
      document.getElementById('modal-complete').style.display = 'flex'; 
    }
    function showGameCompleteModal() { 
      document.getElementById('final-score').textContent = gameState.score; 
      updateFinalDurationDisplay();
      updatePlayerNameOnLeaderboard();
      const bc = document.getElementById('earned-badges'); 
      bc.innerHTML = ''; 
      gameState.earnedBadges.forEach(b => { 
        const el = document.createElement('div'); 
        el.style.display = 'flex';
        el.style.flexDirection = 'column';
        el.style.alignItems = 'center';
        el.style.background = 'rgba(255, 255, 255, 0.1)';
        el.style.borderRadius = '0.5rem';
        el.style.padding = '0.5rem';
        el.innerHTML = `<span style="font-size: 1.5rem;">${b.icon}</span><span style="font-size: 0.75rem; color: #fde68a;">${b.name}</span>`; 
        bc.appendChild(el); 
      }); 
      document.getElementById('modal-game-complete').style.display = 'flex'; 
    }
    function nextLevel() { 
      document.getElementById('modal-complete').style.display = 'none'; 
      gameState.currentLevel++; 
      loadLevel(gameState.currentLevel); 
    }
    function restartGame() { 
      document.getElementById('modal-game-complete').style.display = 'none'; 
      if (timerInterval) clearInterval(timerInterval);
      gameState = { 
        currentLevel: 0, score: 0, hints: 3, 
        selectedLetters: [], selectedPositions: [], 
        completedLevels: new Set(), earnedBadges: [] 
      }; 
      updateScoreDisplay(); 
      updateHintsDisplay(); 
      updateBadgesDisplay(); 
      resetAndStartTimer();
      loadLevel(0); 
    }
    function loadLevel(levelIndex) { 
      const level = levels[levelIndex]; 
      document.getElementById('level-indicator').textContent = `Level ${level.id}`; 
      clearSelection(); 
      hideMeaning(); 
      renderIllustration(level); 
      createAnswerBoxes(level.answer); 
      createLetterCircle(level.letters);
      updateProgressBar(); 
    }
    function checkBadges() { 
      const completedCount = gameState.completedLevels.size + 1; 
      badges.forEach(badge => { 
        if (completedCount >= badge.requirement && !gameState.earnedBadges.find(b => b.id === badge.id)) { 
          gameState.earnedBadges.push(badge); 
          updateBadgesDisplay(); 
        } 
      }); 
    }
    function updateBadgesDisplay() { 
      const container = document.getElementById('badges-container'); 
      container.innerHTML = ''; 
      gameState.earnedBadges.forEach(badge => { 
        const b = document.createElement('div'); 
        b.style.background = 'linear-gradient(to right, rgba(245, 158, 11, 0.3), rgba(16, 185, 129, 0.3))';
        b.style.backdropFilter = 'blur(8px)';
        b.style.borderRadius = '9999px';
        b.style.padding = '0.25rem 0.75rem';
        b.style.display = 'flex';
        b.style.alignItems = 'center';
        b.style.gap = '0.25rem';
        b.style.border = '1px solid rgba(245, 158, 11, 0.3)';
        b.innerHTML = `<span>${badge.icon}</span><span style="font-size: 0.75rem; color: #fde68a;">${badge.name}</span>`; 
        container.appendChild(b); 
      }); 
    }
    async function saveProgress(levelId) { gameState.completedLevels.add(levelId); console.log("Progress saved", levelId); }
    
    function startGameWithName() {
      const nameInput = document.getElementById('player-name-input');
      const rawName = nameInput.value.trim();
      if (rawName === "") {
        playerName = "Pemain";
      } else {
        playerName = rawName;
      }
      document.getElementById('modal-name-input').style.display = 'none';
      document.getElementById('game-main-container').style.display = 'flex';
      createStars();
      resetAndStartTimer();
      loadLevel(0);
      Family100Sound.init();
    }

    document.getElementById('btn-start-game').addEventListener('click', startGameWithName);
    document.getElementById('btn-restart').addEventListener('click', () => { restartGame(); });
    document.getElementById('btn-next-level').addEventListener('click', nextLevel);
    document.getElementById('btn-shuffle').addEventListener('click', shuffleLetters);
    document.getElementById('btn-hint').addEventListener('click', useHint);
    document.getElementById('btn-clear').addEventListener('click', clearSelection);
  </script>
</body>
</html>
💡 Tips: Klik area kode lalu Ctrl+C untuk menyalin seluruh isi kode.
Kode Game Word Puasa

M. Abdun Jamil, M.Pd

Tambah Komentar

About Us

Kode Game Word Puasa

M. Abdun Jamil, M.Pd 

 Tambah Komentar

About Us

M. Abdun Jamil, M.Pd

Tambah Komentar
