/* ===== Babak · pakej enjin Bab 3, kumpulan 3b (js/pakej-bab-03-3b.js): kemaraan, pasar, lontar, suluh.
   Awalan kelas b3-. Susun atur diskop dengan .b2-j-<jenis> (pada .main) serta body.mod-lebar / body.mod-telefon.
   Semua enjin bukan jalur: Kancil HUD kekal di kiri skrin lebar, jadi .main-badan kekal pada left:300px; width:720px. ===== */

@keyframes b3-denyut-lembut{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes b3-hayun{0%{transform:none}25%{transform:rotate(-12deg) scale(1.14)}55%{transform:rotate(8deg) scale(1.06)}80%{transform:rotate(-3deg)}100%{transform:none}}
@keyframes b3-goyang-mesin{0%,100%{transform:none}25%{transform:translate(-2px,0)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,1px)}}
@keyframes b3-cop{to{transform:rotate(-14deg) scale(1);opacity:.92}}
@keyframes b3-masuk-kertas{from{transform:translateY(90px) rotate(-4deg);opacity:0}to{transform:none;opacity:1}}
@keyframes b3-vitrin{from{transform:translate(-50%,-50%) scale(.55);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes b3-vitrin-tutup{to{transform:translate(-50%,-50%) scale(.5);opacity:0}}
@keyframes b3-tumbuh{from{transform:scale(0)}70%{transform:scale(1.15)}to{transform:scale(1)}}
@keyframes b3-muncul{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}

/* label dasar (Pentadbiran / Ekonomi / Sosial) */
.b3-dasar{display:inline-flex;align-items:center;min-height:26px;padding:1px 11px;border-radius:13px;background:var(--ink);color:#fff;font-size:.875rem;font-weight:900;line-height:1.15;white-space:nowrap}
.b3-dasar.ekonomi{background:#C2560F}
.b3-dasar.sosial{background:#0C776B}
.b3-dasar.pentadbiran{background:#2563C4}

/* =====================================================================================
   3.5 KEMARAAN · peta kemaraan
   ===================================================================================== */
.b2-p-kemaraan{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.b3-km-kad{gap:4px}
.b3-km-cip{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:12px;background:#C9323F;color:#fff;font-size:.875rem;font-weight:900;white-space:nowrap}
.b3-km-cari .b3-km-cip{background:var(--teal-d)}
.b3-km-baris{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px}
.b3-km-tarikh{font-size:1.5rem;font-weight:900;line-height:1.1;color:#C9323F;letter-spacing:-.01em;white-space:nowrap}
.b3-km-laluan .b3-km-kad .b2-kad-isi{font-size:1.125rem}
.b3-km-petunjuk{font-size:.9375rem;font-weight:800;line-height:1.35;color:var(--teal-teks)}
.b3-km-jejak{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.b3-km-jejak li{width:11px;height:11px;border-radius:50%;background:#EEF2FB;box-shadow:inset 0 0 0 2px #C5D0EA;transition:background-color .3s}
.b3-km-jejak li.siap{background:#FFC933;box-shadow:inset 0 0 0 2px #E8971A}
.b3-km-jejak li.siap.dibantu{background:#C9B8F4;box-shadow:inset 0 0 0 2px #7B57E0}
.b3-km-jejak li.kini{background:#fff;box-shadow:inset 0 0 0 3px #C9323F}
.b3-km-peta{position:relative;width:100%;border-radius:22px;overflow:hidden;background:#2BA9E8;box-shadow:var(--bayang),inset 0 0 0 3px rgba(255,255,255,.6);user-select:none;-webkit-user-select:none}
.b3-km-tegak .b3-km-peta{width:min(100%,calc((100dvh - 290px) * var(--ar)));min-width:min(100%,260px);justify-self:center}
.b3-km-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.b3-km-label{font-family:var(--f);font-weight:900;letter-spacing:.14em;pointer-events:none}
.b3-km-label.laut{fill:#fff;opacity:.74;font-style:italic}
.b3-km-label.darat{fill:#2F6B22;opacity:.45}
.b3-km-label.jiran{fill:#5E6E40;opacity:.72}
.b3-km-lapis{position:absolute;inset:0;pointer-events:none}
.b3-km-kotak{position:absolute;left:0;top:0;translate:-50% -50%;display:flex;justify-content:center;pointer-events:none;z-index:1}
.b3-km-pin{position:relative;flex:none;pointer-events:auto;display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:2px 10px 2px 7px;border-radius:15px;background:#fff;color:var(--ink);font-size:.875rem;font-weight:900;line-height:1.1;white-space:nowrap;box-shadow:0 3px 0 rgba(27,42,92,.35),inset 0 0 0 2px #1B2A5C;transition:transform .12s ease,background-color .25s ease}
.b3-km-pin::after{content:"";position:absolute;left:-3px;right:-3px;top:-7px;bottom:-7px}
.b3-km-pin[disabled]{cursor:default}
.b3-km-titik-pin{flex:none;width:9px;height:9px;border-radius:50%;background:#1B2A5C}
.b3-km-bendera{position:absolute;left:0;top:0;z-index:2;translate:-50% -50%;padding:1px 7px 1px 6px;border-radius:5px 10px 10px 5px;background:#C9323F;color:#fff;font-size:.875rem;font-weight:900;line-height:1.3;white-space:nowrap;pointer-events:none;box-shadow:0 2px 0 #8E1F2A,inset 3px 0 0 #fff}
.b3-km-bendera.muncul{animation:b3-muncul .45s ease-out both}
.b3-km-bendera.dibantu{background:#5537A8;box-shadow:0 2px 0 #3A2475,inset 3px 0 0 #fff}
.b3-km-tag{visibility:hidden;opacity:0;padding:1px 8px;border-radius:9px;background:#1B2A5C;color:#fff;font-size:.875rem;font-weight:900;line-height:1.3;white-space:nowrap;transform:scale(.5);transition:transform .35s cubic-bezier(.3,1.5,.5,1),opacity .25s ease}
.b3-km-kotak.tekan .b3-km-pin{transform:translateY(2px) scale(.95);box-shadow:0 1px 0 rgba(27,42,92,.35),inset 0 0 0 2px #1B2A5C}
.b3-km-kotak.lawat{z-index:0}
.b3-km-kotak.lawat .b3-km-pin{background:#FFC933;box-shadow:0 3px 0 #E8971A,inset 0 0 0 2px #C2560F}
.b3-km-kotak.lawat .b3-km-titik-pin{background:#C9323F}
.b3-km-kotak.lawat.dibantu .b3-km-pin{background:#E4DBFB;box-shadow:0 3px 0 #5537A8,inset 0 0 0 2px #7B57E0}

.b3-km-kotak.salah{z-index:3}
.b3-km-kotak.salah .b3-km-pin{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 3px 0 var(--merah-d),inset 0 0 0 3px #E0555D;animation:goncang .4s}
.b3-km-kotak.kilat{z-index:3}
.b3-km-kotak.kilat .b3-km-pin{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 3px 0 #1E9E63,inset 0 0 0 3px var(--hijau);animation:b3-denyut-lembut .6s ease-in-out 2}
/* mod cari: pin bulat neutral, nama muncul selepas ditekan */
.b3-km-kotak.cari .b3-km-pin{width:30px;height:30px;min-height:0;padding:0;border-radius:50%;justify-content:center;box-shadow:0 3px 0 rgba(27,42,92,.35),inset 0 0 0 3px #1B2A5C}
.b3-km-kotak.cari .b3-km-tag{position:absolute;left:50%;top:calc(100% + 3px);translate:-50% 0;z-index:2}
.b3-km-kotak.cari.tag-atas .b3-km-tag{top:auto;bottom:calc(100% + 3px)}
.b3-km-kotak.cari.tag-kanan .b3-km-tag{left:calc(100% + 4px);top:50%;translate:0 -50%}
.b3-km-kotak.cari.tag-kiri .b3-km-tag{left:auto;right:calc(100% + 4px);top:50%;translate:0 -50%}
.b3-km-kotak.cari .b3-km-pin::after{left:-7px;right:-7px;top:-7px;bottom:-7px}
.b3-km-bulat{width:11px;height:11px;border-radius:50%;background:#C9323F}
.b3-km-kotak.cari .b3-km-tag{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px #1B2A5C}
.b3-km-kotak.cari.kenal .b3-km-tag,.b3-km-kotak.cari.jumpa .b3-km-tag{visibility:visible;opacity:1;transform:none}
.b3-km-kotak.cari.kenal .b3-km-tag{background:#EEF2FB;color:var(--ink2);box-shadow:inset 0 0 0 2px #AEB9D8}
.b3-km-kotak.cari.jumpa .b3-km-pin{background:var(--hijau);box-shadow:0 3px 0 #0F6139,inset 0 0 0 3px #fff}
.b3-km-kotak.cari.jumpa .b3-km-bulat{background:#fff}
.b3-km-kotak.cari.jumpa .b3-km-tag{background:var(--betul-bg);color:var(--betul-teks);box-shadow:inset 0 0 0 2px var(--hijau)}
.b3-km-kotak.cari.salah .b3-km-tag{background:var(--salah-bg);color:var(--salah-teks);box-shadow:inset 0 0 0 2px #E0555D}
.b3-km-kotak.cari.salah .b3-km-bulat{background:#fff}
.b3-km-kompas{position:absolute;top:10px;width:34px;height:42px;display:grid;justify-items:center;align-content:start;gap:1px;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(27,42,92,.35))}
.b3-km-kompas.kanan{right:10px}
.b3-km-kompas.kiri{left:10px}
.b3-km-kompas i{width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:18px solid #fff}
.b3-km-kompas b{font-size:.875rem;font-weight:900;line-height:1;color:#fff}
.b3-km-bisik{align-items:flex-start}
.b3-km-rumus li{font-size:.875rem}

/* =====================================================================================
   3.6 PASAR · gerai wang pokok pisang
   ===================================================================================== */
.b2-p-pasar{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.b3-ps-kad{gap:4px}
.b3-ps-gerai{border-radius:20px;overflow:hidden;background:#FBEBCB;box-shadow:var(--bayang);line-height:0}
.b3-ps-svg{display:block;width:100%;height:auto;touch-action:none}
.b3-ps-svg text{font-family:var(--f)}
.b3-ps-tuas-g{cursor:grab}
.b3-ps-tuas-g.seret{cursor:grabbing}
.b3-ps-mesin.goyang{animation:b3-goyang-mesin .35s ease-in-out}
.b3-ps-unit-d{transform-box:fill-box;transform-origin:50% 100%;transition:transform .45s cubic-bezier(.5,0,.75,0),opacity .45s ease}
.b3-ps-unit.habis .b3-ps-unit-d{transform:scale(.15);opacity:0}
.b3-ps-tag-badan{fill:#fff;transition:fill .45s ease}
.b3-ps-tag.aras-2 .b3-ps-tag-badan{fill:#FFF1BF}
.b3-ps-tag.aras-3 .b3-ps-tag-badan{fill:#FFD58A}
.b3-ps-tag.aras-4 .b3-ps-tag-badan{fill:#FFB8BB}
.b3-ps-tag-kali{fill:#1B2A5C}
.b3-ps-tag.aras-4 .b3-ps-tag-kali{fill:#A3222E}
.b3-ps-tag-nama{fill:#4D5B8C}
.b3-ps-tag-d{transform-box:fill-box;transform-origin:50% 0}
.b3-ps-tag-d.goyang{animation:b3-hayun .75s ease-out}
.b3-ps-reben{opacity:0;transform-box:fill-box;transform-origin:0 50%;transform:scale(.3);transition:opacity .35s ease,transform .45s cubic-bezier(.3,1.5,.5,1)}
.b3-ps-slot.dicatu .b3-ps-reben{opacity:1;transform:none}
.b3-ps-tempe{opacity:0;transform-box:fill-box;transform-origin:50% 100%;transform:scale(.4);transition:opacity .4s ease,transform .6s cubic-bezier(.3,1.5,.5,1)}
.b3-ps-tempe.ada{opacity:1;transform:none}
.b3-ps-kebun{opacity:0;transition:opacity .4s ease}
.b3-ps-tunas{transform-box:fill-box;transform-origin:50% 100%;transform:scale(0)}
.b3-ps-kebun.tumbuh{opacity:1}
.b3-ps-kebun.tumbuh .b3-ps-tunas{animation:b3-tumbuh .8s cubic-bezier(.3,1.4,.5,1) forwards}
.b3-ps-kebun.tumbuh .b3-ps-pasu:nth-child(2) .b3-ps-tunas{animation-delay:.2s}
.b3-ps-kebun.tumbuh .b3-ps-pasu:nth-child(3) .b3-ps-tunas{animation-delay:.4s}
.b3-ps-meter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:10px;align-items:stretch;background:#fff;border-radius:16px;padding:7px 10px;box-shadow:var(--lip)}
.b3-ps-m{display:grid;gap:3px;align-content:start;min-width:0}
.b3-ps-m-label{font-size:.875rem;font-weight:900;line-height:1.15;color:var(--ink2)}
.b3-ps-m-bar{height:10px;border-radius:5px;background:#EEF2FB;overflow:hidden;box-shadow:inset 0 0 0 1.5px #D5DDF0}
.b3-ps-m-bar i{display:block;height:100%;border-radius:5px;transition:width .7s cubic-bezier(.3,1.2,.5,1)}
.b3-ps-m.wang .b3-ps-m-bar i{background:linear-gradient(90deg,#E8B96A,#C2560F)}
.b3-ps-m.barang .b3-ps-m-bar i{background:linear-gradient(90deg,#8ADB63,#2FA05C)}
.b3-ps-m b{font-size:.875rem;font-weight:900;line-height:1.1;color:var(--ink)}
.b3-ps-m.harga{justify-items:center;align-content:center;min-width:70px;background:#FFF6D8;border-radius:12px;padding:4px 8px;box-shadow:inset 0 0 0 2px #F3DE9C}
.b3-ps-m.harga b{font-size:1.5rem;line-height:1}
.b3-ps-m.harga.naik{background:#FFE9EA;box-shadow:inset 0 0 0 2px #F7B5BA}
.b3-ps-m.harga.naik b{color:#C9323F}
.b3-ps-kanan{display:contents}
.b3-ps-kanan[hidden]{display:none}
.b3-ps-kawal{display:grid;gap:10px;align-content:start}
.b3-ps-tuas-kotak{display:grid;justify-items:center;gap:10px;padding:4px 0}
.b3-ps-tuas{min-width:230px}
.b3-ps-tuas .ikon{width:24px;height:24px;stroke-width:2.4}
.b3-ps-pip{display:flex;gap:9px}
.b3-ps-pip i{width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2.5px #C5D0EA;transition:background-color .3s ease}
.b3-ps-pip i.penuh{background:#FFC933;box-shadow:inset 0 0 0 2.5px #E8971A}
.b3-ps-kecil{font-size:.875rem;font-weight:700;line-height:1.35;color:var(--ink2);text-align:center}
.b3-ps-pilih .op{min-height:48px;font-size:.9375rem}
.b3-ps-pilih .op.tekan,.b3-sl-pilih .op.tekan{transform:translateY(3px)}
.b3-ps-kartu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.b3-ps-kartu-grid.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.b3-ps-kartu-grid.masuk{animation:lompat .32s ease-out both}
.b3-ps-kartu{display:grid;justify-items:center;align-content:start;gap:4px;min-height:112px;padding:10px 6px;border-radius:18px;background:#fff;box-shadow:var(--lip),inset 0 0 0 2px var(--garis);color:var(--ink);font-size:.875rem;font-weight:900;line-height:1.2;text-align:center;transition:transform .1s ease}
.b3-ps-kartu-ikon{width:56px;height:56px}
.b3-ps-kartu.tekan{transform:translateY(3px)}
.b3-ps-kartu.betul{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 5px 0 #1E9E63,inset 0 0 0 3px var(--hijau)}
.b3-ps-kartu.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 5px 0 var(--merah-d),inset 0 0 0 3px #E0555D;animation:goncang .4s}
.b3-ps-kartu.kilat{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 5px 0 #1E9E63,inset 0 0 0 3px var(--hijau)}
.b3-ps-kartu.pudar{opacity:.42}
.b3-ps-catu{position:relative;overflow:hidden;padding:12px 14px 14px;border-radius:12px 20px 12px 20px;background:linear-gradient(#FFFDF5,#FFF4DA);box-shadow:var(--bayang),inset 0 0 0 2px #E3D1A6}
.b3-ps-catu.masuk{animation:lompat .32s ease-out both}
.b3-ps-catu-kepala{display:grid;justify-items:center;gap:1px;padding-bottom:8px;margin-bottom:9px;border-bottom:3px double #1B2A5C;text-align:center}
.b3-ps-catu-kepala b{font-size:.9375rem;font-weight:900;letter-spacing:.08em;color:var(--ink)}
.b3-ps-catu-kepala small{font-size:.875rem;font-weight:700;color:var(--ink2)}
.b3-ps-catu-senarai{display:grid;gap:7px}
.b3-ps-catu-baris{display:flex;align-items:center;gap:10px;min-height:46px;padding:6px 12px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 2px #E3D8BD;color:var(--ink);font-size:.9375rem;font-weight:800;text-align:left;transition:background-color .2s ease}
.b3-ps-kotak{flex:none;width:26px;height:26px;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 2.5px #1B2A5C;display:grid;place-items:center;color:transparent}
.b3-ps-kotak .ikon{width:18px;height:18px;stroke-width:3.2}
.b3-ps-catu-baris.pilih .b3-ps-kotak{background:#1B2A5C;color:#fff}
.b3-ps-catu-baris.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:inset 0 0 0 3px #E0555D;animation:goncang .4s}
.b3-ps-catu-baris.salah .b3-ps-kotak{background:#C9323F;box-shadow:none;color:#fff}
.b3-ps-catu-baris.tinggal{background:#FFF6D8;box-shadow:inset 0 0 0 3px var(--emas)}
.b3-ps-catu-baris.kilat,.b3-ps-catu-baris.betul{background:var(--betul-bg);color:var(--betul-teks);box-shadow:inset 0 0 0 3px var(--hijau)}
.b3-ps-catu-baris.betul .b3-ps-kotak,.b3-ps-catu-baris.kilat .b3-ps-kotak{background:var(--hijau);box-shadow:none;color:#fff}
.b3-ps-cap{position:absolute;right:14px;top:44%;padding:3px 12px;border:4px solid #C9323F;border-radius:10px;color:#C9323F;font-size:1.375rem;font-weight:900;letter-spacing:.1em;transform:rotate(-14deg) scale(1.8);opacity:0;pointer-events:none;background:rgba(255,253,245,.6)}
.b3-ps-catu.dicop .b3-ps-cap{animation:b3-cop .38s ease-out forwards}
.b3-ps-cop{width:100%}
.b3-ps-cop .ikon{width:22px;height:22px}
.b3-ps-bisik{align-items:flex-start}

/* =====================================================================================
   3.6 LONTAR · lastik fail
   ===================================================================================== */
.b2-p-lontar{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.b3-lt-cip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 6px;border-radius:13px;background:#8A5226;color:#fff;font-size:.875rem;font-weight:900;white-space:nowrap}
.b3-lt-cip-ikon{display:block;width:21px;height:19px}
.b3-lt-kad .b2-kad-isi{text-wrap:balance}
.b3-lt-medan{position:relative;height:372px;height:clamp(340px,calc(100dvh - 404px),430px);border-radius:24px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;
  background:radial-gradient(ellipse at 50% 104%,rgba(255,255,255,.6),rgba(255,255,255,0) 40%),linear-gradient(#D9F1FF 0%,#F2FAFF 62%,#E5CFA2 62%,#D5B888 100%);box-shadow:var(--bayang),inset 0 0 0 3px rgba(255,255,255,.7)}
.b3-lt-medan.ditarik{cursor:grabbing}
.b3-lt-tong-baris{position:absolute;left:10px;right:10px;top:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;z-index:2}
.b3-lt-medan.n2 .b3-lt-tong-baris{grid-template-columns:repeat(2,minmax(0,1fr));left:36px;right:36px;gap:24px}
.b3-lt-medan.n4 .b3-lt-tong-baris{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.b3-lt-tong{position:relative;display:grid;justify-items:center;min-height:112px;padding:0;background:none;color:#fff;transition:transform .2s ease}
.b3-lt-tong.w0{--w:#3D8BF2;--wd:#2563C4}
.b3-lt-tong.w1{--w:#EC6F1F;--wd:#C2560F}
.b3-lt-tong.w2{--w:#12998A;--wd:#0C776B}
.b3-lt-tong.w3{--w:#7B57E0;--wd:#5537A8}
.b3-lt-mulut{position:relative;z-index:1;width:92%;height:20px;border-radius:50%;background:#1B2A5C;box-shadow:inset 0 5px 0 rgba(0,0,0,.35),0 0 0 4px var(--wd);transition:box-shadow .2s ease}
.b3-lt-badan{margin-top:-9px;width:100%;display:grid;justify-items:center;align-content:center;gap:2px;min-height:92px;padding:14px 8px 8px;border-radius:4px 4px 18px 18px;background:linear-gradient(var(--w),var(--wd));clip-path:polygon(0 0,100% 0,93% 100%,7% 100%);transition:filter .2s ease}
.b3-lt-nama{font-size:.9375rem;font-weight:900;line-height:1.12;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,.2)}
.b3-lt-sub{font-size:.875rem;font-weight:700;line-height:1.2;text-align:center;opacity:.95}
.b3-lt-kira{min-width:32px;height:24px;margin-top:3px;padding:0 8px;border-radius:12px;background:rgba(255,255,255,.28);display:grid;place-items:center;font-size:.9375rem;font-weight:900}
.b3-lt-tong.dituju{transform:translateY(-3px)}
.b3-lt-tong.dituju .b3-lt-mulut{box-shadow:inset 0 5px 0 rgba(0,0,0,.35),0 0 0 4px #FFE57F,0 0 0 9px rgba(255,229,127,.45)}
.b3-lt-tong.terima{animation:lompat .42s ease-out}
.b3-lt-tong.terima .b3-lt-badan{background:linear-gradient(#2FA05C,#217F49)}
.b3-lt-tong.salah .b3-lt-badan{background:linear-gradient(#F94F55,#C9323F)}
.b3-lt-tong.salah{animation:goncang .4s}
.b3-lt-tong.kilat .b3-lt-badan{background:linear-gradient(#2FA05C,#217F49)}
.b3-lt-tong.kilat{animation:b3-denyut-lembut .6s ease-in-out 2}
.b3-lt-tong[disabled]{cursor:default}
.b3-lt-lapis{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
.b3-lt-arah{fill:none;stroke:#fff;stroke-width:5;stroke-dasharray:1 11;stroke-linecap:round;filter:drop-shadow(0 1px 1px rgba(27,42,92,.45))}
.b3-lt-getah{fill:none;stroke:#7A2A1C;stroke-width:6;stroke-linecap:round}
.b3-lt-getah.belakang{stroke:#5E1F14}
.b3-lt-lastik{position:absolute;left:50%;bottom:0;width:144px;height:144px;transform:translateX(-50%);pointer-events:none;z-index:1;filter:drop-shadow(0 4px 2px rgba(74,42,18,.25))}
.b3-lt-lastik-svg{display:block;width:100%;height:100%}
.b3-lt-zon{position:absolute;left:0;right:0;bottom:0;height:54%;z-index:3;cursor:grab;touch-action:none}
.b3-lt-peluru{position:absolute;left:0;top:0;z-index:4;width:68px;height:66px;translate:-50% -50%;cursor:grab;touch-action:none}
.b3-lt-peluru-fail{position:absolute;left:50%;top:calc(50% - 7px);width:56px;height:51px;translate:-50% -50%;filter:drop-shadow(0 3px 2px rgba(27,42,92,.3));transition:opacity .12s linear}
.b3-lt-peluru.kosong .b3-lt-peluru-fail{opacity:0}
.b3-lt-peluru.masuk .b3-lt-peluru-fail{animation:b3-muat .42s cubic-bezier(.3,1.4,.5,1)}
.b3-lt-poket{position:absolute;left:50%;top:calc(50% + 12px);width:48px;height:14px;translate:-50% -50%;border-radius:7px;background:linear-gradient(#6E3F1B,#4A2A12);box-shadow:0 2px 0 rgba(0,0,0,.25);pointer-events:none}
.b3-lt-ajar{position:absolute;left:12px;bottom:16px;z-index:2;display:grid;justify-items:center;gap:2px;width:96px;padding:6px 6px 7px;border-radius:14px;background:rgba(255,255,255,.82);color:var(--ink);font-size:.875rem;font-weight:900;line-height:1.15;text-align:center;pointer-events:none;transition:opacity .4s ease}
.b3-lt-ajar svg{display:block;width:26px;height:26px;animation:b3-tarik 1.4s ease-in-out infinite}
.b3-lt-ajar.hilang{opacity:0}
@keyframes b3-muat{from{transform:translateY(-34px) scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes b3-tarik{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
.b3-lt-terbang{position:absolute;left:0;top:0;z-index:5;width:52px;height:48px;opacity:0;pointer-events:none;filter:drop-shadow(0 4px 3px rgba(27,42,92,.3))}
.b3-lt-terbang svg{display:block;width:100%;height:100%}
.b3-lt-rumus span{display:block;position:relative;padding-left:14px}
.b3-lt-rumus span::before{content:"";position:absolute;left:2px;top:.5em;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55}

/* =====================================================================================
   3.7 SULUH · muzium gelap
   ===================================================================================== */
.b2-p-suluh{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.b3-sl-cip{display:inline-flex;align-items:center;min-height:24px;padding:1px 10px;border-radius:12px;background:#1B2A5C;color:#FFE57F;font-size:.875rem;font-weight:900;white-space:nowrap}
.b3-sl-bilik{position:relative;height:330px;transition:height .35s ease;border-radius:24px;overflow:hidden;isolation:isolate;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair;background:#2E3A63;box-shadow:var(--bayang),inset 0 0 0 3px rgba(255,255,255,.12)}
.b3-sl-dinding{position:absolute;inset:0;z-index:0;background:linear-gradient(#B8862E,#B8862E) 0 17%/100% 4px no-repeat,repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 62px,rgba(255,255,255,.07) 62px 65px),linear-gradient(#41508A,#2E3A63 72%)}
.b3-sl-lantai{position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,0) 30%),repeating-linear-gradient(90deg,#7A5030 0 54px,#6B4428 54px 57px)}
.b3-sl-tali{position:absolute;left:6%;right:6%;bottom:17%;height:14px;border-bottom:4px solid #9E2A2A;border-radius:0 0 50% 50%/0 0 100% 100%;opacity:.9}
.b3-sl-pameran{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;width:96px;padding:0;background:none;color:inherit}
.b3-sl-pameran[disabled]{cursor:default}
.b3-sl-lampu{position:relative;z-index:1;width:28px;height:9px;margin-bottom:4px;border-radius:0 0 14px 14px;background:#52618F}
.b3-sl-kaca{position:relative;z-index:1;width:80px;height:72px;border-radius:12px 12px 4px 4px;display:grid;place-items:center;background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(190,220,255,.2));box-shadow:inset 0 0 0 3px rgba(255,255,255,.55),0 3px 0 rgba(0,0,0,.25);transition:box-shadow .3s ease,background .4s ease}
.b3-sl-objek{display:block;width:56px;height:56px}
.b3-sl-alas{position:relative;z-index:1;width:92px;min-height:22px;border-radius:4px;display:grid;place-items:center;background:linear-gradient(#8A6B45,#6E4F2E);color:#FFE9B0;font-size:.875rem;font-weight:900;line-height:1.2}
.b3-sl-plak{display:none;padding:2px 5px 3px;font-size:.875rem;font-weight:900;line-height:1.15;text-align:center;color:var(--ink)}
.b3-sl-pameran.siap .b3-sl-alas{width:104px;background:linear-gradient(#FFE57F,#F2C744);box-shadow:0 2px 0 #B8862E,0 0 14px rgba(255,214,102,.45)}
.b3-sl-pameran.siap .b3-sl-alas b{display:none}
.b3-sl-pameran.siap .b3-sl-plak{display:block;animation:b3-muncul .45s ease-out both}
.b3-sl-pameran.siap.dibantu .b3-sl-alas{background:linear-gradient(#EDE6FF,#D2C4F7);box-shadow:0 2px 0 #7B57E0}
.b3-sl-garis{position:absolute;z-index:3;left:50%;top:10px;width:88px;height:80px;transform:translateX(-50%);border-radius:14px;border:2px dashed rgba(255,233,176,.45);pointer-events:none}
.b3-sl-pameran.disuluh .b3-sl-kaca{box-shadow:inset 0 0 0 3px #FFE57F,0 0 0 5px rgba(255,229,127,.35)}
.b3-sl-pameran:focus-visible{outline:none}
.b3-sl-pameran:focus-visible .b3-sl-kaca{z-index:4;box-shadow:inset 0 0 0 3px #FFE57F,0 0 0 4px var(--fokus)}
.b3-sl-pameran.aktif .b3-sl-kaca{box-shadow:inset 0 0 0 3px #FFE57F,0 0 0 6px rgba(255,229,127,.5)}
.b3-sl-pameran.siap .b3-sl-lampu,.b3-sl-pameran.siap .b3-sl-kaca,.b3-sl-pameran.siap .b3-sl-alas{z-index:4}
.b3-sl-pameran.siap .b3-sl-lampu{background:#FFE57F;box-shadow:0 7px 20px 7px rgba(255,229,127,.55)}
.b3-sl-pameran.siap .b3-sl-kaca{background:radial-gradient(circle at 50% 30%,#FFFBEA,#FFEFC2 62%,#F6DA8F);box-shadow:inset 0 0 0 3px #FFC933,0 0 24px 6px rgba(255,214,102,.5)}
.b3-sl-pameran.siap .b3-sl-garis{display:none}
.b3-sl-gelap{position:absolute;inset:0;z-index:2;pointer-events:none;--sx:50%;--sy:55%;--sr:80px;
  background:radial-gradient(circle at var(--sx) var(--sy),rgba(7,11,32,0) 0,rgba(7,11,32,0) calc(var(--sr) * .52),rgba(7,11,32,.94) var(--sr));transition:opacity 1.1s ease}
.b3-sl-gelap::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--sx) var(--sy),rgba(255,226,140,.24) 0,rgba(255,226,140,0) var(--sr))}
.b3-sl-bilik.terang .b3-sl-gelap{opacity:0}
.b3-sl-papan{position:absolute;z-index:5;left:50%;top:10px;transform:translateX(-50%);max-width:88%;padding:3px 16px;border-radius:10px;background:linear-gradient(#FFE57F,#E8B341);color:#3A2A10;font-size:.875rem;font-weight:900;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 3px 0 #B8862E,0 0 18px rgba(255,214,102,.45)}
.b3-sl-vitrin{position:absolute;z-index:6;left:50%;top:50%;width:min(290px,84%);transform:translate(-50%,-50%);padding:10px 14px 14px;border-radius:22px;display:grid;justify-items:center;gap:4px;text-align:center;background:radial-gradient(circle at 50% 30%,#FFF6D8,#FFFDF7 62%);box-shadow:0 0 0 4px #FFC933,0 18px 40px rgba(0,0,0,.5)}
.b3-sl-vitrin.buka{animation:b3-vitrin .38s cubic-bezier(.3,1.4,.5,1)}
.b3-sl-vitrin.tutup{animation:b3-vitrin-tutup .36s ease-in forwards}
.b3-sl-v-label{font-size:.875rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#8A4B00}
.b3-sl-v-objek svg{display:block;width:104px;height:104px}
.b3-sl-v-ket{font-size:.9375rem;font-weight:800;line-height:1.35;color:var(--ink)}
.b3-sl-v-ket.kosong{color:var(--ink2);font-style:italic}
.b3-sl-bawah{display:grid;gap:8px;justify-items:center}
.b3-sl-bawah.soal{justify-items:stretch}
.b3-sl-periksa{min-width:240px}
.b3-sl-periksa .ikon{width:22px;height:22px;stroke-width:2.6}
.b3-sl-pilih .op{min-height:48px;font-size:.9375rem}
.b3-sl-bisik{align-items:flex-start}

/* ===== MOD LEBAR (pentas 1280 x 720; Kancil HUD di kiri, jadi kandungan bermula pada x 300) ===== */
body.mod-lebar .b2-main.b2-j-kemaraan .main-badan,body.mod-lebar .b2-main.b2-j-pasar .main-badan,
body.mod-lebar .b2-main.b2-j-lontar .main-badan,body.mod-lebar .b2-main.b2-j-suluh .main-badan{left:300px;width:720px;top:90px;bottom:12px;display:block}
body.mod-lebar .b2-p-kemaraan,body.mod-lebar .b2-p-pasar,body.mod-lebar .b2-p-lontar,body.mod-lebar .b2-p-suluh{height:100%;align-content:start}
/* kemaraan: peta tegak di kiri, kad dan bisik di kanan */
body.mod-lebar .b2-p-kemaraan.b3-km-tegak{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"peta atas" "peta bisik" "peta .";column-gap:16px}
body.mod-lebar .b3-km-tegak .b3-km-peta{grid-area:peta;width:auto;min-width:0;height:612px}
body.mod-lebar .b3-km-tegak .b3-km-atas{grid-area:atas;position:relative;padding-top:6px}
body.mod-lebar .b3-km-tegak .b3-km-atas .b2-tip-btn{position:absolute;right:-6px;top:-4px;z-index:2;width:46px;height:46px;font-size:1.25rem}
body.mod-lebar .b3-km-tegak .b3-km-kad{padding-right:44px}
body.mod-lebar .b3-km-tegak .b3-km-bisik{grid-area:bisik}
body.mod-lebar .b3-km-tegak .b3-km-rumus-kotak{grid-column:2;grid-row:1 / span 3;max-height:612px;overflow-y:auto;align-self:start}
body.mod-lebar .b3-km-tegak .b3-km-kad .b2-kad-isi{font-size:1.25rem}
body.mod-lebar .b3-km-tarikh{font-size:1.875rem}
/* kemaraan: peta datar (Borneo) di bawah kad dan bisik */
body.mod-lebar .b2-p-kemaraan.b3-km-datar{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:minmax(var(--km-atas,0px),auto) auto;grid-template-areas:"atas bisik" "peta peta";column-gap:14px}
body.mod-lebar .b3-km-datar .b3-km-atas{grid-area:atas;align-self:start}
body.mod-lebar .b3-km-datar .b3-km-bisik{grid-area:bisik;align-self:stretch}
body.mod-lebar .b3-km-datar .b3-km-peta{grid-area:peta;width:min(100%,calc(470px * var(--ar)));justify-self:center}
body.mod-lebar .b3-km-datar .b3-km-kad .b2-kad-isi{font-size:1.1875rem}
body.mod-lebar .b2-p-kemaraan.b3-km-datar.b3-km-habis{grid-template-columns:330px minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"peta rumus"}
body.mod-lebar .b3-km-datar.b3-km-habis .b3-km-peta{width:330px}
body.mod-lebar .b3-km-datar .b3-km-rumus-kotak{grid-area:rumus;max-height:606px;overflow-y:auto;align-self:start}
body.mod-lebar .b3-km-rumus{grid-template-columns:1fr}
/* pasar: gerai dan meter di kiri, kawalan di kanan */
body.mod-lebar .b2-p-pasar{grid-template-columns:398px minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"atas atas" "gerai kanan" "meter kanan";column-gap:14px}
body.mod-lebar .b3-ps-atas{grid-area:atas}
body.mod-lebar .b3-ps-gerai{grid-area:gerai}
body.mod-lebar .b3-ps-meter{grid-area:meter;align-self:start}
body.mod-lebar .b3-ps-kanan{grid-area:kanan;display:grid;gap:10px;align-content:start;min-width:0}
body.mod-lebar .b3-ps-kanan[hidden]{display:none}
body.mod-lebar .b3-ps-tuas-kotak{padding:14px 12px;border-radius:20px;background:rgba(255,255,255,.94);box-shadow:var(--bayang)}
body.mod-lebar .b3-ps-rumus-kotak{grid-column:2;grid-row:1 / span 3;max-height:606px;overflow-y:auto;align-self:start}
body.mod-lebar .b3-ps-rumus{grid-template-columns:1fr}
body.mod-lebar .b3-ps-kartu-grid,body.mod-lebar .b3-ps-kartu-grid.n3{grid-template-columns:1fr}
body.mod-lebar .b3-ps-kartu{grid-template-columns:52px minmax(0,1fr);justify-items:start;align-items:center;min-height:0;padding:8px 12px;text-align:left;font-size:.9375rem;gap:10px}
body.mod-lebar .b3-ps-kartu-ikon{width:50px;height:50px}
body.mod-lebar .b3-ps-kad .b2-kad-isi{font-size:1.25rem}
/* lontar: medan penuh di bawah kad */
body.mod-lebar .b3-lt-atas{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:stretch;column-gap:14px}
body.mod-lebar .b3-lt-medan{height:448px}
body.mod-lebar .b3-lt-tong-baris{left:24px;right:24px;gap:18px}
body.mod-lebar .b3-lt-tong{min-height:128px}
body.mod-lebar .b3-lt-badan{min-height:104px}
body.mod-lebar .b3-lt-nama{font-size:1.0625rem}
body.mod-lebar .b3-lt-sub{font-size:.875rem}
body.mod-lebar .b3-lt-kad .b2-kad-isi{font-size:1.25rem}
body.mod-lebar .b3-lt-lastik{width:156px;height:156px}
body.mod-lebar .b3-lt-ajar{left:24px;width:120px}
body.mod-lebar .b3-lt-rumus{grid-template-columns:1fr}
body.mod-lebar .b3-lt-rumus-kotak{max-height:606px;overflow-y:auto}
/* suluh */
body.mod-lebar .b3-sl-bilik{height:318px}
body.mod-lebar .b3-sl-pameran{width:124px}
body.mod-lebar .b3-sl-pameran.siap .b3-sl-alas{width:128px}
body.mod-lebar .b3-sl-bilik.periksa{height:270px}
body.mod-lebar .b3-sl-kad .b2-kad-isi{font-size:1.1875rem;line-height:1.3}
body.mod-lebar .b3-sl-pilih{grid-template-columns:repeat(3,minmax(0,1fr))}
body.mod-lebar .b3-sl-pilih.n2,body.mod-lebar .b3-sl-pilih.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
body.mod-lebar .b3-sl-pilih .op{min-height:60px}
body.mod-lebar .b3-sl-rumus-kotak{max-height:280px;overflow-y:auto}
body.mod-lebar .b3-sl-rumus{grid-template-columns:1fr 1fr}

/* ===== MOD TELEFON: padatkan supaya kad, adegan, pilihan dan bisik muat pada 390 x 844 ===== */
body.mod-telefon .b3-ps-kad .b2-kad-isi,body.mod-telefon .b3-sl-kad .b2-kad-isi{font-size:1.0625rem;line-height:1.28}
body.mod-telefon .b3-ps-svg{height:208px}
body.mod-telefon .b3-sl-bilik.periksa{height:224px}
body.mod-telefon .b3-sl-v-objek svg{width:88px;height:88px}

/* ===== Telefon pendek (≤ 700 px tinggi) ===== */
@media (max-height:700px){
  body.mod-telefon .b3-km-tegak .b3-km-peta{width:min(100%,calc((100dvh - 270px) * var(--ar)))}
  body.mod-telefon .b3-km-tarikh{font-size:1.375rem}
  body.mod-telefon .b3-lt-medan{height:340px}
  body.mod-telefon .b3-lt-lastik{width:130px;height:130px}
  body.mod-telefon .b3-lt-tong{min-height:100px}
  body.mod-telefon .b3-lt-badan{min-height:82px;padding-top:12px}
  body.mod-telefon .b3-sl-bilik{height:282px}
  body.mod-telefon .b3-sl-pameran{width:88px}
  body.mod-telefon .b3-sl-kaca{width:70px;height:62px}
  body.mod-telefon .b3-sl-objek{width:48px;height:48px}
  body.mod-telefon .b3-sl-alas{width:80px;height:20px}
  body.mod-telefon .b3-ps-kartu{min-height:100px}
  body.mod-telefon .b3-ps-svg{height:172px}
  body.mod-telefon .b3-ps-kad .b2-kad-isi{font-size:1rem;line-height:1.26}
  body.mod-telefon .b3-ps-kecil{display:none}
  body.mod-telefon .b3-ps-tuas-kotak{gap:6px;padding:0}
  body.mod-telefon .b3-ps-pilih .op{min-height:46px;padding-block:8px}
  body.mod-telefon .b2-p-pasar{gap:8px}
  body.mod-telefon .b3-sl-kad .b2-kad-isi{font-size:1rem;line-height:1.26}
  body.mod-telefon .b3-sl-bilik.periksa{height:200px}
  body.mod-telefon .b3-sl-v-objek svg{width:70px;height:70px}
  body.mod-telefon .b3-sl-vitrin{padding:8px 12px 10px;gap:2px}
  body.mod-telefon .b3-sl-pilih .op{min-height:46px;padding-block:8px}
}
@media (max-width:370px){
  .b3-lt-nama{font-size:.875rem}
  .b3-ps-meter{gap:8px;padding:8px}
}