/* ===== Babak · gaya pakej enjin Bab 6, kumpulan 6b (js/pakej-bab-06-6b.js): bekalan, poster, perkakas.
   Awalan kelas b6b-. Susun atur diskop dengan .b2-j-<jenis> / .b2-p-<jenis> dan body.mod-lebar / body.mod-telefon;
   telefon pendek dengan @media (max-height:700px). Keadaan akhir untuk prefers-reduced-motion di hujung fail. ===== */

/* ---------- Bersama ---------- */
.b6b-goncang{animation:goncang .4s}
.b6b-terbang{position:absolute;z-index:40;margin:0;pointer-events:none}
.b6b-klon-seret{position:absolute;z-index:40;margin:0;pointer-events:none;transition:none!important;box-shadow:0 16px 28px rgba(27,42,92,.32)!important}
.b2-j-bekalan .b2-kad-no,.b2-j-poster .b2-kad-no,.b2-j-perkakas .b2-kad-no{font-size:.875rem;letter-spacing:.04em}
.b2-j-bekalan .b2-kad-isi,.b2-j-poster .b2-kad-isi,.b2-j-perkakas .b2-kad-isi{font-size:1.0625rem;overflow-wrap:break-word}
.b2-j-bekalan .b2-rujuk-btn,.b2-j-poster .b2-rujuk-btn,.b2-j-perkakas .b2-rujuk-btn{font-size:.875rem;min-height:40px}
.b2-j-bekalan .b2-rumus-label,.b2-j-poster .b2-rumus-label,.b2-j-perkakas .b2-rumus-label{font-size:.875rem}
.b2-j-bekalan .b2-rumus-tokoh li,.b2-j-poster .b2-rumus-tokoh li,.b2-j-perkakas .b2-rumus-tokoh li{font-size:.875rem;line-height:1.35;align-content:start}
.b2-j-bekalan .op,.b2-j-poster .op,.b2-j-perkakas .op{min-height:52px;font-size:.9375rem}
.b6b-op-teks{min-width:0;overflow-wrap:break-word}
.b6b-rumus-lanjut{display:grid;gap:10px;min-width:0}
.b6b-tanda-svg{display:block;width:20px;height:20px;fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .3s ease}
@keyframes b6b-pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}
@keyframes b6b-kelip-merah{0%,100%{opacity:1}30%{opacity:.35}60%{opacity:1}}

/* =====================================================================================
   BEKALAN · PUTUS BEKALAN
   ===================================================================================== */
