@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Solway:wght@400;500;700&display=swap");

body {
  margin: 0;
  padding: 0;
  background: #cde4bd;
  font-family: "Poppins", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden; /* Mencegah scroll bar saat loader muncul */
}

/* --- PERUBAHAN: Gaya untuk Loader Awal --- */
#initial-loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #cde4bd;
  display: flex; /* Tampil secara default */
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 2000; /* Pastikan di atas segalanya */
}

#initial-loader-container .loader-content {
  text-align: center;
}

#initial-progress-bar-container {
  width: 80%;
  max-width: 500px;
  height: 30px;
  background-color: #e8f5e9;
  border-radius: 15px;
  padding: 5px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 20px auto;
}

#initial-progress-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #ff7828, #ffa500);
  border-radius: 10px;
  transition: width 0.3s ease;
}

.loading-text {
  font-size: 18px;
  color: #333;
  font-weight: 600;
  margin-top: 10px;
}
/* --- AKHIR PERUBAHAN --- */

/* Kontainer utama */
#slide-container {
  text-align: center;
  width: 90%;
  max-width: 1100px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: none; /* --- PERUBAHAN: Sembunyikan secara default --- */
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative; /* Added for fullscreen button positioning */
}

/* Area media */
#media-container {
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 16 / 9;
  background-color: #f9f9f9;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

#media-container img,
#media-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Progress bar loader style untuk setelah klik START */
.progress-loader-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #cde4bd;
  z-index: 10;
}

.progress-loader {
  width: 80%;
  max-width: 500px;
  height: 40px;
  background-color: #e8f5e9;
  border-radius: 1px;
  padding: 5px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.progress-segments {
  display: flex;
  width: 100%;
  height: 100%;
  gap: 3px;
}

.segment {
  flex: 1;
  background-color: #e0e0e0;
  border-radius: 3px;
  transition: background-color 0.3s ease;
}

.segment.filled {
  background-color: #ff7828;
  animation: pulse 0.5s ease;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Progress bar style */
.progress-container {
  width: 80%;
  height: 10px;
  background-color: #e0e0e0;
  border-radius: 5px;
  margin: 20px auto;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background-color: #3498db;
  width: 0%;
  transition: width 0.3s ease;
}

/* ///////////////////////////// */
.btn {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform 0.3s ease;
  z-index: 10; /* pastikan di atas media */
}

.btn:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

.btn:active {
  transform: translate(-50%, -50%) scale(0.95);
}

.btn img {
  width: 100%;
  height: auto;
  display: block;
}

/* Tombol Start */
#btn-start {
  top: 65%;
  left: 50%;
  width: 11%;
}

/* Tombol next */
#btn-next {
  bottom: 17%;
  left: 50%;
  width: 7%;
}

#btn-CP {
  top: 70%;
  left: 40%;
  width: 6%;
}
#btn-PP {
  top: 70%;
  left: 52%;
  width: 6%;
}
#btn-PO {
  top: 70%;
  left: 64%;
  width: 6%;
}
/* Tombol Materi */
#btn-materi {
  top: 49%;
  left: 27.5%;
  width: 13%;
}

#btn-materi1 {
  top: 44%;
  left: 24%;
  width: 38%;
}
#btn-materi2 {
  top: 44%;
  left: 75%;
  width: 38%;
}
#btn-materi3 {
  top: 73%;
  left: 50%;
  width: 38%;
}

#btn-quiz {
  top: 49%;
  left: 52%;
  width: 13%;
}

#btn-game {
  top: 49%;
  left: 76.5%;
  width: 13%;
}

