/* Tembak Balon — gaya khusus game ini (arena kubah Menara Jaring). Ikut Gaya Pulau (docs/STYLEGUIDE.md §8): token --mp-* /
   --lv-*, font --mp-font, warna = warna tingkat yang dimainkan. Latar = ruang kubah Menara Balon (assets/arena/menara-balon/, sama untuk semua game arena ini).
   Posisi balon, bola & bidikan diatur JS (transform per 33 ms); animasi CSS di sini hanya hiasan — konten tidak pernah
   bergantung pada animasi untuk terlihat. Tidak ada CSS filter pada elemen yang digeser tiap tick (berat di tablet). */

/* latar gelap (kubah malam) → tinta engine (judul layar hasil, dll.) dibuat terang supaya terbaca */
#app.t-web { --ink: #ffffff; --ink-soft: #c9d3f2; background: #141a46; }
.t-web .h { text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }

/* penghitung ronde bertema: slot clay kosong → slot emas + bentuk yang diletuskan · salah (ketat) = silang. Juga di layar hasil. */
#app.t-web .hud-lights .lamp.themed { display: grid; place-items: center; background: none; box-shadow: none; overflow: visible; }
#app.t-web .lamp.themed .jw-slot { position: absolute; inset: -14%; width: 128%; height: 128%; object-fit: contain; pointer-events: none; }
#app.t-web .lamp.themed .jw-slot-in { position: absolute; inset: 12%; display: grid; place-items: center; pointer-events: none; }
#app.t-web .lamp.themed .jw-slot-in svg { width: 100%; height: 100%; overflow: visible; }

/* warna tingkat yang sedang dimainkan */
.jw-field.lv1 { --lvc: var(--lv-1); --lvc2: var(--lv-1-2); --lvi: var(--lv-1-ink); }
.jw-field.lv2 { --lvc: var(--lv-2); --lvc2: var(--lv-2-2); --lvi: var(--lv-2-ink); }
.jw-field.lv3 { --lvc: var(--lv-3); --lvc2: var(--lv-3-2); --lvi: var(--lv-3-ink); }
.jw-field.lv4 { --lvc: var(--lv-4); --lvc2: var(--lv-4-2); --lvi: var(--lv-4-ink); }

/* arena */
.t-web .stage.custom { padding: 0; }
.jw-field { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: crosshair; font-family: var(--mp-font); }
.jw-field.f, .jw-field.f.on { transform: none; box-shadow: none; border: 0; transition: none; }
.jw-defs { position: absolute; width: 0; height: 0; }
/* latar 16:10 (tablet) / 16:9 (TV, langit atas dipotong) → dipangkas di layar lain; lantai (bawah) selalu terlihat */
.jw-plate, .jw-plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; pointer-events: none; user-select: none; }

/* tingkat + kalimat soal */
.jw-top { position: absolute; left: 0; right: 0; top: calc(var(--bar, 0px) + var(--u) * 1); z-index: 4; pointer-events: none; }   /* --bar: arena dipanjangkan di belakang bilah atas */
.jw-lv {
  position: absolute; left: calc(var(--u) * 2); top: calc(var(--u) * 6.4); 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);
  background: var(--lvc); color: var(--lvi); box-shadow: var(--sh-1);
  font: italic 800 var(--fs-title) / 1.1 var(--mp-font);
}
.jw-lv img.kit.char { width: calc(var(--u) * 5); height: calc(var(--u) * 5); margin: calc(var(--u) * -1) 0; vertical-align: 0; }
.jw-prompt {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%); white-space: nowrap;
  padding: calc(var(--u) * .7) calc(var(--u) * 2.6); border-radius: var(--r-pill);
  background: var(--mp-paper); color: var(--mp-ink); box-shadow: var(--sh-1);
  font: italic 900 var(--fs-h2) / 1.15 var(--mp-font);
}
.jw-prompt b { display: inline-block; padding: 0 .35em; border-radius: var(--r-pill); background: var(--lvc); color: var(--lvi); }

