/* ===== Babak · gaya pakej enjin Sejarah Tingkatan 5 Bab 1, kumpulan 1a (js/pakej-t5-bab-01-1a.js): pancing, wayang.
   Awalan kelas, keyframes dan pemboleh ubah: t5b1a- (pancing t5b1a-pc-, wayang t5b1a-wy-). Susun atur diskop dengan
   .b2-j-<jenis> / .b2-p-<jenis>, body.mod-lebar (pentas 1280 x 720, .main-badan 720 lebar) dan body.mod-telefon (390 x 844;
   telefon pendek @media (max-height:700px)). Gerakan perlahan; keadaan akhir untuk prefers-reduced-motion.
   Palet Babak (SPEC-T5-BAB-01 §1.14). Kelas teras (.b2-kad, .op, .bisik, .b2-rumus) tidak digaya semula secara global. ===== */

/* ---------- Kongsi ---------- */
.b2-j-pancing .b2-kad,.b2-j-wayang .b2-kad{min-height:72px}
.b2-j-pancing .b2-kad-no,.b2-j-wayang .b2-kad-no{font-size:.8125rem;letter-spacing:.05em}
.b2-j-pancing .b2-kad-isi,.b2-j-wayang .b2-kad-isi{font-size:1.0625rem;line-height:1.28;overflow-wrap:break-word}
.b2-j-pancing .b2-rujuk-btn,.b2-j-wayang .b2-rujuk-btn{min-height:44px;font-size:.875rem}
.b2-j-pancing .bisik,.b2-j-wayang .bisik{font-size:.9375rem;line-height:1.35}
.t5b1a-petunjuk{margin-top:3px;font-size:.875rem;font-weight:800;line-height:1.3;color:var(--teal-teks)}
.t5b1a-petunjuk[hidden]{display:none}
.b2-kad.betul .t5b1a-petunjuk,.b2-kad.salah .t5b1a-petunjuk{color:inherit}
/* tag yang terbang ke papan (klon tanpa atribut data) */
.t5b1a-terbang{position:absolute;z-index:20;display:flex;align-items:center;justify-content:center;padding:4px 8px;border-radius:10px;background:#FFF6E0;
  color:var(--ink);font-size:14px;font-weight:800;line-height:1.12;text-align:center;box-shadow:0 6px 14px rgba(27,42,92,.28),inset 0 0 0 2px #E3CFA4;
  pointer-events:none;transform-origin:50% 50%;will-change:transform}