#btn-nextm1 {
  bottom: -3.5%;
  right: 6.6%;
  width: 6%;
}
#btn-nextm1.disabled-btn {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
#btn-backm1 {
  bottom: -3.5%;
  left: 12.5%;
  width: 6%;
}
#btn-backm2 {
  bottom: -3.5%;
  left: 12.5%;
  width: 6%;
}
#btn-backm3 {
  bottom: -3.5%;
  left: 12.5%;
  width: 6%;
}
#btn-nextend {
  bottom: -3.5%;
  right: 6.6%;
  width: 6%;
}
#btn-home {
  top: 8%;
  left: 5.6%;
  width: 5%;
}
#btn-menu {
  top: 8%;
  left: 12.6%;
  width: 5%;
}
#btn-musik {
  top: 8%;
  right: 0%;
  width: 5%;
}

/* Tombol Full Screen - Tambahan Baru */
#btn-fullscreen {
  top: 8%;
  right: 8%;
  width: 4%;
  z-index: 15; /* Pastikan di atas elemen lain */
}

/* Style untuk mode fullscreen */
#media-container:fullscreen {
  background-color: #000;
  width: 100vw;
  height: 100vh;
  max-width: none;
  border-radius: 0;
}

#media-container:-webkit-full-screen {
  background-color: #000;
  width: 100vw;
  height: 100vh;
  max-width: none;
  border-radius: 0;
}

#media-container:-moz-full-screen {
  background-color: #000;
  width: 100vw;
  height: 100vh;
  max-width: none;
  border-radius: 0;
}

#media-container:-ms-fullscreen {
  background-color: #000;
  width: 100vw;
  height: 100vh;
  max-width: none;
  border-radius: 0;
}

/* Sembunyikan tombol di luar media container saat fullscreen */
#media-container:fullscreen ~ * {
  display: none;
}

#btn-gigi {
  bottom: 3%;
  left: 27%;
  width: 20%;
}
#btn-lidah {
  bottom: 3%;
  left: 74%;
  width: 20%;
}

#btn-duo {
  top: 39%;
  left: 34%;
  width: 26%;
}

#btn-jeju {
  top: 55%;
  left: 31%;
  width: 20%;
}

#btn-ileum {
  top: 71.5%;
  left: 28%;
  width: 14%;
}

#btn-dyk {
  top: 85%;
  left: 50%;
  width: 11%;
}
#btn-dyk2 {
  top: 75%;
  left: 50%;
  width: 11%;
}
#btn-startquiz {
  top: 71%;
  left: 50%;
  width: 25%;
}
#btn-qanus {
  top: 56%;
  left: 38%;
  width: 20%;
}
#btn-qlidah {
  top: 56%;
  left: 63%;
  width: 20%;
}
#btn-qusushalus {
  top: 77%;
  left: 38%;
  width: 20%;
}
#btn-qlambung {
  top: 77%;
  left: 63%;
  width: 20%;
}

#btn-qgigi {
  top: 56%;
  left: 38%;
  width: 20%;
}
#btn-qususbesar {
  top: 56%;
  left: 63%;
  width: 20%;
}
#btn-qduode {
  top: 77%;
  left: 38%;
  width: 20%;
}
#btn-qmulut {
  top: 77%;
  left: 63%;
  width: 20%;
}
#btn-qsoal4 {
  top: 82%;
  left: 50%;
  width: 50%;
}
#check-soal1 {
  top: 42%;
  left: 9%;
  width: 18%;
}
#check-soal2 {
  top: 42%;
  left: 9%;
  width: 18%;
}
#check-soal3 {
  top: 42%;
  left: 9%;
  width: 18%;
}
#check-game1 {
  top: 90%;
  left: 13%;
  width: 6%;
}
/* #check-soal4 {
  top: 95%;
  left: 50%;
  width: 30%;
}
#check-soal5 {
  top: 95%;
  left: 50%;
  width: 30%;
}
#check-soal6 {
  top: 95%;
  left: 50%;
  width: 30%;
} */

