/* Petak Umpet Hewan — gaya khusus game ini. Satuan pakai var(--u); token Gaya Pulau (--mp-*, --lv-*) dari ../style.css.
   Catatan: .f.on (style.css) memakai `transform`, jadi animasi di sini memakai properti terpisah rotate/translate/scale.
   Semua animasi hanya bumbu: konten (hewan yang mengintip, tempat sembunyi) tetap terlihat walau animasi tidak jalan.
   File ini dimuat di SEMUA layar → setiap aturan wajib dibatasi di bawah `.farm` (kontainer game) atau `#app.t-farm`. */

/* ---------- latar: peternakan siang (aset clay latar-16x10 / latar-16x9, sesi Asset 14 Okt) ----------
   Latar dipasang di #app (seluruh layar), bukan di .farm: bar atas engine mengambang di atas pemandangan yang sama,
   tanpa pita warna/awan terpotong di bawah bar (permintaan pemilik 14 Okt: bar atas sama di semua game, tanpa gradasi). */
#app.t-farm { background: #a9dcf4 url(../../assets/games/hewan/latar2-16x10.webp) center bottom / cover no-repeat; }
@media (min-aspect-ratio: 17/10) { #app.t-farm { background-image: url(../../assets/games/hewan/latar2-16x9.webp); } }
.t-farm .stage.custom { padding: 0; overflow: hidden; }
.farm {
  /* isolation + z-index 0 = stacking context sendiri: z-index di dalam game (tempat 58–96, chip 300, Petani 400) tidak boleh
     menembus lapisan engine di atas game (popup Keluar z-index 20, dll.) — bug 14 Okt: kucing menembus popup Keluar. */
  position: absolute; inset: 0; z-index: 0; isolation: isolate; overflow: hidden; font-family: var(--mp-font);
}
/* awan berlapis (hewan.clouds, pemilik 14 Okt: "awan melintas di belakang gedung"): langit = latar2 di #app → .sky (awan) → .front
   (latar2-depan, langit transparan) → tempat sembunyi. .sky & .front = position: fixed, inset 0 → kotak SAMA dengan #app
   (cover, center bottom) sehingga pas tepat dengan latar. Animasi hanya bumbu (awan tetap terlihat walau beku). */
.farm .sky { position: fixed; inset: 0 0 62% 0; pointer-events: none; overflow: hidden; }
.farm .front { position: fixed; inset: 0; pointer-events: none;
  background: url(../../assets/games/hewan/latar2-depan-16x10.webp) center bottom / cover no-repeat; }
@media (min-aspect-ratio: 17/10) { .farm .front { background-image: url(../../assets/games/hewan/latar2-depan-16x9.webp); } }
.farm .sky .cloud {
  position: absolute; left: -25%; width: calc(var(--u) * var(--w, 14)); height: auto; scale: var(--m, 1) 1;
  animation: hw-drift var(--d, 80s) linear infinite; animation-delay: var(--dl, 0s);
}
.farm .spots { position: absolute; inset: 0; transition: opacity .35s ease; }
.farm.paused, .farm.paused * { animation-play-state: paused !important; }   /* dijeda engine (popup) */
.farm .spots.away { opacity: 0; }

/* ---------- tempat sembunyi ---------- */
.farm .spot {
  /* kedalaman: baris depan di atas baris belakang (--z = 2 × y). Tempat yang terbuka turun 1 lapis → hewan yang melompat keluar
     tetap di belakang penutup tetangga sebaris, tetapi di depan baris yang lebih belakang (pemilik 14 Okt). */
  position: absolute; z-index: var(--z, 1);
  width: calc(var(--u) * 22 * var(--k, 1));
  height: calc(var(--u) * 18 * var(--k, 1));
  translate: -50% -100%;              /* left/top = titik pijak di tanah */
  -webkit-tap-highlight-color: transparent;
}
.farm .spot::after { /* bayangan di tanah */
  content: ''; position: absolute; left: 8%; right: 8%; bottom: calc(var(--u) * -1); height: calc(var(--u) * 2.2);
  background: radial-gradient(closest-side, rgba(20,40,20,.25), transparent); z-index: -1;
}
.farm .cover { position: absolute; inset: 0; z-index: 2; transform-origin: 50% 100%; transition: scale .25s ease, translate .25s ease; }
.farm .cover .place { width: 100%; height: 100%; display: block; object-fit: contain; object-position: 50% 100%; }

/* kursor Gaya Pulau: cincin oranye di tanah + panah oranye di kiri, sedikit membesar dengan pegas */
.t-farm .spot.f.on { box-shadow: none; border: 0; }
.farm .spot .ring, .farm .spot .arrow { position: absolute; pointer-events: none; opacity: 0; transition: opacity var(--t-fast, .16s) ease; }
.farm .spot .ring {
  left: -2%; right: -2%; bottom: calc(var(--u) * -2); height: calc(var(--u) * 4.4); z-index: 0; border-radius: 50%;
  border: calc(var(--u) * .7) solid var(--mp-cursor); background: rgba(255, 138, 31, .14);
}
.farm .spot .arrow {
  left: calc(var(--u) * -4.2); top: 46%; translate: 0 -50%; z-index: 5; width: 0; height: 0;
  border-top: calc(var(--u) * 1.8) solid transparent; border-bottom: calc(var(--u) * 1.8) solid transparent;
  border-left: calc(var(--u) * 2.6) solid var(--mp-cursor); filter: drop-shadow(0 calc(var(--u) * .3) 0 rgba(160, 70, 0, .35));
}
.farm .spot.on .ring, .farm .spot.on .arrow { opacity: 1; }
.farm .spot.on .arrow { animation: hw-nudge .6s ease-in-out infinite alternate; }

/* penghuni: mengintip di balik penutup (bagian atasnya saja), melompat keluar saat dibuka */
.farm .hider {
  position: absolute; left: 50%; bottom: var(--hb, 30%); z-index: 1;
  width: 72%; height: 78%;
  translate: -50% 0; scale: .94; transform-origin: 50% 100%;
  transition: bottom .3s ease, translate .3s ease, scale .3s ease;   /* kembali bersembunyi (setelah salah) */
}
.farm .ani { position: absolute; inset: 0; transform-origin: 50% 100%; }   /* absolut: tinggi = wadah, bukan ukuran asli gambar */
.farm .ani .who { width: 100%; height: 100%; display: block; object-fit: contain; object-position: 50% 100%; transition: filter .25s ease; }
.farm .spot:not(.open) .ani { animation: hw-peek 2.6s ease-in-out infinite; animation-delay: var(--dl, 0s); }
/* tingkat 4: yang mengintip hanya bayangannya */
.farm .spot.shade:not(.open) .ani .who { filter: brightness(0) opacity(.62); }

.farm .spot.open .hider {
  /* melompat ke samping (pemilik 14 Okt: lebih natural dari terbang ke atas) dan mendarat di rumput di samping tempat sembunyi.
     Lengkung lompatan = transisi `bottom` dengan kurva bertitik kendali negatif (naik dulu, lalu turun ke tanah); posisi akhir
     tetap benar walau transisi tidak jalan. Kiri = default; .jr (sisi kiri layar) = ke kanan. */
  z-index: 1; bottom: 1%; scale: 1; translate: calc(-50% - 104%) 0;   /* tetap DI BELAKANG penutupnya (pemilik 14 Okt) */
  transition: bottom .5s cubic-bezier(.3, -1.6, .55, 1), translate .5s cubic-bezier(.25, .7, .4, 1), scale .3s ease;
}
.farm .spot.jr.open .hider { translate: calc(-50% + 104%) 0; }
.farm .spot.open { z-index: calc(var(--z, 1) - 1); }
.farm .spot.open .cover { scale: 1.06 .9; }
.farm .spot.yay .ani.d-sway { animation: hw-sway .7s ease-in-out infinite alternate; }
.farm .spot.yay .ani.d-hop, .farm .spot.yay .ani.d-jump { animation: hw-hop .55s ease-in-out infinite; }
.farm .spot.yay .ani.d-jump { animation-duration: .8s; }
.farm .spot.yay .ani.d-wiggle { animation: hw-wiggle .4s ease-in-out infinite alternate; }
.farm .spot.yay .ani.d-waddle { animation: hw-waddle .5s ease-in-out infinite alternate; }
.farm .spot.yay .ani.d-roar { animation: hw-roar 1s ease-in-out infinite; }
.farm .spot.yay .ani.d-spin { animation: hw-spin 1.1s ease-in-out infinite; }
.farm .spot.yay .ani.d-flap { animation: hw-flap .45s ease-in-out infinite alternate; }
.farm .spot.yay .ani.d-buzz { animation: hw-buzz .9s linear infinite; }
.farm .spot.nope .ani { animation: hw-giggle .3s ease-in-out 3; }

/* nama hewan tertulis setelah ketemu (tingkat 2–4), warna tingkat */
.farm .tag {
  position: absolute; left: 50%; bottom: 8%; translate: -50% 0; z-index: 6;   /* papan nama di depan tempat sembunyi */
  padding: calc(var(--u) * .5) calc(var(--u) * 2.2); border-radius: var(--r-pill, 999px);
  font: 800 calc(var(--u) * 3.6 * var(--k, 1)) var(--mp-font); letter-spacing: .06em; white-space: nowrap;   /* ikut skala perspektif */
  background: #fff; color: var(--mp-ink, #1d2b4f); box-shadow: var(--sh-1);
  border: calc(var(--u) * .5) solid var(--lv-c, var(--mp-teal));
  animation: pop .4s var(--ease-spring, ease);
}
.farm .tag.lv-1 { --lv-c: var(--lv-1); } .farm .tag.lv-2 { --lv-c: var(--lv-2); } .farm .tag.lv-3 { --lv-c: var(--lv-3); } .farm .tag.lv-4 { --lv-c: var(--lv-4); }

/* tingkat 1: yang benar bergoyang saat bersuara · bantuan: bergoyang jelas */
.farm .spot.sway .cover, .farm .spot.sway .ani { animation: hw-rustle-big .5s ease-in-out infinite; }
.farm .spot.hint .cover { animation: hw-rustle-big .6s ease-in-out infinite; }
.farm .spot.hint::before {
  content: '✨'; position: absolute; right: calc(var(--u) * -2); top: calc(var(--u) * -2); z-index: 6;
  font-size: calc(var(--u) * 4); font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
  animation: pulse .8s ease-in-out infinite;
}
.farm .spot.off { opacity: .45; filter: grayscale(.7); }

/* penghitung ronde bertema (kait engine `lamps` + ctx.star ikon, 14 Okt): slot "?" → wajah hewan yang ketemu · salah ketat = ✕.
   Dibatasi #app.t-farm: hanya di game ini (juga di layar perayaan, yang memakai tema game). */
#app.t-farm .hud-lights .lamp.themed {
  display: grid; place-items: center; overflow: hidden;
  background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 calc(var(--ds-u) * .3) rgba(255, 255, 255, .55);
}
#app.t-farm .lamp.themed .lq, #app.t-farm .lamp.themed .lx {
  font: 800 calc(var(--ds-u) * 2.2) / 1 var(--mp-font); color: rgba(255, 255, 255, .9); font-style: normal;
}
#app.t-farm .lamp.themed.ok { background: #fff; box-shadow: inset 0 0 0 calc(var(--ds-u) * .35) rgb(47, 191, 91); }
#app.t-farm .lamp.themed .lamp-who {   /* wajah saja: bagian atas gambar hewan, diperbesar */
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; scale: 1.55; transform-origin: 50% 12%; pointer-events: none;
}
#app.t-farm .lamp.themed.bad { background: rgba(110, 120, 140, .7); }
#app.t-farm .farm .spot.show .ani { animation: hw-wiggle .4s ease-in-out infinite alternate; }   /* ketat: "di sini!" */

