/* Kasih Makan Tixi — gaya khusus game ini. Aset & jangkar: assets/games/hitung/*.json (2560×1600, 16:10).
   Arena = kotak 16:10 yang menutupi layar (TV 16:9 terpotong atas+bawah ±5%); semua posisi dalam cqw/cqh arena.
   Aturan: animasi hanya hiasan — tidak ada keyframe yang mulai dari opacity:0, konten tetap terlihat walau animasi beku. */

#app.t-dino { background: #9fd36a; }

.tx { position: fixed; inset: 0; z-index: 0; overflow: hidden; font-family: var(--mp-font); color: var(--mp-ink); }
.tx-arena { position: absolute; left: 50%; top: 50%; width: max(100vw, 160vh); height: max(62.5vw, 100vh);
  transform: translate(-50%, -50%); container-type: size; }
.tx-arena.quake { animation: tx-quake .38s; }
.tx-bg, .tx-stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; }

/* ---------- Tixi (tixi-pose.json: kanvas 806×927, kaki 403,768, tinggi berdiri 748 px) ----------
   Tinggi total Tixi = 2,5 × Mimi = 74,68% arena → kanvas 92,55cqh × 80,47cqh; kaki di (26,46%, 91,1%). */
.tx-tixi { position: absolute; width: 80.47cqh; height: 92.55cqh; left: calc(26.46cqw - 40.235cqh); top: 14.42cqh;
  transform-origin: 50% 82.85%; --full: 0; pointer-events: none; }
.tx-tixi-img { width: 100%; height: 100%; display: block; user-select: none;
  transform-origin: 50% 82.85%; transform: scale(calc(1 + var(--full) * .006)); transition: transform .25s;
  animation: tx-breathe 2.4s ease-in-out infinite alternate; }
.tx-tixi.chomp .tx-tixi-img { animation: tx-chomp .36s; }
.tx-tixi.happy { animation: jump .8s; }
.tx-tixi.hungry { animation: tx-sway .7s; }
.tx-tixi.burp-back { animation: tx-puff .7s; }
.tx-tixi.stomp { animation: tx-stomp .42s; }
/* titik mulut pose "buka" (490,300) = tujuan apel */
.tx-mouth { position: absolute; left: 60.79%; top: 32.36%; width: 1px; height: 1px; }

/* perut: apel yang sudah dimakan, di atas elips perut krem (cx 468, cy 550) */
.tx-tummy { position: absolute; left: 47.5%; top: 49.1%; width: 21.1%; height: 20.5%;
  display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: .3cqh; }