/* CLASS UMUM UNTUK SEMUA SOAL */
@font-face {
  font-family: "Biski";
  src: url("fonts/Biski-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

.isian {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.isian img {
  width: 100%;
  height: auto;
  display: block;
}

/* AREA TEKS */
.isian textarea {
  font-family: "Biski", sans-serif;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 60%;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  text-align: center;
  font-size: 1.2em;
  color: #000000;
  padding: 5px;
  line-height: 1.3em;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  z-index: 11;
  cursor: text;
}

/* Khusus untuk soal 3: hanya satu baris teks */
#input-qsoal3a textarea,
#input-qsoal3b textarea,
#input-qsoal3c textarea,
#input-qsoal3d textarea {
  white-space: nowrap; /* teks hanya satu baris */
  overflow: hidden; /* sembunyikan teks yang melebihi lebar */
  text-overflow: ellipsis; /* tampilkan "..." jika teks terlalu panjang */
  height: 100%; /* biar tetap sejajar */
  line-height: 1.2em; /* sejajarkan teks vertikal */
  resize: none; /* tidak bisa di-resize */
  overflow-y: hidden; /* tidak bisa scroll atas-bawah */
  overflow-x: auto; /* boleh geser kanan-kiri jika panjang */
}

/* POSISI TIAP SOAL — tinggal ubah top/left/width */
#input-qsoal3a {
  top: 33.5%;
  left: 45%;
  width: 22%;
  height: 7%;
  color: #ff751f;
}
#input-qsoal3a textarea {
  color: #ff751f;
}
#input-qsoal3b {
  top: 44.5%;
  left: 32%;
  width: 20%;
  height: 7%;
  color: #ff751f;
}
#input-qsoal3b textarea {
  color: #ff751f;
}
#input-qsoal3c {
  top: 56%;
  left: 71%;
  width: 22%;
  height: 7%;
  color: #ff751f;
}
#input-qsoal3c textarea {
  color: #ff751f;
}
#input-qsoal3d {
  top: 84%;
  left: 45.5%;
  width: 18%;
  height: 7%;
  color: #ff751f;
}
#input-qsoal3d textarea {
  color: #ff751f;
}

#input-qsoal4 {
  top: 82%;
  left: 50%;
  width: 50%;
}

#input-qsoal5 {
  top: 84%; /* geser ke bawah */
  left: 50%; /* sedikit ke kanan */
  width: 48%; /* sedikit lebih kecil */
}

#input-qsoal6 {
  top: 79%; /* geser ke bawah */
  left: 50%; /* sedikit ke kanan */
  width: 64%; /* sedikit lebih kecil */
}

/* Input pertama */
.input-box {
  position: absolute;
  padding: 2px;
  border: none;
  /* border: 0px solid #000000; */
  border-radius: 0;
  font-size: 22px;
  text-align: center;
  box-sizing: border-box;
  background-color: #ffffff;
  transform: translate(-50%, -50%);
  font-family: "Solway", serif; /* pastikan input juga memakai Solway */
  outline: none;
  z-index: 10;
  transition: all 0.3s ease;
}
/* Posisi & ukuran spesifik */
#text-input {
  width: 50%;
  height: 10%;
  top: 55%;
  left: 50%;
}

#greeting {
  position: absolute;
  border: none;
  border-radius: 0;
  font-size: 1.1vw;
  text-align: center;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  font-family: "Solway", serif; /* pastikan input juga memakai Solway */
  outline: none;
  z-index: 9999;
  transition: all 0.3s ease;
  font-weight: bold;
  color: #15789a;
  top: 5.5%;
  left: 74%;
}

/* Gaya untuk Container Popup (Overlay) */
.popup-container {
  display: none; /* Sembunyikan secara default */
  position: fixed; /* Tetap di layar meski di-scroll */
  z-index: 9999; /* Pastikan di atas konten lainnya */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Background gelap transparan */
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.3s;
}

/* Gaya untuk Konten Popup */
.popup-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border-radius: 12px;
  width: 80%;
  max-width: 700px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  animation: slideIn 0.4s;
}

/* Gaya untuk Gambar di dalam Popup */
.popup-content img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