.t5b1a-terbang.t5b1a-dibantu{box-shadow:0 6px 14px rgba(27,42,92,.28),inset 0 0 0 2px #F94F55}
.b2-rumus-tokoh.t5b1a-rumus li{font-size:.875rem;line-height:1.35;align-content:start}
.b2-rumus-tokoh.t5b1a-rumus li b{font-size:.9375rem}
.b2-rumus-tokoh.t5b1a-rumus li.t5b1a-rumus-penuh{grid-column:1 / -1}
@keyframes t5b1a-goncang{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* =====================================================================================
   PANCING · KOLAM TAKRIF
   ===================================================================================== */
.t5b1a-pancing{display:grid;gap:10px;min-width:0}
/* papan tangkapan: takrif, isi raga atau garis jawapan (di bawah kolam; tinggi ikut isi) */
.t5b1a-pc-papan{position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:5px;min-height:60px;padding:9px 14px 11px;border-radius:20px;background:#FFFDF6;
  box-shadow:var(--lip),inset 0 0 0 2px #F0E2C2;transition:box-shadow .4s ease,background-color .4s ease}
.t5b1a-pc-papan.t5b1a-pc-cahaya{background:#FFF9E3;box-shadow:var(--lip),inset 0 0 0 3px var(--emas),0 0 0 5px rgba(255,201,51,.35)}
.t5b1a-pc-papan.t5b1a-pc-siap{background:var(--betul-bg);box-shadow:var(--lip),inset 0 0 0 2px #9FE0BF}
.t5b1a-pc-papan-label{font-size:.75rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-teks)}
.t5b1a-pc-papan-isi{min-width:0}
.t5b1a-pc-papan-pet{font-size:.875rem;font-weight:800;line-height:1.3;color:var(--teal-teks)}
.t5b1a-pc-papan-pet[hidden]{display:none}
.t5b1a-pc-ayat{font-size:.9375rem;font-weight:700;line-height:1.75;color:var(--ink)}
.t5b1a-pc-slot{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:3.4em;height:1.55em;padding:0 9px;border-radius:9px;vertical-align:-.3em;
  background:#EEF2FB;box-shadow:inset 0 -3px 0 #AEB9D8;font-weight:900;color:var(--ink2);transition:background-color .35s ease,box-shadow .35s ease,color .35s ease}
.t5b1a-pc-slot b{font-size:.9375rem;color:var(--ink)}
.t5b1a-pc-slot i{font-style:normal;font-size:.875rem;letter-spacing:.06em;color:#7D8FC0}
.t5b1a-pc-slot.t5b1a-pc-aktif{background:#FFF1BF;box-shadow:inset 0 -3px 0 var(--emas-d),0 0 0 2px var(--emas)}
.t5b1a-pc-slot.t5b1a-pc-isi{display:inline;height:auto;min-width:0;padding:1px 3px;vertical-align:baseline;border-radius:6px;background:transparent;box-shadow:none;color:var(--ink);font-weight:900;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.t5b1a-pc-slot.t5b1a-pc-isi.t5b1a-pc-baru{background:var(--betul-bg);color:var(--betul-teks)}
.t5b1a-pc-slot.t5b1a-dibantu{outline:2px dashed #F94F55;outline-offset:1px}
.t5b1a-pc-jawapan{min-width:12em;height:2em;font-size:1rem}
.t5b1a-pc-jawapan.t5b1a-pc-isi{display:inline-block;padding:3px 10px;border-radius:10px;background:var(--betul-bg);color:var(--betul-teks);font-size:1rem;line-height:1.3}
.t5b1a-pc-raga-isi{display:flex;flex-wrap:wrap;gap:7px}
.t5b1a-pc-cip{display:inline-flex;align-items:center;min-height:34px;min-width:84px;padding:5px 12px;border-radius:12px;font-size:.9375rem;font-weight:900;line-height:1.2;
  background:var(--betul-bg);color:var(--betul-teks);box-shadow:inset 0 0 0 2px #9FE0BF}
.t5b1a-pc-cip.t5b1a-pc-kosong{background:#F6F8FD;color:transparent;box-shadow:none;border:2px dashed #B9C5E3;padding:3px 10px}
.t5b1a-pc-cip.t5b1a-pc-baru{animation:t5b1a-pc-masuk .45s ease-out}
.t5b1a-pc-cip.t5b1a-dibantu{outline:2px dashed #F94F55;outline-offset:2px}
@keyframes t5b1a-pc-masuk{from{transform:scale(.8);opacity:.3}to{transform:scale(1);opacity:1}}

/* kolam */
.t5b1a-pc-kolam{position:relative;height:340px;border-radius:22px;overflow:hidden;background:#6CCFF5;border:3px solid #fff;box-shadow:var(--bayang);touch-action:manipulation}
.t5b1a-pc-latar,.t5b1a-pc-atas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.t5b1a-pc-latar{z-index:0}
.t5b1a-pc-atas{z-index:4;pointer-events:none;overflow:visible}
.t5b1a-pc-lapis{position:absolute;inset:0;z-index:2}
/* ikan: butang pegun; hanya lapisan dalam yang bergerak */
.t5b1a-pc-ikan{position:absolute;display:block;padding:0;border-radius:14px;background:none;color:var(--ink);text-align:center;-webkit-tap-highlight-color:transparent}
.t5b1a-pc-ikan[disabled]{cursor:default}
.t5b1a-pc-ikan:focus-visible{outline:3px solid var(--fokus);outline-offset:3px}
.t5b1a-pc-ikan.t5b1a-pc-sasar,.t5b1a-pc-ikan.betul,.t5b1a-pc-ikan.t5b1a-dibantu{z-index:3}
.t5b1a-pc-gerak,.t5b1a-pc-apung{position:absolute;inset:0;display:block}
.t5b1a-pc-apung{animation:t5b1a-pc-apung 1.2s ease-in-out infinite alternate}
.t5b1a-pc-badan{position:absolute;left:-8px;top:-4px;width:calc(100% + 12px);height:calc(100% + 8px);overflow:visible;pointer-events:none}
.t5b1a-pc-ekor{animation:t5b1a-pc-kibas 1.2s ease-in-out infinite alternate}
.t5b1a-pc-teks{position:absolute;left:4px;right:6px;top:5px;bottom:5px;display:flex;align-items:center;justify-content:center;padding:2px 5px;border-radius:10px;
  background:#FFF6E0;box-shadow:inset 0 0 0 1.5px #E3CFA4,0 2px 0 rgba(27,42,92,.16);overflow:hidden;transition:background-color .25s ease,box-shadow .25s ease}
.t5b1a-pc-tk{display:block;max-width:100%;font-size:14px;font-weight:800;line-height:1.14;color:var(--ink);text-align:center;overflow-wrap:break-word}
.t5b1a-pc-tk.t5b1a-pc-tk-ukur{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;font-size:14px;line-height:1}
/* tag padat: jidar dalam lebih kecil supaya teks panjang (≤ 52 aksara) kekal 14 px dalam tiga baris */
.t5b1a-pc-ikan.t5b1a-pc-padat .t5b1a-pc-teks{left:2px;right:3px;top:3px;bottom:3px;padding:3px 3px 1px}
/* cincin tag: tempat mata kail tersangkut */
.t5b1a-pc-apung::after{content:"";position:absolute;left:50%;top:-2px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#FFF6E0;box-shadow:inset 0 0 0 2.2px #C8A472}
.t5b1a-pc-no{display:none}
.t5b1a-pc-ikan.t5b1a-pc-sorot:not([disabled]) .t5b1a-pc-teks{box-shadow:inset 0 0 0 2.5px var(--emas),0 2px 0 rgba(27,42,92,.16)}
.t5b1a-pc-ikan.t5b1a-pc-dipilih .t5b1a-pc-teks{outline:3px dashed #C2560F;outline-offset:2px;box-shadow:inset 0 0 0 2.5px var(--emas)}
.t5b1a-pc-ikan.salah .t5b1a-pc-teks{background:var(--salah-bg);box-shadow:inset 0 0 0 2.5px #E0555D,0 0 0 3px rgba(249,79,85,.35);transition:none}
.t5b1a-pc-ikan.salah .t5b1a-pc-tk{color:var(--salah-teks)}
.t5b1a-pc-ikan.salah .t5b1a-pc-apung{animation:t5b1a-pc-ronta .4s ease}
.t5b1a-pc-ikan.kilat .t5b1a-pc-teks{background:var(--betul-bg);box-shadow:inset 0 0 0 3px var(--hijau),0 0 0 4px rgba(26,154,92,.32)}
.t5b1a-pc-ikan.kilat .t5b1a-pc-tk,.t5b1a-pc-ikan.betul .t5b1a-pc-tk{color:var(--betul-teks)}
.t5b1a-pc-ikan.betul .t5b1a-pc-teks{background:var(--betul-bg);box-shadow:inset 0 0 0 2.5px var(--hijau)}
.t5b1a-pc-ikan.t5b1a-dibantu .t5b1a-pc-teks{background:var(--betul-bg);box-shadow:inset 0 0 0 2.5px #F94F55;outline:2px dashed #F94F55;outline-offset:2px}
.t5b1a-pc-ikan.pudar{opacity:.42}
.t5b1a-pc-ikan.pudar .t5b1a-pc-apung,.t5b1a-pc-ikan.t5b1a-pc-sasar .t5b1a-pc-apung,.t5b1a-pc-ikan.betul .t5b1a-pc-apung,.t5b1a-pc-ikan.t5b1a-dibantu .t5b1a-pc-apung{animation:none}
.t5b1a-pc-ikan.pudar .t5b1a-pc-ekor,.t5b1a-pc-ikan.t5b1a-pc-sasar .t5b1a-pc-ekor{animation:none}
.t5b1a-pc-ikan .t5b1a-pc-apung.t5b1a-pc-geliat{animation:t5b1a-pc-geliat .18s ease-in-out 1}
@keyframes t5b1a-pc-apung{from{transform:translateY(-3px)}to{transform:translateY(3px)}}
@keyframes t5b1a-pc-kibas{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
@keyframes t5b1a-pc-ronta{0%,100%{transform:translate(0,0) rotate(0)}20%{transform:translate(-6px,2px) rotate(-4deg)}45%{transform:translate(6px,-1px) rotate(4deg)}70%{transform:translate(-4px,1px) rotate(-2deg)}}
@keyframes t5b1a-pc-geliat{0%,100%{transform:rotate(0)}30%{transform:rotate(-5deg)}70%{transform:rotate(5deg)}}
/* mata kail: pemegang seret ≥ 44 px */
.t5b1a-pc-mata{position:absolute;left:0;top:0;z-index:5;width:48px;height:48px;pointer-events:none;touch-action:none;cursor:grab}
.t5b1a-pc-mata.t5b1a-pc-rehat{pointer-events:auto}
.t5b1a-pc-mata.t5b1a-pc-diseret{cursor:grabbing}
.t5b1a-pc-mata-svg{position:absolute;left:12px;top:8px;width:24px;height:30px;overflow:visible;transform-origin:12px 14px;filter:drop-shadow(0 1px 0 rgba(255,255,255,.8))}
/* raga di hujung kanan jalur sampan (langkah pasang) */
.t5b1a-pc-raga{position:absolute;z-index:3;width:76px;pointer-events:none}
.t5b1a-pc-raga-svg{display:block;width:100%;height:auto;overflow:visible}
.t5b1a-pc-tudung{transform-origin:12px 22px;transform:rotate(-28deg);transition:transform .3s ease}
.t5b1a-pc-raga.t5b1a-pc-tutup .t5b1a-pc-tudung{transform:rotate(0)}
.t5b1a-pc-raga.t5b1a-pc-terima{animation:t5b1a-pc-terima .35s ease-out}
@keyframes t5b1a-pc-terima{0%,100%{transform:scale(1)}45%{transform:scale(1.08)}}
.t5b1a-pc-raga-label{position:absolute;right:calc(100% + 6px);top:10px;width:118px;padding:3px 7px;border-radius:8px;background:#FFF6E0;box-shadow:inset 0 0 0 1.5px #C99A5B,0 2px 0 rgba(27,42,92,.16);
  font-size:12px;font-weight:900;line-height:1.2;color:#6E3F1B;text-align:center}
/* kawalan: < Turun > dan bisik */
.t5b1a-pc-bawah{display:grid;gap:10px;min-width:0}
.t5b1a-pc-bawah .bisik{min-height:48px}
.t5b1a-pc-kawal{display:flex;align-items:center;justify-content:center;gap:12px}
.t5b1a-pc-kiri,.t5b1a-pc-kanan{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;color:var(--ink);
  box-shadow:0 5px 0 rgba(27,42,92,.22),inset 0 0 0 2px var(--garis)}
.t5b1a-pc-kiri .ikon,.t5b1a-pc-kanan .ikon{width:24px;height:24px;stroke-width:2.8}
.t5b1a-pc-kiri:active,.t5b1a-pc-kanan:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(27,42,92,.22),inset 0 0 0 2px var(--garis)}
.btn.t5b1a-pc-turun{flex:1 1 auto;max-width:230px;min-height:52px;padding:8px 20px}
.btn.t5b1a-pc-turun .ikon{width:22px;height:22px}

/* =====================================================================================
   WAYANG · PANGGUNG PANDANGAN TOKOH
   ===================================================================================== */
.t5b1a-wayang{display:grid;gap:10px;min-width:0}
.t5b1a-wy-panggung{position:relative;padding:8px 8px 10px;border-radius:24px;background:linear-gradient(180deg,#F8EDD6 0%,#F1DFBE 100%);
  box-shadow:var(--bayang),inset 0 0 0 3px #fff;overflow:hidden}
/* bingkai kayu berukir (corak geometri ringkas) dan kelir */
.t5b1a-wy-bingkai{position:relative;padding:7px;border-radius:16px;background-color:#8A5226;
  background-image:linear-gradient(45deg,#A86A34 25%,transparent 25%,transparent 75%,#A86A34 75%),linear-gradient(45deg,#A86A34 25%,transparent 25%,transparent 75%,#A86A34 75%);
  background-size:12px 12px;background-position:0 0,6px 6px;box-shadow:inset 0 0 0 2px #6E3F1B,0 3px 0 rgba(27,42,92,.2)}
.t5b1a-wy-kelir{--t5b1a-wy-x:50%;position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:10px;
  background:radial-gradient(ellipse 58% 120% at var(--t5b1a-wy-x) 100%,#FFFDF6 0%,#FCF2DA 42%,#EFDCB2 100%);box-shadow:inset 0 0 0 2px #E3C890,inset 0 -18px 30px rgba(194,86,15,.08)}
.t5b1a-wy-kapsyen{position:relative;z-index:2;display:grid;align-content:center;gap:2px;padding:9px 16px 4px;text-align:center}
.t5b1a-wy-kapsyen.t5b1a-dibantu{outline:2.5px dashed #F94F55;outline-offset:-5px;border-radius:12px}
.t5b1a-wy-tanya{font-size:.9375rem;font-weight:800;font-style:italic;line-height:1.3;color:#A08458}
.t5b1a-wy-petik{font-size:.9375rem;font-weight:900;line-height:1.35;color:var(--ink);text-wrap:balance}
.t5b1a-wy-oleh{font-size:.875rem;font-weight:900;line-height:1.3;color:#8A5226}
.t5b1a-wy-oleh small{font-size:.875rem;font-weight:700;color:var(--ink2)}
.t5b1a-wy-kenal-nama{font-size:1.0625rem;line-height:1.25;color:var(--ink)}
.t5b1a-wy-kenal-nama b{font-weight:900}
.t5b1a-wy-kenal-nama small{font-size:.875rem;font-weight:800;color:#8A5226}
.t5b1a-wy-kenal-senarai{display:grid;gap:3px;margin-top:4px;text-align:left}
.t5b1a-wy-kenal-senarai li{position:relative;padding-left:16px;font-size:.9375rem;font-weight:700;line-height:1.33;color:var(--ink)}
.t5b1a-wy-kenal-senarai li::before{content:"";position:absolute;left:3px;top:.5em;width:7px;height:7px;border-radius:2px;background:#E8971A;transform:rotate(45deg)}
/* bayang pada kelir */
.t5b1a-wy-jalur-bayang{position:relative;flex:none;height:96px}
.t5b1a-wy-bayang{position:absolute;bottom:0;height:100%;opacity:0;pointer-events:none}
.t5b1a-wy-bayang.t5b1a-wy-naik{opacity:.9;animation:t5b1a-wy-naik .5s ease-out backwards}
.t5b1a-wy-bayang.t5b1a-wy-hilang{opacity:0;transition:opacity .4s ease}
.t5b1a-wy-bayang-svg{display:block;width:100%;height:100%;overflow:visible}
.t5b1a-wy-bayang.t5b1a-wy-tajam .t5b1a-wy-bayang-svg{filter:drop-shadow(2px 0 0 #FFC933) drop-shadow(-2px 0 0 #FFC933) drop-shadow(0 2px 0 #FFC933) drop-shadow(0 -2px 0 #FFC933)}
.t5b1a-wy-bayang.t5b1a-wy-dibantu .t5b1a-wy-bayang-svg{filter:drop-shadow(2px 0 0 #F94F55) drop-shadow(-2px 0 0 #F94F55) drop-shadow(0 2px 0 #F94F55) drop-shadow(0 -2px 0 #F94F55)}
.t5b1a-wy-bayang.t5b1a-wy-merah{opacity:.8}
.t5b1a-wy-bayang.t5b1a-wy-merah .t5b1a-wy-bayang-svg{transform-origin:50% 100%;animation:t5b1a-wy-goyah .4s ease-in-out .45s 1}
.t5b1a-wy-bayang.t5b1a-wy-semua{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;gap:4%;width:auto;margin:0;opacity:.9}
.t5b1a-wy-bayang.t5b1a-wy-semua .t5b1a-wy-bayang-svg{width:auto;height:92%;filter:drop-shadow(1.5px 0 0 #FFC933) drop-shadow(-1.5px 0 0 #FFC933) drop-shadow(0 -1.5px 0 #FFC933)}
@keyframes t5b1a-wy-naik{from{opacity:0;transform:translateY(38%) scale(.9);filter:blur(4px)}to{opacity:.9;transform:none;filter:blur(0)}}
@keyframes t5b1a-wy-goyah{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}50%{transform:rotate(4deg)}75%{transform:rotate(-3deg)}}
/* patung pada batang pisang */
.t5b1a-wy-barisan{--t5b1a-wy-fig:76px;position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:8px 6px;margin-top:8px}
.t5b1a-wy-tokoh{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:stretch;width:110px;min-height:calc(var(--t5b1a-wy-fig) + 34px);padding:0 0 4px;border-radius:16px;
  background:transparent;color:var(--ink);transition:background-color .25s ease}
/* batang pisang: jalur di belakang papan nama, tepat di bawah kaki patung */
.t5b1a-wy-tokoh::before{content:"";position:absolute;z-index:-1;left:-7px;right:-7px;top:calc(var(--t5b1a-wy-fig) - 6px);height:22px;border-radius:11px;
  background:linear-gradient(180deg,#CFE6A7 0%,#A5CD78 60%,#86B35A 100%);box-shadow:inset 0 -3px 0 rgba(33,127,73,.35)}
.t5b1a-wy-tokoh:focus-visible{outline:3px solid var(--fokus);outline-offset:2px}
.t5b1a-wy-tokoh[disabled]{cursor:default}
.t5b1a-wy-patung{flex:none;height:var(--t5b1a-wy-fig);display:block;position:relative}
.t5b1a-wy-patung-svg{display:block;width:100%;height:100%;overflow:visible}
.t5b1a-wy-goyang{transform-origin:50px 140px;animation:t5b1a-wy-ayun 2s ease-in-out infinite alternate}
.t5b1a-wy-tokoh:nth-child(2) .t5b1a-wy-goyang{animation-delay:-.7s}
.t5b1a-wy-tokoh:nth-child(3) .t5b1a-wy-goyang{animation-delay:-1.3s}
.t5b1a-wy-tokoh:nth-child(4) .t5b1a-wy-goyang{animation-delay:-.35s}
.t5b1a-wy-tokoh:nth-child(5) .t5b1a-wy-goyang{animation-delay:-1s}
@keyframes t5b1a-wy-ayun{from{transform:rotate(-1.4deg)}to{transform:rotate(1.4deg)}}
.t5b1a-wy-nama{position:relative;flex:none;display:grid;gap:1px;margin:0 3px;padding:4px 5px;border-radius:9px;background:#FFF6E0;
  box-shadow:inset 0 0 0 2px #C99A5B,0 2px 0 rgba(27,42,92,.2);text-align:center;transition:background-color .25s ease,box-shadow .25s ease}
.t5b1a-wy-nama b{font-size:.875rem;font-weight:900;line-height:1.15;overflow-wrap:break-word;hyphens:manual}
.t5b1a-wy-ket{font-size:.8125rem;font-weight:700;line-height:1.15;color:var(--ink2)}
.t5b1a-wy-kira{position:absolute;right:-6px;top:-24px;display:grid;place-items:center;min-width:32px;height:22px;padding:0 6px;border-radius:11px;background:var(--hijau);
  color:#fff;font-size:14px;font-weight:900;line-height:1;box-shadow:0 2px 0 #0F6139}
.t5b1a-wy-kira[hidden]{display:none}
.t5b1a-wy-kira.t5b1a-wy-kira-naik{animation:t5b1a-wy-kira .45s ease-out}
@keyframes t5b1a-wy-kira{0%{transform:scale(.5)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
.t5b1a-wy-tokoh.t5b1a-wy-sorot:not([disabled]),.t5b1a-wy-tokoh.t5b1a-wy-aktif{background:rgba(255,214,102,.3)}
.t5b1a-wy-tokoh.t5b1a-wy-dipilih{background:rgba(255,214,102,.3);outline:3px dashed #C2560F;outline-offset:-1px}
.t5b1a-wy-tokoh.betul{background:rgba(26,154,92,.12)}
.t5b1a-wy-tokoh.betul .t5b1a-wy-nama{background:var(--betul-bg);box-shadow:inset 0 0 0 2.5px var(--hijau),0 2px 0 #1E9E63}
.t5b1a-wy-tokoh.salah .t5b1a-wy-nama{background:var(--salah-bg);color:var(--salah-teks);box-shadow:inset 0 0 0 2.5px #E0555D,0 2px 0 var(--merah-d)}
.t5b1a-wy-tokoh.salah .t5b1a-wy-patung{animation:t5b1a-goncang .4s ease}
.t5b1a-wy-tokoh.kilat{background:rgba(26,154,92,.14)}
.t5b1a-wy-tokoh.kilat .t5b1a-wy-nama{background:var(--betul-bg);box-shadow:inset 0 0 0 3px var(--hijau),0 0 0 4px rgba(26,154,92,.3)}
.t5b1a-wy-tokoh.pudar{opacity:.45}
.t5b1a-wy-tokoh.pudar .t5b1a-wy-goyang{animation:none}
/* pelita: di belakang patung (z-index di bawah butang); boleh diseret apabila tidak bertindih dengan patung */
.t5b1a-wy-landasan{display:none}
.t5b1a-wy-pelita{position:absolute;left:0;top:0;z-index:1;width:48px;height:52px;pointer-events:none;touch-action:none}
.t5b1a-wy-pelita.t5b1a-wy-boleh{pointer-events:auto;cursor:grab}
.t5b1a-wy-pelita.t5b1a-wy-diseret{cursor:grabbing}
.t5b1a-wy-pelita-svg{display:block;width:48px;height:52px;overflow:visible}
.t5b1a-wy-cahaya-pelita{transform-origin:24px 18px;transform:scale(2.2);pointer-events:none}
.t5b1a-wy-api{transform-origin:44px 20px;animation:t5b1a-wy-kelip 1.6s ease-in-out infinite alternate}
@keyframes t5b1a-wy-kelip{from{opacity:.9;transform:scale(.97)}to{opacity:1;transform:scale(1.03)}}
/* soalan akhir: patung dan pelita disimpan, kelir memaparkan semua bayang */
.t5b1a-wayang.t5b1a-wy-mod-soal .t5b1a-wy-barisan,.t5b1a-wayang.t5b1a-wy-mod-soal .t5b1a-wy-landasan,.t5b1a-wayang.t5b1a-wy-mod-soal .t5b1a-wy-pelita{display:none}
.t5b1a-wy-pilih{grid-template-columns:minmax(0,1fr);gap:8px}
.t5b1a-wy-pilih[hidden]{display:none}
.op.t5b1a-wy-op{min-height:52px;font-size:.9375rem}
/* butang Seterusnya / Mula di dalam bisik */
.t5b1a-wayang .bisik .b2-bisik-teks{flex:1 1 120px}
.bisik .btn.t5b1a-wy-terus{flex:none;min-height:48px;margin-left:auto;padding:6px 16px;border-radius:16px;font-size:1rem}
.bisik .btn.t5b1a-wy-terus .ikon{width:20px;height:20px}

/* =====================================================================================
   MOD LEBAR (pentas 1280 x 720; .main-badan 720 lebar, Kancil HUD di kiri)
   ===================================================================================== */
body.mod-lebar .b2-main.b2-j-pancing .main-badan,body.mod-lebar .b2-main.b2-j-wayang .main-badan{left:300px;width:720px;top:86px;bottom:12px;display:flex;flex-direction:column;align-content:stretch}
body.mod-lebar .b2-p-pancing,body.mod-lebar .b2-p-wayang{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
body.mod-lebar .t5b1a-pancing,body.mod-lebar .t5b1a-wayang{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
body.mod-lebar .t5b1a-pancing > *,body.mod-lebar .t5b1a-wayang > *{flex:none}
body.mod-lebar .b2-j-pancing .b2-kad,body.mod-lebar .b2-j-wayang .b2-kad{min-height:78px;padding:10px 20px 12px}
body.mod-lebar .b2-j-pancing .b2-kad-isi,body.mod-lebar .b2-j-wayang .b2-kad-isi{font-size:1.1875rem;line-height:1.28}
body.mod-lebar .b2-j-pancing .bisik,body.mod-lebar .b2-j-wayang .bisik{min-height:52px;padding:8px 14px}
/* pancing */
body.mod-lebar .t5b1a-pc-papan{padding:9px 18px 11px}
body.mod-lebar .t5b1a-pc-ayat{font-size:1rem;line-height:1.7}
body.mod-lebar .t5b1a-pc-kolam{height:300px}
body.mod-lebar .t5b1a-pc-bawah{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:14px}
body.mod-lebar .t5b1a-pc-kawal{gap:10px}
body.mod-lebar .btn.t5b1a-pc-turun{min-width:150px}
body.mod-lebar .t5b1a-pc-no{display:grid;place-items:center;position:absolute;left:-14px;top:-8px;z-index:2;width:20px;height:20px;border-radius:7px;background:var(--ink);
  color:#fff;font-size:12px;font-weight:900;line-height:1;box-shadow:0 2px 0 rgba(0,0,0,.25)}
body.mod-lebar .t5b1a-pc-ikan.pudar .t5b1a-pc-no{display:none}
body.mod-lebar .b2-p-pancing > .b2-rumus,body.mod-lebar .b2-p-wayang > .b2-rumus{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
body.mod-lebar .b2-p-pancing > .b2-rumus > *,body.mod-lebar .b2-p-wayang > .b2-rumus > *{flex:none}
body.mod-lebar .b2-p-pancing > .b2-rumus > .b2-rumus-tokoh,body.mod-lebar .b2-p-wayang > .b2-rumus > .b2-rumus-tokoh{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
/* wayang: kelir 600+ lebar, lima patung 120 x 150 sebaris, landasan pelita di bawah */
body.mod-lebar .t5b1a-wy-panggung{padding:9px 12px 8px}
body.mod-lebar .t5b1a-wy-bingkai{margin:0 22px}
body.mod-lebar .t5b1a-wy-kapsyen{padding:10px 22px 4px}
body.mod-lebar .t5b1a-wy-petik{font-size:1.0625rem}
body.mod-lebar .t5b1a-wy-oleh,body.mod-lebar .t5b1a-wy-oleh small{font-size:.9375rem}
body.mod-lebar .t5b1a-wy-tanya{font-size:1rem}
body.mod-lebar .t5b1a-wy-jalur-bayang{height:112px}
body.mod-lebar .t5b1a-wayang[data-fasa="kenal"] .t5b1a-wy-jalur-bayang{height:92px}
body.mod-lebar .t5b1a-wy-barisan{--t5b1a-wy-fig:96px;flex-wrap:nowrap;gap:9px;margin-top:8px}
body.mod-lebar .t5b1a-wy-tokoh{width:128px;min-height:150px}
body.mod-lebar .t5b1a-wayang.t5b1a-latihan .t5b1a-wy-tokoh{min-height:132px}
body.mod-lebar .t5b1a-wy-tokoh::before{left:-8px;right:-8px}
body.mod-lebar .t5b1a-wy-nama{margin:0 1px;padding:4px 3px 5px}
body.mod-lebar .t5b1a-wy-landasan{display:block;position:relative;height:36px;margin:6px 20px 0;border-radius:12px;
  background:linear-gradient(180deg,#9A5E2C 0%,#8A5226 55%,#6E3F1B 100%);box-shadow:inset 0 3px 0 rgba(255,255,255,.18),0 3px 0 rgba(27,42,92,.2)}
body.mod-lebar .t5b1a-wy-landasan::after{content:"";position:absolute;left:14px;right:14px;top:9px;height:3px;border-radius:2px;background:rgba(255,214,102,.35)}
body.mod-lebar .t5b1a-wy-pilih{grid-template-columns:repeat(2,minmax(0,1fr))}
body.mod-lebar .t5b1a-wy-pilih .op:last-child:nth-child(odd){grid-column:1 / -1}
body.mod-lebar .t5b1a-wayang.t5b1a-wy-mod-soal .t5b1a-wy-jalur-bayang{height:120px}

/* =====================================================================================
   TELEFON (390 x 844) dan TELEFON PENDEK (375 x 667)
   ===================================================================================== */
body.mod-telefon .b2-j-pancing .b2-kad,body.mod-telefon .b2-j-wayang .b2-kad{padding:8px 14px 9px}
body.mod-telefon .b2-j-pancing .b2-kad-isi,body.mod-telefon .b2-j-wayang .b2-kad-isi{font-size:.9375rem;line-height:1.3}
body.mod-telefon .t5b1a-pc-papan{padding:8px 12px 10px}
body.mod-telefon .t5b1a-pc-ayat{font-size:.875rem;line-height:1.7}
body.mod-telefon .t5b1a-pc-raga{width:60px}
body.mod-telefon .t5b1a-pc-raga-label{display:none}
body.mod-telefon .t5b1a-pc-cip{min-width:64px;min-height:30px;padding:3px 9px;font-size:.875rem;border-radius:10px}
body.mod-telefon .t5b1a-pc-raga-isi{gap:5px}
body.mod-telefon .t5b1a-pc-kawal{justify-content:stretch}
body.mod-telefon .btn.t5b1a-pc-turun{max-width:none}
body.mod-telefon .t5b1a-wy-jalur-bayang{height:92px}
body.mod-telefon .t5b1a-wy-kapsyen{padding:8px 12px 3px}
body.mod-telefon .t5b1a-wy-panggung{padding:6px 6px 8px}
body.mod-telefon .t5b1a-wy-ket{display:none}
@media (max-height:700px){
  body.mod-telefon .t5b1a-pancing,body.mod-telefon .t5b1a-wayang{gap:8px}
  body.mod-telefon .b2-j-pancing .b2-kad,body.mod-telefon .b2-j-wayang .b2-kad{min-height:0;padding:7px 12px 8px}
  body.mod-telefon .b2-j-pancing .b2-kad-isi,body.mod-telefon .b2-j-wayang .b2-kad-isi{font-size:.875rem}
  body.mod-telefon .t5b1a-pc-kolam{height:288px}
  body.mod-telefon .t5b1a-pc-papan{padding:6px 12px 8px;gap:3px}
  body.mod-telefon .t5b1a-pc-ayat{line-height:1.6}
  body.mod-telefon .t5b1a-pc-bawah{gap:8px}
  body.mod-telefon .t5b1a-pc-bawah .bisik{min-height:44px;padding:7px 12px;font-size:.875rem}
  body.mod-telefon .t5b1a-pc-kiri,body.mod-telefon .t5b1a-pc-kanan{width:48px;height:48px}
  body.mod-telefon .btn.t5b1a-pc-turun{min-height:48px}
  body.mod-telefon .t5b1a-wy-barisan{--t5b1a-wy-fig:58px;gap:6px 5px;margin-top:6px}
  body.mod-telefon .t5b1a-wy-tokoh{width:106px}
  body.mod-telefon .t5b1a-wayang[data-fasa="kenal"] .t5b1a-wy-jalur-bayang{height:58px}
  body.mod-telefon .t5b1a-wy-nama{margin:0 1px;padding:3px 2px 4px}
  body.mod-telefon .t5b1a-wy-kenal-nama{font-size:1rem}
  body.mod-telefon .t5b1a-wy-jalur-bayang{height:76px}
  body.mod-telefon .t5b1a-wy-kapsyen{padding:6px 10px 2px}
  body.mod-telefon .t5b1a-wy-petik,body.mod-telefon .t5b1a-wy-tanya,body.mod-telefon .t5b1a-wy-kenal-senarai li{font-size:.875rem}
  body.mod-telefon .t5b1a-wayang .bisik{min-height:44px;padding:7px 12px;font-size:.875rem}
}
@media (max-width:370px){
  body.mod-telefon .t5b1a-wy-tokoh{width:100px}
}

/* ---------- Gerakan dikurangkan: keadaan akhir sahaja ---------- */
@media (prefers-reduced-motion:reduce){
  .t5b1a-pc-apung,.t5b1a-pc-ekor,.t5b1a-pc-ikan.salah .t5b1a-pc-apung,.t5b1a-pc-cip.t5b1a-pc-baru,.t5b1a-pc-raga.t5b1a-pc-terima,
  .t5b1a-wy-goyang,.t5b1a-wy-api,.t5b1a-wy-bayang.t5b1a-wy-naik,.t5b1a-wy-bayang.t5b1a-wy-merah .t5b1a-wy-bayang-svg,.t5b1a-wy-kira.t5b1a-wy-kira-naik,.t5b1a-wy-tokoh.salah .t5b1a-wy-patung{animation:none}
  .t5b1a-pc-tudung,.t5b1a-pc-teks,.t5b1a-pc-slot,.t5b1a-pc-papan,.t5b1a-wy-bayang.t5b1a-wy-hilang,.t5b1a-wy-tokoh,.t5b1a-wy-nama{transition:none}
  .t5b1a-wy-bayang.t5b1a-wy-naik{opacity:.9;transform:none;filter:none}
}
