/* Bayangan Siapa? — gaya khusus game ini (arena Menara Balon). Gaya Pulau (docs/STYLEGUIDE.md §8): token --mp-* / --lv-*,
   font --mp-font. Latar = ruang kubah Menara Balon (assets/arena/menara-balon/, sama untuk semua game arena ini):
   bundaran cahaya + bayangan di langit kubah, benda berdiri di lantai pelangi. Posisi benda, bayangan & sorot diatur JS; animasi CSS hanya hiasan — konten tidak pernah menunggu animasi. */

#app.t-night { --ink: #ffffff; --ink-soft: #c9d3f2; background: #1a1838; }
.t-night .h { text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.t-night .stage.custom { padding: 0; }

/* penghitung ronde bertema (slot clay arena Menara Balon, sama dengan Tembak Balon): kosong → emas + benda · salah ketat = silang */
#app.t-night .hud-lights .lamp.themed { display: grid; place-items: center; background: none; box-shadow: none; overflow: visible; }
#app.t-night .lamp.themed .by-slot { position: absolute; inset: -14%; width: 128%; height: 128%; object-fit: contain; pointer-events: none; }
#app.t-night .lamp.themed .by-slot-in { position: absolute; inset: 16%; display: grid; place-items: center; pointer-events: none; }
#app.t-night .lamp.themed .by-slot-in img { width: 100%; height: 100%; object-fit: contain; }

/* tiang & benda naik dari bawah layar di awal soal (hiasan; tanpa animasi = posisi akhir) */
.by-peds.rise, .by-items.rise { animation: by-rise .6s cubic-bezier(.2, .8, .3, 1.1); }
@keyframes by-rise { from { transform: translateY(45%); } to { transform: none; } }

.by-field.lv1 { --lvc: var(--lv-1); --lvi: var(--lv-1-ink); }
.by-field.lv2 { --lvc: var(--lv-2); --lvi: var(--lv-2-ink); }
.by-field.lv3 { --lvc: var(--lv-3); --lvi: var(--lv-3-ink); }
.by-field.lv4 { --lvc: var(--lv-4); --lvi: var(--lv-4-ink); }

.by-field { position: absolute; inset: 0; overflow: hidden; touch-action: none; font-family: var(--mp-font); user-select: none; }
.by-field.f, .by-field.f.on { transform: none; box-shadow: none; border: 0; transition: none; }

/* latar 16:10 (tablet) / 16:9 (TV, langit atas dipotong) → dipangkas di layar lain; lantai (bawah) selalu terlihat */
.by-plate, .by-plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%;
  pointer-events: none; user-select: none; }
/* bundaran cahaya di langit kubah (tempat bayangan) */
.by-light { position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff6dc 0 40%, rgba(255, 240, 200, .92) 52%, rgba(255, 236, 190, .35) 64%, rgba(255, 236, 190, 0) 71%); }

/* bayangan target (siluet = mask gambar benda) */
.by-target, .by-shadow, .by-cover { position: absolute; left: 0; top: 0; pointer-events: none; }
.by-sil { position: absolute; inset: 0; display: block;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center; }
.by-target .by-sil { background: #241f45; transform: var(--o, none); }
.by-target .by-tint { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: var(--o, none);
  transition: opacity .4s; }
.by-target.hint .by-tint { opacity: .35; }
.by-target.done .by-tint { opacity: 1; }
.by-target.done .by-sil { opacity: .25; }
.by-target.done { animation: pop .45s ease-out; }
.by-target.nope { animation: shake .45s; }
.by-shadow { z-index: 2; }
.by-shadow .by-sil { background: rgba(36, 31, 69, .6); }
.by-shadow.near .by-sil { background: rgba(36, 31, 69, .78); }

/* tingkat 3: sebagian bayangan tertutup papan */
.by-cover { z-index: 1; }
.by-cover::before { content: ''; position: absolute; border-radius: calc(var(--u) * 1.4);
  background: repeating-linear-gradient(90deg, #a8703f 0 calc(var(--u) * 2.4), #9a6436 calc(var(--u) * 2.4) calc(var(--u) * 2.6)), #a8703f;
  box-shadow: 0 calc(var(--u) * .5) calc(var(--u) * 1) rgba(0, 0, 0, .3), inset 0 calc(var(--u) * -.5) 0 rgba(0, 0, 0, .18); }
.by-cover.c-kiri::before { left: -8%; top: -6%; width: 58%; height: 112%; }
.by-cover.c-kanan::before { right: -8%; top: -6%; width: 58%; height: 112%; }
.by-cover.c-bawah::before { left: -6%; bottom: -8%; width: 112%; height: 55%; }
.by-cover[hidden] { display: none; }


/* tiang pajang (sprite sesi aset, bayangan lantai sudah di dalamnya); posisi & ukuran dari JS mengikuti skala latar */
.by-peds { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.by-ped { position: absolute; left: 0; top: 0; }
.by-ped img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; }

/* benda */
.by-items { position: absolute; inset: 0; z-index: 3; }
.by-items.away .by-item:not(.held) { opacity: 0; transition: opacity .3s; }
.by-item { position: absolute; left: 0; top: 0; cursor: pointer; touch-action: none; will-change: transform; }
.by-item img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none;
  filter: drop-shadow(0 calc(var(--u) * .5) calc(var(--u) * .4) rgba(0, 0, 0, .35)); }
.by-item.on::after { content: ''; position: absolute; inset: -12%; border-radius: 50%; border: calc(var(--u) * .55) solid var(--mp-cursor);
  box-shadow: 0 0 0 calc(var(--u) * .3) #fff; animation: pulse 1s ease-in-out infinite; }
.by-item.on::before { content: ''; position: absolute; left: 50%; top: -34%; translate: -50% 0;
  border-left: calc(var(--u) * 1.6) solid transparent; border-right: calc(var(--u) * 1.6) solid transparent;
  border-top: calc(var(--u) * 2.2) solid var(--mp-cursor); animation: bob .55s ease-in-out infinite alternate; }
.by-item.held { z-index: 5; }
/* bayangan kaki benda di atas tiang; hilang saat diangkat */
.by-ground { position: absolute; left: 50%; bottom: 6%; width: 60%; height: 12%; translate: -50% 50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 30, 80, .4), rgba(40, 30, 80, 0)); pointer-events: none; transition: opacity .2s; }
.by-item.held .by-ground { opacity: 0; }
.by-item.held img { transition: opacity .15s; }
.by-item.near img { opacity: .72; }   /* dekat bayangan: tembus pandang sedikit → tepi benda & bayangan bisa dibandingkan */
.by-item.fit img { opacity: 1; animation: pop .4s ease-out; }
.by-item.off { opacity: .3; filter: grayscale(.8); pointer-events: none; }
.by-item.wiggle img { animation: jw-giggle-by .6s ease-in-out infinite; }
.by-item.spin img { transition: transform .18s ease-out; }
.by-item.show::after { content: ''; position: absolute; inset: -12%; border-radius: 50%; border: calc(var(--u) * .55) solid var(--mp-good); }