/* balon bentuk & benda */
.jw-shapes { position: absolute; inset: 0; z-index: 1; }
.jw-shape { position: absolute; left: 0; top: 0; will-change: transform; }
.jw-in { position: relative; width: 100%; height: 100%; }
.jw-sv { width: 100%; height: 100%; display: block; overflow: visible; }
.jw-str { fill: none; stroke: #e9eefc; stroke-width: 1.6; stroke-linecap: round; opacity: .85; }
/* balon clay: gambar 120 unit (-10..110) di atas kotak 100 unit → meluber 10% tiap sisi. Badan abu × --c (multiply, dibatasi
   alfa badan lewat mask inline — url di variabel CSS akan dibaca relatif ke file css), kilap di atas. isolation supaya multiply hanya mengenai badan, bukan latar arena. */
.jw-strs { position: absolute; inset: 0; }
.jw-bl { position: absolute; inset: -10%; isolation: isolate; pointer-events: none; }
.jw-bl.mir { transform: scaleX(-1); }   /* balon di kiri Pomi menghadap ke kanan (ke Pomi) */
.jw-bl img, .jw-bl i { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.jw-bl i { background: var(--c); mix-blend-mode: multiply;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.jw-in.hint { animation: pulse .8s ease-in-out infinite; }
.jw-in.hint::before { content: ''; position: absolute; inset: -12%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 168, .8), rgba(255, 246, 168, 0) 70%); }
.jw-in.giggle { animation: jw-giggle .5s ease-in-out 2; }
.jw-shape.caught .jw-in { animation: jw-wiggle .38s ease-in-out; }

/* bola, letusan, ikon yang terbang ke slot */
.jw-ball { position: absolute; left: 0; top: 0; width: calc(var(--u) * 5); height: calc(var(--u) * 5); z-index: 6; pointer-events: none; will-change: transform; }
.jw-bit { position: absolute; z-index: 6; translate: -50% -50%; pointer-events: none; line-height: 0;
  animation: jw-burst 1.2s linear forwards; }
.jw-bit svg { display: block; overflow: visible; filter: drop-shadow(0 calc(var(--u) * .15) 0 rgba(0, 0, 0, .18));
  animation: jw-flap var(--fl, .22s) ease-in-out infinite alternate; }
.jw-knot { position: absolute; z-index: 6; translate: -50% 0; transform-origin: 50% 0; pointer-events: none; line-height: 0;
  animation: jw-knot .95s cubic-bezier(.55, 0, .9, .55) forwards; }
.jw-knot svg { display: block; overflow: visible; }
.jw-puff { position: absolute; z-index: 5; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; pointer-events: none;
  border: calc(var(--u) * 1.1) solid var(--c); box-shadow: 0 0 calc(var(--u) * 1.5) var(--c); animation: jw-puff .35s ease-out forwards; }
.jw-shape.popping .jw-in { animation: jw-pop .13s ease-out forwards; }
.jw-fly { position: absolute; left: 0; top: 0; width: calc(var(--u) * 7); height: calc(var(--u) * 7); z-index: 9; pointer-events: none; will-change: transform; }
.jw-fly svg { width: 100%; height: 100%; overflow: visible; }

/* telusur sisi, angka */
.jw-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 5; }
.jw-trace-o, .jw-trace { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.jw-trace-o { stroke: var(--mp-ink); stroke-width: calc(var(--u) * 1.2); }
.jw-trace { stroke: #fff; stroke-width: calc(var(--u) * .6); }
.jw-num {
  position: absolute; z-index: 6; translate: -50% -50%; width: calc(var(--u) * 4.6); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; background: var(--mp-paper); color: var(--mp-ink); box-shadow: var(--sh-1);
  border: calc(var(--u) * .45) solid var(--lvc); font: 900 calc(var(--u) * 2.8) / 1 var(--mp-font); animation: pop .3s ease-out;
}

/* Pomi (kiri bawah, menghadap balon). Kanvas pose sama + titik kaki sama → --fx/--fy dipakai untuk menaruh kaki di lantai;
   --mx/--my = mulut blaster (asal bola & kilatan). Pose = ganti gambar + sedikit gerak CSS. */
.jw-host { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
/* Pomi di tengah bawah, kaki di atas bintang lantai (pemilik 16 Okt); tinggi ±20% layar. Titik kaki (--fx, --fy) = jangkar,
   jadi .kiri (bidikan di kiri Pomi) cukup dicerminkan di sekitar kaki — mulut blaster ikut pindah (posisi dibaca dari layar). */
.jw-hero { position: absolute; left: 50%; top: 97%; height: 22%; aspect-ratio: var(--pw) / var(--ph);
  translate: calc(var(--fx) * -1) calc(var(--fy) * -1); transform-origin: var(--fx) var(--fy); }
.jw-hero.kiri { transform: scaleX(-1); }
.jw-foot { position: absolute; left: var(--fx); top: var(--fy); width: 46%; height: 11%; translate: -50% -55%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 30, 80, .38), rgba(40, 30, 80, 0)); }
.jw-hero-img { width: 100%; height: 100%; display: block; object-fit: contain; transform-origin: var(--fx) var(--fy);
  animation: jw-breathe 2.2s ease-in-out infinite alternate; }
.jw-muzzle { position: absolute; left: var(--mx); top: var(--my); width: 0; height: 0; }
.jw-muzzle::after { content: ''; position: absolute; left: calc(var(--u) * -3); top: calc(var(--u) * -3); width: calc(var(--u) * 6);
  height: calc(var(--u) * 6); border-radius: 50%; border: calc(var(--u) * .6) solid #fff6c2; opacity: 0; }
.jw-hero.p-tembak .jw-muzzle::after { animation: ring .35s ease-out; }
.jw-hero.p-sorak .jw-hero-img { animation: jump .7s ease-out; }
.jw-hero.p-ups .jw-hero-img { animation: jw-tilt .8s ease-in-out; }
.jw-count { position: absolute; left: 50%; translate: -50% 0; bottom: 25%; min-width: calc(var(--u) * 7); padding: 0 calc(var(--u) * 1.2);
  border-radius: var(--r-pill); background: var(--lvc); color: var(--lvi); box-shadow: var(--sh-1); text-align: center;
  font: italic 900 calc(var(--u) * 4) / 1.25 var(--mp-font); }
.jw-count[hidden] { display: none; }
.jw-count.bump { animation: pop .3s ease-out; }

/* petunjuk tombol: hanya kalau Joy-Con terbaca, hilang setelah tembakan pertama */
.jw-padhint { display: none; position: absolute; left: calc(var(--u) * 2); bottom: 4%; z-index: 4; white-space: nowrap;
  padding: calc(var(--u) * .5) calc(var(--u) * 1.8); border-radius: var(--r-pill); background: var(--mp-scrim); color: #fff;
  font: 700 var(--fs-label) / 1.2 var(--mp-font); pointer-events: none; }
body.pad-on .jw-padhint { display: block; }
body.pad-on .jw-padhint.gone { display: none; }

/* bidikan — kursor oranye Gaya Pulau, bergaris tepi putih supaya jelas di langit terang maupun di atas balon */
.jw-aim { position: absolute; left: 0; top: 0; width: calc(var(--u) * 10); aspect-ratio: 1; pointer-events: none; will-change: transform; z-index: 6; }
.jw-aim svg { width: 100%; height: 100%; overflow: visible; transition: scale .15s var(--ease-spring, ease-out); }
.jw-aim .jw-halo { fill: none; stroke: #fff; stroke-width: 4; opacity: .9; }
.jw-aim .jw-ring { fill: rgba(255, 255, 255, .22); stroke: var(--mp-cursor); stroke-width: 5; stroke-dasharray: 10 7; }
.jw-aim .jw-cross { fill: none; stroke: var(--mp-cursor); stroke-width: 4; stroke-linecap: round; }
.jw-aim .jw-dot { fill: var(--mp-cursor); stroke: #fff; stroke-width: 2; }
.jw-aim.lock svg { scale: 1.35; }
.jw-aim.lock .jw-ring { stroke-dasharray: none; stroke-width: 6; fill: rgba(255, 138, 31, .18); }
.jw-aim.fire svg { scale: .8; }
.jw-aim.off { display: none; }

@keyframes jw-giggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -10deg; } 75% { rotate: 10deg; } }
@keyframes jw-wiggle { 0%, 100% { scale: 1; } 30% { scale: 1.15 .9; } 60% { scale: .92 1.1; } }
@keyframes jw-pop { to { transform: scale(1.18); opacity: 0; } }
@keyframes jw-burst {   /* terlempar cepat, lalu melayang jatuh pelan (karet tipis ditahan udara) */
  0% { opacity: 1; transform: translate(0, 0) rotate(var(--r0)) scale(.5); animation-timing-function: cubic-bezier(.15, .8, .3, 1); }
  28% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(calc(var(--r0) + var(--r) * .4)) scale(1); animation-timing-function: cubic-bezier(.4, 0, .8, .6); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 1.2), calc(var(--dy) + var(--fall))) rotate(calc(var(--r0) + var(--r))) scale(.85); }
}
@keyframes jw-flap { from { transform: scaleY(1); } to { transform: scaleY(-.45) skewX(12deg); } }
@keyframes jw-knot { 80% { opacity: 1; } to { transform: translateY(var(--fall)) rotate(var(--r)); opacity: 0; } }
@keyframes jw-puff { from { transform: scale(.35); opacity: .9; } to { transform: scale(1.3); opacity: 0; } }
@keyframes jw-fall { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(calc(var(--u) * 12)) scale(.6); } }
@keyframes jw-breathe { from { scale: 1 1; } to { scale: 1.02 .98; } }
@keyframes jw-tilt { 0%, 100% { rotate: 0deg; } 30% { rotate: -6deg; } 65% { rotate: 4deg; } }