/* Gaya untuk Tombol Close (X) */
.popup-close-btn {
  position: absolute;
  top: 10px;
  right: 30px;
  color: #aaa;
  font-size: 50px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s;
}

.popup-close-btn:hover {
  color: #fc0202;
}

/* Animasi saat muncul */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* games */

canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; /* UBAHAN: Di bawah titik, di atas background */
}
.point {
  width: 2.2%;
  height: 4%;
  border-radius: 50%;
  background: #f5b6c0;
  position: absolute;
  cursor: pointer;
  border: 3px solid white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s, background 0.3s;
  z-index: 2; /* TAMBAHAN: Pastikan titik di atas canvas */
}

.point.active {
  background: #fedae0;
  transform: scale(1.3);
}

.point:hover {
  background: #e5405c;
  transform: scale(1.2);
}

#p1 {
  top: 29%;
  left: 23.8%;
}
#p2 {
  top: 39%;
  left: 23.8%;
}
#p3 {
  top: 49%;
  left: 23.8%;
}
#p4 {
  top: 59%;
  left: 23.8%;
}
#p5 {
  top: 69%;
  left: 23.8%;
}
#p6 {
  top: 79%;
  left: 23.8%;
}

#q1 {
  top: 29%;
  right: 57%;
}
#q2 {
  top: 39%;
  right: 57%;
}
#q3 {
  top: 49%;
  right: 57%;
}
#q4 {
  top: 59%;
  right: 57%;
}
#q5 {
  top: 69%;
  right: 57%;
}
#q6 {
  top: 79%;
  right: 57%;
}

#reset-btn {
  position: absolute;
  bottom: 6%;
  left: 8%;
  transform: translateX(-50%);
  padding: 1% 1%;
  background: #e74c3c;
  color: white;
  font-weight: 600%;
  border: none;
  border-radius: 30%;
  cursor: pointer;
  transition: background 0.3s;
  z-index: 10;
}

#reset-btn:hover {
  background: #c0392b;
}

.video-container {
  position: absolute;
  transform: translate(-50%, -50%);
  height: auto;
  border: 0px solid #ccc;
  border-radius: 0px;
  overflow: hidden;
}

.video-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

#vidanimasi1 {
  width: 22.5%;
  top: 59%;
  left: 26.5%;
}
#vidanimasi2 {
  width: 18.4%;
  top: 61%;
  left: 27.5%;
}
#vidanimasi3 {
  width: 29%;
  top: 61%;
  left: 27%;
}
#vidanimasi4 {
  width: 29%;
  top: 61%;
  left: 27.5%;
}
#vidanimasi5 {
  width: 31%;
  top: 60%;
  left: 29%;
}
#vidanimasi6 {
  width: 11%;
  top: 51%;
  left: 15%;
  z-index: 100;
}
#vidanimasi7 {
  width: 5%;
  top: 91%;
  left: 16%;
  z-index: 100;
}
/*  */
/* Gaya makanan bulat */
.food-list {
  width: 6%;
  position: absolute;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
  border: 1px dashed #7d7d7d;
  z-index: 10;
  border-radius: 50%;
  cursor: grab;
  overflow: hidden;
}

.food-list:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

.food-list:active {
  transform: translate(-50%, -50%) scale(0.95);
}

.food-list img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Kolom zat gizi */
.column {
  position: absolute;
  top: 29%;
  width: 5%;
  height: 45%;
  background-color: transparent;
  border-radius: 10%;
  border: 2px dashed #555;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10%; /* jarak antar slot */
  padding: 1%;
  padding-top: 7%;
  z-index: 9999;
}

/* Slot lingkaran */
.slot {
  width: 100%;
  aspect-ratio: 1 / 1; /* supaya benar-benar bulat */
  border: 2px dashed #aaa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  transition: all 0.2s ease;
  overflow: hidden; /* jaga gambar tetap bulat */
  cursor: grab;
  margin-bottom: 20%; /* atur bebas: px, %, rem */
}

