/* Container Utama Mandala */
.mandala-container {
  position: fixed;
  width: 220px;
  height: 220px;
  z-index: 50;
  top: 100px;
  right: 270px;
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.3));
  transition: transform 0.5s ease;
}

/* Background Lingkaran Luar */
.bg-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
}

/* Base Style untuk Setiap Kelopak Terpisah */
.petal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 2;
  transform-origin: 50% 50%;
  cursor: pointer;
  
  /* DURASI DIPELANHKAN & DILEMBUTKAN: dari 0.4s ke 0.8s dengan ease-in-out */
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), filter 0.8s ease;
}

/* Kelas aktif saat video menyebutkan bagian warna/arah tertentu */
.petal.active-petal {
  transform: scale(2.18) translate(12px, -12px);
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.95));
  z-index: 12;
}

.center-circle.active-center {
  transform: translate(-50%, -50%) scale(2.25);
  box-shadow: 0 0 0 2px #f28a30, 0 0 25px rgba(242, 138, 48, 0.9);
  z-index: 15;
}

/* Pusat / Lingkaran Tengah (Panca Warna) */
.center-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 26.6%;
  height: 26.6%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #ffe49e 0%,
    #ffe49e 26%,
    #f28a30 26.1%,
    #f28a30 52%,
    #d33e23 52.1%,
    #d33e23 76%,
    #3b1812 76.1%,
    #3b1812 87%,
    #ffffff 87.1%,
    #ffffff 100%
  );
  box-shadow: 0 0 0 2px #261614, 0 4px 10px rgba(0, 0, 0, 0.4);
  z-index: 5;
  /* Transisi Panca Warna juga diperhalus menjadi 0.8s */
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.8s ease;
  cursor: pointer;
}

.center-circle:hover {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 0 0 2px #f28a30, 0 0 15px rgba(242, 138, 48, 0.8);
}

/* ========================================================
   Mode Khusus Halaman Arah (Gambar Diam & Teks Dianimasikan)
   ======================================================== */
.mandala-container.no-petal-anim .petal,
.mandala-container.no-petal-anim .center-circle {
  transition: none !important;
  cursor: default !important;
}
.mandala-container.no-petal-anim .center-circle:hover {
  transform: translate(-50%, -50%) !important;
  box-shadow: 0 0 0 2px #261614, 0 4px 10px rgba(0, 0, 0, 0.4) !important;
}

/* Base Style untuk 9 Label Teks Arah di Atas Gambar */
.arah-label {
  position: absolute;
  font-family: 'Baloo Bhai 2', 'Comic Neue', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 9999px;
  z-index: 25;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  
  /* Tampilan default: badge bersih, kontras di atas semua warna kelopak */
  background: rgba(255, 255, 255, 0.95);
  color: #1e293b;
  border: 1.5px solid #ea580c;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
  
  /* Transisi halus untuk kombinasi position + scale */
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.4s ease,
              color 0.4s ease,
              border-color 0.4s ease,
              box-shadow 0.5s ease;
}

.arah-label:hover {
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.5);
}

/* State Aktif saat Video Audio Menyebutkan Arah Tersebut */
.arah-label.active-arah {
  z-index: 45;
  background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
  color: #ffffff;
  border-color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.95), 0 6px 14px rgba(0, 0, 0, 0.45);
}

/* Posisi Masing-Masing Label (Resting & Active Position + Scale) */
/* 1. Utara (Top - 12 o'clock) */
.label-utara {
  top: 14%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
}
.label-utara.active-arah {
  transform: translate(-50%, calc(-50% - 15px)) scale(2.35);
}

/* 2. Timur Laut (Top Right - 1:30 o'clock) */
.label-timurlaut {
  top: 24.5%;
  left: 75.5%;
  transform: translate(-50%, -50%) scale(1);
}
.label-timurlaut.active-arah {
  transform: translate(calc(-50% + 11px), calc(-50% - 11px)) scale(2.35);
}

/* 3. Timur (Right - 3 o'clock) */
.label-timur {
  top: 50%;
  left: 86%;
  transform: translate(-50%, -50%) scale(1);
}
.label-timur.active-arah {
  transform: translate(calc(-50% + 15px), -50%) scale(2.35);
}

/* 4. Tenggara (Bottom Right - 4:30 o'clock) */
.label-tenggara {
  top: 75.5%;
  left: 75.5%;
  transform: translate(-50%, -50%) scale(1);
}
.label-tenggara.active-arah {
  transform: translate(calc(-50% + 11px), calc(-50% + 11px)) scale(2.35);
}

/* 5. Selatan (Bottom - 6 o'clock) */
.label-selatan {
  top: 86%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
}
.label-selatan.active-arah {
  transform: translate(-50%, calc(-50% + 15px)) scale(2.35);
}

/* 6. Barat Daya (Bottom Left - 7:30 o'clock) */
.label-baratdaya {
  top: 75.5%;
  left: 24.5%;
  transform: translate(-50%, -50%) scale(1);
}
.label-baratdaya.active-arah {
  transform: translate(calc(-50% - 11px), calc(-50% + 11px)) scale(2.35);
}

/* 7. Barat (Left - 9 o'clock) */
.label-barat {
  top: 50%;
  left: 14%;
  transform: translate(-50%, -50%) scale(1);
}
.label-barat.active-arah {
  transform: translate(calc(-50% - 15px), -50%) scale(2.35);
}

/* 8. Barat Laut (Top Left - 10:30 o'clock) */
.label-baratlaut {
  top: 24.5%;
  left: 24.5%;
  transform: translate(-50%, -50%) scale(1);
}
.label-baratlaut.active-arah {
  transform: translate(calc(-50% - 11px), calc(-50% - 11px)) scale(2.35);
}

