/* ==========================================================================
   MASKOT — lapisan maskot di tepi bawah halaman

   Berkas terpisah dari `styles.css`, dan itu bukan soal ukuran: maskot adalah
   satu-satunya bagian halaman yang boleh hilang tanpa merusak apa pun. Kalau
   asetnya belum dipotong dari lembar, `maskot.js` berhenti sebelum membangun
   apa-apa — dan lembar gaya yang tidak menyentuh satu pun aturan laporan
   membuat "berhenti" itu benar-benar tidak berakibat.

   Yang dipakai dari sistem token `styles.css`: --kaca-padat, --garis, --tinta,
   --aksen, --kilau, --bayang-3, --r3..--r5, --cepat. Jadi menunya ikut berubah
   di keenam tema tanpa satu pun nilai warna yang ditulis ulang di sini.
   ========================================================================== */

/* Lapisannya menutupi jendela tapi TIDAK menangkap penunjuk — cuma maskot,
   menu, dan tombol panggilnya yang bisa diklik. Kalau lapisannya sendiri
   menangkap penunjuk, seluruh tepi bawah halaman (termasuk baris terakhir
   tabel) jadi tidak bisa diklik oleh sesuatu yang tidak terlihat.

   z-index 70: di atas isi halaman dan bilah atas (60), tapi di bawah tirai
   lembar (90) dan panel obrolan (100). Maskot yang menimpa dialog akan
   terbaca sebagai bug, bukan sebagai maskot. */
.maskot-lapis {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  overflow: hidden;
}

.maskot {
  position: absolute;
  left: 0;
  bottom: 10px;          /* = TANAH di maskot.js */
  width: 0;
  height: 0;
  will-change: transform;
}

/* Titik jangkar maskot ada di KAKI (0,0 elemen ini), jadi semua anaknya
   ditempel dari bawah. `transform-origin` di titik yang sama membuat pantulan
   jalan, tekukan mendarat, dan napas diam semuanya berputar dari pijakan —
   bukan dari tengah gambar, yang selalu terbaca sebagai melayang. */
.maskot-tubuh {
  position: absolute;
  left: 0;
  bottom: 0;
  transform-origin: 0 100%;
  will-change: transform;
}

.maskot-pose {
  position: absolute;
  left: 0;
  bottom: 0;
  display: none;
  /* Gambarnya tidak pernah dibesarkan lewat CSS (lihat `hitungSkala`), jadi
     yang dibutuhkan cuma penghalusan bawaan peramban. `pixelated` sengaja
     TIDAK dipakai: aset ini gambar cel halus, bukan pixel art, dan
     `pixelated` akan mengubah garis 1 px-nya jadi tangga. */
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.maskot-pose.on { display: block; }

/* Bayangan tanah milik lapisan ini, bukan milik sprite. Pekat & lebarnya
   diatur `maskot.js` dari ketinggian: nol saat memijak (pose yang memijak
   sudah punya bayangan sendiri di aset), tumbuh saat digendong atau melompat. */
.maskot-bayang {
  position: absolute;
  left: -34px;
  bottom: -6px;
  width: 68px;
  height: 15px;
  opacity: 0;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent);
  transform-origin: 50% 50%;
  pointer-events: none;
}

/* Kotak sentuh mengikuti BADAN pose (diukur `potong-maskot.py`), bukan kotak
   gambarnya: kotak gambar pose tidur melebar jauh ke kanan oleh huruf "z" yang
   mengambang, dan kotak sentuh sebesar itu akan mencuri klik dari halaman di
   tempat yang kelihatannya kosong. Sudutnya dibulatkan besar dengan alasan
   yang sama — pojok kotak selalu bagian yang transparan. */
.maskot-sentuh {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 42% 42% 30% 30% / 38% 38% 22% 22%;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;    /* menggeser maskot tidak boleh ikut menggulir halaman */
  -webkit-tap-highlight-color: transparent;
}
.maskot-sentuh:focus-visible {
  outline: 2px solid var(--aksen);
  outline-offset: 3px;
}
.maskot.digendong .maskot-sentuh { cursor: grabbing; }

/* --- balon emote ---------------------------------------------------------
   Di luar `.maskot-tubuh` supaya tidak ikut dicerminkan waktu maskot
   menghadap kiri: hati yang terbalik masih terbaca, tapi "z z z" yang
   terbalik tidak. */
