/* Pukul Monster Huruf — gaya khusus game ini (Gaya Pulau, docs/STYLEGUIDE.md §8).
   Arena = latar venue Labirin Huruf (assets/arena/labirin-huruf/, kamera iso sprite), berskala ikut kanvas 16:10 (satuan cqh/cqw di .arena).
   Tumpukan: latar → cincin-belakang → warga (per celah) → cincin-depan → ikon posisi. UI (chip tingkat, gelembung) pakai var(--u). Konten tidak pernah disembunyikan animasi: naik/turun NPC diatur class (.up). */

#app.t-monster { background: #8fd17a; }
#app.t-monster > .top { position: relative; z-index: 3; }

.wm { position: fixed; inset: 0; z-index: 0; overflow: hidden; font-family: var(--mp-font); color: var(--mp-ink); }

/* ---------- arena: kotak 16:10 yang menutupi layar (TV 16:9 terpotong atas/bawah) ---------- */
/* TV 16:9: kelebihan tinggi dipotong 76% di ATAS, 24% di bawah (kanvas 2528: ±120 / ±38 px). Ikon cincin bawah sampai y ±1530
   tetap terlihat; papan cincin atas (paling tinggi ±y 435, Kutu Buku) tetap di bawah HUD lampu. 16:10 tidak terpotong. Diukur 16 Okt. */
.wm .arena { position: absolute; left: 50%; top: calc((100vh - max(62.5vw, 100vh)) * .76); width: max(100vw, 160vh); height: max(62.5vw, 100vh);
  transform: translateX(-50%); container-type: size; background: center / 100% 100% no-repeat; }
.wm .ring { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; }
.wm .ring-back { z-index: 0; }
.wm .ring-front { z-index: 4; }