.tx-t-apple { position: relative; width: 6.6cqh; height: 6.6cqh; }
.tx-tummy.many .tx-t-apple { width: 4.3cqh; height: 4.3cqh; }
.tx-t-apple img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 .25cqh .3cqh rgba(90, 40, 20, .3)); }
.tx-t-apple.new, .tx-t-ten.new { animation: pop .3s; }
/* Sangat susah: apel yang sudah dimakan sebelum soal — pudar + cincin, beda dengan yang baru diberi */
.tx-t-apple.pre img { filter: saturate(.5) brightness(1.1); }
.tx-t-apple.pre::before { content: ''; position: absolute; inset: 4%; border-radius: 50%; box-shadow: 0 0 0 .35cqh rgba(29, 43, 79, .35); }
.tx-t-apple.counted img, .tx-t-ten.counted .tx-bundle { filter: drop-shadow(0 0 .9cqh #fff36b) drop-shadow(0 0 .4cqh #ffcc1f); transform: scale(1.15); }
.tx-t-apple.counted::after, .tx-t-ten.counted::after { content: attr(data-n); position: absolute; top: -3cqh; left: 50%; transform: translateX(-50%);
  font-size: 3.4cqh; font-weight: 800; color: #fff; text-shadow: 0 .3cqh 0 var(--mp-ink); }
.tx-t-ten { position: relative; }

/* ikat "10" (Susah): apel + angka 10 */
.tx-bundle { position: relative; display: inline-grid; place-items: center; width: 6.4cqh; height: 6.4cqh; }
.tx-bundle img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tx-bundle b { position: absolute; right: -1.2cqh; bottom: -.6cqh; min-width: 3.6cqh; padding: .2cqh .7cqh; border-radius: 2cqh;
  background: #fff; color: var(--mp-ink); font: 800 2.4cqh/1.1 var(--mp-font); text-align: center; box-shadow: 0 .3cqh .8cqh rgba(16, 32, 60, .3); }

/* angka yang pop di atas kepala Tixi */
.tx-pops { position: absolute; left: 33cqw; top: 31cqh; width: 0; height: 0; pointer-events: none; }
.tx-pop { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font-size: 8cqh; font-weight: 800; color: #fff;
  text-shadow: 0 .45cqh 0 var(--mp-ink), 0 0 1.6cqh rgba(29, 43, 79, .35); animation: tx-rise .9s ease-out forwards; white-space: nowrap; }
.tx-pop.big { font-size: 11cqh; }
.tx-pop.burp { font-size: 10cqh; text-shadow: none; }

/* ---------- Mimi di panggung (mimi-pose.json: kanvas 767×861, kaki 383,5/825; tinggi total 29,87% arena) ---------- */
.tx-mimi { position: absolute; width: 28.96cqh; height: 32.51cqh; left: calc(77.6cqw - 14.48cqh); top: calc(61.54cqh - 31.15cqh); pointer-events: none; }
.tx-mimi-img { width: 100%; height: 100%; display: block; user-select: none; }
.tx-hand { position: absolute; left: 6.78%; top: 20.79%; width: 1px; height: 1px; } /* apelLepas (52,179) */

/* ---------- balon kata: permintaan Tixi ---------- */
.tx-bubble { position: absolute; left: 41cqw; top: 18cqh; min-width: 20cqh; padding: 1.4cqh 3.2cqh 2cqh; background: #fff; border-radius: 4.5cqh;
  box-shadow: 0 .8cqh 2.4cqh rgba(16, 32, 60, .28); display: flex; flex-direction: column; align-items: center; gap: .9cqh; }
.tx-bubble::before { content: ''; position: absolute; left: -3cqh; bottom: 3cqh; border: 2cqh solid transparent; border-right: 3.6cqh solid #fff; border-left: 0; }
.tx-bubble.pop { animation: pop .5s; }
.tx-want { font-size: 14cqh; font-weight: 800; line-height: 1; color: var(--mp-ink); display: flex; align-items: center; gap: 1.2cqh; }
.tx-want::after { content: ''; width: 7.5cqh; height: 7.5cqh; background: url('../../assets/games/hitung/apel.webp') center / contain no-repeat; }
.tx-bubble.mystery .tx-want { color: #8a5cd6; }
.tx-eq { font-size: 5.4cqh; font-weight: 800; color: var(--mp-ink); white-space: nowrap; letter-spacing: .02em; }
.tx-eq:empty, .tx-dots:empty { display: none; }
.tx-dots { display: flex; gap: .6cqh; }
.tx-dots img { width: 4cqh; height: 4cqh; object-fit: contain; display: block; }

/* ---------- tombol di gambar: peti (A), bel (B), "10" (X, Susah) ---------- */
.tx-peti, .tx-bell, .tx-ten { position: absolute; border-radius: 3cqh; -webkit-tap-highlight-color: transparent; }
.tx-peti { left: 58.4cqw; top: 49.5cqh; width: 8.8cqw; height: 15cqh; }
.tx-bell { left: calc(88.96cqw - 6cqh); top: calc(62.09cqh - 7cqh); width: 12cqh; height: 12cqh; border-radius: 50%; }
.tx-ten { left: calc(62.5cqw - 6.5cqh); top: 76cqh; width: 13cqh; height: 13cqh; border-radius: 50%; background: #fff;
  display: grid; place-items: center; box-shadow: 0 .8cqh 2cqh rgba(16, 32, 60, .3); }
/* fokus (DS v3): panah oranye di atas benda yang disorot — tanpa cincin/glow */
.tx .f.on { transform: none; box-shadow: none; }
.tx .tx-ten.f.on { transform: scale(1.06); box-shadow: 0 .8cqh 2cqh rgba(16, 32, 60, .3); }
.tx .f.on::before { content: ''; position: absolute; left: 50%; top: -5.4cqh; margin-left: -2cqh; border-left: 2cqh solid transparent;
  border-right: 2cqh solid transparent; border-top: 2.8cqh solid var(--mp-cursor); filter: drop-shadow(0 .4cqh 0 rgba(140, 60, 0, .35));
  animation: tx-bob .6s ease-in-out infinite alternate; pointer-events: none; }
.tx .tx-bell.f.on::before { top: -3.4cqh; }
.tx .f:active { transform: scale(.96); }
.tx-peti.toss, .tx-ten.toss { animation: tx-toss .26s; }
.tx-peti.wiggle, .tx-ten.wiggle { animation: shake .5s; }
.tx-bell.ding::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 .6cqh rgba(255, 210, 63, .9); animation: ring .6s forwards; }
/* bantuan: denyut cahaya (hotspot transparan → tidak bisa pakai .hint-pulse bersama yang hanya membesarkan) */
.tx-peti.hint-pulse, .tx-bell.hint-pulse, .tx-ten.hint-pulse { animation: tx-glow 1s ease-in-out infinite; }

/* ikon posisi tombol muka — gaya sama dengan .wm .badge/.padico di huruf.css; hanya kalau controller terbaca */
.tx-pos { position: absolute; width: 5.4cqh; height: 5.4cqh; 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); pointer-events: none; }
.tx-pos svg { width: 100%; height: 100%; display: block; }
.tx-pos .dim { fill: #d6dbe6; }
.tx-pos .lit { fill: var(--mp-jc-r, #ff4554); stroke: var(--mp-ink); stroke-width: 4; }
body:not(.pad-on) .tx-pos { display: none; }
.tx-peti .tx-pos { left: 50%; margin-left: -2.7cqh; bottom: -6.6cqh; }   /* di bawah peti, di depan kaki meja */
.tx-bell .tx-pos { left: 50%; margin-left: -2.7cqh; bottom: -6cqh; }     /* di bawah bel — tidak menutupi bel */
.tx-ten .tx-pos { right: -1.6cqh; bottom: -1.6cqh; }

/* ---------- apel terbang: x linear (luar), y melengkung TINGGI (dalam) ---------- */
.tx-fly { position: absolute; inset: 0; pointer-events: none; }
.tx-arc { position: absolute; width: 0; height: 0; animation: tx-fx .56s linear forwards; }
.tx-arc-y { position: absolute; width: 5.7cqh; height: 5.7cqh; left: -2.85cqh; top: -2.85cqh; animation: tx-fy .56s forwards; }
.tx-arc-y > img { width: 100%; height: 100%; object-fit: contain; display: block; animation: tx-spin .56s linear; }
.tx-arc.ten .tx-arc-y { width: 7cqh; height: 7cqh; }
.tx-arc.back .tx-arc-y { width: 4.4cqh; height: 4.4cqh; }

/* ---------- keyframes khusus ---------- */
@keyframes tx-fx { to { transform: translateX(var(--dx)); } }
@keyframes tx-fy {
  0% { transform: translateY(0) scale(1); animation-timing-function: ease-out; }
  45% { transform: translateY(var(--peak)) scale(1.08); animation-timing-function: ease-in; }
  100% { transform: translateY(var(--dy)) scale(.7); }
}
@keyframes tx-spin { to { transform: rotate(-320deg); } }
@keyframes tx-rise { 0% { transform: translate(-50%, -50%) scale(.6); } 25% { transform: translate(-50%, -80%) scale(1.15); } 100% { transform: translate(-50%, -110%) scale(1); } } /* jangan naik ke bilah lampu */
@keyframes tx-breathe { from { scale: 1 1; } to { scale: 1.01 1.02; } }
@keyframes tx-chomp { 0% { scale: 1 1; } 35% { scale: 1.04 .96; } 70% { scale: .98 1.02; } 100% { scale: 1 1; } }
@keyframes tx-sway { 20% { rotate: -3deg; } 40% { rotate: 2.5deg; } 60% { rotate: -2deg; } 80% { rotate: 1deg; } }
@keyframes tx-puff { 30% { scale: 1.05 .95; } 60% { scale: .97 1.03; } }
@keyframes tx-stomp { 0% { translate: 0 0; scale: 1 1; } 35% { translate: 0 -3cqh; scale: .98 1.03; } 70% { translate: 0 0; scale: 1.05 .94; } 100% { translate: 0 0; scale: 1 1; } }
@keyframes tx-quake { 20% { translate: 0 .9cqh; } 45% { translate: -.5cqh -.4cqh; } 70% { translate: .4cqh .3cqh; } } /* translate menumpuk di atas transform centering */
@keyframes tx-bob { from { translate: 0 0; } to { translate: 0 -.9cqh; } }
@keyframes tx-toss { 40% { transform: scale(1.06, .92) translateY(.8cqh); } }
@keyframes tx-glow { 0%, 100% { box-shadow: 0 0 0 .6cqh rgba(255, 210, 63, .9), 0 0 2cqh rgba(255, 210, 63, .7); } 50% { box-shadow: 0 0 0 1.4cqh rgba(255, 210, 63, .35), 0 0 4cqh rgba(255, 210, 63, .5); } }