/* ===== Babak · gaya enjin bab (js/enjin-bab.js), dikongsi oleh Bab 2 dan bab seterusnya. Tambahan kepada babak.css (Bab 1);
   tiada gaya Bab 1 diubah. Awalan kelas b2- dikekalkan daripada Bab 2. Gaya enjin pakej diletak dalam fail CSS pakej sendiri. ===== */

/* ---------- Skrin tajuk (cip di bawah nama bab: BAB.meta.cipTajuk) ---------- */
.b2-cip-proto{margin-top:10px;padding:4px 14px;border-radius:14px;background:rgba(16,26,66,.72);color:#fff;font-size:.8125rem;font-weight:800;letter-spacing:.02em;white-space:nowrap}
body.mod-lebar .b2-cip-proto{margin-top:12px;padding:5px 18px;font-size:.9375rem;border-radius:16px}
/* Nama bab panjang (contoh Bab 3) dibalut dalam cip, tidak terpotong di tepi skrin telefon. */
.tajuk-isi .cip-bab{max-width:100%;height:auto;min-height:40px;padding-top:5px;padding-bottom:5px;white-space:normal;line-height:1.2;text-align:left}
.tajuk-isi .cip-bab b{flex:none}
/* Skrin lebar: butang MULA diturunkan supaya tidak menindih cip di bawah nama bab; Kancil kekal di tempatnya. */
body.mod-lebar .tajuk-bawah{top:470px}
body.mod-lebar .tajuk .tajuk-bawah .watak{top:-140px}

/* ---------- Peta: tahap dalam pembinaan ---------- */
.tahap.akan{background:#AEB9D8;box-shadow:0 5px 0 #8594BD,0 8px 12px rgba(27,42,92,.28);color:#fff}
.tahap.akan.boss{background:#9C8BD6;box-shadow:0 6px 0 #6F5DB5,0 10px 14px rgba(27,42,92,.35);color:#FFE57F}
.tahap.akan-kini::before{content:"";position:absolute;inset:-14px;border-radius:50%;border:4px dashed rgba(255,255,255,.95);animation:pusing 14s linear infinite;pointer-events:none}
.kad-tahap-teks span.b2-rancang{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kad-tahap-info .b2-cip-langkah{background:#FFF6D8;color:#8A4B00}
.kad-tahap-info .b2-cip-langkah.akan{background:#EEF2FB;color:var(--ink2)}
.kad-tahap-info .b2-cip-langkah .ikon{width:14px;height:14px;stroke-width:2.6}
body.mod-lebar .kad-tahap-info .b2-cip-langkah{background:none;color:var(--ink2)}
body.mod-lebar .kad-tahap-teks span.b2-rancang{-webkit-line-clamp:2;max-width:560px}

/* ---------- Intro: tangga tiga bintang ---------- */
.b2-intro .kad-intro{gap:10px}
.b2-tangga{display:grid;gap:8px;width:100%;text-align:left}
.b2-anak{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:18px;background:#fff;text-align:left;box-shadow:0 4px 0 rgba(27,42,92,.14),inset 0 0 0 2px var(--garis);transition:transform .08s ease}
.b2-anak:active:not([disabled]){transform:translateY(3px)}
.b2-anak.buka{background:#FFFBEA;box-shadow:0 4px 0 var(--emas-d),inset 0 0 0 3px var(--emas)}
.b2-anak.siap{background:var(--betul-bg);box-shadow:0 4px 0 #9FE0BF,inset 0 0 0 2px #9FE0BF}
.b2-anak.kunci{opacity:.62;cursor:not-allowed}
.b2-tangga-bn{display:flex;flex:none;width:58px;justify-content:center}
.b2-tangga-bn svg{width:18px;height:19px;margin:0 -1px}
.b2-anak-teks{display:grid;gap:1px;min-width:0;flex:1 1 auto}
.b2-anak-teks b{font-size:.9375rem;font-weight:900;line-height:1.2}
.b2-anak-teks small{font-size:.75rem;font-weight:700;color:var(--ink2);line-height:1.32}
.b2-anak-status{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--garis);color:var(--ink2)}
.b2-anak.buka .b2-anak-status{background:var(--emas);color:var(--ink);box-shadow:inset 0 -3px 0 var(--emas-d)}
.b2-anak.siap .b2-anak-status{background:var(--hijau);color:#fff}
.b2-anak-status .ikon{width:18px;height:18px;stroke-width:2.8}
.b2-anak-status .main-ikon{width:16px;height:16px;fill:currentColor}
body.mod-lebar .b2-intro .kad-intro{width:640px;margin:26px 0 0 150px;padding:22px 32px 26px;gap:10px}
body.mod-lebar .b2-intro .kad-intro h1{font-size:2.25rem}
body.mod-lebar .b2-intro .kad-intro .premis{font-size:1rem;max-width:52ch}
body.mod-lebar .b2-anak{padding:9px 14px}
body.mod-lebar .b2-anak-teks small{font-size:.8125rem}
body.mod-lebar .b2-intro .watak{left:40px;top:330px;width:230px}

/* ---------- Skrin main: jalur adegan (tarik tali, neraca, hantar) ---------- */
.b2-main .b2-adegan{position:absolute;left:0;bottom:0;width:100%;height:100%;display:block}
body.mod-telefon .main.b2-main.b2-jalur .latar-babak{height:300px}
body.mod-telefon .main.b2-main.b2-jalur .main-badan{margin-top:244px}
body.mod-telefon .main.b2-main.b2-j-tarik .latar-babak{height:262px}
body.mod-telefon .main.b2-main.b2-j-tarik .main-badan{margin-top:206px}
body.mod-telefon .main.b2-main.b2-tanpa-watak .main-watak,body.mod-lebar .main.b2-main.b2-tanpa-watak .main-watak{display:none}
.b2-apung{animation:apung-rakit 2.6s ease-in-out infinite}
@keyframes apung-rakit{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.b2-bendera-kibar{transform-box:fill-box;transform-origin:0 50%;animation:kibar 1.4s ease-in-out infinite}
@keyframes kibar{0%,100%{transform:skewY(0)}50%{transform:skewY(-4deg)}}

/* lajur grid tidak boleh melebar melebihi skrin telefon */
.b2-main .main-badan,.b2-main .pentas,.b2-atas,.b2-bawah{grid-template-columns:minmax(0,1fr);min-width:0}

/* kad dan tip */
.b2-atas{display:grid;gap:10px}
.b2-bawah{display:grid;gap:10px}
.b2-kad-baris{display:flex;gap:10px;align-items:stretch}
.b2-kad{position:relative;flex:1 1 auto;min-width:0;background:#fff;border-radius:22px;padding:10px 16px 12px;box-shadow:var(--bayang);display:grid;gap:3px;align-content:center}
.b2-kad[hidden]{display:none}
.b2-kad-no{font-size:.6875rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-teks)}
.b2-kad-isi{font-size:1.1875rem;font-weight:900;line-height:1.25;text-wrap:balance}
.b2-kad.masuk{animation:lompat .35s ease-out both}
.b2-kad.betul{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 5px 0 #1E9E63,inset 0 0 0 3px var(--hijau)}
.b2-kad.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}
.b2-kad.salah .b2-kad-no{color:var(--salah-teks)}
.b2-kad.ke-laut{transform-origin:50% 50%}
.b2-kad-kepala{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.b2-cip-tahun{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:12px;background:var(--ink);color:#fff;font-size:.75rem;font-weight:900;letter-spacing:.03em;white-space:nowrap}
.b2-tip-btn{flex:none;align-self:flex-start;width:46px;height:46px;border-radius:50%;background:var(--ungu);color:#fff;font-weight:900;font-size:1.375rem;line-height:1;box-shadow:0 4px 0 var(--ungu-d),0 8px 14px rgba(27,42,92,.2);display:grid;place-items:center;border:3px solid #fff}
.b2-tip-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ungu-d)}
.b2-main .bisik{flex-wrap:wrap;gap:8px 12px}
.b2-bisik-teks{flex:1 1 220px}
.b2-faham-btn{margin-left:auto;min-height:40px!important;padding:4px 16px!important;border-radius:14px!important;font-size:.875rem!important}

/* tarik tali: papan maksud dan tempat kosong */
.b2-pilih{display:grid;gap:9px}
.b2-papan{padding:10px 14px 12px;gap:6px;align-content:start}
.b2-papan-kepala{display:flex;align-items:center;justify-content:space-between;gap:8px}
.b2-papan-kira{font-size:.6875rem;font-weight:900;color:var(--ink2);white-space:nowrap}
.b2-papan-buka{font-size:.9375rem;font-weight:900;color:var(--ink);line-height:1.3}
.b2-maksud{display:grid;gap:6px}
.b2-maksud li{display:flex;gap:8px;align-items:flex-start}
.b2-maksud p{font-size:.9375rem;font-weight:700;line-height:1.55;color:var(--ink);min-width:0}
.b2-maksud-no{flex:none;width:22px;height:22px;margin-top:2px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:.75rem;font-weight:900}
.b2-frasa{border-radius:6px;padding:0 1px;transition:background-color .25s ease,color .25s ease}
.b2-frasa-bungkus.ada-kosong{white-space:nowrap}
.b2-frasa.sorot{background:#DDF5F1;color:var(--teal-teks);font-weight:900;box-shadow:0 0 0 2px #DDF5F1}
.b2-frasa.kosong{display:inline-block;min-width:4.6em;height:1.3em;vertical-align:-.3em;border-radius:6px;background:#F1F4FB;box-shadow:inset 0 -3px 0 #AEB9D8}
.b2-frasa.kosong.aktif{background:#FFF1BF;box-shadow:inset 0 -3px 0 var(--emas-d),0 0 0 2px var(--emas);animation:denyut-kosong 1.3s ease-in-out infinite}
@keyframes denyut-kosong{0%,100%{box-shadow:inset 0 -3px 0 var(--emas-d),0 0 0 2px var(--emas)}50%{box-shadow:inset 0 -3px 0 var(--emas-d),0 0 0 5px rgba(255,201,51,.45)}}
.b2-frasa.isi{font-weight:900}
.b2-frasa.isi.betul{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 0 0 2px var(--betul-bg)}
.b2-frasa.isi.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:inset 0 -3px 0 #E0555D,0 0 0 2px var(--salah-bg)}
.b2-frasa.masuk{animation:lompat .3s ease-out both}
.b2-papan.salah{background:#fff;color:var(--ink);box-shadow:var(--bayang),inset 0 0 0 3px #E0555D;animation:goncang .4s}
.b2-papan.salah .b2-kad-no{color:var(--teal-teks)}
.b2-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.b2-pilih-isi{grid-template-columns:repeat(2,minmax(0,1fr))}
.b2-pilih-isi .op:last-child:nth-child(odd){grid-column:1/-1}
.b2-op-isi{min-height:50px;padding:8px 10px;font-size:.9375rem;font-weight:900;justify-content:center;text-align:center}
.b2-op-isi.pudar{opacity:.45}
.b2-pilih-isi .b2-mula-tarik{grid-column:1/-1;justify-self:center;min-width:220px}
.b2-rumus-maksud{display:grid;gap:6px;counter-reset:m}
.b2-rumus-maksud li{position:relative;padding:8px 10px 8px 38px;border-radius:14px;background:#F3F6FD;font-size:.9375rem;font-weight:800;line-height:1.45;counter-increment:m}
.b2-rumus-maksud li::before{content:counter(m);position:absolute;left:9px;top:9px;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:.75rem;font-weight:900}
.b2-rumus-lanjut{display:grid;gap:10px}
.b2-rumus-nota{font-size:.875rem;font-weight:700;line-height:1.45;color:var(--teal-teks);background:#E7F7F4;border-radius:14px;padding:9px 12px}

/* rujuk semula dan istilah */
.b2-rujuk-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 12px 4px 9px;border-radius:12px;background:#fff;color:var(--ink);font-size:.8125rem;font-weight:900;line-height:1.2;box-shadow:0 3px 0 rgba(27,42,92,.18),inset 0 0 0 2px var(--garis);text-align:left}
.b2-rujuk-btn .ikon{width:17px;height:17px;flex:none;color:var(--teal-d)}
.b2-rujuk-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(27,42,92,.18),inset 0 0 0 2px var(--garis)}
.b2-rujuk-btn.besar{display:flex;width:100%;min-height:52px;padding:8px 12px;border-radius:16px;gap:10px;font-size:.9375rem;background:#F3F6FD}
.b2-rujuk-btn.besar > .ikon:last-child{margin-left:auto;color:var(--ink2)}
.b2-rujuk-teks{display:grid;gap:1px;min-width:0}
.b2-rujuk-teks small{font-size:.75rem;font-weight:700;color:var(--ink2)}
.bisik .b2-rujuk-btn{flex:none}
.b2-rujuk{order:2}
.b2-rujuk.lulus{order:4}
.b2-rujuk .label{color:var(--teal-teks)}
.b2-rujuk-ayat{font-size:.875rem;font-weight:700;line-height:1.4;color:var(--ink2)}
.b2-rujuk-senarai{display:grid;gap:8px}
a.b2-istilah{color:inherit;text-decoration:underline dotted var(--teal-d);text-decoration-thickness:2px;text-underline-offset:3px;border-radius:4px}
a.b2-istilah::after{content:"\2197";font-size:.7em;margin-left:1px;color:var(--teal-teks);vertical-align:.25em}
a.b2-istilah:hover{background:#E7F7F4}
.b2-nota-istilah{font-weight:700;line-height:1.45}
.b2-nota-kaki{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.b2-intro-artikel{display:inline-flex;align-items:center;gap:6px;font-size:.875rem}
.b2-intro-artikel .ikon{width:17px;height:17px;color:var(--teal-d)}

/* dialog artikel rujuk semula */
.b2-artikel{width:min(100%,640px);gap:12px;text-align:left}
.b2-artikel-kepala{position:relative;display:grid;gap:6px;padding-right:50px}
.b2-artikel-label .ikon{width:18px;height:18px}
.b2-artikel h2{font-size:1.375rem;line-height:1.2}
.dialog p.b2-artikel-nota{font-size:.8125rem;line-height:1.4}
.b2-artikel-x{position:sticky;top:0;z-index:3;justify-self:end;margin-bottom:-54px;width:42px;height:42px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--ink);box-shadow:0 3px 10px rgba(27,42,92,.22),inset 0 0 0 2px var(--garis)}
.b2-artikel-x .ikon{width:20px;height:20px;stroke-width:2.8}
.b2-kandungan{display:flex;flex-wrap:wrap;gap:6px}
.b2-kandungan button{min-height:32px;padding:4px 11px;border-radius:12px;background:#EEF2FB;color:var(--ink);font-size:.75rem;font-weight:900}
.b2-artikel-isi{display:grid;gap:12px}
.b2-artikel-sek{display:grid;gap:8px;padding:12px 14px;border-radius:18px;background:#F7F9FE;scroll-margin-top:14px}
.b2-artikel-sek.sasaran{background:#FFF8DD;box-shadow:inset 4px 0 0 var(--emas)}
.b2-artikel-sek.spm{background:#E9F7F4}
.b2-artikel-sek h3{font-size:1.0625rem;line-height:1.3}
.dialog .b2-artikel-sek p{font-size:.9375rem;font-weight:500;line-height:1.62;color:var(--ink)}
.dialog .b2-artikel-sek p b{font-weight:900}
.dialog p.b2-artikel-kaki{font-size:.75rem;line-height:1.45}

/* dialog tip */
.b2-tip{gap:10px}
.b2-tip-label{display:flex;align-items:center;gap:8px;font-size:.75rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--ungu)}
.b2-i{width:26px;height:26px;border-radius:50%;background:var(--ungu);color:#fff;display:grid;place-items:center;font-size:.9375rem;letter-spacing:0}
.b2-tip-senarai{display:grid;gap:8px}
.b2-tip-senarai li{position:relative;padding-left:18px;font-weight:700;color:var(--ink);line-height:1.45;font-size:.9375rem}
.b2-tip-senarai li::before{content:"";position:absolute;left:2px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--ungu)}


/* radio tokoh */
.b2-radio{position:relative;width:100%;max-width:520px;margin-inline:auto}
.b2-radio-svg{width:100%;height:auto;overflow:visible;touch-action:none;display:block;filter:drop-shadow(0 8px 10px rgba(27,42,92,.25))}
.b2-pembesar{transform-box:fill-box;transform-origin:center}
.b2-radio.hidup .b2-pembesar{animation:dengung .45s ease-out}
@keyframes dengung{0%{transform:scale(1)}35%{transform:scale(1.05)}100%{transform:scale(1)}}
.b2-jarum{transition:transform .38s cubic-bezier(.3,1.35,.5,1);pointer-events:none}
.b2-tombol{transition:transform .38s ease;transform-origin:0 0}
.b2-stesen{cursor:pointer}
.b2-siaran{background:#fff;border-radius:20px;padding:10px 16px 12px;box-shadow:var(--lip);display:grid;gap:3px;min-height:112px;align-content:start}
.b2-siaran.masuk{animation:siar .35s ease-out}
@keyframes siar{from{opacity:.25;transform:translateY(4px)}to{opacity:1;transform:none}}
.b2-siaran-label{display:flex;align-items:center;gap:6px;font-size:.6875rem;font-weight:900;letter-spacing:.1em;color:var(--teal-teks)}
.b2-siaran-label .ikon{width:15px;height:15px}
.b2-siaran-nama{font-size:1rem;font-weight:900;line-height:1.2}
.b2-siaran-teks{font-size:.9375rem;font-weight:700;line-height:1.42;color:var(--ink)}
.b2-siaran.kabur .b2-siaran-teks{color:var(--ink2);font-style:italic}
.b2-kawalan{display:flex;gap:12px;align-items:center;justify-content:center}
.b2-bulat-btn{width:56px;height:56px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 5px 0 rgba(27,42,92,.22),inset 0 0 0 2px var(--garis);color:var(--ink);flex:none}
.b2-bulat-btn .ikon{width:24px;height:24px;stroke-width:2.8}
.b2-bulat-btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(27,42,92,.22),inset 0 0 0 2px var(--garis)}
.b2-kunci-btn{flex:1 1 auto;max-width:300px}

/* neraca kuasa */
.b2-pilih-berat{grid-template-columns:minmax(0,1fr)}
.b2-pemberat{min-height:52px;gap:12px;font-size:.9375rem}
.b2-pemberat-ikon{flex:none;width:30px;height:26px;background:#8A5226;clip-path:polygon(24% 0,76% 0,100% 100%,0 100%);border-radius:3px}
.b2-pemberat.betul .b2-pemberat-ikon{background:var(--hijau)}
.b2-pemberat.salah .b2-pemberat-ikon{background:var(--merah-d)}
.b2-pilih.masuk{animation:lompat .3s ease-out both}
.b2-klon{position:absolute;z-index:20;margin:0;pointer-events:none}

/* hantar ke revolusi */
.b2-pilih-pintu{grid-template-columns:repeat(3,minmax(0,1fr))}
.b2-pintu{flex-direction:column;justify-content:center;text-align:center;gap:2px;min-height:96px;padding:10px 6px}
.b2-pintu-tahun{font-size:1.375rem;font-weight:900;line-height:1;color:var(--ink)}
.b2-pintu-nama{font-size:.9375rem;font-weight:900;line-height:1.15}
.b2-pintu small{font-size:.6875rem;font-weight:700;color:var(--ink2);line-height:1.2}

/* kertas soalan (Fasa SPM) */
.cip-pemain b.b2-hud-nama{max-width:none;white-space:nowrap}
.b2-kertas{position:relative;border-radius:22px;padding:14px 14px 14px 18px;box-shadow:var(--bayang);display:grid;gap:10px;background:linear-gradient(90deg,transparent 7px,#F7C6C9 7px,#F7C6C9 9px,transparent 9px),#FFFDF7}
.b2-kertas-kepala{display:flex;align-items:center;justify-content:space-between;gap:10px}
.b2-kertas-label{font-size:.6875rem;font-weight:900;letter-spacing:.1em;color:var(--teal-teks)}
.b2-kertas-soalan{font-size:1.125rem;font-weight:900;line-height:1.35;display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;margin-top:-6px}
.b2-markah{margin-left:auto;font-size:.8125rem;font-weight:900;color:var(--merah-d);white-space:nowrap}
.b2-kertas-kaki{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.b2-cop-kira{font-size:.8125rem;font-weight:800;color:var(--ink2)}

/* tulis gaya SPM */
.b2-tulis-label{font-size:.8125rem;font-weight:700;color:var(--ink2);line-height:1.4;margin-top:-4px}
.b2-tulis-bhg{display:grid;gap:8px;padding-top:12px;border-top:2px dashed #EADFC4}
.b2-tulis-bhg:first-of-type{border-top:0;padding-top:0}
.b2-tulis-ta{width:100%;min-height:150px;resize:vertical;padding:12px 14px;border-radius:16px;border:2px solid #C5D0EA;background:#fff;font:inherit;font-size:1rem;font-weight:500;line-height:1.55;color:var(--ink)}
.b2-tulis-ta:focus{outline:none;border-color:var(--fokus);box-shadow:0 0 0 3px rgba(11,87,208,.18)}
.b2-tulis-ta[readonly]{background:#F7F9FE;color:var(--ink2)}
.b2-tulis-bawah{display:flex;justify-content:flex-end}
.b2-tulis-kira{font-size:.75rem;font-weight:800;color:var(--ink2)}
.b2-tulis-panel{display:grid;gap:10px;border-radius:18px;padding:12px;animation:lompat .35s ease-out both}
.b2-tulis-panel.penuh{background:var(--betul-bg)}
.b2-tulis-panel.kurang{background:#FFF6F1;box-shadow:inset 0 0 0 2px #F7B5BA}
.b2-tulis-markah{font-size:.9375rem;font-weight:800;color:var(--ink)}
.b2-tulis-markah b{font-size:1.375rem;font-weight:900}
.b2-tulis-panel.penuh .b2-tulis-markah b{color:var(--betul-teks)}
.b2-tulis-panel.kurang .b2-tulis-markah b{color:var(--salah-teks)}
.b2-isi-kumpulan{display:grid;gap:6px;background:#fff;border-radius:14px;padding:10px 12px}
.b2-isi-label{display:flex;align-items:center;gap:6px;font-size:.6875rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.b2-isi-label .ikon{width:15px;height:15px;stroke-width:2.8}
.b2-isi-kumpulan.dapat .b2-isi-label{color:var(--betul-teks)}
.b2-isi-kumpulan.tinggal .b2-isi-label{color:var(--teal-teks)}
.b2-isi-kumpulan.tolak .b2-isi-label{color:var(--salah-teks)}
.b2-isi-kumpulan ul{display:grid;gap:6px}
.b2-isi-kumpulan li{display:grid;gap:2px;position:relative;padding-left:16px;font-size:.875rem;font-weight:800;line-height:1.4;color:var(--ink)}
.b2-isi-kumpulan li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--teal)}
.b2-isi-kumpulan.dapat li::before{background:var(--hijau)}
.b2-isi-kumpulan.tolak li::before{background:var(--merah)}
.b2-isi-kumpulan li small{font-size:.8125rem;font-weight:600;color:var(--ink2);line-height:1.4}
.b2-tulis-rujuk{display:grid}
.b2-isi-tokoh{border-top:2px dashed var(--garis);padding-top:6px}
.b2-isi-tokoh summary{cursor:pointer;font-size:.8125rem;font-weight:900;color:var(--teal-teks);padding:4px 0;list-style-position:inside}
.b2-isi-tokoh ul{margin-top:6px}
.b2-tulis-rumus{border-radius:18px;padding:12px 14px;display:grid;gap:8px;font-weight:700;line-height:1.45;animation:lompat .35s ease-out both}
.b2-tulis-rumus.betul{background:var(--betul-bg);color:var(--betul-teks)}
.b2-tulis-rumus.salah{background:var(--salah-bg);color:var(--salah-teks)}
.b2-tulis-cara{font-size:.8125rem}
.b2-tulis-rumus .baris-btn{justify-content:flex-end;flex-wrap:wrap}

/* rumusan */
.b2-rumus{background:#fff;border-radius:24px;padding:16px 18px;box-shadow:var(--bayang);display:grid;gap:10px;animation:lompat .4s ease-out both}
.b2-rumus-label{display:flex;align-items:center;gap:6px;font-size:.6875rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-teks)}
.b2-rumus-label .ikon{width:16px;height:16px}
.b2-rumus h2{font-size:1.375rem}
.b2-rumus-isi{font-weight:700;line-height:1.45;color:var(--ink)}
.b2-rumus-tokoh{display:grid;gap:6px}
.b2-rumus-tokoh li{display:grid;gap:1px;font-size:.8125rem;line-height:1.3;padding:6px 10px;border-radius:12px;background:#F3F6FD}
.b2-rumus-tokoh span{color:var(--ink2);font-weight:700}

/* ---------- Keputusan ---------- */
.b2-tangga-kecil{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.b2-tk{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 11px 0 6px;border-radius:14px;background:rgba(16,26,66,.55);color:#DDE6FF;font-size:.75rem;font-weight:800;white-space:nowrap}
.b2-tk svg{width:16px;height:17px}
.b2-tk.siap{background:#fff;color:var(--ink)}
.b2-premis-lulus{background:var(--betul-bg);color:var(--betul-teks)}
.keputusan .baris-btn .btn.utama span{white-space:normal}

/* ---------- Nota ---------- */
.b2-nota-akan{font-weight:700;color:var(--ink2);line-height:1.45}
.b2-nota-hlm{font-size:.75rem;font-weight:800;color:var(--ink2);margin-top:-4px}

/* ===== MOD LEBAR (1280 x 720) ===== */
body.mod-lebar .b2-main.b2-j-susun .main-badan,body.mod-lebar .b2-main.b2-j-neraca .main-badan{left:330px;width:640px;top:84px;bottom:22px;display:flex;flex-direction:column}
body.mod-lebar .b2-main.b2-j-tarik .main-badan{left:300px;width:700px;top:78px;bottom:22px;display:flex;flex-direction:column}
body.mod-lebar .b2-p-tarik,body.mod-lebar .b2-p-susun,body.mod-lebar .b2-p-neraca{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
body.mod-lebar .b2-kad{padding:12px 20px 14px;border-radius:26px}
body.mod-lebar .b2-kad-isi{font-size:1.4375rem}
body.mod-lebar .b2-papan{padding:10px 20px 12px;gap:5px}
body.mod-lebar .b2-maksud{gap:4px}
body.mod-lebar .b2-maksud p{font-size:1rem;line-height:1.45}
body.mod-lebar .b2-papan-buka{font-size:1rem}
body.mod-lebar .b2-pilih-isi{grid-template-columns:repeat(3,minmax(0,1fr))}
body.mod-lebar .b2-pilih-isi .op:last-child:nth-child(odd){grid-column:auto}
body.mod-lebar .b2-op-isi{min-height:68px;border-radius:22px;font-size:1.0625rem}
body.mod-lebar .b2-rumus-maksud li{font-size:1rem;padding:7px 12px 7px 40px}
body.mod-lebar .b2-tip-btn{width:52px;height:52px;font-size:1.5rem}
body.mod-lebar .b2-main.b2-j-radio .main-badan{left:300px;width:720px;top:84px;bottom:14px;align-content:center;gap:10px}
body.mod-lebar .b2-p-radio{gap:10px}
body.mod-lebar .b2-radio{max-width:430px}
body.mod-lebar .b2-siaran{min-height:98px}
body.mod-lebar .b2-rumus-tokoh{grid-template-columns:1fr 1fr}
body.mod-lebar .b2-pilih-berat{grid-template-columns:1fr 1fr}
body.mod-lebar .b2-pemberat{min-height:58px;font-size:.9375rem;line-height:1.25}
body.mod-lebar .b2-pilih-pintu .b2-pintu{min-height:112px;border-radius:24px}
body.mod-lebar .b2-pintu-tahun{font-size:1.75rem}
body.mod-lebar .b2-main.b2-j-tulis .latar-babak::after{content:"";position:absolute;inset:0;background:rgba(16,26,66,.32)}
body.mod-lebar .b2-main.b2-j-tulis .main-badan{left:300px;width:720px;top:84px;bottom:14px;overflow-y:auto;align-content:start;padding:2px 4px 10px}
body.mod-lebar .b2-kertas{padding:18px 22px 18px 26px;gap:12px}
body.mod-lebar .b2-kertas{background:linear-gradient(90deg,transparent 11px,#F7C6C9 11px,#F7C6C9 13px,transparent 13px),#FFFDF7}
body.mod-lebar .b2-kertas-soalan{font-size:1.3125rem}
body.mod-lebar .b2-tulis-ta{min-height:132px}
body.mod-lebar .b2-artikel{width:760px}
body.mod-lebar .dialog .b2-artikel-sek p{font-size:1rem}
body.mod-lebar .b2-rumus{padding:18px 24px;gap:10px}
body.mod-lebar .b2-p-tarik .b2-rumus{max-width:700px}
body.mod-lebar .b2-p-neraca .b2-rumus{max-width:640px}
body.mod-lebar .b2-tangga-kecil{margin-top:18px}
body.mod-lebar .b2-tk{height:32px;font-size:.875rem;padding:0 13px 0 7px}
body.mod-lebar .b2-tk svg{width:19px;height:20px}

/* ===== Telefon pendek ===== */
@media (max-height:700px){
  body.mod-telefon .main.b2-main.b2-jalur .latar-babak{height:236px}
  body.mod-telefon .main.b2-main.b2-jalur .main-badan{margin-top:180px}
  body.mod-telefon .main.b2-main.b2-j-neraca .latar-babak{height:286px}
  body.mod-telefon .main.b2-main.b2-j-neraca .main-badan{margin-top:230px}
  body.mod-telefon .b2-kad-isi{font-size:1.0625rem}
  body.mod-telefon .b2-maksud p{font-size:.875rem;line-height:1.5}
  body.mod-telefon .b2-op-isi{min-height:46px}
  body.mod-telefon .b2-siaran{min-height:96px}
  body.mod-telefon .b2-intro .kad-intro{margin-top:60px}
}

/* keputusan gagal (lebar): tiga butang, butang utama selebar lajur */
body.mod-lebar .keputusan.kalah .baris-btn{flex-wrap:wrap}
body.mod-lebar .keputusan.kalah .baris-btn .btn.utama{flex:1 1 100%;order:0}
body.mod-lebar .keputusan.kalah .baris-btn .btn.kedua{flex:1 1 0}

/* =====================================================================================
   TAHAP 3 HINGGA 9 · enjin baharu (v0.3)
   ===================================================================================== */

/* ---------- Perisai berpasangan (2.3) ---------- */
.b2-perisai-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;perspective:900px}
.b2-perisai{position:relative;min-height:112px;padding:0;border-radius:18px;background:none;text-align:center}
.b2-perisai-dalam{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .42s cubic-bezier(.3,1.3,.5,1)}
.b2-perisai.terbuka .b2-perisai-dalam,.b2-perisai.padan .b2-perisai-dalam{transform:rotateY(180deg)}
.b2-perisai-belakang,.b2-perisai-depan{position:absolute;inset:0;border-radius:18px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center}
.b2-perisai-belakang{background:linear-gradient(160deg,#5A6BA8,#2E3A63);box-shadow:0 5px 0 #1B2A5C,inset 0 0 0 3px rgba(255,255,255,.25);color:#FFE57F;align-content:center;gap:2px}
.b2-perisai-belakang .ikon{width:34px;height:34px;stroke-width:2;fill:rgba(255,229,127,.18)}
.b2-perisai-belakang small{font-size:.6875rem;font-weight:900;color:#DDE6FF}
.b2-perisai-depan{transform:rotateY(180deg);background:#fff;box-shadow:0 5px 0 var(--wd),inset 0 0 0 3px var(--w);padding:8px 6px 6px;align-content:center;gap:3px;color:var(--ink)}
.b2-perisai-jenis{display:grid;place-items:center;width:24px;height:24px;margin:0 auto;border-radius:50%;background:var(--w);color:#fff}
.b2-perisai-jenis .ikon{width:15px;height:15px;stroke-width:2.6}
.b2-perisai-teks{font-size:.75rem;font-weight:900;line-height:1.2;text-wrap:balance}
.b2-perisai-negara{font-size:.625rem;font-weight:900;line-height:1.15;color:var(--wd)}
.b2-perisai.padan .b2-perisai-depan{background:var(--betul-bg);box-shadow:0 5px 0 #1E9E63,inset 0 0 0 3px var(--hijau)}
.b2-perisai.padan{animation:lompat .4s ease-out}
.b2-perisai.salah .b2-perisai-depan{background:var(--salah-bg);box-shadow:0 5px 0 var(--merah-d),inset 0 0 0 3px #E0555D;color:var(--salah-teks)}
.b2-perisai.salah{animation:goncang .4s}
body.mod-lebar .b2-perisai-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
body.mod-lebar .b2-perisai{min-height:122px}
body.mod-lebar .b2-perisai-teks{font-size:.875rem}
body.mod-lebar .b2-perisai-negara{font-size:.75rem}

/* ---------- Garis masa (2.3) ---------- */
.b2-garis-bingkai{background:#fff;border-radius:22px;padding:10px 12px;box-shadow:var(--lip)}
.b2-garis{position:relative;display:grid;gap:6px;padding-left:4px}
.b2-garis::before{content:"";position:absolute;left:31px;top:8px;bottom:8px;width:4px;border-radius:2px;background:var(--garis)}
.b2-garis-item{position:relative;display:flex;align-items:center;gap:10px;min-height:40px;padding:4px 6px 4px 0}
.b2-garis-tahun{position:relative;z-index:1;flex:none;width:58px;height:30px;border-radius:15px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:.875rem;font-weight:900}
.b2-garis-teks{flex:1 1 auto;min-width:0;font-size:.875rem;font-weight:800;line-height:1.3}
.b2-garis-selepas{flex:none;min-height:34px;padding:4px 10px;border-radius:12px;background:#FFF6D8;color:#8A4B00;font-size:.75rem;font-weight:900;box-shadow:0 3px 0 var(--emas-d),inset 0 0 0 2px var(--emas);white-space:nowrap}
.b2-garis-selepas:active{transform:translateY(2px);box-shadow:0 1px 0 var(--emas-d),inset 0 0 0 2px var(--emas)}
.b2-garis-selepas.salah,.b2-garis-letak.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 3px 0 var(--merah-d),inset 0 0 0 2px #E0555D;animation:goncang .4s}
.b2-garis-awal{display:flex;justify-content:flex-start;padding-left:0}
.b2-garis-letak{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:4px 12px;border-radius:12px;background:#FFF6D8;color:#8A4B00;font-size:.75rem;font-weight:900;box-shadow:0 3px 0 var(--emas-d),inset 0 0 0 2px var(--emas)}
.b2-garis-letak .ikon{width:15px;height:15px;transform:rotate(-90deg)}
.b2-garis-item.baru{animation:lompat .35s ease-out}
.b2-garis-item.baru.betul .b2-garis-teks{color:var(--betul-teks)}
.b2-garis-item.baru.betul .b2-garis-tahun{background:var(--hijau)}
.b2-garis-item.baru.salah .b2-garis-teks{color:var(--salah-teks)}
.b2-garis-item.baru.salah .b2-garis-tahun{background:var(--merah-d)}
.b2-garis-rumus{background:#F7F9FE;border-radius:18px;padding:8px 10px}
.b2-kad .b2-kad-kepala .b2-cip-tahun{order:-1}
body.mod-lebar .b2-garis-item{min-height:42px}
body.mod-lebar .b2-garis-teks{font-size:.9375rem}
body.mod-lebar .b2-main.b2-j-garis .main-badan{align-content:start;overflow-y:auto;padding-bottom:8px}

/* ---------- Kemudi perahu (2.4) ---------- */
.b2-arus{animation:hanyut-arus 3.2s linear infinite}
@keyframes hanyut-arus{from{transform:translateX(0)}to{transform:translateX(-32px)}}
.b2-pilih-lorong{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.b2-op-lorong{flex-direction:column;justify-content:center;gap:4px;min-height:62px;padding:8px 2px;font-size:.6875rem;font-weight:900;text-align:center;box-shadow:0 5px 0 var(--wd),inset 0 0 0 2px var(--w)}
.b2-titik-warna{width:14px;height:14px;border-radius:50%;background:var(--w);box-shadow:inset 0 -2px 0 var(--wd)}
.b2-op-lorong.salah .b2-titik-warna{background:var(--merah-d)}
.b2-jam{margin-top:6px}
.b2-jam i{transition:none;background:var(--emas)}
body.mod-lebar .b2-op-lorong{min-height:74px;font-size:.9375rem}

/* jalur adegan dengan lajur kad di kanan (kemudi, mesin cetak, ujian akhir) */
body.mod-lebar .b2-main.b2-j-kemudi .main-badan,body.mod-lebar .b2-main.b2-j-cetak .main-badan,body.mod-lebar .b2-main.b2-j-boss .main-badan{left:796px;width:456px;top:84px;bottom:20px;display:flex;flex-direction:column;align-content:stretch}
body.mod-lebar .b2-p-kemudi,body.mod-lebar .b2-p-cetak,body.mod-lebar .b2-p-boss{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
body.mod-lebar .b2-p-kemudi .b2-kad-isi,body.mod-lebar .b2-p-cetak .b2-kad-isi,body.mod-lebar .b2-p-boss .b2-kad-isi{font-size:1.3125rem}
body.mod-lebar .b2-p-kemudi .b2-rumus,body.mod-lebar .b2-p-cetak .b2-rumus,body.mod-lebar .b2-p-boss .b2-rumus{max-height:560px;overflow-y:auto}
body.mod-lebar .b2-p-kemudi .b2-rumus-tokoh,body.mod-lebar .b2-p-cetak .b2-rumus-tokoh,body.mod-lebar .b2-p-boss .b2-rumus-tokoh{grid-template-columns:1fr}

/* ---------- Tangga sejarah (2.4) ---------- */
.b2-tangga-susun{gap:12px}
.b2-tangga-bingkai{position:relative;background:linear-gradient(#DFF4FF,#F4FBFF);border-radius:22px;padding:56px 10px 12px 10px;box-shadow:var(--lip);overflow:hidden}
.b2-tangga-sejarah{display:flex;flex-direction:column-reverse;gap:6px}
.b2-anak-tangga{display:flex;align-items:center;gap:8px;min-height:38px;margin-left:calc(46px + var(--i) * 5%);padding:6px 10px 6px 6px;border-radius:12px;background:rgba(255,255,255,.7);border:2px dashed #C5D0EA}
.b2-anak-no{flex:none;width:24px;height:24px;border-radius:50%;background:#C5D0EA;color:#fff;display:grid;place-items:center;font-size:.75rem;font-weight:900}
.b2-anak-isi{font-size:.8125rem;font-weight:800;line-height:1.3;color:var(--ink)}
.b2-anak-tangga.siap{border:0;background:#B8743C;box-shadow:0 5px 0 #8A5226;color:#fff}
.b2-anak-tangga.siap .b2-anak-isi{color:#fff}
.b2-anak-tangga.siap .b2-anak-no{background:#FFE57F;color:var(--ink)}
.b2-anak-tangga.siap.dibantu{background:#C9323F;box-shadow:0 5px 0 #8E1F2A}
.b2-anak-tangga.masuk{animation:lompat .35s ease-out}
.b2-tangga-kancil{position:absolute;left:0;top:0;width:46px;pointer-events:none;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.b2-tangga-kancil .watak{width:100%;height:auto;display:block}
.b2-pilih-langkah{grid-template-columns:minmax(0,1fr)}
.b2-op-langkah{min-height:48px;font-size:.875rem}
.b2-tangga-tajuk .b2-kad-isi{font-size:1.0625rem}
body.mod-lebar .b2-tangga-susun{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}
body.mod-lebar .b2-tangga-bingkai{padding:80px 12px 14px}
body.mod-lebar .b2-anak-tangga{margin-left:calc(66px + var(--i) * 4%);min-height:42px}
body.mod-lebar .b2-anak-isi{font-size:.875rem}
body.mod-lebar .b2-tangga-kancil{width:64px}
body.mod-lebar .b2-op-langkah{min-height:50px;font-size:.9375rem}
body.mod-lebar .b2-main.b2-j-tangga .main-badan{align-content:start;overflow-y:auto}

/* ---------- Siapakah saya? (2.5) ---------- */
.b2-siapa{gap:8px;align-content:start}
.b2-siapa-mata{margin-left:auto;font-size:.6875rem;font-weight:900;color:#8A4B00;background:#FFF6D8;border-radius:10px;padding:2px 8px;white-space:nowrap}
.b2-siapa-atas{display:flex;align-items:center;gap:12px}
.b2-siapa-wajah{flex:none;width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#6074A8 0 30%,transparent 31%),radial-gradient(ellipse at 50% 100%,#6074A8 0 52%,transparent 53%),#DDE4F4;display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 0 0 3px #fff,0 3px 0 rgba(27,42,92,.18)}
.b2-siapa-wajah span{font-size:1.625rem;font-weight:900;color:#fff;text-shadow:0 2px 0 rgba(27,42,92,.4)}
.b2-siapa-wajah.terbuka{background:var(--emas);box-shadow:inset 0 0 0 3px #fff,0 3px 0 var(--emas-d);animation:lompat .4s ease-out}
.b2-siapa-wajah.terbuka span{color:var(--ink);text-shadow:none}
.b2-siapa-wajah.terbuka.salah{background:#FFD4D6}
.b2-siapa-nama{font-size:1.25rem;font-weight:900;line-height:1.2}
.b2-siapa-petunjuk{display:grid;gap:6px;counter-reset:pt}
.b2-siapa-petunjuk li{position:relative;padding:7px 10px 7px 34px;border-radius:12px;background:#F3F6FD;font-size:.875rem;font-weight:800;line-height:1.35;counter-increment:pt}
.b2-siapa-petunjuk li::before{content:counter(pt);position:absolute;left:8px;top:7px;width:20px;height:20px;border-radius:50%;background:var(--ungu);color:#fff;display:grid;place-items:center;font-size:.6875rem;font-weight:900}
.b2-siapa-petunjuk li.masuk{animation:lompat .3s ease-out both}
.b2-siapa-lagi{justify-self:start;min-height:40px!important;font-size:.875rem!important}
.b2-siapa-lagi .ikon{width:18px;height:18px}
.b2-siapa.betul .b2-siapa-petunjuk li{background:rgba(255,255,255,.7)}
.b2-siapa.salah .b2-siapa-petunjuk li{background:rgba(255,255,255,.7)}
.b2-pilih-siapa{grid-template-columns:repeat(2,minmax(0,1fr))}
.b2-op-siapa{min-height:52px;font-size:.875rem;justify-content:center;text-align:center}
body.mod-lebar .b2-siapa-petunjuk li{font-size:.9375rem}
body.mod-lebar .b2-op-siapa{min-height:58px;font-size:1rem}

/* ---------- Leret dua zaman (2.5) ---------- */
.b2-leret-tip{align-items:center}
.b2-leret-arah{flex:1 1 auto;font-size:.8125rem;font-weight:800;color:var(--ink2);background:rgba(255,255,255,.85);border-radius:14px;padding:8px 12px}
.b2-leret-meja{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"kiri kanan" "kad kad";gap:8px;align-items:stretch}
.b2-zon.kiri{grid-area:kiri}.b2-zon.kanan{grid-area:kanan}.b2-leret-timbun{grid-area:kad}
.b2-zon{border-radius:18px;padding:8px 10px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"b k" "s k";align-items:center;column-gap:8px;text-align:left;color:#fff;transition:transform .15s ease}
.b2-zon b{grid-area:b}.b2-zon small{grid-area:s}.b2-zon .b2-zon-kira{grid-area:k}
.b2-zon.kiri{background:linear-gradient(#B8743C,#8A5226);box-shadow:0 5px 0 #6E3F1B}
.b2-zon.kanan{background:linear-gradient(#21BFAE,#14917F);box-shadow:0 5px 0 #0C776B}
.b2-zon b{font-size:.875rem;font-weight:900;line-height:1.2}
.b2-zon small{font-size:.6875rem;font-weight:700;line-height:1.25;opacity:.92}
.b2-zon-kira{min-width:30px;height:24px;border-radius:12px;background:rgba(255,255,255,.25);display:grid;place-items:center;font-size:.8125rem;font-weight:900}
.b2-zon.dekat{transform:scale(1.06)}
.b2-zon.kena{animation:lompat .35s ease-out}
.b2-leret-timbun{position:relative;min-height:140px;display:grid}
.b2-leret-bawah{position:absolute;inset:8px 6px -6px;border-radius:20px;background:#DDE4F4;box-shadow:var(--lip)}
.b2-leret-kad{position:relative;border-radius:20px;background:#fff;box-shadow:var(--bayang);padding:12px 14px;display:grid;align-content:center;gap:4px;text-align:center;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;transition:transform .35s ease,opacity .35s ease}
.b2-leret-kad.diseret{transition:none;cursor:grabbing}
.b2-leret-kad .b2-kad-isi{font-size:1rem}
.b2-leret-kad.betul{background:var(--betul-bg);color:var(--betul-teks)}
.b2-leret-kad.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 5px 0 var(--merah-d),inset 0 0 0 3px #E0555D}
.b2-leret-kad.masuk{animation:lompat .3s ease-out}
.b2-pilih-leret{grid-template-columns:1fr 1fr}
.b2-op-leret{justify-content:center;min-height:54px;font-size:.875rem;text-align:center}
.b2-op-leret.kiri{box-shadow:0 5px 0 #8A5226,inset 0 0 0 2px #B8743C}
.b2-op-leret.kanan{box-shadow:0 5px 0 #0C776B,inset 0 0 0 2px var(--teal)}
.b2-op-leret .ikon{width:20px;height:20px;flex:none}
.b2-rumus-dua{display:grid;gap:10px}
.b2-rumus-dua > div{background:#F3F6FD;border-radius:14px;padding:8px 12px;display:grid;gap:4px}
.b2-rumus-dua b{font-size:.875rem}
.b2-rumus-dua ul{display:grid;gap:3px}
.b2-rumus-dua li{font-size:.8125rem;font-weight:700;color:var(--ink2);line-height:1.35;padding-left:12px;position:relative}
.b2-rumus-dua li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--teal)}
body.mod-lebar .b2-leret-meja{grid-template-columns:150px minmax(0,1fr) 150px;grid-template-areas:"kiri kad kanan";gap:14px}
body.mod-lebar .b2-zon{display:flex;flex-direction:column;justify-content:center;gap:6px;text-align:center;padding:12px 10px}
body.mod-lebar .b2-zon b{font-size:1rem}
body.mod-lebar .b2-zon small{font-size:.75rem}
body.mod-lebar .b2-leret-timbun{min-height:190px}
body.mod-lebar .b2-leret-kad .b2-kad-isi{font-size:1.25rem}
body.mod-lebar .b2-rumus-dua{grid-template-columns:1fr 1fr}

/* ---------- Susun huruf, enam mata air (2.6) ---------- */
.b2-mata-air{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;background:rgba(255,255,255,.88);border-radius:18px;padding:8px 6px;box-shadow:var(--lip)}
.b2-mata-air li{display:grid;justify-items:center;gap:2px;text-align:center}
.b2-mata-ikon{width:30px;height:30px;border-radius:50%;background:#DDE4F4;color:#AEB9D8;display:grid;place-items:center}
.b2-mata-ikon .ikon{width:17px;height:17px;fill:currentColor;stroke-width:1.5}
.b2-mata-air small{font-size:.5625rem;font-weight:900;line-height:1.15;color:var(--ink2);min-height:2.3em}
.b2-mata-air li.mengalir .b2-mata-ikon{background:#1E96D1;color:#fff;animation:lompat .4s ease-out}
.b2-mata-air li.mengalir small{color:#1576A8}
.b2-mata-air li.dibantu .b2-mata-ikon{background:var(--merah-d)}
.b2-mata-air li.dibantu small{color:var(--salah-teks)}
.b2-huruf-slot{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;min-height:44px;padding:6px;background:#fff;border-radius:18px;box-shadow:var(--lip)}
.b2-huruf-kotak{width:26px;height:34px;border-radius:8px;background:#F1F4FB;box-shadow:inset 0 -3px 0 #AEB9D8;display:grid;place-items:center;font-size:1.0625rem;font-weight:900;color:var(--ink)}
.b2-huruf-kotak.ada{background:#FFF6D8;box-shadow:inset 0 -3px 0 var(--emas-d)}
.b2-huruf-kotak.beri{background:#E7F7F4;box-shadow:inset 0 -3px 0 var(--teal-d)}
.b2-huruf-kotak.betul{background:var(--betul-bg);color:var(--betul-teks);box-shadow:inset 0 -3px 0 #1E9E63}
.b2-huruf-kotak.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:inset 0 -3px 0 #E0555D;animation:goncang .4s}
.b2-huruf-jarak{width:12px}
.b2-huruf-bank{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}
.b2-jubin{height:44px;border-radius:12px;background:#fff;font-size:1.25rem;font-weight:900;color:var(--ink);box-shadow:0 4px 0 rgba(27,42,92,.22),inset 0 0 0 2px var(--garis);transition:transform .08s ease,opacity .15s ease}
.b2-jubin:active:not([disabled]){transform:translateY(3px);box-shadow:0 1px 0 rgba(27,42,92,.22),inset 0 0 0 2px var(--garis)}
.b2-jubin.guna{opacity:.28;transform:scale(.9)}
.b2-jubin.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 4px 0 var(--merah-d),inset 0 0 0 2px #E0555D;animation:goncang .4s}
.b2-huruf-kawal{display:flex;justify-content:center;gap:10px}
.b2-jubin-jarak{grid-column:span 2;font-size:.8125rem;font-weight:900;color:var(--ink2)}
.b2-huruf-kotak.dibantu{background:var(--betul-bg);color:var(--betul-teks);box-shadow:inset 0 -3px 0 #1E9E63}
.b2-huruf-slot.bebas{justify-content:flex-start;align-items:center;gap:2px;min-height:54px;padding:8px 16px;box-shadow:var(--lip),inset 0 0 0 2px #C5D0EA}
.b2-huruf-taip{font-size:1.375rem;font-weight:900;letter-spacing:.1em;white-space:pre;color:var(--ink)}
.b2-huruf-taip.betul,.b2-huruf-taip.dibantu{color:var(--betul-teks)}
.b2-huruf-taip.salah{color:var(--salah-teks);text-decoration:line-through;text-decoration-thickness:2px}
.b2-huruf-kursor{width:3px;height:1.5em;border-radius:2px;background:var(--ink);animation:kursor 1s steps(2,jump-none) infinite}
@keyframes kursor{0%{opacity:1}100%{opacity:0}}
.b2-huruf-kosong{margin-left:6px;color:var(--ink2);font-size:.875rem;font-weight:700}
body.mod-lebar .b2-mata-air small{font-size:.6875rem}
body.mod-lebar .b2-mata-ikon{width:38px;height:38px}
body.mod-lebar .b2-huruf-kotak{width:34px;height:42px;font-size:1.3125rem}
body.mod-lebar .b2-jubin{height:52px;font-size:1.375rem}
body.mod-lebar .b2-huruf-bank{gap:8px}
body.mod-lebar .b2-huruf-taip{font-size:1.625rem}

/* ---------- Mesin cetak (2.7) ---------- */
.b2-cetak-btn{min-height:64px;font-size:1.375rem;letter-spacing:.06em;width:100%}
.b2-cetak-btn .ikon{width:26px;height:26px}
.b2-cetak-kekunci{text-align:center;font-size:.8125rem;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.b2-cetak-kekunci kbd{display:inline-block;padding:1px 8px;border-radius:7px;background:#fff;color:var(--ink);box-shadow:0 2px 0 #CBD5EC;font:inherit;font-weight:900;text-shadow:none}
body.mod-lebar .b2-cetak-btn{min-height:76px;font-size:1.625rem}

/* ---------- Borang pendaftaran (2.7) ---------- */
.b2-borang{position:relative;overflow:hidden;align-content:start;gap:8px;background:linear-gradient(#FFFDF7,#FFF6E4)}
.b2-borang-nama{font-size:1.125rem;font-weight:900;line-height:1.25;padding-bottom:6px;border-bottom:2px dashed #EADFC4}
.b2-borang-medan{display:grid;gap:8px}
.b2-reel{display:grid;gap:3px}
.b2-reel-label{font-size:.6875rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.b2-reel-badan{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;gap:6px;align-items:stretch}
.b2-reel-btn{border-radius:12px;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 3px 0 rgba(27,42,92,.2),inset 0 0 0 2px var(--garis);min-height:44px}
.b2-reel-btn .ikon{width:20px;height:20px;stroke-width:2.8}
.b2-reel-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(27,42,92,.2),inset 0 0 0 2px var(--garis)}
.b2-reel-tetingkap{min-height:44px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 2px #C5D0EA;display:grid;place-items:center;padding:4px 8px;overflow:hidden}
.b2-reel-nilai{font-size:.9375rem;font-weight:900;line-height:1.2;text-align:center}
.b2-reel-nilai.gulung-a{animation:gulung-a .22s ease-out}
.b2-reel-nilai.gulung-b{animation:gulung-b .22s ease-out}
@keyframes gulung-a{from{transform:translateY(60%);opacity:0}to{transform:none;opacity:1}}
@keyframes gulung-b{from{transform:translateY(-60%);opacity:0}to{transform:none;opacity:1}}
.b2-reel.salah .b2-reel-tetingkap{background:var(--salah-bg);box-shadow:inset 0 0 0 3px #E0555D;color:var(--salah-teks)}
.b2-reel.betul .b2-reel-tetingkap{background:var(--betul-bg);box-shadow:inset 0 0 0 3px var(--hijau);color:var(--betul-teks)}
.b2-reel.dibantu .b2-reel-tetingkap{background:var(--betul-bg);box-shadow:inset 0 0 0 3px var(--hijau);color:var(--betul-teks)}
.b2-borang-cop{position:absolute;right:14px;top:30px;padding:4px 12px;border:4px solid var(--hijau);border-radius:10px;color:var(--hijau);font-size:1.125rem;font-weight:900;letter-spacing:.08em;transform:rotate(-12deg) scale(1.6);opacity:0;pointer-events:none}
.b2-borang.dicop .b2-borang-cop{animation:cop-masuk .35s ease-out forwards}
@keyframes cop-masuk{to{transform:rotate(-12deg) scale(1);opacity:.9}}
.b2-borang.salah{animation:goncang .4s}
.b2-daftar-btn{width:100%}
body.mod-lebar .b2-borang-nama{font-size:1.375rem}
body.mod-lebar .b2-reel-badan{grid-template-columns:52px minmax(0,1fr) 52px}
body.mod-lebar .b2-reel-nilai{font-size:1.0625rem}
body.mod-lebar .b2-borang-cop{font-size:1.5rem;top:34px}

/* ---------- Carta bukti (2.8) ---------- */
.b2-carta{align-content:start;gap:6px}
.b2-carta-tajuk{font-size:1rem;font-weight:900;line-height:1.25}
.b2-carta-palang{display:grid;grid-template-columns:1fr 1fr;gap:16px;height:170px;padding:4px 18px 0;border-bottom:3px solid var(--ink)}
.b2-carta-lajur{display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;gap:4px;min-height:0}
.b2-bar-nilai{position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);font-size:1.25rem;font-weight:900;font-style:normal;color:var(--ink);white-space:nowrap}
.b2-bar-ruang{position:relative;width:64px;height:100%;padding-top:30px;display:flex;align-items:flex-end;min-height:0;box-sizing:border-box}
.b2-bar{position:relative;display:block;width:100%;height:0;border-radius:10px 10px 0 0;background:linear-gradient(var(--teal),var(--teal-d));transition:height .8s cubic-bezier(.3,1.2,.5,1)}
.b2-carta-palang.naik .b2-bar{height:var(--t)}
.b2-bar.sorok{background:repeating-linear-gradient(45deg,#EEF2FB 0 8px,#DDE4F4 8px 16px);box-shadow:inset 0 0 0 3px #AEB9D8}
.b2-bar-label{font-size:.75rem;font-weight:900;color:var(--ink2);white-space:nowrap;transform:translateY(2px)}
.b2-carta-soal{font-size:1rem;font-weight:900;line-height:1.35;background:rgba(255,255,255,.92);border-radius:16px;padding:10px 14px;box-shadow:var(--lip)}
.b2-carta-soal.masuk{animation:lompat .3s ease-out}
.b2-pilih-carta.dua{grid-template-columns:repeat(var(--n,2),minmax(0,1fr))}
.b2-op-carta{min-height:50px;font-size:.9375rem}
.b2-pilih-carta.dua .b2-op-carta{justify-content:center;text-align:center;font-size:1.0625rem}
body.mod-lebar .b2-carta-palang{height:190px}
body.mod-lebar .b2-bar-ruang{width:86px}
body.mod-lebar .b2-carta-tajuk{font-size:1.1875rem}
body.mod-lebar .b2-carta-soal{font-size:1.125rem}
body.mod-lebar .b2-pilih-carta{grid-template-columns:repeat(2,minmax(0,1fr))}
body.mod-lebar .b2-pilih-carta.dua{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}

/* ---------- Tiga bakul (2.8) ---------- */
.b2-pokok{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:12px 10px;border-radius:26px;background:radial-gradient(ellipse at 50% 0%,#8ADB63,#3FA351);box-shadow:0 6px 0 #2F7E3E}
.b2-buah{position:relative;display:flex;align-items:center;gap:7px;min-height:48px;padding:6px 9px;border-radius:16px;background:#FFFDF2;text-align:left;font-size:.75rem;font-weight:800;line-height:1.25;color:var(--ink);box-shadow:0 3px 0 rgba(27,42,92,.22);transition:transform .2s ease,opacity .3s ease}
.b2-buah-bulat{flex:none;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFB35C,#EC6F1F);box-shadow:inset 0 -2px 0 rgba(0,0,0,.15)}
.b2-buah:active:not([disabled]){transform:translateY(2px)}
.b2-buah.pilih{background:#FFF1BF;box-shadow:0 3px 0 var(--emas-d),inset 0 0 0 3px var(--emas)}
.b2-buah.pilih .b2-buah-bulat{background:radial-gradient(circle at 35% 35%,#FFE57F,#E8971A)}
.b2-buah.salah{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}
.b2-buah.kilat{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 3px 0 #1E9E63,inset 0 0 0 3px var(--hijau)}
.b2-buah.dipetik{opacity:0;transform:scale(.6);pointer-events:none}
.b2-buah.gugur{background:#E8E1D0;color:#7D6F57;box-shadow:none;animation:gugur .9s ease-in forwards}
.b2-buah.gugur .b2-buah-bulat{background:radial-gradient(circle at 35% 35%,#A89572,#6E5B3A)}
@keyframes gugur{0%{transform:none}30%{transform:rotate(-4deg)}100%{transform:translateY(26px) rotate(6deg);opacity:.55}}
.b2-bakul-baris{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.b2-bakul{display:grid;justify-items:center;gap:1px;padding:8px 4px 6px;border-radius:18px;background:#fff;box-shadow:var(--lip),inset 0 0 0 2px var(--garis);transition:transform .15s ease}
.b2-bakul-ikon{width:34px;height:34px;border-radius:50%;background:#F1E3C4;color:#8A5226;display:grid;place-items:center}
.b2-bakul-ikon .ikon{width:20px;height:20px}
.b2-bakul-nama{font-size:.75rem;font-weight:900}
.b2-bakul-kira{font-size:.9375rem;font-weight:900;color:var(--ink2)}
.b2-bakul.aktif{background:#FFF6D8;box-shadow:0 5px 0 var(--emas-d),inset 0 0 0 3px var(--emas);transform:translateY(-3px)}
.b2-bakul.aktif .b2-bakul-ikon{background:var(--emas);color:var(--ink)}
.b2-bakul.penuh .b2-bakul-ikon{background:var(--hijau);color:#fff}
.b2-bakul.terima{animation:lompat .35s ease-out}
.b2-masuk-btn{width:100%}
body.mod-lebar .b2-pokok{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
body.mod-lebar .b2-buah{font-size:.8125rem;min-height:52px}
body.mod-lebar .b2-bakul-nama{font-size:.9375rem}
body.mod-lebar .b2-main.b2-j-petik .main-badan{align-content:start;overflow-y:auto;padding-bottom:8px}

/* ---------- Ujian kebangkitan (tahap akhir) ---------- */
.b2-cip-jenis{background:var(--ungu)}
.b2-pilih-boss{grid-template-columns:minmax(0,1fr)}
.b2-pilih-boss.j-bs,.b2-pilih-boss.j-tahun{grid-template-columns:repeat(2,minmax(0,1fr))}
.b2-op-boss{min-height:50px;font-size:.9375rem}
.b2-pilih-boss.j-bs .b2-op-boss,.b2-pilih-boss.j-tahun .b2-op-boss{justify-content:center;text-align:center;font-size:1.0625rem}
.b2-meriam.hentak{animation:hentak .32s ease-out}
@keyframes hentak{0%{transform:none}30%{transform:translateX(-7px)}100%{transform:none}}
body.mod-lebar .b2-op-boss{min-height:56px;font-size:1rem}

/* ---------- Telefon sempit dan pendek ---------- */
@media (max-width:370px){
  .b2-op-lorong{font-size:.6875rem}
  .b2-jubin{height:40px;font-size:1.0625rem}
  .b2-huruf-kotak{width:22px}
}
@media (max-height:700px){
  body.mod-telefon .main.b2-main.b2-j-kemudi .latar-babak,body.mod-telefon .main.b2-main.b2-j-cetak .latar-babak,body.mod-telefon .main.b2-main.b2-j-boss .latar-babak{height:250px}
  body.mod-telefon .main.b2-main.b2-j-kemudi .main-badan,body.mod-telefon .main.b2-main.b2-j-cetak .main-badan,body.mod-telefon .main.b2-main.b2-j-boss .main-badan{margin-top:194px}
  body.mod-telefon .b2-perisai{min-height:100px}
  body.mod-telefon .b2-carta-palang{height:140px}
}