/* Palet Warna & Font Baru yang Ceria */
:root {
  --primary-color: #20c997; /* Toska ceria */
  --secondary-color: #ffc107; /* Kuning Madu */
  --bg-color: #fff8e1; /* Krem lembut */
  --font-color: #5d4037; /* Coklat tua */
  --light-bg: #fff;
  --border-color: #d7ccc8;
  --highlight-color: #ff8a65; /* Oranye Koral */
  --font-family: "Nunito", sans-serif;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-color);
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e0f2f1' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  color: var(--font-color);
  margin: 0;
  padding: 0;
}

.main-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

h1 {
  color: var(--primary-color);
  font-weight: 900;
  font-size: 3rem;
  text-shadow: 3px 3px 0px var(--secondary-color);
}

/* Kontrol dengan sudut membulat */
#controls {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  margin-bottom: 20px;
  align-items: center;
}
/* =================================================================== */
/* ===== GANTI SELURUH BLOK CSS TOMBOL ANDA DENGAN YANG DI BAWAH INI ===== */
/* =================================================================== */

/* 1. Aturan Dasar untuk Tombol dan Select Box */
select,
.btn {
  padding: 10px 20px;
  border-radius: 30px; /* Sudut sangat membulat */
  border: 2px solid var(--border-color);
  font-size: 16px;
  font-family: var(--font-family);
  font-weight: 700;
  background-color: white;
  box-shadow: 0 4px 0 0 #bcaaa4; /* Efek 2.5D */
  transition: all 0.1s ease-in-out;
  /* Properti di bawah ini penting untuk <a> agar terlihat seperti tombol */
  text-decoration: none;
  color: var(--font-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 2. Aturan KHUSUS untuk semua elemen dengan class .btn */
.btn {
  cursor: pointer;
}

.btn:hover {
  transform: translateY(-2px); /* Efek tombol naik */
  box-shadow: 0 6px 0 0 #bcaaa4;
}

.btn:active {
  transform: translateY(2px); /* Efek tombol ditekan */
  box-shadow: 0 2px 0 0 #bcaaa4;
}

/* 3. Aturan SPESIFIK untuk setiap tombol berdasarkan ID atau class-nya */

/* Tombol Kembali */
#back-btn {
  background-color: #78909c; /* Warna abu-abu netral */
  color: white;
}

/* Tombol Ulangi */
#restart-btn {
  background-color: var(--primary-color);
  color: white;
}

/* Tombol Mute */
.mute-button {
  background-color: var(--secondary-color);
  font-size: 20px;
  width: 50px; /* Kita buat ukurannya tetap sama */
  height: 50px;
}

/* PENTING: Hapus semua blok aturan untuk tag <button> generik di bawah ini */
/* HAPUS BLOK INI DARI CSS ANDA:
   button { ... }
   button:hover { ... }
   button:active { ... }
*/

/* =================================================================== */
/* ===== BATAS AKHIR BAGIAN YANG PERLU DIGANTI ======================= */
/* =================================================================== */
/* Status Game */
#stats {
  display: flex;
  justify-content: center;
  gap: 30px;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 10px;
  border-radius: 20px;
}

/* Area Game */
#game-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  align-items: flex-start;
  position: relative;
}

/* ===== KODE DIPERBAIKI DI SINI (1) ===== */
/* Style untuk #piece-container dipisahkan agar bisa ditambahkan properti flex */
#piece-container {
  width: 340px;
  min-height: 240px;
  display: flex; /* <-- Properti yang hilang ditambahkan kembali */
  flex-wrap: wrap; /* <-- Properti yang hilang ditambahkan kembali */
  gap: 5px;
  padding: 15px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.7);
  border: 3px dashed var(--primary-color);
  transition: background-color 0.3s, border-color 0.3s;
}

/* Style untuk #reference-container tetap sama */
#reference-container {
  padding: 15px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.7);
  border: 3px dashed var(--primary-color);
}
/* ======================================= */

/* ===== KODE DIPERBAIKI DI SINI (2) ===== */
#board {
  display: grid; /* <-- Properti yang hilang ditambahkan kembali */
  border: 8px solid var(--light-bg);
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.15);
  position: relative;
}

#board::before {
  content: ""; /* Wajib ada untuk membuat pseudo-element muncul */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Mengatur gambar latar dari variabel CSS yang akan kita set di JS */
  background-image: var(--current-puzzle-image);
  background-size: 100% 100%; /* Memastikan gambar pas dengan ukuran papan */

  opacity: 0.5; /* Membuat gambar 50% transparan */
  z-index: 0; /* Menempatkan lapisan ini di paling belakang */
  border-radius: 2px; /* <-- TAMBAHKAN BARIS INI */
}
/* ======================================= */

