/* ===== Babak · gaya pakej enjin Bab 10, kumpulan 10b (js/pakej-bab-10-10b.js): mangga, belon.
   Awalan b10b- bagi kelas, keyframes dan pemboleh ubah CSS (belon: b10b-bl-). Susun atur diskop dengan .b2-j-<jenis> / .b2-p-<jenis>,
   body.mod-lebar (pentas 1280 x 720; .main-badan kiri 300, lebar 720) dan body.mod-telefon (390 x 844; telefon pendek
   @media (max-height:700px)). Keadaan akhir untuk prefers-reduced-motion di hujung fail. ===== */

/* ---------- Bersama ---------- */
.b10b-goncang{animation:goncang .4s}
.b10b-klon-seret{position:absolute!important;z-index:40;margin:0!important;pointer-events:none;transition:none!important;box-shadow:0 16px 28px rgba(27,42,92,.32)!important}
.b2-j-mangga .b2-kad-no,.b2-j-belon .b2-kad-no{font-size:.875rem;letter-spacing:.04em}
.b2-j-mangga .b2-kad-isi,.b2-j-belon .b2-kad-isi{font-size:1.0625rem;overflow-wrap:break-word}
.b2-j-mangga .b2-rujuk-btn,.b2-j-belon .b2-rujuk-btn{font-size:.875rem;min-height:44px}
.b2-j-mangga .b2-rumus-label,.b2-j-belon .b2-rumus-label{font-size:.875rem}
.b2-j-mangga .b2-rumus-tokoh li,.b2-j-belon .b2-rumus-tokoh li{font-size:.875rem;line-height:1.35;align-content:start}
.b2-j-mangga .op,.b2-j-belon .op{min-height:50px;font-size:.9375rem;padding:8px 14px}
.b10b-op-teks{min-width:0;overflow-wrap:break-word}
.b10b-soal-tempat{display:grid;min-width:0}
.b10b-soal-tempat:empty{display:none}
.b10b-soal{display:grid;gap:8px;min-width:0;padding:12px 14px 14px;border-radius:18px;background:#FFFDF7;box-shadow:var(--lip),inset 0 0 0 2px #EADFC4,inset 5px 0 0 #7B57E0}
.b10b-soal.masuk{animation:lompat .35s ease-out both}
.b10b-soal.betul{box-shadow:var(--lip),inset 0 0 0 2px #9FE0BF,inset 5px 0 0 #1A9A5C}
.b10b-soal-label{font-size:.875rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#5537A8}
.b10b-soal-s{font-size:1.0625rem;font-weight:900;line-height:1.3;color:var(--ink);overflow-wrap:break-word}
.b10b-soal-pilih{grid-template-columns:minmax(0,1fr);gap:8px}
.b10b-rumus-lanjut{display:grid;gap:10px;min-width:0}
.b10b-rumus-soal li b{color:var(--ink)}

/* =====================================================================================
   MANGGA · MANGGA KUASA
   ===================================================================================== */
.b10b-mangga{display:grid;gap:10px;min-width:0}
.b10b-dinding{position:relative;display:grid;gap:8px;min-width:0;padding:8px 10px 14px;border-radius:20px;
  background-color:#9C5F31;background-image:repeating-linear-gradient(180deg,transparent 0 34px,rgba(60,30,10,.26) 34px 36px),linear-gradient(90deg,rgba(255,255,255,.07),rgba(0,0,0,.08));
  box-shadow:var(--bayang),inset 0 0 0 4px #7A4521,inset 0 0 0 6px #5E3317}
.b10b-dinding-kepala{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:32px}
.b10b-dk-kiri,.b10b-dk-kanan{display:flex;align-items:center;gap:6px;min-width:0;min-height:30px;padding:3px 10px;border-radius:12px;background:rgba(255,246,224,.95);
  box-shadow:0 2px 0 rgba(40,20,5,.4);font-size:.875rem;font-weight:900;color:#6E3F1B;transition:opacity .3s ease}
.b10b-dk-kiri{flex:1 1 auto;flex-wrap:wrap}
.b10b-dk-kanan{flex:none}
.b10b-dk-kanan.b10b-kosong{opacity:.55}
.b10b-dk-label{letter-spacing:.04em;text-transform:uppercase}
.b10b-dk-kira{color:var(--ink)}
.b10b-dibuka-ikon{display:flex;flex-wrap:wrap;gap:2px}
.b10b-dk-ikon{display:block;width:20px;height:16px;animation:b10b-muncul-kecil .4s ease-out both}
.b10b-dk-ikon svg,.b10b-peti-kecil{display:block;width:100%;height:100%}
.b10b-longgok svg{display:block;width:30px;height:22px}
@keyframes b10b-muncul-kecil{0%{transform:scale(.2);opacity:0}70%{transform:scale(1.2);opacity:1}100%{transform:none}}
.b10b-rak{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px;min-width:0}
.b10b-rak.n1{grid-template-columns:minmax(0,200px);justify-content:center}
.b10b-slot{position:relative;display:grid;min-width:0}
/* peti: tudung (CSS), bahagian dalam bercahaya, badan kayu dengan plat, mangga SVG, plak, tanda */
.b10b-peti{--b10b-tutup:38px;position:relative;display:block;width:100%;min-height:178px;padding:0;background:none;color:var(--ink);text-align:left;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:12px}
.b10b-peti-tutup{position:absolute;left:3px;right:3px;top:0;height:var(--b10b-tutup);z-index:2;border-radius:26px 26px 5px 5px/22px 22px 5px 5px;
  background:linear-gradient(180deg,#D39457,#A8683A 68%,#8A5226);box-shadow:inset 0 0 0 2px #6E3F1B,inset 0 -7px 0 #E8B32E,inset 0 -9px 0 #8A5226;
  transform-origin:50% 0;transition:transform .52s cubic-bezier(.3,.7,.3,1),filter .52s ease}
.b10b-peti-tutup::before{content:"";position:absolute;inset:2px 2px 9px;border-radius:inherit;background:linear-gradient(90deg,transparent 14%,#E8B32E 14% 20%,transparent 20% 80%,#E8B32E 80% 86%,transparent 86%)}
.b10b-peti-tutup::after{content:"";position:absolute;left:50%;bottom:-7px;width:26px;height:16px;margin-left:-13px;border-radius:4px;background:#FFC933;box-shadow:inset 0 0 0 2px #8A5226}
.b10b-peti-dalam{position:absolute;left:8px;right:8px;top:calc(var(--b10b-tutup) - 20px);height:26px;z-index:1;border-radius:8px 8px 3px 3px;
  background:radial-gradient(ellipse at 50% 110%,#FFF1B8 0,#FFC933 26%,#8A5226 60%,#3E220B 100%);opacity:0;transition:opacity .45s ease}
.b10b-peti-badan{position:absolute;left:0;right:0;top:calc(var(--b10b-tutup) - 3px);bottom:0;z-index:1;display:flex;padding:30px 9px 9px;border-radius:7px 7px 13px 13px;
  background-color:#B8743C;background-image:linear-gradient(90deg,transparent 12%,#E8B32E 12% 17%,transparent 17% 83%,#E8B32E 83% 88%,transparent 88%),repeating-linear-gradient(90deg,#C98B4F 0 22px,#B8743C 22px 24px);
  box-shadow:inset 0 0 0 2px #6E3F1B,inset 0 -6px 0 rgba(0,0,0,.14),0 5px 0 rgba(40,20,5,.4);transition:box-shadow .2s ease}
.b10b-peti-plat{position:relative;flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-width:0;padding:9px 9px 8px;border-radius:8px;
  background-color:#FFF6E0;background-image:radial-gradient(circle at 7px 7px,#E8971A 0 2px,transparent 2.6px),radial-gradient(circle at calc(100% - 7px) 7px,#E8971A 0 2px,transparent 2.6px),
  radial-gradient(circle at 7px calc(100% - 7px),#E8971A 0 2px,transparent 2.6px),radial-gradient(circle at calc(100% - 7px) calc(100% - 7px),#E8971A 0 2px,transparent 2.6px);
  box-shadow:inset 0 0 0 2px #E3CFA4,0 2px 0 rgba(40,20,5,.3);font-size:.9375rem;font-weight:800;line-height:1.25;text-align:center;color:var(--ink);transition:background-color .2s ease}
.b10b-plat-teks{min-width:0;max-width:100%;overflow-wrap:anywhere}
.b10b-mangga-kunci{position:absolute;left:50%;top:calc(var(--b10b-tutup) - 24px);z-index:3;width:40px;height:51px;margin-left:-20px;pointer-events:none;
  filter:drop-shadow(0 3px 2px rgba(40,20,5,.35));transition:transform .36s ease-in,opacity .36s ease-in}
.b10b-mangga-kunci svg{display:block;width:100%;height:100%;overflow:visible}
.b10b-belenggu{transition:transform .18s cubic-bezier(.2,.9,.3,1.6)}
.b10b-peti.b10b-lepas .b10b-belenggu{transform:translateY(-7px)}
.b10b-peti.b10b-jatuh .b10b-mangga-kunci{transform:translateY(34px) rotate(16deg);opacity:0}
.b10b-peti.b10b-buka .b10b-peti-tutup{transform:perspective(300px) rotateX(-74deg) translateY(-3px);filter:brightness(.9)}
.b10b-peti.b10b-buka .b10b-peti-dalam{opacity:1}
.b10b-plak{position:absolute;left:5px;right:5px;top:calc(var(--b10b-tutup) - 8px);bottom:5px;z-index:4;display:flex;flex-direction:column;gap:5px;padding:8px 9px;border-radius:10px;
  background:#FFFDF6;box-shadow:0 0 0 2px #E8C66A,0 10px 16px rgba(40,20,5,.35);opacity:0;transform:translateY(28px) scale(.95);
  transition:opacity .42s ease,transform .46s cubic-bezier(.25,.8,.3,1.1);pointer-events:none;overflow:hidden}
.b10b-peti.b10b-naik .b10b-plak{top:3px;opacity:1;transform:none}
.b10b-plak-kunci{align-self:center;max-width:100%;padding:2px 10px;border-radius:10px;background:var(--b10b-kw,#3D8BF2);color:#fff;font-size:.875rem;font-weight:900;line-height:1.25;text-align:center;overflow-wrap:break-word}
.b10b-plak-teks{min-height:0;overflow-y:auto;font-size:.875rem;font-weight:700;line-height:1.3;color:var(--ink);overflow-wrap:break-word}
.b10b-peti-tanda{position:absolute;right:-5px;top:calc(var(--b10b-tutup) - 20px);z-index:5;width:30px;height:30px;opacity:0;transform:scale(.3);pointer-events:none}
.b10b-peti-tanda svg{display:block;width:100%;height:100%}
.b10b-peti.b10b-naik .b10b-peti-tanda{opacity:1;transform:none;transition:opacity .3s .2s ease,transform .4s .2s cubic-bezier(.3,1.6,.5,1)}
.b10b-peti.b10b-dibantu .b10b-peti-tanda circle{fill:#C9323F}
.b10b-peti.b10b-dibantu .b10b-plak{box-shadow:0 0 0 2px #E0555D,0 10px 16px rgba(40,20,5,.35);background-image:repeating-linear-gradient(135deg,rgba(249,79,85,.06) 0 6px,transparent 6px 12px)}
.b10b-mangga.b10b-ada-kunci .b10b-peti:not(.b10b-buka) .b10b-peti-badan{box-shadow:inset 0 0 0 2px #6E3F1B,0 0 0 3px rgba(255,201,51,.85),0 5px 0 rgba(40,20,5,.4)}
.b10b-peti.b10b-pilih .b10b-peti-badan,.b10b-peti.b10b-dekat .b10b-peti-badan{box-shadow:inset 0 0 0 2px #6E3F1B,0 0 0 4px #FFC933,0 0 0 8px rgba(255,201,51,.35),0 5px 0 rgba(40,20,5,.4)}
.b10b-peti.b10b-pilih .b10b-peti-plat{background-color:#FFF1BF}
.b10b-peti.salah .b10b-peti-badan{box-shadow:inset 0 0 0 2px #6E3F1B,0 0 0 4px #F94F55,0 5px 0 rgba(40,20,5,.4)}
.b10b-peti.salah .b10b-peti-plat{background-color:var(--salah-bg);color:var(--salah-teks)}
.b10b-peti.b10b-buka{cursor:default}
.b10b-peti.b10b-masuk-peti{animation:b10b-masuk-peti .55s cubic-bezier(.25,.8,.3,1) both}
@keyframes b10b-masuk-peti{from{transform:translateX(48px) rotate(2deg);opacity:0}to{transform:none;opacity:1}}
.b10b-peti.b10b-keluar{transition:transform .45s ease-in,opacity .45s ease-in;transform:translateY(-20px) scale(.55);opacity:0}
/* gelang kunci */
.b10b-cincin{display:grid;gap:8px;min-width:0}
.b10b-gelang{position:relative;display:grid;gap:8px;min-width:0;padding:10px;border-radius:18px;background:linear-gradient(#8A5226,#6E3F1B);box-shadow:var(--bayang),inset 0 0 0 2px #4A2A0E}
.b10b-gelang-cincin{display:none}
.b10b-kunci-senarai{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 6px;min-width:0;padding-top:8px}
/* kunci: telefon = cip (ikon di atas, nama di bawah; ket dipapar dalam bisik apabila dipilih); lebar = baris (ikon | nama + ket satu baris) */
.b10b-kunci{--b10b-kw:#3D8BF2;position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-content:center;row-gap:2px;width:100%;min-height:48px;padding:11px 5px 6px;border-radius:12px;
  background:#FFF6E0;color:var(--ink);text-align:center;box-shadow:0 4px 0 rgba(0,0,0,.38),inset 0 0 0 2px #EADFC4,inset 0 4px 0 var(--b10b-kw);
  touch-action:pan-y;user-select:none;-webkit-user-select:none;transition:transform .18s ease,box-shadow .18s ease,background-color .2s ease,opacity .25s ease}
.b10b-kunci:active:not([disabled]){transform:translateY(2px)}
.b10b-kunci-seni{position:absolute;left:50%;top:0;display:grid;place-items:center;transform:translate(-50%,-58%) rotate(-8deg);pointer-events:none}
.b10b-kunci-seni svg{display:block;width:40px;height:18px;filter:drop-shadow(0 2px 1px rgba(0,0,0,.3))}
.b10b-kunci-teks{display:grid;gap:1px;min-width:0;max-width:100%}
.b10b-kunci-nama{font-size:.875rem;font-weight:900;line-height:1.16;overflow-wrap:break-word}
.b10b-kunci-ket{display:none;font-size:.8125rem;font-weight:700;line-height:1.25;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b10b-kunci-no{display:none}
.b10b-kunci.b10b-pilih{background:#FFF1BF;transform:translateY(-5px);box-shadow:0 9px 0 var(--emas-d),inset 0 0 0 3px var(--emas),0 0 0 4px rgba(255,201,51,.4)}
.b10b-mangga.b10b-ada-peti .b10b-kunci:not(.b10b-pilih){box-shadow:0 4px 0 rgba(0,0,0,.38),inset 0 0 0 2px #FFC933,inset 0 4px 0 var(--b10b-kw)}
.b10b-kunci.b10b-pergi{opacity:.4}
.b10b-kunci.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 4px 0 var(--merah-d),inset 0 0 0 3px #E0555D}
.b10b-kunci.salah .b10b-kunci-ket{color:var(--salah-teks)}
.b10b-kunci.kilat{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 4px 0 #1E9E63,inset 0 0 0 3px var(--hijau),0 0 0 4px rgba(47,160,92,.35)}
.b10b-kunci.b10b-diseret{opacity:.35}
.b10b-mangga.b10b-fasa-soal .b10b-gelang,.b10b-mangga[data-fasa="tamat"] .b10b-gelang{display:none}
/* klon kunci: kotak sifar dengan titik pangsi pada hujung mata kunci */
.b10b-kunci-klon{position:absolute;z-index:45;width:0;height:0;pointer-events:none;transform-origin:0 0}
.b10b-kk-svg{position:absolute;left:-58px;top:-13.5px;width:62px;height:27px;overflow:visible;filter:drop-shadow(0 4px 3px rgba(27,42,92,.35))}
.b10b-kunci-klon.salah .b10b-kk-svg path,.b10b-kunci-klon.salah .b10b-kk-svg rect{fill:#F94F55;stroke:#8E1F2A}
.b10b-kunci-klon.salah .b10b-kk-svg circle:first-child{fill:#C9323F}
/* rumusan: kunci → peti */
.b10b-rumus-kunci{display:grid;gap:8px;min-width:0}
.b10b-rk-baris{display:grid;gap:4px;min-width:0;padding:8px 10px;border-radius:14px;background:#F3F6FD;box-shadow:inset 4px 0 0 var(--b10b-kw)}
.b10b-rk-kunci{display:flex;align-items:center;gap:8px;min-width:0;font-size:.9375rem;font-weight:900;line-height:1.2;color:var(--ink)}
.b10b-rk-seni{flex:none}
.b10b-rk-seni svg{display:block;width:40px;height:18px}
.b10b-rk-baris ul{display:grid;gap:3px}
.b10b-rk-baris li{position:relative;padding-left:14px;font-size:.875rem;font-weight:700;line-height:1.3;color:var(--ink);overflow-wrap:break-word}
.b10b-rk-baris li::before{content:"";position:absolute;left:2px;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--b10b-kw)}

/* =====================================================================================
   BELON · BELON PEMBANGUNAN
   ===================================================================================== */
.b10b-belon{display:grid;gap:10px;min-width:0}
/* padang Pesta Merdeka: langit lembut, dua awan tenang, jalur rumput (di belakang tiang dan kereta) */
.b10b-bl-padang{position:relative;min-width:0;border-radius:20px;overflow:hidden;background:linear-gradient(180deg,#BDE7FB 0,#DDF3FD 48%,#F2FBFF 100%);box-shadow:var(--bayang),inset 0 0 0 2px #fff}
.b10b-bl-latar{position:absolute;inset:0;z-index:0;pointer-events:none}
.b10b-bl-awan{position:absolute;display:block;width:92px;height:36px}
.b10b-bl-awan svg,.b10b-bl-rumput svg,.b10b-bl-kereta svg{display:block;width:100%;height:100%}
.b10b-bl-awan-a{left:3%;top:8px}
.b10b-bl-awan-b{right:4%;top:30px;width:74px;height:29px}
.b10b-bl-rumput{position:absolute;left:0;right:0;bottom:0;height:40px}
.b10b-bl-susunan{position:relative;z-index:1;display:grid;align-items:stretch;min-width:0;padding:8px 10px 20px}
.b10b-bl-telefon{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 8px}
.b10b-bl-tengah{grid-template-columns:minmax(0,1fr) 188px minmax(0,1fr);gap:0 10px}
.b10b-bl-baris{grid-template-columns:repeat(var(--b10b-bl-n,4),minmax(0,1fr));gap:4px 10px}
.b10b-bl-baris > .b10b-bl-zon{grid-column:1 / -1}
/* stesen = sejambak (SVG) + batang: tiang kayu berbalut reben warna tiang, papan nama, label fakta */
.b10b-bl-stesen{position:relative;display:flex;flex-direction:column;min-width:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.b10b-bl-sejambak{display:block;width:100%;max-width:180px;height:auto;aspect-ratio:180 / 100;margin:0 auto;overflow:visible}
.b10b-bl-batang{position:relative;flex:1 1 auto;display:flex;flex-direction:column;min-width:0;margin-top:-4px;padding-bottom:16px}
.b10b-bl-batang::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:14px;margin-left:-7px;border-radius:2px;
  background:repeating-linear-gradient(-34deg,#C98B4F 0 10px,var(--b10b-bl-w) 10px 15px,#C98B4F 15px 24px);box-shadow:inset 0 0 0 1.4px #6E3F1B,inset -4px 0 0 rgba(60,30,10,.16)}
.b10b-bl-batang::after{content:"";position:absolute;left:50%;bottom:-5px;width:58px;height:16px;margin-left:-29px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse 50% 60% at 50% 70%,#7CC05A 0 60%,transparent 62%),radial-gradient(ellipse 50% 70% at 50% 60%,#9FD37A 0 68%,transparent 70%)}
.b10b-bl-plat{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;max-width:224px;min-height:46px;margin:0 auto;padding:9px 16px 7px;
  border-radius:12px;background:#FFF6E0;color:var(--ink);text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:inset 0 5px 0 var(--b10b-bl-w),inset 0 0 0 2px #B8743C,0 4px 0 #6E3F1B,0 8px 12px rgba(27,42,92,.18);transition:box-shadow .2s ease,background-color .2s ease}
.b10b-bl-plat::before,.b10b-bl-plat::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-1px;border-radius:50%;background:#8A5226;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.b10b-bl-plat::before{left:6px}
.b10b-bl-plat::after{right:6px}
.b10b-bl-plat-nama{min-width:0;font-size:1rem;font-weight:900;line-height:1.16;overflow-wrap:break-word}
.b10b-bl-plat-no{display:none}
.b10b-belon.b10b-ada-belon .b10b-bl-plat{box-shadow:inset 0 5px 0 var(--b10b-bl-w),inset 0 0 0 2px #B8743C,0 0 0 3px rgba(255,201,51,.95),0 4px 0 #6E3F1B,0 8px 12px rgba(27,42,92,.18)}
.b10b-bl-stesen.b10b-dekat .b10b-bl-plat{background:#FFF1BF;box-shadow:inset 0 5px 0 var(--b10b-bl-w),inset 0 0 0 2px #B8743C,0 0 0 5px #FFC933,0 4px 0 #6E3F1B}
.b10b-bl-plat.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:inset 0 5px 0 var(--b10b-bl-w),inset 0 0 0 2px #E0555D,0 0 0 4px #F94F55,0 4px 0 #6E3F1B}
.b10b-bl-plat.kilat{background:var(--betul-bg);color:var(--betul-teks);box-shadow:inset 0 5px 0 var(--b10b-bl-w),inset 0 0 0 2px #1E9E63,0 0 0 4px #4ED68C,0 0 0 8px rgba(47,160,92,.3),0 4px 0 #6E3F1B}
.b10b-bl-plat.b10b-bl-terima{animation:b10b-bl-terima .5s ease-out}
@keyframes b10b-bl-terima{0%{transform:scale(1)}40%{transform:scale(1.05)}100%{transform:scale(1)}}
/* label fakta yang dipaku pada tiang (terbaharu di atas) */
.b10b-bl-label-senarai{position:relative;z-index:1;display:flex;flex-direction:column;min-width:0;margin:0;padding:0;list-style:none}
.b10b-bl-label-slot{min-width:0;padding-top:9px;overflow:hidden}
.b10b-bl-label{position:relative;min-width:0;padding:7px 6px 6px;border-radius:10px;background:#FFFDF7;color:var(--ink);text-align:center;
  box-shadow:inset 0 0 0 2px var(--b10b-bl-wt),inset 0 3px 0 var(--b10b-bl-w),0 3px 0 rgba(27,42,92,.16)}
.b10b-bl-paku{position:absolute;left:50%;top:-4px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--b10b-bl-wd);box-shadow:0 1px 0 rgba(0,0,0,.25),inset 1px 1px 0 rgba(255,255,255,.45)}
.b10b-bl-label-teks{display:block;min-width:0;font-size:.875rem;font-weight:800;line-height:1.22;overflow-wrap:break-word}
.b10b-bl-label.b10b-dibantu{background:#FFF4F4;outline:2px dashed #E0555D;outline-offset:-2px;box-shadow:inset 0 3px 0 var(--b10b-bl-w),0 3px 0 rgba(27,42,92,.16)}
.b10b-bl-label.b10b-bl-baru{animation:b10b-bl-paku .5s ease-out}
@keyframes b10b-bl-paku{0%{transform:translateY(-6px) rotate(-1.5deg)}60%{transform:translateY(1px)}100%{transform:none}}
.b10b-bl-ukur-slot{visibility:hidden}
/* sejambak: tali bertemu di puncak tiang, simpul, belon berwarna tiang */
.b10b-bl-sj-tali{fill:none;stroke:#8A93AE;stroke-width:1.3;stroke-linecap:round}
.b10b-bl-sj-tali.b10b-dibantu{stroke:#C9323F;stroke-dasharray:3 3}
.b10b-bl-simpul-gelung{fill:none;stroke:#5D6D9E;stroke-width:1.4;stroke-linecap:round}
.b10b-bl-sj-belon.b10b-bl-baru{animation:b10b-bl-sampai .7s ease-out}
@keyframes b10b-bl-sampai{0%{transform:translateY(0)}45%{transform:translateY(-3px)}100%{transform:none}}
.b10b-belon.b10b-bl-lengkap .b10b-bl-sj-belon-g{animation:b10b-bl-lengkap 1.2s ease-in-out 1}
@keyframes b10b-bl-lengkap{0%,100%{transform:none}50%{transform:translateY(-4px)}}
/* tempat menunggu: kereta belon di tengah bawah, belon fakta (pembalut pegun, lapisan dalam beralun) */
.b10b-bl-zon{position:relative;min-width:0}
.b10b-bl-kereta{position:absolute;left:50%;bottom:0;z-index:0;width:96px;height:56px;margin-left:-48px;pointer-events:none}
.b10b-bl-belon{position:absolute;z-index:2;display:block;padding:0;border-radius:26px;background:none;color:var(--ink);cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent}
.b10b-bl-belon[data-naik]{z-index:1}
.b10b-bl-apung{position:absolute;inset:0;display:block}
.b10b-bl-kad{position:absolute;left:0;right:0;top:0;height:var(--b10b-bl-kh,60px);box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:8px 14px;border-radius:26px 26px 22px 22px;text-align:center;
  background:radial-gradient(ellipse 34% 30% at 22% 18%,rgba(255,255,255,.95),rgba(255,255,255,0)),linear-gradient(180deg,#FFFDF6,#FFF0C4);
  box-shadow:inset 0 0 0 2px #E8B32E,inset 0 -7px 12px rgba(232,151,26,.13),0 6px 10px rgba(27,42,92,.18);transition:box-shadow .2s ease}
.b10b-bl-teks{min-width:0;max-width:100%;font-size:.9375rem;font-weight:900;line-height:1.22;overflow-wrap:break-word}
.b10b-bl-petunjuk{min-width:0;max-width:100%;font-size:.875rem;font-weight:700;font-style:italic;line-height:1.22;color:#5D6D9E;overflow-wrap:break-word}
.b10b-bl-simpul{position:absolute;left:50%;top:calc(var(--b10b-bl-kh,60px) - 1px);width:10px;height:7px;margin-left:-5px;background:#E8B32E;clip-path:polygon(50% 0,100% 100%,0 100%)}
.b10b-bl-tali{position:absolute;left:50%;top:calc(var(--b10b-bl-kh,60px) + 5px);width:12px;height:11px;margin-left:-6px;overflow:visible}
.b10b-bl-ukur{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none}
.b10b-bl-ukur .b10b-bl-kad{position:static;height:auto;margin-bottom:4px}
.b10b-bl-belon.b10b-bl-rehat .b10b-bl-apung{animation:b10b-bl-alun 3.8s ease-in-out infinite alternate}
@keyframes b10b-bl-alun{from{transform:translateY(-3px)}to{transform:translateY(3px)}}
.b10b-bl-belon.b10b-bl-di-kereta{transform:translate(var(--b10b-bl-dx,0px),var(--b10b-bl-dy,120px)) scale(.3);opacity:0}
.b10b-bl-belon.b10b-bl-sedang-naik{transition:transform 1.4s cubic-bezier(.22,.7,.3,1),opacity .6s ease}
.b10b-bl-belon.b10b-pilih .b10b-bl-kad{background:radial-gradient(ellipse 34% 30% at 22% 18%,#fff,rgba(255,255,255,0)),linear-gradient(180deg,#FFFBE8,#FFE58A);
  box-shadow:inset 0 0 0 3px var(--emas-d),0 0 0 4px rgba(255,201,51,.6),0 0 22px rgba(255,201,51,.75),0 6px 10px rgba(27,42,92,.18)}
.b10b-bl-belon.salah .b10b-bl-kad{background:linear-gradient(180deg,#FFF1F2,#FFD6D9);box-shadow:inset 0 0 0 3px #E0555D,0 6px 10px rgba(27,42,92,.18);color:var(--salah-teks)}
.b10b-bl-belon.salah .b10b-bl-petunjuk{color:var(--salah-teks)}
.b10b-bl-belon.b10b-bl-pergi{opacity:0;pointer-events:none;transition:opacity .2s ease}
.b10b-bl-belon.b10b-diseret{opacity:.35}
.b10b-bl-belon.b10b-klon-seret{z-index:46;box-shadow:none!important}
/* belon yang terbang (klon SVG; warna melalui pemboleh ubah) */
.b10b-bl-terbang{position:absolute;z-index:45;pointer-events:none;--b10b-bl-isi:#FFFBF0;--b10b-bl-garis:#E8B32E;transform-origin:50% 33%;filter:drop-shadow(0 6px 5px rgba(27,42,92,.25))}
.b10b-bl-terbang svg{display:block;width:100%;height:100%;overflow:visible}
.b10b-bl-tb-isi{fill:var(--b10b-bl-isi);stroke:var(--b10b-bl-garis)}
.b10b-bl-tb-simpul{fill:var(--b10b-bl-garis)}
.b10b-bl-tb-tali{stroke:#8A93AE}
.b10b-belon[data-fasa="tamat"] .b10b-bl-zon,.b10b-belon.b10b-fasa-soal .b10b-bl-zon{visibility:hidden}
/* Rumusan: peta buih (pusat = nama tiang, satelit = fakta) */
.b10b-bl-rumus-peta{min-width:0;border-radius:16px;background:linear-gradient(#E6F6FF,#F7FCFF);box-shadow:inset 0 0 0 2px #D6EEFA;overflow:hidden}
.b10b-bl-peta{position:relative;z-index:1;margin:0 auto;min-width:0}
.b10b-bl-garis{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;overflow:visible;pointer-events:none}
.b10b-bl-garis-sat,.b10b-bl-garis-batang{fill:none;stroke-width:3.5;stroke-linecap:round}
.b10b-bl-pusat{--b10b-bl-dc:112px;position:relative;z-index:2;display:block;width:var(--b10b-bl-dc);height:var(--b10b-bl-dc);border-radius:50%;color:#fff}
.b10b-bl-susun-cincin .b10b-bl-pusat{position:absolute;--b10b-bl-dc:inherit}
.b10b-bl-pusat-dalam{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:10px;border-radius:50%;
  background:radial-gradient(circle at 33% 27%,rgba(255,255,255,.38) 0 13%,transparent 14%),radial-gradient(circle at 50% 44%,var(--b10b-bl-w) 0 60%,var(--b10b-bl-wd) 100%);
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.4),0 6px 0 var(--b10b-bl-wd),0 12px 18px rgba(27,42,92,.25)}
.b10b-bl-pusat-nama{font-size:1rem;font-weight:900;line-height:1.15;text-align:center;overflow-wrap:break-word;text-shadow:0 1px 0 rgba(0,0,0,.25)}
.b10b-bl-satelit{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-width:0;padding:7px 12px;border-radius:999px;background:var(--b10b-bl-wt);color:var(--ink);
  text-align:center;box-shadow:inset 0 0 0 3px var(--b10b-bl-w),0 3px 0 rgba(27,42,92,.16)}
.b10b-bl-susun-cincin .b10b-bl-satelit{position:absolute;width:var(--b10b-bl-dsw);height:var(--b10b-bl-dsh);padding:8px 12px;border-radius:50%}
.b10b-bl-sat-teks{min-width:0;font-size:.875rem;font-weight:800;line-height:1.2;overflow-wrap:break-word}
.b10b-bl-susun-cincin .b10b-bl-sat-teks{font-size:var(--b10b-bl-fs,13px);line-height:1.16;overflow-wrap:normal}
.b10b-bl-susun-cincin .b10b-bl-satelit.b10b-bl-panjang .b10b-bl-sat-teks{font-size:calc(var(--b10b-bl-fs,13px) * .9)}
.b10b-bl-susun-lajur{display:grid;grid-template-columns:repeat(var(--b10b-bl-lajur,2),minmax(0,1fr));gap:18px 10px;align-items:start;padding:12px 8px 14px}
.b10b-bl-kelompok{position:relative;z-index:1;display:grid;justify-items:center;align-content:start;gap:14px;min-width:0}
.b10b-bl-sat-senarai{display:grid;gap:12px;width:100%;min-width:0}
.b10b-bl-susun-lajur .b10b-bl-satelit{min-height:48px;padding:7px 9px;border-radius:18px}
.b10b-bl-sat-senarai .b10b-bl-satelit:nth-child(odd){margin-right:6px}
.b10b-bl-sat-senarai .b10b-bl-satelit:nth-child(even){margin-left:6px}

/* =====================================================================================
   MOD LEBAR (pentas 1280 x 720; .main-badan: left 300, width 720)
   ===================================================================================== */
body.mod-lebar .b2-main.b2-j-mangga .main-badan,body.mod-lebar .b2-main.b2-j-belon .main-badan{left:300px;width:720px;top:90px;bottom:10px;
  display:flex;flex-direction:column;align-content:stretch;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
body.mod-lebar .b2-p-mangga,body.mod-lebar .b2-p-belon{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
body.mod-lebar .b2-j-mangga .b2-kad,body.mod-lebar .b2-j-belon .b2-kad{padding:8px 18px 9px}
body.mod-lebar .b2-j-mangga .b2-kad-isi,body.mod-lebar .b2-j-belon .b2-kad-isi{font-size:1.125rem}
body.mod-lebar .b2-j-mangga .bisik,body.mod-lebar .b2-j-belon .bisik{min-height:48px;padding:8px 14px}
body.mod-lebar .b2-j-mangga .op,body.mod-lebar .b2-j-belon .op{min-height:48px}
body.mod-lebar .b2-p-mangga > .b2-rumus,body.mod-lebar .b2-p-belon > .b2-rumus{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
body.mod-lebar .b2-p-mangga > .b2-rumus > *,body.mod-lebar .b2-p-belon > .b2-rumus > *{flex:none}
body.mod-lebar .b2-p-mangga > .b2-rumus > .b10b-rumus-lanjut,body.mod-lebar .b2-p-belon > .b2-rumus > .b10b-rumus-lanjut{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
body.mod-lebar .b10b-soal-pilih{grid-template-columns:1fr 1fr}
body.mod-lebar .b10b-soal{padding:10px 14px 12px;gap:6px}
body.mod-lebar .b10b-soal-s{font-size:1rem}
/* mangga */
body.mod-lebar .b10b-rak{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
body.mod-lebar .b10b-rak.n3{grid-template-columns:repeat(3,minmax(0,168px));justify-content:center}
body.mod-lebar .b10b-rak.n2{grid-template-columns:repeat(2,minmax(0,168px));justify-content:center}
body.mod-lebar .b10b-peti{--b10b-tutup:38px;min-height:188px}
body.mod-lebar .b10b-plak-teks{font-size:.8125rem;line-height:1.28}
body.mod-lebar .b10b-plak-kunci{font-size:.8125rem}
body.mod-lebar .b10b-peti-badan{padding:30px 7px 8px}
body.mod-lebar .b10b-peti-plat{padding:8px 6px 7px}
body.mod-lebar .b10b-dinding{padding:7px 10px 12px;gap:7px}
body.mod-lebar .b10b-dinding-kepala{min-height:28px}
body.mod-lebar .b10b-gelang{grid-template-columns:46px minmax(0,1fr);align-items:center;column-gap:10px;padding:9px 10px}
body.mod-lebar .b10b-gelang-cincin{display:block;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 6px #FFC933,inset 0 0 0 8px #8A5226,0 0 0 2px #8A5226,0 3px 0 rgba(0,0,0,.35)}
body.mod-lebar .b10b-kunci-senarai{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px;padding-top:0}
body.mod-lebar .b10b-kunci{grid-template-columns:46px minmax(0,1fr);justify-items:stretch;align-items:center;column-gap:8px;min-height:52px;padding:5px 10px 6px 8px;border-radius:14px;text-align:left;
  box-shadow:0 4px 0 rgba(0,0,0,.38),inset 0 0 0 2px #EADFC4,inset 5px 0 0 var(--b10b-kw)}
body.mod-lebar .b10b-kunci.b10b-pilih{box-shadow:0 9px 0 var(--emas-d),inset 0 0 0 3px var(--emas),inset 5px 0 0 var(--b10b-kw),0 0 0 4px rgba(255,201,51,.4)}
body.mod-lebar .b10b-mangga.b10b-ada-peti .b10b-kunci:not(.b10b-pilih){box-shadow:0 4px 0 rgba(0,0,0,.38),inset 0 0 0 2px #FFC933,inset 5px 0 0 var(--b10b-kw)}
body.mod-lebar .b10b-kunci-seni{position:static;transform:none}
body.mod-lebar .b10b-kunci-seni svg{width:46px;height:20px;filter:none}
body.mod-lebar .b10b-kunci-nama{font-size:.9375rem;line-height:1.18}
body.mod-lebar .b10b-kunci-ket{display:block}
body.mod-lebar .b10b-kunci-no{display:grid;place-items:center;position:absolute;left:-6px;top:-7px;width:20px;height:20px;border-radius:50%;background:#FFF6E0;color:var(--ink2);font-size:.75rem;font-weight:900;box-shadow:0 0 0 2px #6E3F1B}
body.mod-lebar .b10b-mangga.b10b-fasa-soal .b10b-peti{min-height:176px}
/* belon: akar mengisi pentas; padang, kad soalan dan bisik bertindan (tiada tatal dalam .main-badan) */
body.mod-lebar .b10b-belon{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
body.mod-lebar .b10b-belon > *{flex:none}
body.mod-lebar .b10b-bl-susunan{padding:6px 12px 14px}
body.mod-lebar .b10b-bl-tengah{grid-template-columns:minmax(0,1fr) 180px minmax(0,1fr)}
body.mod-lebar .b10b-bl-batang{padding-bottom:10px}
body.mod-lebar .b10b-bl-tengah > .b10b-bl-zon{align-self:end}
body.mod-lebar .b10b-bl-plat{min-height:38px;padding:7px 24px 5px}
body.mod-lebar .b10b-bl-plat-nama{font-size:.9375rem}
body.mod-lebar .b10b-bl-plat-no{display:grid;place-items:center;position:absolute;right:-7px;top:-8px;width:20px;height:20px;border-radius:50%;background:#FFF6E0;color:var(--ink2);
  font-size:.75rem;font-weight:900;box-shadow:0 0 0 2px #8A5226}
body.mod-lebar .b2-j-belon .b2-kad-isi{font-size:.9375rem}
body.mod-lebar .b10b-bl-sejambak{max-width:140px}
body.mod-lebar .b10b-bl-label{padding:4px 7px 3px}
body.mod-lebar .b10b-bl-label-slot{padding-top:5px}
body.mod-lebar .b10b-bl-label-teks{font-size:.78125rem;line-height:1.18}
body.mod-lebar .b10b-bl-kad{padding:7px 11px;gap:2px}
body.mod-lebar .b10b-bl-teks{font-size:.78125rem;line-height:1.18}
body.mod-lebar .b10b-bl-petunjuk{font-size:.75rem;line-height:1.18}
body.mod-lebar .b10b-belon.b10b-bl-skala .b10b-bl-susunan{transform:scale(var(--b10b-bl-kecil,1));transform-origin:50% 0}
body.mod-lebar .b10b-belon.b10b-fasa-soal .b10b-bl-awan{display:none}
/* Rumusan (peta buih) pada skrin lebar */
body.mod-lebar .b2-p-belon .b10b-bl-rumus-peta .b10b-bl-susun-lajur{gap:12px 10px;padding:10px}
body.mod-lebar .b10b-bl-susun-lajur .b10b-bl-pusat{--b10b-bl-dc:104px}
body.mod-lebar .b10b-bl-susun-cincin .b10b-bl-pusat-nama{font-size:.9375rem}
body.mod-lebar .b10b-bl-susun-lajur .b10b-bl-pusat-nama{font-size:.875rem}
body.mod-lebar .b10b-bl-susun-lajur .b10b-bl-sat-teks{font-size:.8125rem}
body.mod-lebar .b10b-bl-sat-senarai{gap:10px}

/* =====================================================================================
   TELEFON (390 x 844) dan TELEFON PENDEK (375 x 667)
   ===================================================================================== */
body.mod-telefon .b2-j-mangga .b2-kad-isi,body.mod-telefon .b2-j-belon .b2-kad-isi{font-size:1rem;line-height:1.28}
body.mod-telefon .b2-j-mangga .b2-kad,body.mod-telefon .b2-j-belon .b2-kad{padding:9px 14px 10px}
/* helaian tetap di bawah skrin (gelang kunci mangga; bisik dan belon yang menunggu): bisik di dalamnya supaya maklum balas sentiasa kelihatan */
body.mod-telefon .b10b-cincin,body.mod-telefon .b10b-bl-bawah{position:fixed;left:0;right:0;bottom:0;z-index:20;max-width:560px;margin:0 auto;
  padding:8px 10px max(10px,env(safe-area-inset-bottom));border-radius:18px 18px 0 0;background:rgba(255,250,238,.97);box-shadow:0 -6px 18px rgba(27,42,92,.2)}
body.mod-telefon .b10b-cincin .bisik,body.mod-telefon .b10b-bl-bawah .bisik{min-height:2.6em;padding:6px 10px;font-size:.875rem;line-height:1.32;box-shadow:none;background:#F3F6FD}
body.mod-telefon .b10b-cincin .bisik.betul,body.mod-telefon .b10b-bl-bawah .bisik.betul{background:var(--betul-bg)}
body.mod-telefon .b10b-cincin .bisik.salah,body.mod-telefon .b10b-bl-bawah .bisik.salah{background:var(--salah-bg)}
body.mod-telefon .b10b-mangga[data-fasa="tamat"] .b10b-cincin,body.mod-telefon .b10b-belon[data-fasa="tamat"] .b10b-bl-bawah{position:static;margin:0;border-radius:16px;box-shadow:none;background:none;padding:0}
/* mangga */
body.mod-telefon .b10b-peti{--b10b-tutup:34px;min-height:170px}
body.mod-telefon .b10b-mangga-kunci{width:36px;height:46px;margin-left:-18px;top:calc(var(--b10b-tutup) - 22px)}
body.mod-telefon .b10b-peti-badan{padding:26px 8px 8px}
body.mod-telefon .b10b-peti-plat{padding:8px 7px 7px;font-size:.9375rem;line-height:1.22}
body.mod-telefon .b10b-gelang{padding:6px;border-radius:14px}
body.mod-telefon .b10b-dinding{padding:7px 8px 12px}
body.mod-telefon .b10b-rak{gap:12px 8px}
/* belon: tiang dua sebaris; tempat menunggu di bawah bisik dalam helaian tetap (langit, rumput dan kereta) */
body.mod-telefon .b10b-bl-bawah{display:grid;gap:8px}
body.mod-telefon .b10b-bl-zon{border-radius:14px;overflow:hidden;background:linear-gradient(0deg,#7CC05A 0 9px,#9FD37A 9px 20px,transparent 20px),linear-gradient(180deg,#CDEEFC,#F2FBFF)}
body.mod-telefon .b10b-bl-kereta{width:64px;height:38px;margin-left:-32px}
body.mod-telefon .b10b-bl-sejambak{max-width:170px}
body.mod-telefon .b10b-bl-susunan{padding:6px 6px 18px}
body.mod-telefon .b10b-belon.b10b-fasa-soal .b10b-bl-zon,body.mod-telefon .b10b-belon[data-fasa="tamat"] .b10b-bl-zon{display:none}
body.mod-telefon .b2-p-belon .b10b-bl-rumus-peta .b10b-bl-susun-lajur .b10b-bl-pusat{--b10b-bl-dc:112px}
body.mod-telefon .b10b-bl-susun-lajur .b10b-bl-pusat-nama{font-size:.9375rem}
@media (max-height:700px){
  body.mod-telefon .b10b-peti{--b10b-tutup:30px;min-height:150px}
  body.mod-telefon .b10b-peti-badan{padding:22px 7px 7px}
  body.mod-telefon .b10b-mangga-kunci{width:32px;height:41px;margin-left:-16px;top:calc(var(--b10b-tutup) - 20px)}
  body.mod-telefon .b10b-peti-plat{font-size:.875rem;padding:6px 6px}
  body.mod-telefon .b10b-kunci{min-height:44px;padding:10px 5px 5px}
  body.mod-telefon .b10b-mangga{gap:8px}
  body.mod-telefon .b10b-dinding-kepala{min-height:28px}
  body.mod-telefon .b10b-bl-plat{min-height:44px;padding:7px 14px 5px}
  body.mod-telefon .b10b-bl-telefon{gap:12px 8px}
  body.mod-telefon .b2-j-belon .b2-kad-isi{font-size:.9375rem;line-height:1.25}
  body.mod-telefon .b10b-bl-sejambak{max-width:146px}
  body.mod-telefon .b10b-bl-kereta{width:50px;height:29px;margin-left:-25px}
  body.mod-telefon .b10b-bl-kad{padding:6px 12px}
}
@media (max-width:370px){
  body.mod-telefon .b10b-peti-plat{font-size:.875rem}
}
@media (prefers-reduced-motion:reduce){
  /* keadaan akhir yang biasanya dicapai melalui animasi atau peralihan */
  .b10b-peti.b10b-buka .b10b-peti-tutup{transform:perspective(300px) rotateX(-74deg)}
  .b10b-peti.b10b-naik .b10b-plak,.b10b-peti.b10b-naik .b10b-peti-tanda{opacity:1;transform:none}
  .b10b-peti.b10b-jatuh .b10b-mangga-kunci,.b10b-peti.b10b-keluar{opacity:0}
  .b10b-bl-belon.b10b-bl-di-kereta{transform:none;opacity:1}
  .b10b-bl-belon .b10b-bl-apung,.b10b-bl-sj-belon,.b10b-bl-sj-belon-g,.b10b-bl-label{animation:none!important}
  .b10b-bl-plat{animation:none}
}