.maskot-emote {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translate(-50%, 6px) scale(.4);
  opacity: 0;
  pointer-events: none;
  transition: transform 260ms cubic-bezier(.2, 1.5, .4, 1), opacity var(--cepat, 140ms) ease;
}
.maskot-emote.on {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.maskot-emote img { display: block; user-select: none; }

.maskot-efek {
  position: absolute;
  left: 0;
  bottom: 0;
  pointer-events: none;
}

/* Kepulan sekali pakai: debu langkah, kilau saat dicolek, tetes keringat saat
   digendong. Elemennya dibuang sendiri di `animationend`. */
.maskot-kepul {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateX(-50%);
  animation: maskot-kepul 780ms ease-out forwards;
  user-select: none;
}

@keyframes maskot-kepul {
  0%   { opacity: 0;   transform: translate(-50%, 4px)   scale(.5); }
  22%  { opacity: .95; transform: translate(-50%, -6px)  scale(1); }
  100% { opacity: 0;   transform: translate(-50%, -22px) scale(1.25); }
}

/* --- menu ganti maskot --------------------------------------------------- */
.maskot-menu {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: var(--kaca-padat, rgba(28, 24, 20, .92));
  border: 1px solid var(--garis, rgba(255, 255, 255, .12));
  border-radius: var(--r5, 24px);
  box-shadow: var(--bayang-3, 0 10px 30px rgba(0, 0, 0, .35)), inset 0 1px 0 var(--kilau, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(6px) scale(.94);
  transform-origin: 50% 100%;
  transition: opacity var(--cepat, 140ms) ease, transform 200ms cubic-bezier(.2, 1.4, .4, 1);
}
.maskot-menu.on { opacity: 1; transform: none; }

.maskot-pilih,
.maskot-tutup {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--tinta, #f0e6da);
  cursor: pointer;
  transition: background var(--cepat, 140ms) ease, transform var(--cepat, 140ms) ease,
              border-color var(--cepat, 140ms) ease;
}
.maskot-pilih img {
  width: 38px;
  height: auto;
  display: block;
  /* Ikon mini tokoh yang TIDAK dipilih diredupkan, bukan diburamkan: yang
     perlu terbaca justru wajahnya, karena wajah itulah nama tombolnya. */
  opacity: .58;
  transition: opacity var(--cepat, 140ms) ease;
}
.maskot-pilih[aria-pressed="true"] {
  background: color-mix(in srgb, var(--aksen, #d99a63) 22%, transparent);
  border-color: color-mix(in srgb, var(--aksen, #d99a63) 45%, transparent);
}
.maskot-pilih[aria-pressed="true"] img { opacity: 1; }
.maskot-pilih:hover img { opacity: .9; }
.maskot-pilih:hover,
.maskot-tutup:hover { background: color-mix(in srgb, var(--tinta, #fff) 10%, transparent); }
.maskot-pilih:focus-visible,
.maskot-tutup:focus-visible { outline: 2px solid var(--aksen); outline-offset: 2px; }

.maskot-tutup { width: 34px; height: 34px; opacity: .75; }
.maskot-tutup svg { width: 15px; height: 15px; }
.maskot-tutup:hover { opacity: 1; }

/* --- tombol panggil (saat maskot disembunyikan) --------------------------
   Sengaja kecil dan di pojok: satu-satunya gunanya adalah membuat keputusan
   "sembunyikan" bisa dibatalkan. Kalau tidak ada, satu klik sembunyi jadi
   pintu satu arah yang cuma bisa dibuka lewat localStorage. */
.maskot-panggil {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--garis, rgba(255, 255, 255, .12));
  border-radius: 50%;
  background: var(--kaca-padat, rgba(28, 24, 20, .92));
  box-shadow: var(--bayang-2, 0 6px 18px rgba(0, 0, 0, .3));
  backdrop-filter: blur(10px);
  cursor: pointer;
  pointer-events: auto;
  opacity: .5;
  transition: opacity var(--cepat, 140ms) ease, transform var(--cepat, 140ms) ease;
}
.maskot-panggil:hover { opacity: 1; transform: translateY(-2px); }
.maskot-panggil:focus-visible { outline: 2px solid var(--aksen); outline-offset: 2px; }
.maskot-panggil img { width: 30px; height: auto; display: block; }

/* Di layar sempit tombol panggilnya digeser ke kiri: pojok kanan bawah di
   ponsel sudah ditempati tombol obrolan. */
@media (max-width: 620px) {
  .maskot-panggil { right: auto; left: 14px; }
}

/* Setelan "kurangi gerak" tidak mematikan maskot — dia tetap ada dan tetap
   bisa diajak main (lihat `otak()`), yang berhenti cuma keliling sendiri dan
   kepulan efeknya. Transisi balon & menu tetap dibiarkan: keduanya pendek,
   kecil, dan dipicu oleh tindakan orangnya sendiri. */
@media (prefers-reduced-motion: reduce) {
  .maskot-kepul { animation-duration: 1ms; opacity: 0; }
  .maskot-emote { transition-duration: 90ms; }
}