/* chip tingkat (warna + helper sama dengan panel pilih tingkat di lobby) */
.farm .lvchip {
  position: absolute; left: calc(var(--u) * 2); top: calc(var(--u) * 1.2); z-index: 300;
  display: flex; align-items: center; gap: calc(var(--u) * .8);
  padding: calc(var(--u) * .4) calc(var(--u) * 1.8) calc(var(--u) * .4) calc(var(--u) * .4);
  border-radius: var(--r-pill, 999px); box-shadow: var(--sh-1);
  font: italic 700 var(--fs-label, calc(var(--u) * 1.8)) var(--mp-font);
}
.farm .lvchip .kit.char { width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); object-fit: contain; background: #fff; border-radius: 50%; padding: calc(var(--u) * .3); }
.farm .lvchip.lv-1 { background: var(--lv-1); color: var(--lv-1-ink); } .farm .lvchip.lv-2 { background: var(--lv-2); color: var(--lv-2-ink); }
.farm .lvchip.lv-3 { background: var(--lv-3); color: var(--lv-3-ink); } .farm .lvchip.lv-4 { background: var(--lv-4); color: var(--lv-4-ink); }

/* Petani (host Peternakan) muncul dari kiri bawah saat bercerita */
.farm .host {
  position: absolute; left: calc(var(--u) * -2.5); bottom: calc(var(--u) * -1.5); z-index: 400; height: calc(var(--u) * 18); pointer-events: none;
  translate: -105% 0; transition: translate .35s var(--ease-spring, cubic-bezier(.3, 1.6, .5, 1));
}
.farm .host img { height: 100%; width: auto; display: block; filter: drop-shadow(0 calc(var(--u) * .6) calc(var(--u) * 1) rgba(16, 32, 60, .3)); }
.farm .host.on { translate: 0 0; }
.farm .host.on img { animation: hw-talk .5s ease-in-out infinite alternate; transform-origin: 50% 100%; }