.slot:hover {
  border-color: #444;
  transform: scale(1.05);
}

/* Slot yang sudah berisi gambar */
.slot.filled {
  border-color: transparent;
}

/* Gambar di dalam slot */
.slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Posisi contoh */
#food1 {
  top: 35%;
  left: 15%;
  aspect-ratio: 1 / 1; /* menjaga bentuk tetap bulat */
}
#food2 {
  top: 47%;
  left: 15%;
  aspect-ratio: 1 / 1; /* menjaga bentuk tetap bulat */
}
#food3 {
  top: 59%;
  left: 15%;
  aspect-ratio: 1 / 1; /* menjaga bentuk tetap bulat */
}
#food4 {
  top: 71%;
  left: 15%;
  aspect-ratio: 1 / 1; /* menjaga bentuk tetap bulat */
}
#food5 {
  top: 83%;
  left: 15%;
  aspect-ratio: 1 / 1; /* menjaga bentuk tetap bulat */
}

#food6 {
  top: 35%;
  left: 23%;
  aspect-ratio: 1 / 1; /* menjaga bentuk tetap bulat */
}
#food7 {
  top: 47%;
  left: 23%;
  aspect-ratio: 1 / 1; /* menjaga bentuk tetap bulat */
}
#food8 {
  top: 59%;
  left: 23%;
  aspect-ratio: 1 / 1; /* menjaga bentuk tetap bulat */
}
#food9 {
  top: 71%;
  left: 23%;
  aspect-ratio: 1 / 1; /* menjaga bentuk tetap bulat */
}
#food10 {
  top: 83%;
  left: 23%;
  aspect-ratio: 1 / 1; /* menjaga bentuk tetap bulat */
}

#food11 {
  top: 35%;
  left: 77%;
  aspect-ratio: 1 / 1; /* menjaga bentuk tetap bulat */
}
#food12 {
  top: 47%;
  left: 77%;
  aspect-ratio: 1 / 1; /* menjaga bentuk tetap bulat */
}
#food13 {
  top: 59%;
  left: 77%;
  aspect-ratio: 1 / 1; /* menjaga bentuk tetap bulat */
}
#food14 {
  top: 71%;
  left: 77%;
  aspect-ratio: 1 / 1; /* menjaga bentuk tetap bulat */
}
#food15 {
  top: 83%;
  left: 77%;
  aspect-ratio: 1 / 1; /* menjaga bentuk tetap bulat */
}

#food16 {
  top: 35%;
  left: 85%;
  aspect-ratio: 1 / 1; /* menjaga bentuk tetap bulat */
}
#food17 {
  top: 47%;
  left: 85%;
  aspect-ratio: 1 / 1; /* menjaga bentuk tetap bulat */
}
#food18 {
  top: 59%;
  left: 85%;
  aspect-ratio: 1 / 1; /* menjaga bentuk tetap bulat */
}
#food19 {
  top: 71%;
  left: 85%;
  aspect-ratio: 1 / 1; /* menjaga bentuk tetap bulat */
}
#food20 {
  top: 83%;
  left: 85%;
  aspect-ratio: 1 / 1; /* menjaga bentuk tetap bulat */
}

/* Kolom zat gizi */

/* Posisi fix tiap kolom */
#kolomK {
  left: 29.2%;
}
#kolomP {
  left: 37.8%;
}
#kolomL {
  left: 46.4%;
}
#kolomV {
  left: 55%;
}
#kolomM {
  left: 63.6%;
}

.character {
  position: absolute;
  width: 6.5%;
  cursor: pointer;
  transition: transform 0.2s;
  z-index: 9999;
}

.character:hover {
  transform: scale(1.1);
}

.character img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#birgy {
  top: 38%;
  left: 21%;
}
#icey {
  top: 56%;
  left: 21%;
}
#pizzano {
  top: 73.5%;
  left: 21%;
}

