/* Kerajaan Kaisar — static/r3-d.css: gaya ronde 3 Kelompok D
   (Ide 9 Sekolah, Ide 13 Cerita, Ide 14 Notifikasi).
   Dipasang koordinator lewat <link> di index.html (lihat laporan).
   Aturan modul: style.css (558 baris) TIDAK disentuh — semua gaya
   baru ada di berkas ini. Modul JS juga menyuntik sebagian kecil
   gaya yang sama sebagai cadangan bila <link> ini belum dipasang,
   supaya panel tetap berfungsi. */

/* ---- kartu warga: blok sekolah ---- */
.r3d-school {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #d4af37;
  border-radius: 10px;
  background: rgba(212, 175, 55, .08);
  overflow-wrap: break-word;
}
.r3d-school h4 { margin: 0 0 6px; font-size: 14px; }

/* ---- panel Cerita: kartu bab ---- */
.r3d-chapter {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #d4af37;
  border-radius: 10px;
  background: rgba(212, 175, 55, .06);
}
.r3d-chapter.locked { opacity: .6; }
.r3d-chapter-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.r3d-task {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(212, 175, 55, .35);
}

/* ---- lonceng notifikasi: badge angka belum dibaca ----
   (Tombol loncengnya sendiri position:absolute dari style.css —
   JANGAN timpa jadi position:relative: itu menggeser tombol
   140px ke atas sampai keluar layar.) */
.r3d-notif-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: #e74c3c;
  color: #fff;
  font: 700 11px/18px sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}
.r3d-notif.unread { background: rgba(212, 175, 55, .10); }

/* ---- penanda 3D campaign (city3d-cerita.js) ---- */
#cerita3dLayer {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
#cerita3dLayer.hidden { display: none; }
.cerita3d-mark {
  position: absolute;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  pointer-events: none;
  animation: cerita3dBob 2s ease-in-out infinite;
}
.cerita3d-mark .bang {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #d4af37 55%, #8a6d1b);
  border: 2px solid #8a6d1b;
  box-shadow: 0 0 14px rgba(212, 175, 55, .95);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5c430a;
  font-weight: 800;
  font-size: 18px;
}
.cerita3d-mark .lbl {
  position: absolute;
  top: 36px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(20, 9, 11, .85);
  color: #ffe9a8;
  font: 600 10px sans-serif;
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid #d4af37;
}
@keyframes cerita3dBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}