/* alat balik / putar di samping benda yang dipegang */
.by-tools { position: absolute; left: 0; top: 0; z-index: 6; display: flex; flex-direction: row; gap: calc(var(--u) * 1); }
.by-tools[hidden], .by-tool[hidden] { display: none; }
.by-tool { width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; border: 0; cursor: pointer;
  background: var(--mp-paper); color: var(--mp-ink); box-shadow: var(--sh-1); font: 900 calc(var(--u) * 3.2) / 1 var(--mp-font); }
.by-tool.pulse { animation: pulse .6s ease-in-out 4; box-shadow: 0 0 0 calc(var(--u) * .6) var(--mp-cursor), var(--sh-1); }

/* Kelip */
.by-host { position: absolute; left: 5%; bottom: 9%; height: 29%; aspect-ratio: 767 / 861; z-index: 2; pointer-events: none; transform-origin: 50% 96%; }
.by-host::before { content: ''; position: absolute; left: 50%; top: 95.8%; width: 64%; height: 12%; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 30, 80, .4), rgba(40, 30, 80, 0)); }   /* bayangan kaki Kelip di lantai */
.by-host img { width: 100%; height: 100%; object-fit: contain; animation: jw-breathe-by 2.2s ease-in-out infinite alternate; transform-origin: 50% 96%; }
.by-host.p-sorak img { animation: jump .7s ease-out; }   /* + gambar bintang-sorak */
.by-host.p-ups img { animation: by-tilt .8s ease-in-out; }
/* tunjuk (tanpa gambar baru): condong sedikit ke belakang & naik, seolah melirik ke bundaran cahaya di atas, lalu kembali */
.by-host.p-tunjuk img { animation: by-lirik 1.2s ease-in-out; }
@keyframes by-lirik { 0%, 100% { transform: none; } 25%, 70% { transform: rotate(-5deg) translateY(-2.5%) scale(1, 1.03); } }

/* tingkat + kalimat */
.by-top { position: absolute; left: 0; right: 0; top: calc(var(--bar, 0px) + var(--u) * 1); z-index: 7; pointer-events: none; }   /* --bar: arena di belakang bilah atas */
.by-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); }
.by-lv img.kit.char { width: calc(var(--u) * 5); height: calc(var(--u) * 5); margin: calc(var(--u) * -1) 0; vertical-align: 0; }
.by-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); }
.by-padhint { display: none; position: absolute; left: calc(var(--u) * 2); bottom: 4%; z-index: 7; 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 .by-padhint { display: block; }
body.pad-on .by-padhint.gone { display: none; }

@keyframes jw-giggle-by { 0%, 100% { rotate: 0deg; } 25% { rotate: -8deg; } 75% { rotate: 8deg; } }
@keyframes jw-breathe-by { from { scale: 1 1; } to { scale: 1.02 .98; } }
@keyframes by-tilt { 0%, 100% { rotate: 0deg; } 30% { rotate: -6deg; } 65% { rotate: 4deg; } }