@keyframes hw-drift { from { left: -25%; } to { left: 110%; } }
@keyframes hw-nudge { from { translate: 0 -50%; } to { translate: calc(var(--u) * 1) -50%; } }
@keyframes hw-peek { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3%; } }   /* naik (menjulur), tidak pernah turun di bawah alas */
@keyframes hw-talk { from { scale: 1 1; } to { scale: 1.03 .97; } }
@keyframes hw-rustle-big { 0%, 100% { rotate: 0deg; scale: 1; } 25% { rotate: -5deg; scale: 1.04; } 75% { rotate: 5deg; scale: 1.04; } }
@keyframes hw-sway { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes hw-hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(0) scale(1.1, .9); } 50% { transform: translateY(-22%) scale(.95, 1.06); } 85% { transform: translateY(0) scale(1.08, .92); } }
@keyframes hw-wiggle { from { transform: rotate(-10deg) scale(1.02); } to { transform: rotate(10deg) scale(1.02); } }
@keyframes hw-waddle { from { transform: rotate(-12deg) translateX(-6%); } to { transform: rotate(12deg) translateX(6%); } }
@keyframes hw-roar { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.18); } 60% { transform: scale(1.12) rotate(-4deg); } }
@keyframes hw-spin { 0% { transform: rotate(0); } 60%, 100% { transform: rotate(360deg); } }
@keyframes hw-flap { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-16%) rotate(6deg); } }
@keyframes hw-buzz { 0% { transform: translate(0, 0); } 25% { transform: translate(14%, -10%); } 50% { transform: translate(0, -18%); } 75% { transform: translate(-14%, -10%); } 100% { transform: translate(0, 0); } }
@keyframes hw-giggle { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(8deg) scale(1.05); } }