/* gerak Joy-Con (WebHID, Chrome komputer): tombol orang tua di pojok kanan bawah + panel kalibrasi & pengaturan */
.jw-mbtn {
  position: absolute; right: calc(var(--u) * 1.6); bottom: calc(var(--u) * 1.6); z-index: 7;
  padding: calc(var(--u) * .8) calc(var(--u) * 1.8); border-radius: var(--r-pill); cursor: pointer;
  border: 0; background: var(--mp-scrim); color: #fff; font: 700 var(--fs-label) / 1.1 var(--mp-font);
}
.jw-mbtn.on { opacity: .6; }
.jw-mbtn[hidden], .jw-mcal[hidden], .jw-mset[hidden] { display: none; }
.jw-mcal, .jw-mset {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 8; display: grid; text-align: center;
  background: var(--mp-paper); color: var(--mp-ink); border-radius: var(--r-panel); box-shadow: var(--sh-2);
  font-family: var(--mp-font);
}
.jw-mcal { top: 20%; width: min(86%, calc(var(--u) * 70)); gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 2.4) calc(var(--u) * 3); }
.jw-mcal b { font: italic 900 var(--fs-h2) / 1.2 var(--mp-font); }
.jw-mcal small, .jw-mset > small { font-size: var(--fs-micro); color: var(--mp-ink-2); }
.jw-mset { top: 14%; width: min(90%, calc(var(--u) * 64)); gap: calc(var(--u) * 1.4); padding: calc(var(--u) * 2.2) calc(var(--u) * 3); }
.jw-mset > b { font: italic 900 var(--fs-h2) / 1.2 var(--mp-font); }
.jw-row { display: grid; grid-template-columns: calc(var(--u) * 13) auto 1fr auto; align-items: center; gap: calc(var(--u) * 1.2); text-align: left; }
.jw-row > span { font-size: var(--fs-body); font-weight: 800; }
.jw-row > small { grid-column: 2 / -1; font-size: var(--fs-micro); color: var(--mp-ink-2); text-align: center; margin-top: calc(var(--u) * -.8); }
.jw-mset button {
  font: 800 calc(var(--u) * 2.6) / 1 var(--mp-font); color: var(--mp-ink); background: var(--mp-paper-2); border: 0; cursor: pointer;
  border-radius: var(--r-pill); min-width: calc(var(--u) * 5); height: calc(var(--u) * 5);
}
.jw-dots { display: flex; justify-content: center; gap: calc(var(--u) * .9); }
.jw-dots em { width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); border-radius: 50%; background: var(--mp-line); }
.jw-dots em.on { background: var(--mp-teal); }
.jw-acts { display: flex; justify-content: center; gap: calc(var(--u) * 1.5); }
.jw-acts button { padding: 0 calc(var(--u) * 2.4); font-size: var(--fs-body); }
.jw-acts .jw-close { background: var(--mp-cta); color: #fff; }