.wall {
  position: absolute; /* Posisi absolut di dalam #labyrinth-container */
  /* background-color: #555;
  border: 1px solid #000; */
  box-sizing: border-box; /* Agar border tidak menambah ukuran */
  border-radius: 20%;
}

#wall1 {
  top: 25%;
  left: 15%;
  width: 60%;
  height: 2%;
}
#wall2 {
  top: 15%;
  left: 23%;
  width: 2%;
  height: 80%;
}
#wall3 {
  top: 15%;
  left: 70%;
  width: 2%;
  height: 80%;
}
#wall4 {
  top: 87%;
  left: 19%;
  width: 60%;
  height: 2%;
}
#wall5 {
  top: 70.5%;
  left: 9%;
  width: 20%;
  height: 10%;
}
#wall6 {
  top: 53%;
  left: 9%;
  width: 20%;
  height: 10%;
}
#wall7 {
  top: 25%;
  left: 9%;
  width: 20%;
  height: 20%;
}
#wall8 {
  top: 70.3%;
  left: 33%;
  width: 9.5%;
  height: 10.5%;
}
#wall9 {
  top: 77%;
  left: 39.5%;
  width: 7%;
  height: 3.9%;
  border-radius: 40%;
}
#wall10 {
  top: 75%;
  left: 35.5%;
  width: 8%;
  height: 2%;
}
#wall11 {
  /* lingkaran */
  top: 64.5%;
  left: 47%;
  width: 3%;
  height: 4%;
  border-radius: 100%;
}
#wall12 {
  top: 53%;
  left: 33%;
  width: 9.5%;
  height: 10.5%;
}
#wall13 {
  top: 53%;
  left: 39.5%;
  width: 7%;
  height: 3.9%;
  border-radius: 40%;
}
#wall14 {
  top: 56.5%;
  left: 35.5%;
  width: 8%;
  height: 2%;
}
#wall15 {
  top: 33%;
  left: 33%;
  width: 13.6%;
  height: 13%;
}
#wall16 {
  top: 33%;
  left: 50.3%;
  width: 20%;
  height: 13%;
}

#wall17 {
  top: 70.3%;
  left: 54.6%;
  width: 16%;
  height: 10.5%;
}
#wall18 {
  top: 77%;
  left: 50.5%;
  width: 7%;
  height: 3.9%;
  border-radius: 40%;
}
#wall19 {
  top: 75%;
  left: 53.5%;
  width: 8%;
  height: 2%;
}

#wall20 {
  top: 53%;
  left: 54.6%;
  width: 16%;
  height: 10.5%;
}
#wall21 {
  top: 53%;
  left: 50.5%;
  width: 7%;
  height: 3.9%;
  border-radius: 40%;
}
#wall22 {
  top: 56.5%;
  left: 53.5%;
  width: 8%;
  height: 2%;
}

.organ {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform 0.3s ease;
  z-index: 10; /* pastikan di atas media */
  width: 1%;
}

.organ:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

.organ:active {
  transform: translate(-50%, -50%) scale(0.95);
}

.organ img {
  width: 100%;
  height: auto;
  display: block;
}

#organ1 {
  top: 49%;
  left: 35%;
  width: 4%;
}

#organ2 {
  top: 84%;
  left: 35%;
  width: 3%;
}
#organ3 {
  top: 30%;
  left: 40%;
  width: 3%;
}
#organ4 {
  top: 84%;
  left: 67%;
  width: 4%;
  /* otak */
}
#organ5 {
  top: 67%;
  left: 67%;
  width: 4%;
  /* otak */
}
#organ6 {
  top: 84%;
  left: 45%;
  width: 3%;
}
#organ7 {
  top: 67%;
  left: 53.5%;
  width: 3%;
}
#organ8 {
  top: 67%;
  left: 43.5%;
  width: 3%;
}
#organ9 {
  top: 54%;
  left: 48.5%;
  width: 2.4%;
}
#organ10 {
  top: 50%;
  left: 67%;
  width: 4%;
}
#organ11 {
  top: 42%;
  left: 48.5%;
  width: 3%;
}
#organ12 {
  top: 30%;
  left: 54%;
  width: 4%;
}
#organ13 {
  top: 30%;
  left: 67%;
  width: 4%;
}
#organ14 {
  top: 52%;
  left: 81%;
  width: 18%;
}

