/* ===== Babak · gaya pakej enjin Bab 9, kumpulan 9c (js/pakej-bab-09-9c.js): tiub, batik, rumah. Awalan kelas dan keyframes b9c-.
   Susun atur diskop dengan .b2-j-<jenis> / .b2-p-<jenis>, body.mod-lebar (pentas 1280 x 720) dan body.mod-telefon
   (390 x 844; telefon pendek @media (max-height:700px)). Keadaan akhir animasi juga betul untuk prefers-reduced-motion. ===== */

/* ---------- Kongsi ---------- */
.b9c-goncang{animation:goncang .4s}
/* klon terbang/seret: !important kerana gaya kad (position:relative) datang kemudian dengan kekhususan yang sama */
.b9c-terbang,.b9c-klon-seret{position:absolute!important;z-index:40;margin:0!important;pointer-events:none;box-sizing:border-box;overflow:hidden}
.b9c-klon-seret{transition:none!important;box-shadow:0 16px 28px rgba(27,42,92,.32)!important}
.b9c-terbang{transition:none!important}
.b9c-terbang.salah{background:var(--salah-bg)!important;color:var(--salah-teks)!important;box-shadow:0 4px 0 var(--merah-d),inset 0 0 0 3px #E0555D!important}
.b2-j-tiub .b2-kad-no,.b2-j-batik .b2-kad-no,.b2-j-rumah .b2-kad-no{font-size:.875rem;letter-spacing:.04em}
.b2-j-tiub .b2-kad-isi,.b2-j-batik .b2-kad-isi{font-size:1.0625rem}
.b2-j-rumah .b2-cip-tahun{height:26px;font-size:.875rem}
.b2-j-tiub .b2-rujuk-btn,.b2-j-batik .b2-rujuk-btn,.b2-j-rumah .b2-rujuk-btn{font-size:.875rem;min-height:44px}
.b2-j-tiub .b2-rumus-tokoh li,.b2-j-batik .b2-rumus-tokoh li,.b2-j-rumah .b2-rumus-tokoh li{font-size:.875rem;line-height:1.35;align-content:start}
.b2-j-tiub .b2-rumus-label,.b2-j-batik .b2-rumus-label,.b2-j-rumah .b2-rumus-label{font-size:.875rem}
.b2-rumus-tokoh li.b9c-rumus-penuh{grid-column:1/-1}
.b9c-rumus-baris{display:grid;gap:3px}
.b9c-rumus-baris > span{position:relative;padding-left:12px}
.b9c-rumus-baris > span::before{content:"";position:absolute;left:1px;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--w,#2FA05C)}
.b9c-dulang-label{font-size:.875rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.b9c-soal-panel{display:grid;gap:8px}
.b9c-soal-panel[hidden]{display:none}
.b9c-soal-teks{display:none}
.b9c-soal-pilih{grid-template-columns:minmax(0,1fr);gap:8px}
.b9c-op{min-height:50px;font-size:.9375rem}
@keyframes b9c-kilat{0%,100%{filter:none}50%{filter:brightness(1.12) saturate(1.2)}}
@keyframes b9c-getar{0%,100%{transform:translate(0,0)}20%{transform:translate(-2px,1px)}40%{transform:translate(2px,-1px)}60%{transform:translate(-2px,0)}80%{transform:translate(2px,1px)}}
@keyframes b9c-lantun{0%{transform:scale(1)}35%{transform:scale(1.08)}70%{transform:scale(.97)}100%{transform:scale(1)}}

/* =====================================================================================
   9.7 TIUB POS
   ===================================================================================== */
.b9c-tiub{display:flex;flex-direction:column;gap:10px;min-width:0}
.b9c-tiub > .b2-atas{order:1}
.b9c-tiub > .b9c-dinding{order:3}
.b9c-tiub > .b9c-sisi{order:4}
.b9c-tiub.mod-soal > .b9c-sisi{order:2}
/* dinding pejabat 1950-an: kertas dinding hijau pucat berjalur, bingkai kayu, papan kaki */
.b9c-dinding{position:relative;min-width:0;padding:46px 8px 18px;border-radius:20px;
  background:linear-gradient(180deg,transparent calc(100% - 14px),#A8672F calc(100% - 14px)),repeating-linear-gradient(90deg,#E3F0E4 0 20px,#D9EADC 20px 40px);
  box-shadow:var(--bayang),inset 0 0 0 4px #9A5D2A,inset 0 0 0 7px #C98B4F}
.b9c-plat{position:absolute;left:16px;top:12px;z-index:3;display:flex;align-items:center;min-height:26px;padding:2px 12px;border-radius:8px;
  background:linear-gradient(180deg,#F8E3A0,#D6A544 60%,#B8862E);box-shadow:0 2px 0 #6E4F17,inset 0 0 0 1.5px #8A6A22;color:#3B2A08;font-size:.875rem;font-weight:900;letter-spacing:.02em;line-height:1.2}
.b9c-jam{position:absolute;right:16px;top:9px;z-index:3;width:30px;height:30px;border-radius:50%;background:#FFFDF6;box-shadow:0 0 0 3px #8A5226,0 3px 0 3px rgba(27,42,92,.18)}
.b9c-jam i,.b9c-jam b{position:absolute;left:50%;bottom:50%;width:2.5px;border-radius:2px;background:#1B2A5C;transform-origin:50% 100%}
.b9c-jam i{height:10px;margin-left:-1.25px;transform:rotate(-40deg)}
.b9c-jam b{height:7px;margin-left:-1.25px;transform:rotate(80deg)}
.b9c-tiub-svg{position:absolute;left:0;top:0;z-index:1;overflow:visible;pointer-events:none}
.b9c-paip-a{fill:none;stroke:#6E4F17;stroke-width:13;stroke-linecap:round;stroke-linejoin:round}
.b9c-paip-b{fill:none;stroke:#D6A544;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s ease}
.b9c-paip-c{fill:none;stroke:#F7DE92;stroke-width:2.6;stroke-linecap:round;opacity:.85;transform:translate(-1.5px,-1.5px)}
.b9c-apit{fill:#8A6A22}
.b9c-sendi{fill:#E8C063;stroke:#6E4F17;stroke-width:2.4}
.b9c-injap{fill:#B8862E;stroke:#6E4F17;stroke-width:2;transition:fill .2s ease}
.b9c-cabang.salah .b9c-paip-b{stroke:#F94F55}
.b9c-cabang.salah .b9c-injap,.b9c-cabang.salah .b9c-sendi{fill:#F94F55;stroke:#C9323F}
.b9c-cabang.salah{animation:b9c-getar .45s}
.b9c-cabang.kilat .b9c-paip-b{stroke:#2FD17A}
.b9c-cabang.kilat .b9c-injap,.b9c-cabang.kilat .b9c-sendi{fill:#2FD17A;stroke:#1E9E63}
.b9c-jejak{fill:none;stroke:#FFF7CF;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0}
/* stesen (gerai) */
.b9c-stesen-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:44px;row-gap:14px;align-items:stretch}
.b9c-stesen{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px;
  min-width:0;min-height:96px;padding:9px 8px 10px;border-radius:16px;text-align:left;color:var(--ink);
  background:linear-gradient(180deg,#FFFCF3,#FFF1D2);box-shadow:0 4px 0 #B8905A,inset 0 0 0 2px #D9B98A;transition:transform .15s ease,box-shadow .2s ease,background-color .2s ease}
.b9c-stesen:active{transform:translateY(2px)}
.b9c-stesen-ikon{flex:none;width:40px;height:40px;border-radius:12px;background:#FFFFFF;box-shadow:inset 0 0 0 2px #EADCC0;display:grid;place-items:center}
.b9c-ikon-svg{width:34px;height:34px;overflow:visible}
.b9c-stesen-nama{display:block;font-size:.9375rem;font-weight:900;line-height:1.17;overflow-wrap:normal;word-break:normal}
.b9c-lampu{position:absolute;right:9px;top:9px;width:13px;height:13px;border-radius:50%;background:#C9CEDB;box-shadow:inset 0 -2px 0 rgba(0,0,0,.16),0 0 0 2px #FFFFFF;transition:background-color .3s ease,box-shadow .3s ease}
.b9c-lampu.kuning{background:#FFC933;box-shadow:0 0 0 2px #fff,0 0 8px 2px rgba(255,201,51,.75)}
.b9c-lampu.hijau{background:#2FD17A;box-shadow:0 0 0 2px #fff,0 0 9px 2px rgba(47,209,122,.7)}
.b9c-stesen.siap{background:linear-gradient(180deg,#FFFCF3,#F3F9EE)}
.b9c-stesen.kini{box-shadow:0 4px 0 #B8905A,inset 0 0 0 3px var(--emas),0 0 0 4px rgba(255,201,51,.3)}
.b9c-stesen.salah{background:var(--salah-bg);box-shadow:0 4px 0 var(--merah-d),inset 0 0 0 3px #E0555D}
.b9c-stesen.kilat{background:var(--betul-bg);box-shadow:0 4px 0 #1E9E63,inset 0 0 0 3px var(--hijau);animation:b9c-kilat .8s ease-in-out 3}
.b9c-stesen.salah .b9c-stesen-nama{color:var(--salah-teks)}
.b9c-cop-senarai{display:grid;gap:6px;margin:2px 0 0;padding:0;list-style:none;min-width:0}
.b9c-cop-senarai:empty{display:none}
.b9c-cop{position:relative;display:grid;align-items:start;margin:4px 0 0 4px;padding:4px 6px 5px 9px;text-indent:9px;border-radius:9px;background:rgba(255,255,255,.78);
  box-shadow:inset 0 0 0 2px #8A6AE8;color:#4A2F9E;font-size:.875rem;font-weight:800;line-height:1.2;transform:rotate(-1.2deg)}
.b9c-cop-no{position:absolute;left:-8px;top:-7px;width:21px;height:21px;border-radius:50%;background:#7B57E0;color:#fff;display:grid;place-items:center;text-indent:0;font-size:.875rem;font-weight:900;line-height:1;box-shadow:0 0 0 2px #fff}
.b9c-cop-teks{min-width:0;overflow-wrap:break-word}
.b9c-cop-tarikh{font-weight:900;color:#B84E0E;text-indent:0}
.b9c-cop-tarikh.kosong{color:#8E97B8;font-style:italic;font-weight:800}
.b9c-cop.baru,.b9c-cop-tarikh.baru{animation:b9c-cop .45s ease-out}
.b9c-cop.dibantu,.b9c-cop-tarikh.dibantu{outline:2px dashed #C9323F;outline-offset:1px}
@keyframes b9c-cop{0%{opacity:0;transform:scale(1.25) rotate(-5deg)}60%{opacity:1;transform:scale(.97) rotate(-1deg)}100%{opacity:1;transform:rotate(-1.2deg)}}
.b9c-cop-tarikh.baru{display:inline-block}
@keyframes b9c-loceng{0%,100%{transform:rotate(0)}30%{transform:rotate(16deg)}70%{transform:rotate(-16deg)}}
@keyframes b9c-denyut{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.b9c-loceng-badan{transform-origin:32px 8px}
.b9c-stesen.berbunyi .b9c-loceng-badan{animation:b9c-loceng .36s ease-in-out 3}
.b9c-stesen.berbunyi .b9c-stesen-ikon{animation:b9c-denyut .54s ease-in-out 2;box-shadow:inset 0 0 0 2px #EADCC0,0 0 0 5px rgba(255,201,51,.45)}
/* kapsul tembaga "Draf" */
.b9c-kapsul{position:absolute;left:0;top:0;z-index:6;width:60px;height:26px;pointer-events:none;will-change:transform}
.b9c-kapsul-badan{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(180deg,#F9E7AE 0%,#E0B04F 48%,#A77A26 100%);
  box-shadow:0 0 0 2px #6E4F17,0 4px 8px rgba(27,42,92,.35);transition:box-shadow .2s ease}
.b9c-kapsul.gerak .b9c-kapsul-badan{box-shadow:0 0 0 2px #6E4F17,0 0 0 6px rgba(255,236,160,.45),0 4px 10px rgba(27,42,92,.35)}
.b9c-kapsul.goyang .b9c-kapsul-badan{animation:b9c-getar .45s}
.b9c-kapsul-tutup{position:absolute;top:3px;bottom:3px;width:7px;border-radius:3px;background:#B8862E;box-shadow:inset 0 0 0 1.5px #6E4F17;transition:transform .4s ease}
.b9c-kapsul-tutup.kiri{left:3px}
.b9c-kapsul-tutup.kanan{right:3px}
.b9c-kapsul-label{position:relative;padding:0 5px;border-radius:5px;background:#FFFDF6;color:var(--ink);font-size:.875rem;font-weight:900;line-height:17px;box-shadow:inset 0 0 0 1px #C9A96E;transition:transform .4s ease}
.b9c-kapsul.buka .b9c-kapsul-tutup.kanan{transform:translate(10px,-4px) rotate(35deg)}
.b9c-kapsul.buka .b9c-kapsul-label{transform:translateX(7px) scale(1.05)}
/* gulungan akhir */
.b9c-gulung{position:absolute;left:50%;top:48px;z-index:8;width:min(88%,440px);transform:translateX(-50%);display:grid;filter:drop-shadow(0 10px 18px rgba(27,42,92,.32))}
.b9c-gulung[hidden]{display:none}
.b9c-gulung-kayu{position:relative;z-index:1;height:14px;margin:0 -10px;border-radius:7px;background:linear-gradient(180deg,#D69A5C,#8A5226);box-shadow:inset 0 2px 0 rgba(255,255,255,.35)}
.b9c-gulung-kertas{overflow:hidden;background:#FFF8E6;background-image:linear-gradient(90deg,rgba(138,82,38,.1),transparent 10%,transparent 90%,rgba(138,82,38,.1))}
.b9c-gulung-dalam{display:grid;gap:6px;padding:14px 18px 16px;text-align:center}
.b9c-gulung-tajuk{font-size:1.125rem;font-weight:900;line-height:1.25;color:var(--ink)}
.b9c-gulung-isi{font-size:.9375rem;font-weight:700;line-height:1.4;color:var(--ink2)}
/* tarikh cop */
.b9c-tarikh{display:grid;gap:6px}
.b9c-tarikh[hidden]{display:none}
.b9c-tarikh-label{font-size:.875rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.b9c-tarikh-cip-baris{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.b9c-tarikh-cip{min-height:48px;padding:6px 8px;border-radius:14px;background:#fff;color:var(--ink);font-size:.9375rem;font-weight:900;line-height:1.2;text-align:center;
  box-shadow:0 4px 0 rgba(27,42,92,.18),inset 0 0 0 2px #C9B6FF;transition:transform .12s ease,background-color .2s ease}
.b9c-tarikh-cip:active:not([disabled]){transform:translateY(2px)}
.b9c-tarikh-cip.betul,.b9c-tarikh-cip.kilat{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 4px 0 #1E9E63,inset 0 0 0 3px var(--hijau)}
.b9c-tarikh-cip.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 4px 0 var(--merah-d),inset 0 0 0 3px #E0555D}
.b9c-tarikh-cip.pudar{opacity:.45}
.b9c-tarikh-cip[disabled]{cursor:default}

/* =====================================================================================
   9.8 BATIK INTI PATI
   ===================================================================================== */
.b9c-batik{display:flex;flex-direction:column;gap:10px;min-width:0}
.b9c-batik > .b2-atas{order:1}
.b9c-batik > .b9c-bengkel{order:3}
.b9c-batik > .b9c-sisi{order:4}
.b9c-batik.mod-soal > .b9c-sisi{order:2}
.b9c-bengkel{display:grid;gap:8px;min-width:0;transition:opacity .3s ease,filter .3s ease}
.b9c-bengkel.malap{filter:grayscale(.55) brightness(.97);opacity:.8}
.b9c-bingkai{position:relative;padding:12px;border-radius:18px;background:linear-gradient(135deg,#CF9259,#9A5D2A);
  box-shadow:var(--bayang),inset 0 0 0 3px rgba(94,51,23,.45),inset 0 0 0 6px rgba(255,255,255,.12)}
.b9c-bingkai::before,.b9c-bingkai::after{content:"";position:absolute;top:5px;width:9px;height:9px;border-radius:50%;background:#F3E4C4;box-shadow:0 0 0 2px #6E3F1B}
.b9c-bingkai::before{left:5px}
.b9c-bingkai::after{right:5px}
.b9c-kain{position:relative;padding:10px;border-radius:6px;background-color:#FFFDF7;
  background-image:repeating-linear-gradient(0deg,rgba(185,160,120,.08) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(185,160,120,.08) 0 1px,transparent 1px 4px);
  box-shadow:inset 0 0 0 1px #EFE3C8,0 2px 0 rgba(0,0,0,.12);transition:filter .6s ease}
.b9c-bengkel.zum .b9c-bingkai{flex:none!important;transform-origin:50% 0}
.b9c-bengkel.zum .b9c-kain{flex:none!important;overflow:visible!important}
body.mod-lebar .b9c-bengkel.zum{overflow:hidden}
.b9c-kain-tajuk{display:none;margin:0 0 9px;padding:7px 10px;border-radius:8px;text-align:center;color:#FFE9A8;font-size:1rem;font-weight:900;line-height:1.25;letter-spacing:.03em;
  background:repeating-linear-gradient(45deg,#1B2A5C 0 9px,#26377A 9px 18px);box-shadow:inset 0 0 0 2px #FFE08A,inset 0 0 0 4px #1B2A5C}
.b9c-panel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.b9c-panel-grid.ganjil > .b9c-panel:last-child{grid-column:1/-1}
.b9c-panel{position:relative;overflow:hidden;display:grid;align-content:start;gap:5px;min-width:0;padding:8px 8px 9px;border-radius:12px;background:#FFFFFF;cursor:pointer;
  box-shadow:inset 0 0 0 2px #E7DCC6;transition:box-shadow .2s ease;-webkit-tap-highlight-color:transparent}
.b9c-panel:focus-visible{outline:3px solid var(--fokus);outline-offset:2px}
.b9c-celup{position:absolute;inset:0;z-index:0;background:var(--w);transform:scaleY(0);transform-origin:50% 100%;pointer-events:none}
.b9c-celup::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 15%,rgba(255,255,255,.22),transparent 45%),repeating-linear-gradient(135deg,rgba(0,0,0,.05) 0 2px,transparent 2px 7px)}
.b9c-panel > *:not(.b9c-celup){position:relative;z-index:1}
.b9c-panel.dicelup .b9c-celup{transform:none}
.b9c-panel-kepala{display:flex;align-items:flex-start;gap:6px;min-width:0}
.b9c-panel-no{display:none}
.b9c-panel-nama{flex:1 1 auto;min-width:0;padding:3px 6px 3px 9px;border-radius:8px;background:rgba(255,255,255,.93);box-shadow:inset 3px 0 0 var(--w);font-size:.875rem;font-weight:900;line-height:1.2;color:var(--ink);overflow-wrap:break-word}
.b9c-panel-kira{display:inline-block;padding:0 6px;border-radius:9px;background:#EEF0F7;font-size:.875rem;font-weight:900;line-height:1.3;color:var(--ink2);white-space:nowrap;vertical-align:1px}
.b9c-panel-kira:empty{display:none}
.b9c-motif-bingkai{display:grid;place-items:center;height:70px;min-width:0}
.b9c-motif{width:100%;height:100%;overflow:visible}
.b9c-motif-pensel path{fill:none;stroke:#A3ABBF;stroke-width:.9;stroke-dasharray:2.2 1.8;stroke-linecap:round;transition:opacity .4s ease}
.b9c-motif-lilin path{fill:none;stroke:#EDB93A;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.b9c-motif-lilin path.aktif,.b9c-motif-lilin path.siap{opacity:1}
.b9c-panel.dicelup .b9c-motif-pensel{opacity:0}
.b9c-panel.dicelup .b9c-motif-lilin path{stroke:#FBE3A0}
.b9c-batik.dilorot .b9c-motif-lilin path{stroke:#FFFFFF;transition:stroke .9s ease}
.b9c-kapsyen{display:grid;gap:3px;margin:0;padding:0;list-style:none;min-width:0}
.b9c-kapsyen:empty{display:none}
.b9c-kapsyen-baris{position:relative;padding:3px 7px 3px 19px;border-radius:7px;background:rgba(255,255,255,.93);font-size:.875rem;font-weight:800;line-height:1.22;color:var(--ink);overflow-wrap:break-word}
.b9c-kapsyen-baris::before{content:"";position:absolute;left:6px;top:.5em;width:7px;height:7px;border-radius:50%;background:#EDB93A;box-shadow:0 0 0 1.5px #B8862E}
.b9c-kapsyen-baris.dibantu{outline:2px dashed #C9323F;outline-offset:1px}
.b9c-kapsyen-baris.masuk{animation:lompat .35s ease-out both}
.b9c-batik.ada-pilih .b9c-panel{box-shadow:inset 0 0 0 2px #E7DCC6,0 0 0 3px rgba(255,201,51,.55)}
.b9c-panel.b9c-dekat{box-shadow:inset 0 0 0 3px var(--emas),0 0 0 4px rgba(255,201,51,.6)}
.b9c-panel.salah{box-shadow:inset 0 0 0 3px #E0555D,0 0 0 4px rgba(249,79,85,.4)}
.b9c-panel.salah::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;background:rgba(249,79,85,.14);pointer-events:none}
.b9c-panel.kilat{box-shadow:inset 0 0 0 3px var(--hijau),0 0 0 4px rgba(47,160,92,.4);animation:b9c-kilat .8s ease-in-out 3}
/* rak: periuk lilin dan canting */
.b9c-rak{display:flex;align-items:center;gap:10px;min-height:46px;padding:3px 12px 3px 6px;border-radius:14px;background:linear-gradient(180deg,#EBD7AE,#D9BE8F);box-shadow:inset 0 -3px 0 rgba(138,82,38,.28)}
.b9c-periuk{flex:none;width:76px;height:48px}
.b9c-periuk-svg{width:100%;height:100%;overflow:visible}
.b9c-periuk-canting{transition:opacity .2s ease}
.b9c-periuk.diangkat .b9c-periuk-canting{opacity:0}
.b9c-periuk .b9c-api{transform-box:fill-box;transform-origin:50% 100%;animation:b9c-api 1.8s ease-in-out infinite alternate}
.b9c-periuk .b9c-asap{animation:b9c-asap 3.2s ease-in-out infinite}
@keyframes b9c-api{from{transform:scale(.92)}to{transform:scale(1.05)}}
@keyframes b9c-asap{0%,100%{opacity:.25;transform:translateY(2px)}50%{opacity:.8;transform:translateY(-2px)}}
.b9c-rak-label{font-size:.875rem;font-weight:800;line-height:1.25;color:#6E4520}
/* wap semasa lorot */
.b9c-wap{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;border-radius:inherit}
.b9c-wap i{position:absolute;bottom:6%;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.85);opacity:0}
.b9c-wap i:nth-child(1){left:12%}
.b9c-wap i:nth-child(2){left:38%;animation-delay:.18s!important}
.b9c-wap i:nth-child(3){left:62%;animation-delay:.32s!important}
.b9c-wap i:nth-child(4){left:82%;animation-delay:.1s!important}
.b9c-batik.lorot-mula .b9c-wap i{animation:b9c-wap 1.5s ease-out forwards}
@keyframes b9c-wap{0%{opacity:0;transform:translateY(0) scale(.5)}35%{opacity:.85}100%{opacity:0;transform:translateY(-220px) scale(1.7)}}
.b9c-batik.lorot-mula .b9c-kain{filter:brightness(1.06) saturate(1.1)}
.b9c-batik.dilorot .b9c-kain-tajuk{display:block;animation:lompat .5s ease-out both}
.b9c-batik.dilorot .b9c-panel.dicelup{box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
/* dulang kad dan mangkuk */
.b9c-dulang{display:grid;gap:8px;min-width:0}
.b9c-dulang[hidden]{display:none}
.b9c-sisi-kepala{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0}
.b9c-baki{font-size:.875rem;font-weight:800;color:var(--ink2)}
.b9c-tangan{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:8px;min-width:0}
.b9c-tangan-slot{display:grid;min-height:64px;min-width:0;border-radius:14px}
.b9c-tangan-slot.kosong{background:rgba(27,42,92,.04);box-shadow:inset 0 0 0 2px rgba(27,42,92,.08)}
.b9c-kad-batik{position:relative;display:flex;align-items:flex-start;gap:7px;width:100%;min-height:64px;padding:8px 10px;border-radius:14px;background:#FFFDF6;text-align:left;color:var(--ink);
  font-size:.875rem;font-weight:800;line-height:1.28;box-shadow:0 4px 0 rgba(27,42,92,.2),inset 0 0 0 2px #E4D8BC;touch-action:none;user-select:none;-webkit-user-select:none;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
.b9c-kad-titik{flex:none;width:11px;height:13px;margin-top:3px;border-radius:50% 50% 50% 50% / 58% 58% 42% 42%;background:#EDB93A;box-shadow:0 0 0 1.5px #B8862E}
.b9c-kad-teks{min-width:0;overflow-wrap:break-word}
.b9c-kad-batik:active{transform:translateY(2px)}
.b9c-kad-batik.pilih{transform:translateY(-4px) rotate(-1deg);background:#FFF6D8;box-shadow:0 8px 0 var(--emas-d),inset 0 0 0 3px var(--emas)}
.b9c-kad-batik.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 4px 0 var(--merah-d),inset 0 0 0 3px #E0555D}
.b9c-kad-batik.masuk{animation:lompat .38s ease-out both}
.b9c-kad-batik.b9c-diseret{opacity:.35}
.b9c-mangkuk{position:relative;display:flex;align-items:center;gap:8px;min-width:0;min-height:52px;padding:5px 12px 5px 8px;border-radius:16px;background:#FFF4E2;color:#6E4520;font-size:.9375rem;font-weight:900;line-height:1.2;text-align:left;
  box-shadow:0 4px 0 rgba(138,82,38,.32),inset 0 0 0 2px #E2C49A;transition:box-shadow .2s ease,background-color .2s ease}
.b9c-mangkuk-svg{flex:none;width:64px;height:32px;overflow:visible}
.b9c-mangkuk-label{flex:1 1 auto;min-width:0}
.b9c-mangkuk-kira{flex:none;min-width:26px;height:26px;padding:0 7px;border-radius:13px;background:#8A5226;color:#fff;font-size:.875rem;display:grid;place-items:center}
.b9c-mangkuk-kira:empty{display:none}
.b9c-batik.ada-pilih .b9c-mangkuk{box-shadow:0 4px 0 rgba(138,82,38,.32),inset 0 0 0 2px #E2C49A,0 0 0 3px rgba(255,201,51,.6)}
.b9c-mangkuk.b9c-dekat{box-shadow:0 4px 0 rgba(138,82,38,.32),inset 0 0 0 3px var(--emas),0 0 0 4px rgba(255,201,51,.6)}
.b9c-mangkuk.terima{animation:b9c-lantun .5s ease-out}
.b9c-mangkuk.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 4px 0 var(--merah-d),inset 0 0 0 3px #E0555D}
.b9c-mangkuk.kilat{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 4px 0 #1E9E63,inset 0 0 0 3px var(--hijau);animation:b9c-kilat .8s ease-in-out 3}
.b9c-lorot{width:100%}
.b9c-lorot[hidden]{display:none}
/* titis lilin (kesilapan) */
.b9c-titis{position:absolute;left:0;top:0;z-index:45;width:12px;height:16px;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;background:#EDB93A;box-shadow:0 0 0 2px #B8862E;pointer-events:none;opacity:0}
.b9c-titis.pecah{width:26px;height:10px;margin:6px 0 0 -7px;border-radius:50%;opacity:.9!important;transition:width .12s ease,height .12s ease,margin .12s ease}
.b9c-rumus-batik li{box-shadow:inset 4px 0 0 var(--w,#C5D0EA)}
.b9c-rumus-bukan{box-shadow:inset 4px 0 0 #B8743C!important}

/* =====================================================================================
   9.9 RUMAH PERLEMBAGAAN (jalur, tanpa watak)
   ===================================================================================== */
.b9c-bhg{opacity:0}
.b9c-bhg.ada{opacity:1}
.b9c-bhg.jatuh{opacity:.82}
.b9c-bhg.mendap{animation:b9c-mendap .42s ease-out}
@keyframes b9c-mendap{0%{transform:translateY(-16px);opacity:.3}70%{transform:translateY(2px);opacity:1}100%{transform:none;opacity:1}}
.b9c-awan{animation:b9c-awan 40s linear infinite alternate}
@keyframes b9c-awan{from{transform:translateX(0)}to{transform:translateX(28px)}}
.b9c-burung path{fill:none;stroke:#2E3A63;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.b9c-rumah-pilih.j-tahun{grid-template-columns:minmax(0,1fr)}
.b9c-rumah-taip{grid-column:1 / -1;display:flex;gap:10px;align-items:stretch}
.b9c-rumah-tahun{flex:1 1 auto;min-width:0;height:56px;padding:0 14px;border-radius:18px;border:2px solid #C5D0EA;background:#fff;font:inherit;font-size:1.5rem;font-weight:900;letter-spacing:.24em;text-align:center;color:var(--ink)}
.b9c-rumah-tahun:focus{outline:none;border-color:var(--fokus);box-shadow:0 0 0 3px rgba(11,87,208,.18)}
.b9c-rumah-tahun.salah{border-color:#E0555D;background:var(--salah-bg);color:var(--salah-teks);animation:goncang .4s}
.b9c-rumah-tahun.betul,.b9c-rumah-tahun.kilat{border-color:var(--hijau);background:var(--betul-bg);color:var(--betul-teks)}
.b9c-rumah-semak{flex:none;min-width:112px}
.b9c-rumus-rumah{display:grid;gap:10px}
.b9c-papan-akhir{display:grid;gap:3px;padding:10px 14px;border-radius:14px;background:#FFF6E0;text-align:center;box-shadow:inset 0 0 0 3px #B8743C}
.b9c-papan-akhir b{font-size:1.0625rem;font-weight:900;line-height:1.25;color:var(--ink)}
.b9c-papan-akhir span{font-size:.9375rem;font-weight:700;line-height:1.4;color:var(--ink2)}

/* =====================================================================================
   MOD LEBAR (pentas 1280 x 720; .main-badan: left 300, width 720)
   ===================================================================================== */
body.mod-lebar .b2-main.b2-j-tiub .main-badan,body.mod-lebar .b2-main.b2-j-batik .main-badan{left:300px;width:720px;top:86px;bottom:10px;display:flex;flex-direction:column;align-content:stretch;overflow:hidden}
body.mod-lebar .b2-p-tiub,body.mod-lebar .b2-p-batik{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
/* sempang lembut (lembut() dalam JS) hanya untuk lajur sempit telefon; skrin lebar cukup ruang */
body.mod-lebar .b9c-tiub,body.mod-lebar .b9c-batik{-webkit-hyphens:none;hyphens:none}
body.mod-lebar .b2-j-tiub .b2-kad,body.mod-lebar .b2-j-batik .b2-kad{padding:9px 18px 10px}
body.mod-lebar .b2-j-tiub .b2-kad-isi{font-size:1.1875rem}
body.mod-lebar .b2-p-tiub > .b2-rumus,body.mod-lebar .b2-p-batik > .b2-rumus{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
body.mod-lebar .b2-p-tiub > .b2-rumus > *,body.mod-lebar .b2-p-batik > .b2-rumus > *{flex:none}
body.mod-lebar .b2-p-tiub > .b2-rumus > .b2-rumus-tokoh,body.mod-lebar .b2-p-batik > .b2-rumus > .b2-rumus-tokoh{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
/* tiub: kad atas, dinding (fleksibel), jalur bawah (bisik + tarikh atau soalan) */
body.mod-lebar .b9c-tiub{flex:1 1 auto;min-height:0;gap:8px}
body.mod-lebar .b9c-tiub > .b2-atas{flex:none}
body.mod-lebar .b9c-dinding{flex:1 1 auto;min-height:0;overflow:hidden;padding:44px 14px 18px;display:flex;flex-direction:column;justify-content:center}
body.mod-lebar .b9c-stesen-grid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:14px;row-gap:56px}
body.mod-lebar .b9c-stesen-grid.lajur-5{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:10px}
body.mod-lebar .b9c-stesen{min-height:88px;padding:8px 8px 9px;gap:5px}
body.mod-lebar .b9c-stesen-nama{font-size:.9375rem}
body.mod-lebar .b9c-stesen-ikon{width:38px;height:38px}
body.mod-lebar .b9c-ikon-svg{width:32px;height:32px}
body.mod-lebar .b9c-cop{font-size:.8125rem}
body.mod-lebar .b9c-tiub-sisi{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:stretch}
body.mod-lebar .b9c-tiub-sisi .bisik{min-height:58px;padding:8px 14px;font-size:.9375rem;line-height:1.35}
body.mod-lebar .b9c-tiub-sisi .b9c-tarikh{width:390px;align-content:center}
body.mod-lebar .b9c-tiub.mod-soal .b9c-tiub-sisi{grid-template-columns:250px minmax(0,1fr)}
body.mod-lebar .b9c-tiub.mod-soal .b9c-tiub-sisi .bisik{font-size:.875rem;align-items:flex-start}
body.mod-lebar .b9c-soal-pilih{grid-template-columns:repeat(3,minmax(0,1fr))}
body.mod-lebar .b9c-soal-pilih[data-n="2"],body.mod-lebar .b9c-soal-pilih[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
body.mod-lebar .b9c-soal-pilih .op{min-height:54px;padding:7px 12px;font-size:.9375rem}
body.mod-lebar .b9c-gulung{top:44px}
/* batik: kad atas penuh lebar; kain 470 di kiri; lajur kanan = bisik, dulang, mangkuk, Lorot, soalan */
body.mod-lebar .b9c-batik{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:470px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:10px 14px;align-items:stretch}
body.mod-lebar .b9c-batik > .b2-atas{grid-column:1 / -1;grid-row:1}
body.mod-lebar .b9c-batik > .b9c-bengkel{grid-column:1;grid-row:2;min-height:0;display:flex;flex-direction:column;gap:8px}
body.mod-lebar .b9c-batik > .b9c-sisi{grid-column:2;grid-row:2;min-height:0}
body.mod-lebar .b9c-batik .b2-kad-isi{font-size:1.125rem;line-height:1.22}
body.mod-lebar .b9c-bingkai{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
body.mod-lebar .b9c-kain{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
body.mod-lebar .b9c-rak{flex:none}
body.mod-lebar .b9c-batik-sisi{display:flex;flex-direction:column;gap:8px}
body.mod-lebar .b9c-batik-sisi .bisik{flex:0 1 auto;min-height:64px;max-height:150px;overflow-y:auto;align-items:flex-start;padding:8px 12px;font-size:.875rem;line-height:1.35}
/* semasa melukis, bisik bertinggi tetap supaya kad di bawahnya tidak melompat apabila panjang mesej berubah */
body.mod-lebar .b9c-batik[data-fasa="kad"] .b9c-batik-sisi .bisik{flex:none;height:150px}
body.mod-lebar .b9c-dulang{flex:none;display:flex;flex-direction:column;gap:8px}
body.mod-lebar .b9c-dulang > .b9c-sisi-kepala{flex-wrap:wrap;gap:0 10px}
body.mod-lebar .b9c-dulang > .b9c-sisi-kepala > *{white-space:nowrap}
body.mod-lebar .b9c-tangan{grid-template-columns:minmax(0,1fr)}
body.mod-lebar .b9c-kad-batik{min-height:56px}
body.mod-lebar .b9c-tangan-slot{min-height:56px}
body.mod-lebar .b9c-mangkuk{min-height:58px}
body.mod-lebar .b9c-batik.ada-pilih .b9c-panel-no{display:grid;flex:none;width:22px;height:22px;border-radius:7px;place-items:center;background:var(--ink);color:#fff;font-size:.8125rem;font-weight:900}
body.mod-lebar .b9c-batik .b9c-soal-pilih{grid-template-columns:minmax(0,1fr)}
body.mod-lebar .b9c-batik .b9c-soal-pilih .op{min-height:52px;padding:7px 12px;font-size:.9375rem;line-height:1.25}
body.mod-lebar .b9c-motif-bingkai{height:66px}
body.mod-lebar .b9c-panel-grid.ganjil > .b9c-panel:last-child{grid-template-columns:150px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:10px}
body.mod-lebar .b9c-panel-grid.ganjil > .b9c-panel:last-child > .b9c-panel-kepala{grid-column:1 / -1}
body.mod-lebar .b9c-panel-grid.ganjil > .b9c-panel:last-child > .b9c-motif-bingkai{grid-column:1}
body.mod-lebar .b9c-panel-grid.ganjil > .b9c-panel:last-child > .b9c-kapsyen{grid-column:2;align-content:start}
/* rumah: adegan penuh; kad soalan di lajur kanan */
body.mod-lebar .b2-main.b2-j-rumah .main-badan{left:796px;width:456px;top:84px;bottom:20px;display:flex;flex-direction:column;align-content:stretch}
body.mod-lebar .b2-p-rumah{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
body.mod-lebar .b2-p-rumah .b2-kad-isi{font-size:1.3125rem}
body.mod-lebar .b2-p-rumah .b2-bawah.b9c-ada-rumus{min-height:0;flex:1 1 auto;display:flex;flex-direction:column}
body.mod-lebar .b2-p-rumah .b2-rumus{flex:0 1 auto;display:flex;flex-direction:column;min-height:0}
body.mod-lebar .b2-p-rumah .b2-rumus > .b9c-rumus-rumah{min-height:0;flex:1 1 auto;overflow-y:auto;padding-right:4px}
body.mod-lebar .b2-p-rumah .b2-rumus > .btn{flex:none}
body.mod-lebar .b2-p-rumah .b2-rumus-tokoh{grid-template-columns:1fr}

/* =====================================================================================
   TELEFON (390 x 844) dan TELEFON PENDEK (375 x 667)
   ===================================================================================== */
/* helaian bawah yang tetap: bisik sentiasa kelihatan; tarikh (tiub) dan dulang kad (batik) di dalamnya */
body.mod-telefon .b9c-sisi{position:fixed;left:0;right:0;bottom:0;z-index:20;max-width:560px;margin:0 auto;display:grid;gap:7px;padding:8px 12px max(10px,env(safe-area-inset-bottom));
  border-radius:20px 20px 0 0;background:rgba(255,253,246,.98);box-shadow:0 -6px 18px rgba(27,42,92,.2),inset 0 3px 0 #fff}
body.mod-telefon .b9c-sisi::before{content:"";justify-self:center;width:42px;height:5px;border-radius:3px;background:#D6DCEB}
body.mod-telefon .b9c-sisi .bisik{min-height:2.7em;padding:6px 10px;font-size:.875rem;line-height:1.32}
body.mod-telefon .b9c-tiub.mod-soal .b9c-sisi,body.mod-telefon .b9c-batik.mod-soal .b9c-sisi{position:static;max-width:none;margin:0;padding:12px;border-radius:20px;box-shadow:var(--bayang)}
body.mod-telefon .b9c-tiub.mod-soal .b9c-sisi::before,body.mod-telefon .b9c-batik.mod-soal .b9c-sisi::before{display:none}
body.mod-telefon .b2-j-tiub .b2-kad-isi,body.mod-telefon .b2-j-batik .b2-kad-isi{font-size:1rem;line-height:1.25}
body.mod-telefon .b9c-tarikh-cip{font-size:.875rem;padding:6px 5px}
/* telefon: ruang teks cop cukup untuk perkataan panjang ("Perlembagaan", "memorandum") tanpa dipotong di tengah */
body.mod-telefon .b9c-dinding{padding-left:6px;padding-right:6px}
body.mod-telefon .b9c-stesen-grid{column-gap:38px}
body.mod-telefon .b9c-stesen{padding:9px 6px 10px}
body.mod-telefon .b9c-cop{padding:4px 5px 5px 8px;text-indent:8px}
body.mod-telefon .b9c-paip-a{stroke-width:11}
body.mod-telefon .b9c-paip-b{stroke-width:7}
body.mod-telefon .b9c-paip-c{stroke-width:2}
body.mod-telefon .b9c-gulung{top:40px;width:calc(100% - 20px)}
/* batik telefon: mangkuk di baris kepala dulang, dua kad di bawahnya */
body.mod-telefon .b9c-dulang{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"kepala mangkuk" "tangan tangan";align-items:center;gap:7px 10px}
body.mod-telefon .b9c-dulang > .b9c-sisi-kepala{grid-area:kepala;flex-direction:column;align-items:flex-start;gap:0}
body.mod-telefon .b9c-dulang .b9c-dulang-label{display:none}
body.mod-telefon .b9c-dulang .b9c-baki{font-size:.875rem;font-weight:900;color:var(--ink2)}
body.mod-telefon .b9c-dulang > .b9c-tangan{grid-area:tangan}
body.mod-telefon .b9c-dulang > .b9c-mangkuk{grid-area:mangkuk;min-height:48px;padding:3px 10px 3px 6px;font-size:.875rem}
body.mod-telefon .b9c-mangkuk-svg{width:50px;height:26px}
body.mod-telefon .b9c-kad-batik{min-height:72px}
body.mod-telefon .b9c-motif-bingkai{height:64px}
body.mod-telefon .b9c-bingkai{padding:10px}
body.mod-telefon .b9c-kain{padding:8px}
body.mod-telefon .b9c-panel{padding:7px 6px 8px}
body.mod-telefon .b9c-panel-nama{padding:3px 4px 3px 8px}
body.mod-telefon .b9c-kapsyen-baris{padding:3px 5px 3px 17px}
body.mod-telefon .b9c-kapsyen-baris::before{left:5px}
body.mod-telefon .b9c-rak{min-height:42px}
body.mod-telefon .b9c-periuk{width:66px;height:42px}
@media (max-height:700px){
  body.mod-telefon .b9c-sisi{gap:6px;padding-top:6px}
  body.mod-telefon .b9c-sisi .bisik{min-height:2.5em;padding:5px 10px}
  body.mod-telefon .b9c-kad-batik{min-height:64px;padding:7px 9px}
  body.mod-telefon .b9c-tangan-slot{min-height:58px}
  body.mod-telefon .b9c-tarikh-cip{min-height:46px}
  body.mod-telefon .main.b2-main.b2-j-rumah .latar-babak{height:250px}
  body.mod-telefon .main.b2-main.b2-j-rumah .main-badan{margin-top:194px}
}
@media (max-width:370px){
  body.mod-telefon .b9c-stesen-grid{column-gap:34px}
}
@media (prefers-reduced-motion:reduce){
  .b9c-awan,.b9c-periuk .b9c-api,.b9c-periuk .b9c-asap,.b9c-bhg.mendap,.b9c-cop.baru,.b9c-cop-tarikh.baru,.b9c-kad-batik.masuk,.b9c-kapsyen-baris.masuk{animation:none}
  .b9c-batik.lorot-mula .b9c-wap i{animation:none;opacity:0}
  .b9c-batik.dilorot .b9c-kain-tajuk{animation:none}
}