.slot {
  border-radius: 2px;
  border: 1px dashed #d7ccc8;
  position: relative; /* <-- TAMBAHKAN INI */
}

.drag-over {
  background-color: #c8e6c9 !important;
  outline: 3px solid var(--highlight-color);
  border-radius: 10px;
}

.piece {
  border-radius: 2px;
  transition: transform 0.2s, box-shadow 0.2s;
}

#reference-image {
  border-radius: 15px;
  border: 5px solid var(--light-bg);
}

/* Modal Kemenangan */
.hidden {
  display: none !important;
}

#win-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: var(--light-bg);
  padding: 40px;
  border-radius: 25px;
  text-align: center;
  border: 5px solid var(--secondary-color);
  box-shadow: 0 10px 0 0 #d3a008;
  animation: fadeIn 0.5s ease;
}

#play-again-btn {
  background-color: var(--highlight-color);
  color: white;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===== STYLE UNTUK EFEK HINT ===== */

.piece.hint-glow {
  /* Menerapkan animasi 'glow' selama 2 detik */
  animation: glow 2s ease-in-out;
  /* Membuatnya tidak bisa di-drag lagi */
  cursor: default;
}

#hint-btn {
  position: fixed; /* Membuat tombol mengambang */
  bottom: 50px; /* Jarak 50px dari bawah container */
  right: 20px; /* Jarak 20px dari kanan container */
  z-index: 10; /* Pastikan tombol berada di atas elemen lain */

  /* Style untuk membuatnya menjadi tombol ikon bulat */
  width: 60px;
  height: 60px;
  border-radius: 50%; /* Membuatnya menjadi lingkaran sempurna */
  font-size: 28px; /* Memperbesar ikon emoji */
  padding: 0;

  /* Warna dari tema kita */
  background-color: var(--highlight-color);
  color: white;

  /* Menambahkan bayangan agar lebih menonjol */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

@keyframes glow {
  0% {
    box-shadow: 0 0 5px rgba(255, 193, 7, 0);
  }
  50% {
    /* Bayangan kuning cerah di tengah animasi */
    box-shadow: 0 0 20px 10px rgba(255, 193, 7, 0.8);
  }
  100% {
    box-shadow: 0 0 5px rgba(255, 193, 7, 0);
  }
}

/* Media Queries */
@media (max-width: 1024px) {
  .main-container {
    padding: 10px;
  }
  #game-container {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 24px;
  }
  #controls {
    flex-direction: column;
    align-items: stretch;
  }
  #stats {
    flex-direction: column;
    gap: 5px;
    align-items: center;
  }
  #piece-container {
    width: 90vw;
  }
}

/* ... (di akhir file style.css) ... */

/* ==== FOOTER ==== */
#site-footer {
  width: 100%;
  padding: 30px 20px;
  margin-top: 40px;
  background-color: var(--primary-color, #20c997);
  color: white;
  text-align: center;
  box-sizing: border-box; /* <-- TAMBAHKAN BARIS INI */
}

.footer-content {
  max-width: 800px;
  margin: 0 auto;
}

.footer-message {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 15px 0;
}

.social-links {
  margin-bottom: 20px;
}

.social-links a {
  display: inline-block;
  margin: 0 10px;
  transition: transform 0.3s ease;
}

.social-links a:hover {
  transform: scale(1.2) translateY(-3px);
}

.social-links svg {
  width: 30px;
  height: 30px;
  fill: white;
}

.copyright {
  font-size: 14px;
  opacity: 0.8;
}

.copyright a {
  color: white;
  font-weight: 700;
  text-decoration: none;
}
.copyright a:hover {
  text-decoration: underline;
}

/* ===== STYLE UNTUK INFORMASI TAMBAHAN DI FOOTER ===== */

.footer-extra-info {
  display: flex;
  flex-wrap: wrap; /* Agar responsif di layar kecil */
  gap: 30px;
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  text-align: left; /* Ubah perataan teks menjadi kiri untuk kolom */
}

.info-column {
  flex: 1; /* Membuat kedua kolom memiliki lebar yang sama */
  min-width: 250px; /* Lebar minimum sebelum pindah baris */
}

.info-column h4 {
  font-family: var(--font-family);
  font-weight: 900;
  color: var(--secondary-color); /* Warna kuning madu untuk judul */
  font-size: 1.2rem;
  margin-top: 0;
  margin-bottom: 10px;
}

.info-column p {
  margin: 0;
  opacity: 0.9;
  line-height: 1.6;
}

.info-column a {
  color: var(--light-bg); /* Warna putih agar kontras */
  font-weight: 700;
  text-decoration: underline;
  transition: color 0.3s;
}

.info-column a:hover {
  color: var(--secondary-color); /* Berubah jadi kuning saat di-hover */
}

/* =================================================== */

/* ===== STYLE UNTUK PRELOADER ===== */