/* Tombol cek jawaban */
.btn-check {
  position: absolute;
  width: 8%;
  top: 90%;
  left: 90%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 20;
  transition: transform 0.3s ease;
}
.btn-check:hover {
  transform: translate(-50%, -50%) scale(1.2);
}

/* Suara efek hilang (tidak tampak visual) */
audio {
  display: none;
}

.notif {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 25px 40px;
  font-family: "Comic Sans MS", cursive;
  font-size: 1.8em;
  color: #222;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  text-align: center;
  z-index: 9999;
  transition: all 0.3s ease;
  opacity: 0;
}

.notif.show {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.notif.correct {
  background: #a6ff8f;
  color: #006400;
  animation: popCorrect 0.6s ease;
}

.notif.wrong {
  background: #ff8f8f;
  color: #640000;
  animation: popWrong 0.6s ease;
}

@keyframes popCorrect {
  0% {
    transform: translate(-50%, -50%) scale(0);
  }
  60% {
    transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes popWrong {
  0% {
    transform: translate(-50%, -50%) rotate(-10deg) scale(0);
  }
  50% {
    transform: translate(-50%, -50%) rotate(10deg) scale(1.2);
  }
  100% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
}

.correct-line {
  filter: drop-shadow(0 0 6px #2ecc71);
}

.wrong-line {
  filter: drop-shadow(0 0 6px #e74c3c);
}

.slot.drag-over {
  border-color: #4caf50; /* Warna hijau untuk menandai boleh di-drop */
  background-color: rgba(76, 175, 80, 0.2); /* Background hijau transparan */
  transform: scale(1.05); /* Sedikit membesar */
  cursor: grabbing;
}

.food-list.drag-over {
  border-color: #4caf50;
  background-color: rgba(76, 175, 80, 0.1);
}
/* Tambahkan ke file CSS Anda */
.dragging {
  opacity: 0.6; /* Gambar menjadi sedikit transparan saat diseret */
  cursor: grabbing;

  /* INI ADALAH BAGIAN TERPENTING */
  /* Elemen ini tidak akan lagi menangkap event mouse, 
     sehingga event akan "tembus" ke elemen di bawahnya */
  pointer-events: none;
}

/* Opsional: Pastikan slot memiliki kursor yang tepat */
.slot {
  cursor: grab; /* Kursor tangan sebelum di-drag */
}

/* --- Notifikasi GJF --- */
/* ============================
   GJF NOTIFICATION
   ============================ */
.gjf-notif-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.gjf-notif {
  min-width: 260px;
  padding: 25px 40px;
  border-radius: 14px;
  color: #fff;
  font-family: "Poppins", sans-serif;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateX(50px);
  animation: gjfSlideIn 0.4s ease forwards;
  text-align: center;

  position: fixed;
  top: 10%;
  left: 40%;
  text-align: center;
  z-index: 9999;
}
.gjf-notif.correct {
  background: linear-gradient(135deg, #37c76a, #2a9f55);
}

.gjf-notif.incorrect {
  background: linear-gradient(135deg, #ff5f5f, #d63c3c);
}

.gjf-title {
  font-size: 17px;
  font-weight: 700;
}

.gjf-message {
  margin-top: 4px;
  font-size: 14px;
}

/* Animasi notifikasi masuk */
@keyframes gjfSlideIn {
  from {
    opacity: 0;
    transform: translateX(60px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Animasi keluar */
@keyframes gjfFadeOut {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(60px) scale(0.9);
  }
}