/* latar sementara sampai plate dari sesi aset datang */
.wm .maze-temp { position: absolute; inset: 0;
  background:
    linear-gradient(#5fae4c 0 6%, #3f8f3a 6% 17%, #2f7a31 17% 19%, transparent 19%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 6%, transparent 6% 12%),
    linear-gradient(#a6dc8e, #82c46c 60%, #74b862); }
.wm .maze-temp::before, .wm .maze-temp::after { content: ''; position: absolute; height: 6cqh; border-radius: 3cqh;
  background: linear-gradient(#5cb24a, #3a8a36 70%, #2c722e); box-shadow: 0 1.2cqh 1.6cqh rgba(30, 70, 30, .25); }
.wm .maze-temp::before { left: 2%; width: 26%; top: 40%; }
.wm .maze-temp::after { left: 52%; width: 22%; top: 40%; }

/* ---------- celah: kotak 32cqh, garis atas bibir pagar di 24cqh dari atas kotak ---------- */
.wm .hole { position: absolute; left: calc(var(--x) * 1%); top: calc((var(--lip) - 24) * 1%); width: 26cqh; height: 32cqh; margin-left: -13cqh; }
.wm .hole.f.on { transform: none; box-shadow: none; border-color: transparent; }
.wm .hole.f:active { transform: none; }

.wm .gap { position: absolute; left: 50%; top: 20.5cqh; width: 20cqh; height: 5cqh; margin-left: -10cqh; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(25, 55, 25, .55), rgba(25, 55, 25, .25) 60%, transparent 72%); }

/* NPC + papan naik dari dalam lubang; .clip memotong di garis kaki (24cqh), bibir depan (cincin-depan) menutup badan bawah.
   Gambar NPC: tubuh ±70% bawah kanvas, kaki di 97% → kanvas 25,3cqh = tubuh ±280 px (skala venue 1040 px/satuan).
   Warga duduk --sink (45 px) lebih dalam dari titik kaki. */
.wm .clip { position: absolute; left: -4cqh; right: -4cqh; top: -10cqh; height: 34cqh; overflow: hidden; z-index: 1; }
.wm .unit { position: absolute; left: 50%; bottom: calc(var(--sink, 1cqh) * -1); width: 26cqh; height: 36cqh;
  transform: translate(-50%, 110%); transition: transform .32s cubic-bezier(.3, 1.5, .5, 1); }
.wm .hole.up .unit { transform: translate(-50%, 0); }
.wm .hole.instant .unit { transition: none; }
.wm .npc { position: absolute; z-index: 1; left: 50%; bottom: -.7cqh; height: 25.3cqh; width: auto; transform: translateX(-50%); transform-origin: 50% 100%;
  filter: drop-shadow(0 .6cqh .6cqh rgba(30, 50, 90, .25)); pointer-events: none; }
.wm .hole.up .npc { animation: wm-boing .5s ease-out; }
.wm .hole.bonk .npc { animation: wm-bonk .35s ease-out; }
.wm .hole.giggle .unit { animation: wm-giggle .22s ease-in-out infinite alternate; }

/* papan kayu bertongkat (papan-s/m/l.webp, sama tinggi 378 px: papan 200 + tongkat) di BELAKANG kepala warga.
   Papan 8,4cqh → gambar 15,9cqh; teks di kotak muka kayu dari palu-papan.json (y 34, h 135 dari 378). */
.wm .sign { position: absolute; left: 50%; bottom: 11.5cqh; height: 15.9cqh; transform: translateX(-50%); z-index: 0; }
.wm .sign.s1 { width: 9.76cqh; }
.wm .sign.s2 { width: 15.9cqh; }
.wm .sign.s3, .wm .sign.s4 { width: 21.79cqh; }
.wm .sign-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 .6cqh .8cqh rgba(40, 60, 120, .25)); }
.wm .sign b { position: absolute; top: 9%; height: 35.7%; display: flex; align-items: center; justify-content: center;
  font: 700 4.3cqh/1 var(--mp-font); color: var(--mp-ink); white-space: nowrap; }
.wm .sign.s1 b { left: 15.95%; width: 67.24%; font-size: 6cqh; }
.wm .sign.s2 b { left: 11.9%; width: 75.13%; font-size: 5cqh; }
.wm .sign.s3 b, .wm .sign.s4 b { left: 10.42%; width: 78.57%; }
.wm .sign.s4 b { font-size: 3.5cqh; }
.wm .hole.bonk .sign { animation: pop .35s; }
.wm .hole.glow .sign { animation: pulse .9s ease-in-out infinite; }
.wm .hole.glow .sign-img { filter: drop-shadow(0 0 .7cqh #ffc21a) drop-shadow(0 0 .7cqh #ffc21a); }

/* bibir pagar (sementara digambar CSS; nanti sprite dari plate) */
.wm .lip { position: absolute; left: -1.5cqh; right: -1.5cqh; top: 23.4cqh; height: 6cqh; z-index: 2;
  transform-origin: 50% 100%; }
.wm .lip img { width: 100%; height: 100%; object-fit: contain; }
.wm .lip-temp { position: absolute; inset: 0; border-radius: 3.6cqh 3.6cqh 2cqh 2cqh;
  background: radial-gradient(ellipse at 50% 0%, #8ad56f, #4fa443 45%, #2f7d31);
  box-shadow: inset 0 .8cqh 0 rgba(255, 255, 255, .25), 0 1cqh 1.4cqh rgba(30, 70, 30, .3); }
.wm .lip-temp i { position: absolute; top: 1cqh; width: 1.5cqh; height: 1.5cqh; border-radius: 50%; background: #a970e0; box-shadow: .5cqh .4cqh 0 #8448c7; }
.wm .lip-temp i:nth-child(1) { left: 12%; } .wm .lip-temp i:nth-child(2) { left: 31%; top: 2.4cqh; } .wm .lip-temp i:nth-child(3) { left: 50%; }
.wm .lip-temp i:nth-child(4) { left: 68%; top: 2.6cqh; } .wm .lip-temp i:nth-child(5) { left: 85%; }
.wm .hole.rustle .lip { animation: wm-rustle .15s ease-in-out 3 alternate; }
.wm .hole.poke .lip { animation: wm-poke .28s ease-out; }

/* plate asli: lubang sudah tergambar di cincin-belakang */
.wm .has-plate .gap { background: none; }
.wm .has-plate .hole.glow .gap { background: radial-gradient(ellipse, rgba(255, 236, 120, .95), rgba(255, 214, 60, .5) 55%, transparent 72%); }

/* ikon posisi tombol: lapisan sendiri di atas cincin-depan (posisi inline: tengah celah, sedikit di bawah titik kaki = muka bibir).
   Ikut keadaan celah lewat kelas yang dicerminkan kode: .up · .glow (bantuan) · .rustle (antisipasi) · .poke (celah kosong dipukul). */
.wm .badge { position: absolute; width: 5.4cqh; height: 5.4cqh; margin-left: -2.7cqh; z-index: 5; transform-origin: 50% 100%;
  background: #fff; border-radius: 50%; border: .45cqh solid var(--mp-ink); padding: .45cqh;
  box-shadow: inset 0 -.4cqh 0 rgba(40, 60, 120, .12), 0 .6cqh 1cqh rgba(40, 60, 120, .25); transition: transform .2s var(--ease-spring, ease); }
.wm.lv1 .badge { width: 6.4cqh; height: 6.4cqh; margin-left: -3.2cqh; }
.wm .badge.up { transform: scale(1.1); }
.wm .badge.glow { transform: scale(1.35); }
.wm .badge.rustle { animation: wm-rustle .15s ease-in-out 3 alternate; }
.wm .badge.poke { animation: wm-poke .28s ease-out; }
.wm .padico { width: 100%; height: 100%; display: block; }
.wm .padico .dim { fill: #d6dbe6; }
.wm .padico .lit { fill: var(--mp-jc-r, #ff4554); stroke: var(--mp-ink); stroke-width: 4; }

/* bantuan: cahaya di celah target */
.wm .hole.glow .gap { background: radial-gradient(ellipse, rgba(255, 236, 120, .95), rgba(255, 214, 60, .5) 55%, transparent 72%); animation: pulse .9s ease-in-out infinite; }

/* cincin pilih (hanya controller non-standar / remote TV / panah) */
.wm.nav .hole.on .gap { box-shadow: 0 0 0 .8cqh var(--mp-cursor, #ff8a1f), 0 0 0 1.6cqh rgba(255, 138, 31, .35); }

.wm .hihi { display: none; position: absolute; right: -1cqh; top: -2cqh; z-index: 4; font: 700 2.6cqh/1.4 var(--mp-font); font-style: normal;
  color: #c2185b; background: #fff; border-radius: 999px; padding: 0 1.2cqh; box-shadow: var(--sh-1, var(--shadow)); }
.wm .hole.giggle .hihi { display: block; animation: pop .3s; }

/* palu Tukang mengayun ke celah yang dipukul */
/* palu.webp: pivot di ujung kenop gagang (256, 500 dari 512) */
.wm .hammer { display: none; position: absolute; left: 50%; top: -5cqh; width: 15cqh; height: 15cqh; z-index: 5; transform-origin: 50% 97.7%; pointer-events: none; }
.wm .hammer img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 .6cqh .6cqh rgba(40, 30, 60, .3)); }
.wm .hole.swing .hammer { display: block; animation: wm-swing .38s ease-in forwards; }

/* ---------- HUD game (pola Menara Balon): chip tingkat + helper di kiri, gelembung 🔊 di kanan, Joy-Con mini kanan bawah ---------- */
.wm .wm-lv { position: absolute; left: calc(var(--u) * 2); top: calc(var(--u) * 9.4); z-index: 6; display: flex; align-items: center; gap: calc(var(--u) * .6);
  padding: calc(var(--u) * .3) calc(var(--u) * 1.6) calc(var(--u) * .3) calc(var(--u) * .4); border-radius: var(--r-pill, 999px);
  background: var(--lv); color: var(--lvi, #fff); box-shadow: var(--sh-1, var(--shadow)); font: italic 800 var(--fs-title, calc(var(--u) * 2.6)) / 1.1 var(--mp-font);
  transform-origin: 50% 100%; }
.wm.lv1 .wm-lv { --lvi: var(--lv-1-ink); } .wm.lv2 .wm-lv { --lvi: var(--lv-2-ink); } .wm.lv3 .wm-lv { --lvi: var(--lv-3-ink); } .wm.lv4 .wm-lv { --lvi: var(--lv-4-ink); }
.wm .wm-lv img { width: calc(var(--u) * 5); height: calc(var(--u) * 5); margin: calc(var(--u) * -1) 0; object-fit: cover; object-position: 50% 100%; } /* kanvas kru 636×771, kaki di bawah */
.wm .wm-lv.cheer { animation: jump .6s ease-out; }
.wm .call { position: absolute; right: calc(var(--u) * 2); top: calc(var(--u) * 9.4); z-index: 6; display: flex; align-items: center; justify-content: center;
  gap: calc(var(--u) * .8); min-width: calc(var(--u) * 7); height: calc(var(--u) * 6); padding: 0 calc(var(--u) * 1.4); background: #fff;
  border-radius: var(--r-pill, 999px); box-shadow: var(--sh-1, var(--shadow)); cursor: pointer; }
.wm .call .spk { font-size: calc(var(--u) * 3.2); line-height: 1; }
.wm .call .tl { display: none; font: 700 calc(var(--u) * 4.4)/1 var(--mp-font); color: var(--mp-ink); }
.wm .call .tl.s2, .wm .call .tl.s3 { font-size: calc(var(--u) * 3.6); }
.wm .call .tl.s4 { font-size: calc(var(--u) * 3); }
.wm .call.show { box-shadow: 0 0 0 calc(var(--u) * .5) var(--mp-sun), var(--sh-1, var(--shadow)); animation: pulse .9s ease-in-out infinite; }
.wm .call.show .tl { display: block; }

.wm .jcw { display: none; position: absolute; right: calc(var(--u) * 2); bottom: calc(var(--u) * 2); z-index: 6; height: calc(var(--u) * 11); }
body.pad-on .wm .jcw { display: flex; }
.wm .jc { height: 100%; width: auto; }
.wm .jc-body { fill: var(--mp-jc-r, #ff4554); stroke: var(--mp-ink); stroke-width: 3; }
.wm .jc-btn circle { fill: #2c2f40; stroke: #11131c; stroke-width: 2; transition: fill .1s; }
.wm .jc-btn circle.glow { fill: var(--mp-sun); animation: wm-jcglow .9s ease-in-out infinite; }
.wm .jc-btn circle.press { fill: #fff; }
.wm .jc-stick { fill: #2c2f40; } .wm .jc-stick-in { fill: #44485c; }

.wm .flyc { position: absolute; z-index: 60; font: 700 calc(var(--u) * 3.6)/1 var(--mp-font); color: var(--mp-ink); background: #fff;
  border-radius: calc(var(--u) * .8); padding: calc(var(--u) * .4) calc(var(--u) * .7); box-shadow: var(--sh-1, var(--shadow));
  transform: translate(-50%, -50%); transition: transform .7s cubic-bezier(.5, -.3, .6, 1); pointer-events: none; }

@keyframes wm-boing { 0% { scale: 1.12 .8; } 50% { scale: .92 1.1; } 100% { scale: 1 1; } }
@keyframes wm-bonk { 0% { scale: 1.25 .62; } 60% { scale: .92 1.08; } 100% { scale: 1 1; } }
@keyframes wm-giggle { from { rotate: -6deg; } to { rotate: 6deg; } }
@keyframes wm-rustle { from { rotate: -2.5deg; } to { rotate: 2.5deg; } }
@keyframes wm-poke { 0% { scale: 1 1; } 40% { scale: 1.04 .88; } 100% { scale: 1 1; } }
@keyframes wm-swing { 0% { rotate: -75deg; } 70% { rotate: 18deg; } 100% { rotate: 8deg; } }
@keyframes wm-new { 0% { scale: 1.6; } 60% { scale: .9; } 100% { scale: 1; } }
@keyframes wm-jcglow { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.wm .has-plate .badge { top: 28cqh; }