.b6b-bekalan{display:grid;gap:10px;min-width:0}
.b6b-bk-adegan{position:relative;border-radius:20px;overflow:hidden;background:#DDF3FC;box-shadow:var(--bayang),inset 0 0 0 2px #fff;transition:opacity .35s ease,box-shadow .2s ease}
.b6b-bk-adegan.tukar{opacity:0}
.b6b-bk-adegan.b6b-dekat{box-shadow:0 0 0 4px var(--emas),var(--bayang)}
.b6b-bk-svg{display:block;width:100%;height:auto;user-select:none;-webkit-user-select:none}
.b6b-bk-svg text{font-family:var(--f);font-weight:900;fill:var(--ink)}
.b6b-bk-plat rect{fill:rgba(255,255,255,.94);stroke:rgba(27,42,92,.2);stroke-width:1}
.b6b-bk-plat.gelap rect{fill:#1B2A5C;fill-opacity:.88;stroke:none}
.b6b-bk-plat.gelap text{fill:#fff}
.b6b-bk-laluan{cursor:pointer}
.b6b-bk-jalan{fill:none;stroke:#8A5226;stroke-width:3.4;stroke-dasharray:1 9;stroke-linecap:round;opacity:.72;transition:stroke .3s ease,opacity .3s ease}
.b6b-bk-sorot{fill:none;stroke:transparent;stroke-width:11;stroke-linecap:round;transition:stroke .35s ease}
.b6b-bk-kena{fill:none;stroke:transparent;stroke-width:28;pointer-events:stroke}
.b6b-bk-laluan.aktif .b6b-bk-sorot{stroke:rgba(255,201,51,.72)}
.b6b-bk-laluan.aktif .b6b-bk-jalan{stroke:#8A4B00;opacity:1}
.b6b-bk-laluan.salah .b6b-bk-sorot{stroke:rgba(249,79,85,.85);animation:b6b-kelip-merah .95s ease-out}
.b6b-bk-laluan.putus{cursor:default}
.b6b-bk-laluan.putus .b6b-bk-jalan{stroke:#7D8FC0;opacity:.5;stroke-dasharray:5 8}
.b6b-bk-laluan.putus .b6b-bk-sorot{stroke:transparent}
.b6b-bk-lencana circle{fill:#fff;stroke:#1B2A5C;stroke-width:1.6}
.b6b-bk-lencana text{font-weight:900;fill:var(--ink)}
.b6b-bk-laluan.aktif .b6b-bk-lencana circle{fill:#FFC933;stroke:#8A4B00}
.b6b-bk-laluan.putus .b6b-bk-lencana circle{fill:#1A9A5C;stroke:#0F6B40}
.b6b-bk-laluan.putus.dibantu .b6b-bk-lencana circle{fill:#C9323F;stroke:#8E1F2A}
.b6b-bk-ikon,.b6b-bk-halang,.b6b-bk-meter,.b6b-bk-plat{pointer-events:none}
.b6b-bk-halang.dibantu > :first-child{fill:rgba(249,79,85,.22);stroke:#C9323F;stroke-width:1.6;stroke-dasharray:4 3;opacity:1}
.b6b-bk-meter-lapik{fill:rgba(255,255,255,.92);stroke:rgba(27,42,92,.25);stroke-width:1}
.b6b-bk-meter-badan{fill:#E3E9F7;stroke:#1B2A5C;stroke-width:1.6}
.b6b-bk-takuk{fill:#FFC933;stroke:#E8971A;stroke-width:1.2}
.b6b-bk-takuk.kosong{fill:#E3E9F7;stroke:none}
.b6b-bk-kapsyen{position:absolute;left:50%;top:10px;z-index:3;width:min(90%,470px);margin:0;padding:9px 16px;border-radius:16px;background:rgba(27,42,92,.92);color:#fff;
  font-size:1rem;font-weight:900;line-height:1.3;text-align:center;opacity:0;transform:translate(-50%,-8px);pointer-events:none;transition:opacity .5s ease,transform .5s ease}
.b6b-bk-adegan.terputus .b6b-bk-kapsyen{opacity:1;transform:translate(-50%,0)}
.b6b-bk-ic-baris{position:absolute;left:50%;top:8px;z-index:2;display:flex;gap:6px;transform:translateX(-50%);pointer-events:none}
.b6b-bk-ic{display:block;width:38px;animation:b6b-pop .45s ease-out both;filter:drop-shadow(0 3px 3px rgba(27,42,92,.3))}
.b6b-bk-ic svg{display:block;width:100%;height:auto}
.b6b-bk-adegan.terputus .b6b-bk-ic-baris{display:none}
/* kad langkah */
.b6b-bk-kawasan{display:grid;gap:10px;min-width:0}
.b6b-bk-senarai{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.b6b-bk-langkah{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:54px;padding:8px 12px 8px 9px;border-radius:16px;background:#FFFDF6;text-align:left;color:var(--ink);
  font-size:.9375rem;font-weight:800;line-height:1.3;box-shadow:0 4px 0 rgba(27,42,92,.18),inset 0 0 0 2px #EADFC4;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  transition:transform .15s ease,box-shadow .15s ease,background-color .2s ease,opacity .3s ease}
.b6b-bk-langkah:active:not([disabled]){transform:translateY(2px)}
.b6b-bk-langkah-no{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#EEF2FB;color:var(--ink2);font-size:.875rem;font-weight:900}
.b6b-bk-langkah-teks{flex:1 1 auto;min-width:0;overflow-wrap:break-word}
.b6b-bk-langkah.pilih{background:#FFF6D8;box-shadow:0 6px 0 var(--emas-d),inset 0 0 0 3px var(--emas);transform:translateY(-2px)}
.b6b-bk-langkah.pilih .b6b-bk-langkah-no{background:var(--emas);color:var(--ink)}
.b6b-bk-langkah.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 4px 0 var(--merah-d),inset 0 0 0 3px #E0555D}
.b6b-bk-langkah.betul,.b6b-bk-langkah.kilat{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 4px 0 #1E9E63,inset 0 0 0 3px var(--hijau);opacity:1}
.b6b-bk-langkah.pudar{background:#F1F3F8;color:#8A93AE;box-shadow:0 3px 0 rgba(27,42,92,.1),inset 0 0 0 2px #E3E6EE}
.b6b-bk-langkah.pudar .b6b-bk-langkah-no{background:#E3E6EE;color:#9AA3B8}
.b6b-bk-langkah.b6b-diseret{opacity:.35}
.b6b-bk-langkah[disabled]{cursor:default}
.b6b-bk-langkah-klon{display:grid;place-items:center;padding:4px 10px;border-radius:12px;background:#FFF6D8;box-shadow:0 0 0 3px var(--emas),0 10px 18px rgba(27,42,92,.3);
  font-size:.875rem;font-weight:900;line-height:1.2;text-align:center;color:var(--ink);overflow:hidden}
.b6b-bk-bawah{display:grid;gap:10px;min-width:0}
.b6b-bk-pasang{justify-self:stretch}
.b6b-bk-pasang[hidden]{display:none}
.b6b-bk-pasang[disabled]{background:#E6E9F0;color:#8A93AE;box-shadow:0 6px 0 #C5CBD8;cursor:default}
.b6b-bk-pasang-ikon{display:grid;place-items:center}
.b6b-bk-pasang-ikon svg{width:24px;height:24px;display:block}
/* dua sisi Kampung Baru */
.b6b-kb-el.nyala{animation:b6b-nyala 1.3s ease-out}
@keyframes b6b-nyala{0%{filter:none}35%{filter:drop-shadow(0 0 5px #FFC933) drop-shadow(0 0 2px #E8971A)}100%{filter:none}}
.b6b-ds-dulang{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0}
.b6b-ds-slot{display:grid;min-height:64px;min-width:0}
.b6b-ds-slot.kosong{border-radius:14px;background:rgba(255,255,255,.4);box-shadow:inset 0 0 0 2px rgba(27,42,92,.1)}
.b6b-ds-kad{position:relative;display:flex;align-items:flex-start;gap:8px;width:100%;min-height:64px;padding:9px 10px;border-radius:14px;background:#fff;text-align:left;color:var(--ink);
  font-size:.9375rem;font-weight:800;line-height:1.3;box-shadow:0 4px 0 rgba(27,42,92,.18),inset 0 0 0 2px var(--garis);touch-action:pan-y;user-select:none;-webkit-user-select:none;
  transition:transform .15s ease,box-shadow .15s ease,background-color .2s ease}
.b6b-ds-kad-no{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:#EEF2FB;color:var(--ink2);font-size:.875rem;font-weight:900}
.b6b-ds-kad-teks{flex:1 1 auto;min-width:0;overflow-wrap:break-word}
.b6b-ds-kad.masuk{animation:lompat .38s ease-out both}
.b6b-ds-kad.pilih{background:#FFF6D8;box-shadow:0 6px 0 var(--emas-d),inset 0 0 0 3px var(--emas);transform:translateY(-3px)}
.b6b-ds-kad.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 4px 0 var(--merah-d),inset 0 0 0 3px #E0555D}
.b6b-ds-kad.b6b-diseret{opacity:.35}
.b6b-ds-lajur-baris{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0}
.b6b-ds-lajur{--lc:#0C776B;--lw:#9FE0BF;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:6px;min-width:0;min-height:118px;padding:8px;border-radius:18px;background:rgba(255,255,255,.92);
  box-shadow:var(--lip),inset 0 0 0 2px var(--lw);cursor:pointer;transition:box-shadow .2s ease,background-color .2s ease}
.b6b-ds-lajur.l1{--lc:#A84A0C;--lw:#F5C79A}
.b6b-ds-kepala{position:relative;display:flex;align-items:center;gap:7px;width:100%;min-width:0;min-height:46px;padding:6px 9px;border-radius:12px;background:var(--lc);color:#fff;font-size:.9375rem;font-weight:900;line-height:1.15;text-align:left}
.b6b-ds-lambang{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.25);font-size:1.125rem;line-height:1}
.b6b-ds-nama{flex:1 1 auto;min-width:0;overflow-wrap:break-word}
.b6b-ds-kira{flex:none;min-width:26px;padding:1px 7px;border-radius:9px;background:rgba(255,255,255,.25);text-align:center}
.b6b-ds-isi{display:grid;grid-template-columns:minmax(0,1fr);gap:5px}
.b6b-ds-item{padding:6px 9px;border-radius:10px;background:#F3F6FD;font-size:.875rem;font-weight:700;line-height:1.3;color:var(--ink);overflow-wrap:break-word;box-shadow:inset 3px 0 0 var(--lc)}
.b6b-ds-item.masuk{animation:lompat .35s ease-out both}
.b6b-ds-item.dibantu{background:#FFF4F4;box-shadow:inset 0 0 0 2px #E0555D}
.b6b-bekalan.ada-pilih .b6b-ds-lajur,.b6b-ds-lajur.b6b-dekat{box-shadow:var(--lip),inset 0 0 0 3px var(--emas)}
.b6b-ds-lajur.salah{background:var(--salah-bg);box-shadow:var(--lip),inset 0 0 0 3px #E0555D;animation:goncang .4s}
.b6b-ds-lajur.kilat{background:var(--betul-bg);box-shadow:var(--lip),inset 0 0 0 3px var(--hijau)}
.b6b-ds-lajur.terima .b6b-ds-kepala{animation:lompat .4s ease-out}
.b6b-ds-klon{display:grid;align-items:center;padding:6px 10px;border-radius:12px;background:#FFF6D8;box-shadow:0 0 0 3px var(--emas),0 10px 18px rgba(27,42,92,.3);
  font-size:.875rem;font-weight:800;line-height:1.25;color:var(--ink);overflow:hidden}
.b6b-rumus-dua > div{align-content:start}
.b6b-kb-tunjuk{fill:none;stroke:#1B2A5C;stroke-width:1.2;stroke-dasharray:2 3;opacity:.55}
.b6b-rumus-dua > div.l0{box-shadow:inset 4px 0 0 #12998A}
.b6b-rumus-dua > div.l1{box-shadow:inset 4px 0 0 #C2560F}
.b2-j-bekalan .b2-rumus-dua li{font-size:.875rem}

/* =====================================================================================
   POSTER · POSTER KEMPEN
   ===================================================================================== */
.b6b-poster{display:grid;gap:10px;min-width:0}
.b6b-papan{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:14px 10px 12px;border-radius:20px;
  background-color:#C9965E;background-image:radial-gradient(rgba(110,63,27,.3) 1px,transparent 1.6px),radial-gradient(rgba(255,238,205,.28) 1px,transparent 1.6px);
  background-size:11px 11px,17px 17px;background-position:0 0,6px 8px;box-shadow:var(--bayang),inset 0 0 0 5px #8A5226,inset 0 0 0 7px #6E3F1B}
.b6b-kertas-bungkus{position:relative;min-width:0;width:100%}
.b6b-kertas{--wd:var(--w);position:relative;display:grid;min-width:0;border-radius:6px;background:#FFFBEE;color:var(--ink);box-shadow:0 5px 10px rgba(40,20,5,.35);overflow:hidden}
.b6b-kertas::before{content:"";position:absolute;right:0;bottom:0;width:26px;height:26px;background:linear-gradient(135deg,transparent 50%,rgba(40,20,5,.14) 50%,#EDE2C6 62%);pointer-events:none}
.b6b-kertas.siap::before{display:none}
.b6b-kertas-tajuk{display:flex;align-items:center;justify-content:center;min-height:42px;padding:18px 26px 8px;background:#F4EBD3;border-bottom:3px dashed var(--w);text-align:center}
.b6b-kertas-tajuk span{font-size:1rem;font-weight:900;line-height:1.2;letter-spacing:.04em;text-transform:uppercase;color:var(--w);overflow-wrap:break-word}
.b6b-kertas.siap{background:#fff}
.b6b-kertas.siap .b6b-kertas-tajuk{background:var(--w);border-bottom:3px solid rgba(0,0,0,.18);padding-top:10px}
body.mod-lebar .b6b-kertas.siap .b6b-kertas-tajuk{padding:8px 22px 6px}
body.mod-lebar .b6b-kertas.siap .b6b-kertas-tajuk span{letter-spacing:0}
.b6b-kertas.siap .b6b-kertas-tajuk span{color:#fff}
.b6b-slot-senarai{display:grid;gap:3px;padding:8px 8px 4px}
.b6b-slot{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);align-items:center;column-gap:8px;width:100%;min-height:46px;padding:4px 6px;border-radius:10px;background:none;
  text-align:left;color:var(--ink);transition:background-color .2s ease,box-shadow .2s ease}
.b6b-slot-label{font-size:.875rem;font-weight:900;line-height:1.2;color:var(--w);overflow-wrap:break-word}
.b6b-slot-nilai{position:relative;display:flex;align-items:center;min-width:0;min-height:36px;padding:3px 6px;border-bottom:2px dashed rgba(27,42,92,.3);font-size:.9375rem;font-weight:800;line-height:1.25;overflow-wrap:break-word}
.b6b-slot-petunjuk{font-size:.875rem;font-weight:700;font-style:italic;line-height:1.25;color:#7D86A3}
.b6b-poster.ada-pilih .b6b-slot:not(.isi){box-shadow:inset 0 0 0 2px rgba(255,201,51,.8);background:rgba(255,246,216,.55)}
.b6b-slot.aktif,.b6b-slot.b6b-dekat{background:#FFF1BF;box-shadow:inset 0 0 0 3px var(--emas)!important}
.b6b-slot.salah{background:var(--salah-bg)!important;box-shadow:inset 0 0 0 3px #E0555D!important}
.b6b-slot.isi{cursor:default}
.b6b-slot.isi .b6b-slot-nilai{border-bottom-color:transparent}
.b6b-dakwat{display:inline-block;color:var(--wd);font-weight:900;line-height:1.2;transform:rotate(-1deg);transform-origin:0 50%}
.b6b-slot.cetak .b6b-dakwat{animation:b6b-cop .36s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes b6b-cop{0%{transform:scale(1.5) rotate(-4deg);opacity:0;filter:blur(2px)}55%{transform:scale(.95) rotate(-1deg);opacity:1;filter:none}100%{transform:rotate(-1deg)}}
.b6b-slot-nilai::after{content:"";position:absolute;left:-4px;right:-4px;top:-4px;bottom:-4px;border-radius:12px;background:radial-gradient(circle,rgba(27,42,92,.22),transparent 70%);opacity:0;pointer-events:none}
.b6b-slot.cetak .b6b-slot-nilai::after{animation:b6b-dakwat-cik .6s ease-out}
@keyframes b6b-dakwat-cik{0%{opacity:1;transform:scale(.6)}100%{opacity:0;transform:scale(1.25)}}
.b6b-slot.dibantu .b6b-slot-nilai{border-radius:8px;box-shadow:inset 0 0 0 2px #E0555D}
.b6b-kertas-kaki{padding:2px 12px 7px;font-size:.75rem;font-weight:800;line-height:1.2;color:#8A93AE;text-align:right}
.b6b-pin{position:absolute;z-index:3;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 32%,#FF9EA2,#D22B36 58%,#9E1822);box-shadow:0 2px 2px rgba(0,0,0,.35);pointer-events:none}
.b6b-pin.p0{left:50%;top:5px;margin-left:-7px}
.b6b-pin.p1,.b6b-pin.p2,.b6b-pin.p3{opacity:0;transform:scale(0)}
.b6b-kertas.berpin .b6b-pin.p0{left:6px;margin-left:0}
.b6b-kertas.berpin .b6b-pin.p1{right:6px;top:5px}
.b6b-kertas.berpin .b6b-pin.p2{left:6px;bottom:6px}
.b6b-kertas.berpin .b6b-pin.p3{right:6px;bottom:6px}
.b6b-kertas.berpin .b6b-pin.p1,.b6b-kertas.berpin .b6b-pin.p2,.b6b-kertas.berpin .b6b-pin.p3{opacity:1;transform:none;animation:b6b-pop .35s ease-out both}
.b6b-kertas.berpin .b6b-pin.p2{animation-delay:.1s}.b6b-kertas.berpin .b6b-pin.p3{animation-delay:.2s}
.b6b-kilap{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.8) 46%,transparent 62%);opacity:0;transform:translateX(-120%)}
.b6b-kertas.kilap .b6b-kilap{animation:b6b-kilap .85s ease-out}
@keyframes b6b-kilap{0%{transform:translateX(-120%);opacity:1}100%{transform:translateX(120%);opacity:1}}
.b6b-kertas.b6b-hantu{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;pointer-events:none}
.b6b-gulung{position:absolute;left:-5px;right:-5px;top:0;height:16px;margin-top:-8px;z-index:4;border-radius:8px;pointer-events:none;
  background:linear-gradient(#E4D8BA,#FFFDF6 45%,#CDBF9C);box-shadow:0 5px 9px rgba(40,20,5,.35)}
/* palet cip */
.b6b-palet{display:grid;gap:8px;min-width:0}
.b6b-cip-tatal{min-width:0;position:relative}
.b6b-cip-senarai{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.b6b-cip{display:inline-flex;align-items:center;min-height:44px;max-width:100%;padding:6px 14px;border-radius:12px;background:#fff;color:var(--ink);font-size:.9375rem;font-weight:900;line-height:1.2;
  text-align:left;box-shadow:0 4px 0 rgba(27,42,92,.2),inset 0 0 0 2px var(--garis);touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .15s ease,box-shadow .15s ease,background-color .2s ease}
.b6b-cip-teks{min-width:0;overflow-wrap:break-word}
.b6b-cip:active:not([disabled]){transform:translateY(2px)}
.b6b-cip.pilih{background:#FFF6D8;box-shadow:0 6px 0 var(--emas-d),inset 0 0 0 3px var(--emas);transform:translateY(-3px)}
.b6b-cip.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 4px 0 var(--merah-d),inset 0 0 0 3px #E0555D}
.b6b-cip.kilat{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 4px 0 #1E9E63,inset 0 0 0 3px var(--hijau)}
.b6b-cip.guna{display:none}
.b6b-cip.b6b-diseret{opacity:.35}
.b6b-cip-klon{display:flex;align-items:center;overflow:hidden;white-space:normal;box-shadow:0 0 0 3px var(--emas),0 12px 20px rgba(27,42,92,.3)}
.b6b-cip-klon.salah{box-shadow:0 0 0 3px #E0555D,0 12px 20px rgba(27,42,92,.3)}
/* notis soalan */
.b6b-notis{display:grid;gap:8px;padding:12px 14px 14px;border-radius:14px;background:#FFFDF7;box-shadow:var(--lip),inset 0 0 0 2px #EADFC4,inset 5px 0 0 #7B57E0}
.b6b-notis.masuk{animation:lompat .35s ease-out both}
.b6b-notis-label{font-size:.875rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#5537A8}
.b6b-notis-soalan{font-size:1.0625rem;font-weight:900;line-height:1.3;color:var(--ink)}
.b6b-notis-pilih{grid-template-columns:minmax(0,1fr)}
/* rumusan */
.b6b-rumus-poster{display:grid;gap:10px;min-width:0}
.b6b-rumus-poster section{display:grid;gap:4px;padding:8px 12px;border-radius:14px;background:#F3F6FD;box-shadow:inset 4px 0 0 var(--w)}
.b6b-rumus-poster b{font-size:.9375rem;font-weight:900;color:var(--w)}
.b6b-rumus-poster ul{display:grid;gap:3px}
.b6b-rumus-poster li{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:6px;padding:3px 0;border-bottom:1px dashed #DDE4F4;font-size:.875rem;font-weight:700;line-height:1.3;color:var(--ink)}
.b6b-rp-label{font-weight:900;color:var(--ink2)}

/* =====================================================================================
   PERKAKAS · KOTAK PERKAKAS PENASIHAT
   ===================================================================================== */
.b6b-perkakas{display:grid;gap:10px;min-width:0}
.b6b-pk-kad{grid-template-columns:56px minmax(0,1fr);grid-template-areas:"klien no" "klien sas" "klien isi";column-gap:12px;row-gap:3px;align-items:center;overflow:hidden;min-height:96px}
.b6b-pk-kad .b2-kad-no{grid-area:no;align-self:end}
.b6b-pk-kad .b2-kad-isi{grid-area:isi;align-self:start}
.b6b-perkakas .b6b-pk-kad.tanpa-klien{grid-template-columns:minmax(0,1fr);grid-template-areas:"no" "sas" "isi"}
.b6b-pk-kad.tanpa-klien .b6b-pk-klien-bungkus{display:none}
.b6b-pk-kad.dibantu{box-shadow:var(--bayang),inset 0 0 0 3px #E0555D}
.b6b-pk-kad.b6b-dekat{box-shadow:0 0 0 4px var(--emas),var(--bayang)}
.b6b-pk-klien-bungkus{grid-area:klien;display:grid;place-items:center;align-self:center}
.b6b-pk-klien{width:52px;height:52px}
.b6b-pk-klien svg{display:block;width:100%;height:100%}
.b6b-pk-sasaran{grid-area:sas;justify-self:start;max-width:100%;padding:2px 10px;border-radius:10px;background:var(--mk,#3D8BF2);color:#fff;font-size:.875rem;font-weight:900;line-height:1.3;overflow-wrap:break-word}
.b6b-pk-sasaran:empty{display:none}
.b6b-pk-lapis{position:absolute;inset:0;z-index:2;pointer-events:none}
.b6b-pk-lencana{position:absolute;right:8px;bottom:6px;z-index:1;width:34px;height:34px;opacity:0;pointer-events:none}
.b6b-pk-lencana svg{display:block;width:100%;height:100%}
.b6b-pk-lencana.ada{opacity:.9;animation:b6b-pop .4s ease-out both}
.b6b-muka-baris{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 8px;padding:8px 8px 6px;border-radius:18px;background:rgba(255,255,255,.92);box-shadow:var(--lip)}
.b6b-muka{display:grid;justify-items:center;gap:2px;width:86px;text-align:center}
.b6b-muka-svg{display:block;width:40px;height:40px;border-radius:50%;transition:box-shadow .25s ease}
.b6b-muka-nama{font-size:.875rem;font-weight:800;line-height:1.15;color:var(--ink2);overflow-wrap:break-word}
.b6b-muka.kini .b6b-muka-svg{box-shadow:0 0 0 3px #FFC933,0 0 0 5px #fff}
.b6b-muka.kini .b6b-muka-nama{color:var(--ink)}
.b6b-mulut-senyum,.b6b-pipi{opacity:0;transition:opacity .35s ease}
.b6b-mulut-datar{transition:opacity .35s ease}
.senyum .b6b-mulut-senyum,.senyum .b6b-pipi{opacity:1}
.senyum .b6b-mulut-datar{opacity:0}
.b6b-muka.lonjak .b6b-muka-svg,.b6b-pk-klien.lonjak svg{animation:b6b-lonjak .55s ease-out}
@keyframes b6b-lonjak{0%{transform:none}40%{transform:translateY(-6px) scale(1.1)}100%{transform:none}}
/* kotak perkakas */
.b6b-pk-tengah{display:grid;gap:10px;min-width:0}
.b6b-pk-pilih{grid-template-columns:minmax(0,1fr)}
.b6b-pk-pilih[hidden]{display:none}
.b6b-kotak{position:relative;border-radius:18px;background:linear-gradient(#B8743C,#8A5226);box-shadow:var(--bayang),inset 0 0 0 3px #6E3F1B;perspective:900px}
.b6b-kotak.simpan{display:none}
.b6b-kotak-tutup{position:absolute;left:0;right:0;top:0;bottom:0;z-index:3;display:grid;place-items:center;border-radius:18px;
  background:repeating-linear-gradient(90deg,#C98B4F 0 26px,#B8743C 26px 52px);box-shadow:inset 0 0 0 3px #6E3F1B,inset 0 -10px 0 rgba(0,0,0,.14);
  transform-origin:50% 0;transition:transform .55s cubic-bezier(.3,.8,.4,1),opacity .55s ease}
.b6b-kotak.buka .b6b-kotak-tutup{transform:rotateX(-100deg);opacity:0;pointer-events:none}
.b6b-kotak-label{padding:6px 14px;border-radius:12px;background:#FFF6E0;color:#6E3F1B;font-size:.9375rem;font-weight:900;box-shadow:0 3px 0 rgba(0,0,0,.2)}
.b6b-kotak-selak{position:absolute;bottom:12px;left:50%;width:38px;height:12px;margin-left:-19px;border-radius:4px;background:#FFC933;box-shadow:inset 0 -3px 0 #E8971A}
.b6b-kotak-badan{padding:12px;min-height:130px;max-height:2000px;transition:max-height .55s ease}
.b6b-kotak:not(.buka) .b6b-kotak-badan{min-height:0;max-height:86px;overflow:hidden}
.b6b-kotak-isi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;opacity:0;transform:translateY(10px);transition:opacity .4s .2s ease,transform .4s .2s ease}
.b6b-kotak.buka .b6b-kotak-isi{opacity:1;transform:none}
.b6b-alat{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;column-gap:8px;width:100%;min-height:62px;padding:8px 9px;border-radius:14px;background:#FFFDF6;
  text-align:left;color:var(--ink);box-shadow:0 4px 0 rgba(40,20,5,.4),inset 0 0 0 2px #EADFC4;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  transition:transform .15s ease,box-shadow .15s ease,background-color .2s ease}
.b6b-alat:active:not([disabled]){transform:translateY(2px)}
.b6b-alat-ikon svg{display:block;width:40px;height:40px}
.b6b-alat-teks{display:grid;gap:2px;min-width:0}
.b6b-alat-nama{font-size:.9375rem;font-weight:900;line-height:1.2;overflow-wrap:break-word}
.b6b-alat-ket{font-size:.875rem;font-weight:700;line-height:1.28;color:var(--ink2);overflow-wrap:break-word}
.b6b-alat-no{display:none}
.b6b-alat.pilih{background:#FFF6D8;box-shadow:0 6px 0 var(--emas-d),inset 0 0 0 3px var(--emas);transform:translateY(-3px)}
.b6b-alat.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 4px 0 var(--merah-d),inset 0 0 0 3px #E0555D}
.b6b-alat.salah .b6b-alat-ket{color:var(--salah-teks)}
.b6b-alat.betul,.b6b-alat.kilat{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 4px 0 #1E9E63,inset 0 0 0 3px var(--hijau)}
.b6b-alat.b6b-diseret{opacity:.35}
.b6b-alat[disabled]{cursor:default}
.b6b-alat-klon{display:grid;place-items:center;border-radius:14px;background:rgba(255,246,216,.95);box-shadow:0 0 0 3px var(--emas),0 12px 20px rgba(27,42,92,.3)}
.b6b-alat-klon svg{width:78%;height:78%}
/* animasi guna di atas kad misi */
.b6b-kesan{position:absolute;inset:0;display:grid;place-items:center;background:rgba(255,255,255,.78)}
.b6b-kesan-svg{display:block;height:88%;max-height:92px;width:auto;overflow:visible}
.k-kasut .b6b-tapak{position:absolute;top:50%;left:calc(14% + var(--k) * 13%);width:13px;height:19px;margin-top:-6px;border-radius:50% 50% 44% 44%;background:#1B2A5C;opacity:0;
  animation:b6b-tapak .55s ease-out both;animation-delay:calc(var(--k) * 95ms)}
.k-kasut .b6b-tapak:nth-child(odd){margin-top:-24px}
@keyframes b6b-tapak{0%{opacity:0;transform:scale(.4)}40%{opacity:.85;transform:scale(1)}100%{opacity:.3;transform:scale(1)}}
.b6b-ks-kad{transform-box:fill-box;transform-origin:center;animation:b6b-flip .6s ease-out both}
@keyframes b6b-flip{0%{transform:scale(.6) rotateY(90deg);opacity:0}60%{transform:scale(1.06);opacity:1}100%{transform:none}}
.b6b-ks-tanda{stroke-dasharray:32;stroke-dashoffset:0;animation:b6b-lukis .35s .42s ease-out both}
@keyframes b6b-lukis{from{stroke-dashoffset:32}to{stroke-dashoffset:0}}
.b6b-ks-kertas{transform-box:fill-box;animation:b6b-undi .75s ease-in both}
@keyframes b6b-undi{0%{transform:translateY(-8px);opacity:0}25%{opacity:1}75%{transform:translateY(26px);opacity:1}100%{transform:translateY(30px);opacity:0}}
.b6b-ks-tutup{transform-box:fill-box;transform-origin:50% 0;animation:b6b-tutup .38s ease-out both}
@keyframes b6b-tutup{from{transform:scaleY(1)}to{transform:scaleY(-.85)}}
.b6b-ks-syiling{animation:b6b-naik .45s .3s ease-out both}
@keyframes b6b-naik{from{transform:translateY(14px);opacity:0}to{transform:translateY(-6px);opacity:1}}
.b6b-ks-kilau{transform-box:fill-box;transform-origin:center;animation:b6b-kilau .5s .5s ease-out both}
@keyframes b6b-kilau{0%{transform:scale(0) rotate(0);opacity:0}60%{transform:scale(1.3) rotate(45deg);opacity:1}100%{transform:scale(1) rotate(90deg);opacity:1}}
.b6b-ks-k1,.b6b-ks-k2,.b6b-ks-k3{transform-box:fill-box;transform-origin:50% 100%;animation:b6b-bina .32s ease-out both}
.b6b-ks-k2{animation-delay:.27s}.b6b-ks-k3{animation-delay:.54s}
@keyframes b6b-bina{0%{transform:scaleY(0);opacity:0}70%{transform:scaleY(1.1);opacity:1}100%{transform:none;opacity:1}}
.b6b-ks-gel path{fill:none;stroke:#EC6F1F;stroke-width:3.6;stroke-linecap:round;opacity:.25;animation:b6b-gel .6s ease-out both}
.b6b-ks-gel path:nth-child(2){animation-delay:.15s}.b6b-ks-gel path:nth-child(3){animation-delay:.3s}
@keyframes b6b-gel{0%{opacity:0}40%{opacity:1}100%{opacity:.25}}
.b6b-ks-risalah rect{transform-box:fill-box;transform-origin:center;animation:b6b-risalah .85s ease-in both}
.b6b-ks-risalah rect:nth-child(2){animation-delay:.1s}.b6b-ks-risalah rect:nth-child(3){animation-delay:.2s}
@keyframes b6b-risalah{0%{transform:translateY(-14px) rotate(-20deg);opacity:0}30%{opacity:1}100%{transform:translateY(24px) rotate(25deg);opacity:.9}}
.b6b-ks-cat{transform-box:fill-box;transform-origin:0 50%;animation:b6b-sapu .6s .15s ease-out both}
@keyframes b6b-sapu{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* bar tindakan */
.b6b-pk-aksi{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;min-width:0}
.b6b-pk-guna[hidden]{display:none}
.b6b-pk-guna[disabled],.b6b-pb-btn[disabled]{background:#E6E9F0;color:#8A93AE;box-shadow:0 6px 0 #C5CBD8;cursor:default}
.b6b-pk-guna-ikon,.b6b-pb-roller{display:grid;place-items:center}
.b6b-pk-guna-ikon svg,.b6b-pb-roller svg{width:22px;height:22px;display:block}
/* cat putih */
.b6b-pb{display:grid;gap:8px;padding:12px;border-radius:18px;background:rgba(255,255,255,.93);box-shadow:var(--lip)}
.b6b-pb.masuk{animation:lompat .35s ease-out both}
.b6b-pb-nota{font-size:.9375rem;font-weight:700;line-height:1.35;color:var(--ink2)}
.b6b-pb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.b6b-pb-cip{position:relative;display:flex;align-items:center;gap:8px;width:100%;min-height:52px;padding:8px 10px;border-radius:14px;overflow:hidden;background:#2E3A63;color:#fff;
  font-size:.9375rem;font-weight:900;line-height:1.2;text-align:left;box-shadow:0 4px 0 #1B2A5C;transition:color .3s .2s ease,box-shadow .2s ease}
.b6b-pb-cip:active:not([disabled]){transform:translateY(2px)}
.b6b-pb-kotak{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 2px rgba(255,255,255,.65)}
.b6b-pb-teks{position:relative;z-index:1;min-width:0;overflow-wrap:break-word}
.b6b-pb-cat{position:absolute;left:0;top:0;bottom:0;width:0;z-index:0;background:#fff;transition:width .5s ease}
.b6b-pb-cip.tanda{box-shadow:0 4px 0 #1B2A5C,inset 0 0 0 3px var(--emas)}
.b6b-pb-cip.tanda .b6b-tanda-svg{stroke-dashoffset:0}
.b6b-pb-cip.putih{color:var(--ink);box-shadow:0 4px 0 #C5D0EA,inset 0 0 0 2px #C5D0EA}
.b6b-pb-cip.putih .b6b-pb-cat{width:100%}
.b6b-pb-cip.putih .b6b-pb-kotak{background:var(--hijau);box-shadow:none}
.b6b-pb-cip.putih.dibantu{box-shadow:0 4px 0 #C5D0EA,inset 0 0 0 2px #E0555D}
.b6b-pb-cip.salah{background:#C9323F;box-shadow:0 4px 0 #8E1F2A,inset 0 0 0 3px #FFB3B6}
.b6b-pb-cip.kilat{box-shadow:0 4px 0 #1B2A5C,inset 0 0 0 3px #4ED68C,0 0 0 3px rgba(47,160,92,.5)}
.b6b-pb-cip[disabled]{cursor:default}
.b6b-rumus-pb{padding:8px 12px;border-radius:14px;background:#F3F6FD;font-size:.875rem;font-weight:700;line-height:1.35;color:var(--ink)}

/* =====================================================================================
   MOD LEBAR (pentas 1280 x 720; .main-badan: left 300, width 720)
   ===================================================================================== */
body.mod-lebar .b2-main.b2-j-bekalan .main-badan,body.mod-lebar .b2-main.b2-j-poster .main-badan,body.mod-lebar .b2-main.b2-j-perkakas .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-bekalan,body.mod-lebar .b2-p-poster,body.mod-lebar .b2-p-perkakas{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
body.mod-lebar .b2-j-bekalan .b2-kad,body.mod-lebar .b2-j-poster .b2-kad,body.mod-lebar .b2-j-perkakas .b2-kad{padding:9px 18px 10px}
body.mod-lebar .b2-j-bekalan .b2-kad-isi,body.mod-lebar .b2-j-perkakas .b2-kad-isi{font-size:1.1875rem}
body.mod-lebar .b2-j-poster .b2-kad-isi{font-size:1.0625rem}
body.mod-lebar .b2-j-bekalan .bisik,body.mod-lebar .b2-j-poster .bisik,body.mod-lebar .b2-j-perkakas .bisik{min-height:48px;padding:8px 14px}
body.mod-lebar .b2-j-bekalan .op,body.mod-lebar .b2-j-poster .op,body.mod-lebar .b2-j-perkakas .op{min-height:54px}
body.mod-lebar .b2-p-bekalan > .b2-rumus,body.mod-lebar .b2-p-poster > .b2-rumus,body.mod-lebar .b2-p-perkakas > .b2-rumus{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
body.mod-lebar .b2-p-bekalan > .b2-rumus > *,body.mod-lebar .b2-p-poster > .b2-rumus > *,body.mod-lebar .b2-p-perkakas > .b2-rumus > *{flex:none}
body.mod-lebar .b2-p-bekalan > .b2-rumus > .b6b-rumus-lanjut,body.mod-lebar .b2-p-poster > .b2-rumus > .b6b-rumus-poster,body.mod-lebar .b2-p-perkakas > .b2-rumus > .b6b-rumus-lanjut{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
body.mod-lebar .b6b-rumus-dua{grid-template-columns:1fr 1fr}
body.mod-lebar .b6b-rumus-misi{grid-template-columns:1fr 1fr}
body.mod-lebar .b6b-rumus-poster.dua{grid-template-columns:1fr 1fr}
/* bekalan */
body.mod-lebar .b6b-bk-senarai{grid-template-columns:1fr 1fr}
body.mod-lebar .b6b-bk-langkah{min-height:58px}
body.mod-lebar .b6b-bekalan .b2-pilih{grid-template-columns:1fr 1fr}
body.mod-lebar .b6b-bk-bawah{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:12px}
body.mod-lebar .b6b-bk-pasang{min-width:190px}
body.mod-lebar .b6b-bk-pasang[hidden] + .bisik{grid-column:1 / -1}
body.mod-lebar .b6b-bk-kapsyen{font-size:1.0625rem;top:12px}
body.mod-lebar .b6b-bekalan[data-fasa="dua"] .b6b-bk-kawasan{grid-template-columns:minmax(0,1fr) 250px minmax(0,1fr);grid-template-areas:"kiri dulang kanan";align-items:start;column-gap:10px}
body.mod-lebar .b6b-bekalan[data-fasa="dua"] .b6b-ds-lajur-baris{display:contents}
body.mod-lebar .b6b-ds-lajur.l0{grid-area:kiri}
body.mod-lebar .b6b-ds-lajur.l1{grid-area:kanan}
body.mod-lebar .b6b-ds-dulang{grid-area:dulang;grid-template-columns:1fr;align-content:start}
body.mod-lebar .b6b-ds-lajur{min-height:220px}
body.mod-lebar .b6b-ds-slot,body.mod-lebar .b6b-ds-kad{min-height:66px}
body.mod-lebar .b6b-ds-kepala{min-height:42px}
body.mod-lebar .b6b-ds-item{padding:5px 9px;line-height:1.26}
/* poster */
body.mod-lebar .b6b-papan{grid-template-columns:1fr 1fr;gap:14px;padding:12px 12px 10px}
/* satu poster: palet di sebelah kanan poster (teks cip panjang tidak muat di bawah) */
body.mod-lebar .b6b-poster.satu{grid-template-columns:minmax(0,1fr) 280px;grid-template-areas:"atas atas" "papan palet";align-items:start;column-gap:12px}
body.mod-lebar .b6b-poster.satu > .b6b-po-atas{grid-area:atas}
body.mod-lebar .b6b-poster.satu > .b6b-papan{grid-area:papan;grid-template-columns:minmax(0,1fr)}
body.mod-lebar .b6b-poster.satu > .b6b-palet{grid-area:palet;align-content:start}
body.mod-lebar .b6b-poster.satu .b6b-cip-senarai{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
body.mod-lebar .b6b-poster.satu .b6b-cip{justify-content:flex-start;text-align:left}
body.mod-lebar .b6b-slot{min-height:44px;padding:3px 6px}
body.mod-lebar .b6b-slot-nilai{min-height:0}
body.mod-lebar .b6b-slot-petunjuk{font-size:.8125rem;line-height:1.2}
/* selepas semua poster ditampal (soal notis / tamat): baris bukan lagi sasaran tekan, jadi dipadatkan supaya notis muat */
body.mod-lebar .b6b-poster:not(.fasa-cip) .b6b-papan{padding:8px 12px 6px}
body.mod-lebar .b6b-poster:not(.fasa-cip) .b6b-slot-senarai{padding:4px 8px 0}
body.mod-lebar .b6b-poster:not(.fasa-cip) .b6b-slot{min-height:30px;padding:1px 6px}
body.mod-lebar .b6b-poster:not(.fasa-cip) .b6b-slot-nilai{padding:1px 6px;font-size:.875rem;line-height:1.2}
body.mod-lebar .b6b-poster:not(.fasa-cip) .b6b-slot-label{font-size:.8125rem}
body.mod-lebar .b6b-notis{gap:6px;padding:10px 12px 12px}
body.mod-lebar .b6b-notis-soalan{font-size:1rem}
body.mod-lebar .b2-j-poster .b6b-notis-pilih .op{min-height:44px}
body.mod-lebar .b6b-slot-senarai{gap:2px;padding:6px 8px 2px}
body.mod-lebar .b6b-kertas-tajuk{min-height:38px;padding:15px 12px 6px}
body.mod-lebar .b6b-kertas-tajuk span{font-size:.875rem;letter-spacing:.03em}
body.mod-lebar .b6b-cip{min-height:44px;padding:4px 12px;font-size:.875rem}
body.mod-lebar .b6b-cip-senarai{gap:7px}
body.mod-lebar .b6b-palet{gap:8px}
body.mod-lebar .b6b-notis-pilih{grid-template-columns:1fr 1fr}
body.mod-lebar .b2-j-poster .b2-kad{padding:7px 18px 8px}
/* dua poster: padatkan supaya palet cip muat di bawah papan (ruang pentas lebar hanya 620 px tinggi) */
body.mod-lebar .b6b-poster.fasa-cip:not(.satu){gap:6px}
body.mod-lebar .b6b-poster.fasa-cip:not(.satu) .b6b-papan{padding:8px 12px 6px}
body.mod-lebar .b6b-poster.fasa-cip:not(.satu) .b6b-kertas-kaki{padding:0 12px 4px;font-size:.6875rem}
body.mod-lebar .b6b-poster.fasa-cip:not(.satu) .b6b-palet{gap:6px}
body.mod-lebar .b6b-poster.fasa-cip:not(.satu) .bisik{min-height:44px;padding:6px 14px}
body.mod-lebar .b6b-poster:not(.satu) .b6b-cip{padding:4px 10px;font-size:.8125rem}
body.mod-lebar .b6b-poster:not(.satu) .b6b-cip-senarai{gap:6px}
/* perkakas */
body.mod-lebar .b6b-kotak-isi{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
body.mod-lebar .b6b-alat{grid-template-columns:minmax(0,1fr);justify-items:center;align-content:start;row-gap:4px;min-height:118px;padding:10px 8px;text-align:center}
body.mod-lebar .b6b-kotak.latihan .b6b-alat{min-height:92px}
body.mod-lebar .b6b-alat-ikon svg{width:46px;height:46px}
body.mod-lebar .b6b-alat-teks{justify-items:center}
body.mod-lebar .b6b-alat-no{display:grid;place-items:center;position:absolute;left:7px;top:7px;width:22px;height:22px;border-radius:7px;background:#EEF2FB;color:var(--ink2);font-size:.8125rem;font-weight:900;box-shadow:0 2px 0 #CBD5EC}
body.mod-lebar .b6b-kotak-badan{padding:12px 12px 14px}
body.mod-lebar .b6b-pk-aksi{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:12px}
body.mod-lebar .b6b-pk-guna,body.mod-lebar .b6b-pb-btn{min-width:160px}
body.mod-lebar .b6b-pk-guna[hidden] + .bisik{grid-column:1 / -1}
body.mod-lebar .b6b-pk-pilih{grid-template-columns:1fr 1fr}
body.mod-lebar .b6b-pb-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
body.mod-lebar .b6b-pk-kad{min-height:92px;grid-template-columns:56px auto minmax(0,1fr);grid-template-areas:"klien no sas" "klien isi isi";row-gap:4px}
body.mod-lebar .b6b-pk-kad .b2-kad-no,body.mod-lebar .b6b-pk-kad .b6b-pk-sasaran{align-self:center}
body.mod-lebar .b6b-perkakas .b6b-pk-kad.tanpa-klien{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"no sas" "isi isi"}
body.mod-lebar .b2-j-perkakas .b2-kad-isi{font-size:1.125rem}
/* kotak perkakas menatal di dalam jika tidak muat: kad misi, wajah dan bar Guna sentiasa kelihatan */
body.mod-lebar .b2-p-perkakas > .b6b-perkakas{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
body.mod-lebar .b6b-perkakas > *{flex:none}
body.mod-lebar .b6b-perkakas > .b6b-pk-tengah{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -6px;padding:0 6px 6px}
/* Fasa Belajar (alat berketerangan): dua lajur mendatar supaya kotak muat tanpa ditatal; Fasa Latihan kekal empat lajur ikon */
body.mod-lebar .b6b-kotak:not(.latihan) .b6b-kotak-isi{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
body.mod-lebar .b6b-kotak:not(.latihan) .b6b-alat{grid-template-columns:42px minmax(0,1fr);justify-items:stretch;align-items:center;row-gap:0;min-height:58px;padding:6px 12px 6px 36px;text-align:left}
body.mod-lebar .b6b-kotak:not(.latihan) .b6b-alat-nama{line-height:1.15}
body.mod-lebar .b6b-kotak:not(.latihan) .b6b-alat-ket{line-height:1.22}
body.mod-lebar .b6b-kotak:not(.latihan) .b6b-alat-ikon svg{width:40px;height:40px}
body.mod-lebar .b6b-kotak:not(.latihan) .b6b-alat-teks{justify-items:start}
body.mod-lebar .b6b-kotak:not(.latihan) .b6b-alat-no{top:50%;margin-top:-11px}
/* baris wajah: wajah di kiri nama, satu baris */
body.mod-lebar .b6b-muka-baris{padding:6px 12px;gap:6px 20px}
body.mod-lebar .b6b-muka{grid-template-columns:34px auto;align-items:center;justify-items:start;column-gap:7px;width:auto;text-align:left}
body.mod-lebar .b6b-muka-svg{width:34px;height:34px}

/* =====================================================================================
   TELEFON (390 x 844) dan TELEFON PENDEK (375 x 667)
   ===================================================================================== */
body.mod-telefon .b2-j-bekalan .b2-kad-isi,body.mod-telefon .b2-j-poster .b2-kad-isi,body.mod-telefon .b2-j-perkakas .b2-kad-isi{font-size:1rem;line-height:1.28}
body.mod-telefon .b2-j-bekalan .bisik,body.mod-telefon .b2-j-poster .bisik,body.mod-telefon .b2-j-perkakas .bisik{min-height:2.9em;padding:8px 12px;font-size:.9375rem}
body.mod-telefon .b6b-bk-kapsyen{font-size:.9375rem;padding:8px 12px;top:8px}
body.mod-telefon .b6b-bk-ic{width:32px}
body.mod-telefon .b6b-bk-ic-baris{top:34px;left:47%}
/* dua sisi: kiraan menjadi lencana kecil di penjuru kepala lajur supaya "Kemudahan"/"Kesukaran" muat tanpa dipotong */
body.mod-telefon .b6b-ds-kepala{gap:6px;padding:6px 8px}
body.mod-telefon .b6b-ds-kira{position:absolute;top:-8px;right:-6px;display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:12px;
  background:#fff;color:var(--lc);font-size:.875rem;box-shadow:0 2px 0 rgba(27,42,92,.22),inset 0 0 0 2px var(--lc)}
/* poster: palet cip ialah helaian tetap di bawah skrin (bisik di dalamnya supaya maklum balas sentiasa kelihatan);
   akar enjin diberi ruang bawah setinggi helaian oleh JS supaya poster boleh ditatal ke atasnya */
body.mod-telefon .b6b-poster.fasa-cip .b6b-palet{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,255,255,.97);box-shadow:0 -6px 18px rgba(27,42,92,.2)}
body.mod-telefon .b6b-poster.fasa-cip .b6b-palet .bisik{min-height:2.6em;padding:6px 10px;font-size:.875rem;line-height:1.32;box-shadow:none;background:#F3F6FD}
body.mod-telefon .b6b-poster.fasa-cip .b6b-palet .bisik.betul{background:var(--betul-bg)}
body.mod-telefon .b6b-poster.fasa-cip .b6b-palet .bisik.salah{background:var(--salah-bg)}
body.mod-telefon .b6b-cip-tatal{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;margin:0 -10px;padding:2px 10px 6px;scroll-padding-inline:10px}
body.mod-telefon .b6b-cip-senarai{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:max-content;justify-content:start;gap:8px}
body.mod-telefon .b6b-cip{max-width:230px;touch-action:pan-x}
body.mod-telefon .b6b-cip-tatal.lagi-kanan{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),rgba(0,0,0,.15));mask-image:linear-gradient(90deg,#000 calc(100% - 44px),rgba(0,0,0,.15))}
body.mod-telefon .b6b-cip-tatal.lagi-kiri{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.15),#000 44px);mask-image:linear-gradient(90deg,rgba(0,0,0,.15),#000 44px)}
body.mod-telefon .b6b-cip-tatal.lagi-kiri.lagi-kanan{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.15),#000 44px,#000 calc(100% - 44px),rgba(0,0,0,.15));mask-image:linear-gradient(90deg,rgba(0,0,0,.15),#000 44px,#000 calc(100% - 44px),rgba(0,0,0,.15))}
body.mod-telefon .b6b-kertas-kaki{font-size:.875rem}
body.mod-telefon .b6b-papan{padding:12px 9px 10px}
/* perkakas: bar Guna tetap di bawah skrin; kad misi dibawa ke dalam pandangan sebelum animasi alat (JS) */
body.mod-telefon .b6b-perkakas{gap:8px}
body.mod-telefon .b6b-pk-aksi{position:fixed;left:0;right:0;bottom:0;z-index:18;max-width:560px;margin:0 auto;padding:8px 12px max(10px,env(safe-area-inset-bottom));
  border-radius:18px 18px 0 0;background:rgba(255,248,232,.97);box-shadow:0 -6px 16px rgba(27,42,92,.18)}
body.mod-telefon .b6b-perkakas[data-fasa="tamat"] .b6b-pk-aksi{position:static;margin:0;border-radius:16px;box-shadow:none;background:none;padding:0}
body.mod-telefon .b6b-kotak-isi{grid-template-columns:minmax(0,1fr);gap:7px}
body.mod-telefon .b6b-pk-aksi .bisik{min-height:2.6em;padding:6px 10px;font-size:.875rem;line-height:1.32}
body.mod-telefon .b6b-pk-kad{grid-template-columns:48px minmax(0,1fr);min-height:88px;padding:9px 12px 10px}
body.mod-telefon .b6b-pk-klien{width:46px;height:46px}
body.mod-telefon .b6b-muka-baris{display:grid;grid-template-columns:repeat(auto-fit,minmax(68px,1fr));gap:4px;padding:7px 4px 5px}
body.mod-telefon .b6b-muka{width:auto;min-width:0}
body.mod-telefon .b6b-muka-svg{width:34px;height:34px}
body.mod-telefon .b6b-kotak-badan{padding:10px 8px}
body.mod-telefon .b6b-alat{grid-template-columns:34px minmax(0,1fr);column-gap:8px;padding:8px 12px 8px 8px;align-content:start;align-items:start}
body.mod-telefon .b6b-alat-ikon svg{width:34px;height:34px}
@media (max-height:700px){
  body.mod-telefon .b6b-bk-langkah{min-height:48px;padding:6px 10px 6px 8px}
  body.mod-telefon .b6b-bk-senarai{gap:6px}
  body.mod-telefon .b6b-bekalan{gap:8px}
  body.mod-telefon .b2-j-bekalan .b2-kad{padding:8px 14px 9px}
  body.mod-telefon .b6b-ds-slot,body.mod-telefon .b6b-ds-kad{min-height:56px}
  body.mod-telefon .b6b-ds-lajur{min-height:96px}
  body.mod-telefon .b6b-slot{min-height:44px}
  body.mod-telefon .b6b-pk-kad{min-height:80px}
  body.mod-telefon .b6b-muka-baris{padding:5px 4px 4px}
  body.mod-telefon .b6b-muka-svg{width:30px;height:30px}
  body.mod-telefon .b6b-alat{min-height:56px}
}
@media (max-width:370px){
  .b6b-slot{grid-template-columns:minmax(0,38%) minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .b6b-ds-kad.masuk,.b6b-ds-item.masuk,.b6b-notis.masuk,.b6b-pb.masuk,.b6b-bk-ic,.b6b-pk-lencana.ada{animation:none}
  /* keadaan akhir yang biasanya dicapai melalui animasi atau peralihan */
  .b6b-bk-adegan.terputus .b6b-bk-kapsyen{opacity:1;transform:translate(-50%,0)}
  .b6b-kotak.buka .b6b-kotak-tutup{transform:none;opacity:0;visibility:hidden}
  .b6b-kotak.buka .b6b-kotak-isi{opacity:1;transform:none}
  .b6b-kertas.berpin .b6b-pin.p1,.b6b-kertas.berpin .b6b-pin.p2,.b6b-kertas.berpin .b6b-pin.p3{opacity:1;transform:none}
  .b6b-pb-cip.putih .b6b-pb-cat{width:100%}
  .b6b-kilap,.b6b-slot-nilai::after{display:none}
}