/* 9. Tengah (Center) */
.label-tengah {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
}
.label-tengah.active-arah {
  transform: translate(-50%, -50%) scale(2.35);
}

/* ========================================================
   Mode Khusus Gambar Dewa di Atas Kelopak Mandala
   ======================================================== */
.dewa-item {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 25;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  
  /* Transisi halus untuk position + scale */
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease;
}

.dewa-img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  background: #ffffff;
  border: 2px solid #f59e0b;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.dewa-name {
  font-family: 'Baloo Bhai 2', 'Comic Neue', sans-serif;
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  padding: 1.5px 6px;
  margin-top: 2px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.95);
  color: #1e293b;
  border: 1px solid #ea580c;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Hover effect */
.dewa-item:hover .dewa-img {
  border-color: #ffd700;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.8);
}

/* State Aktif saat Video Audio Menyebutkan Dewa Tersebut */
.dewa-item.active-dewa {
  z-index: 50;
}

.dewa-item.active-dewa .dewa-img {
  border-color: #ffffff;
  box-shadow: 0 0 20px rgba(245, 158, 11, 1), 0 0 35px rgba(234, 88, 12, 0.8), 0 8px 20px rgba(0, 0, 0, 0.5);
}

.dewa-item.active-dewa .dewa-name {
  background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
  color: #ffffff;
  border-color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.95);
}

/* Dukungan active-dewa untuk kombinasi position + scale */
.label-utara.active-dewa {
  transform: translate(-50%, calc(-50% - 15px)) scale(2.35);
}
.label-timurlaut.active-dewa {
  transform: translate(calc(-50% + 11px), calc(-50% - 11px)) scale(2.35);
}
.label-timur.active-dewa {
  transform: translate(calc(-50% + 15px), -50%) scale(2.35);
}
.label-tenggara.active-dewa {
  transform: translate(calc(-50% + 11px), calc(-50% + 11px)) scale(2.35);
}
.label-selatan.active-dewa {
  transform: translate(-50%, calc(-50% + 15px)) scale(2.35);
}
.label-baratdaya.active-dewa {
  transform: translate(calc(-50% - 11px), calc(-50% + 11px)) scale(2.35);
}
.label-barat.active-dewa {
  transform: translate(calc(-50% - 15px), -50%) scale(2.35);
}
.label-baratlaut.active-dewa {
  transform: translate(calc(-50% - 11px), calc(-50% - 11px)) scale(2.35);
}
.label-tengah.active-dewa {
  transform: translate(-50%, -50%) scale(2.35);
}

/* ========================================================
   Mode Khusus Gambar Senjata di Atas Kelopak Mandala
   ======================================================== */
.senjata-item {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 25;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  
  /* Transisi halus untuk position + scale */
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease;
}

.senjata-img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: contain;
  background: #ffffff;
  padding: 2px;
  border: 2px solid #f59e0b;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.senjata-name {
  font-family: 'Baloo Bhai 2', 'Comic Neue', sans-serif;
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  padding: 1.5px 6px;
  margin-top: 2px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.95);
  color: #1e293b;
  border: 1px solid #ea580c;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Hover effect */
.senjata-item:hover .senjata-img {
  border-color: #ffd700;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.8);
}

/* State Aktif saat Video Audio Menyebutkan Senjata Tersebut */
.senjata-item.active-senjata {
  z-index: 50;
}

.senjata-item.active-senjata .senjata-img {
  border-color: #ffffff;
  box-shadow: 0 0 20px rgba(245, 158, 11, 1), 0 0 35px rgba(234, 88, 12, 0.8), 0 8px 20px rgba(0, 0, 0, 0.5);
}

.senjata-item.active-senjata .senjata-name {
  background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
  color: #ffffff;
  border-color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.95);
}

/* Dukungan active-senjata untuk kombinasi position + scale */
.label-utara.active-senjata {
  transform: translate(-50%, calc(-50% - 15px)) scale(2.35);
}
.label-timurlaut.active-senjata {
  transform: translate(calc(-50% + 11px), calc(-50% - 11px)) scale(2.35);
}
.label-timur.active-senjata {
  transform: translate(calc(-50% + 15px), -50%) scale(2.35);
}
.label-tenggara.active-senjata {
  transform: translate(calc(-50% + 11px), calc(-50% + 11px)) scale(2.35);
}
.label-selatan.active-senjata {
  transform: translate(-50%, calc(-50% + 15px)) scale(2.35);
}
.label-baratdaya.active-senjata {
  transform: translate(calc(-50% - 11px), calc(-50% + 11px)) scale(2.35);
}
.label-barat.active-senjata {
  transform: translate(calc(-50% - 15px), -50%) scale(2.35);
}
.label-baratlaut.active-senjata {
  transform: translate(calc(-50% - 11px), calc(-50% - 11px)) scale(2.35);
}
.label-tengah.active-senjata {
  transform: translate(-50%, -50%) scale(2.35);
}

/* Responsif Layar Laptop Sedang / Tablet */
@media (max-width: 1024px) {
  .mandala-container {
    right: 30px;
    width: 260px;
    height: 260px;
  }
  .arah-label {
    font-size: 11px;
    padding: 3px 9px;
  }
}

/* Responsif Layar Mobile / HP */
@media (max-width: 768px) {
  .mandala-container {
    position: relative;
    top: auto;
    right: auto;
    width: 240px;
    height: 240px;
    margin: 0 auto 20px auto;
  }
  .arah-label {
    font-size: 10.5px;
    padding: 2.5px 8px;
  }
}