/* ===== Babak · pakej Bab 3, kumpulan 3c (js/pakej-bab-03-3c.js): jambatan, kalendar, runding, bina.
   Awalan kelas b3-. Susun atur diskop dengan .b2-j-<jenis> dan body.mod-lebar / body.mod-telefon seperti enjin-bab.css.
   Teks pada telefon sekurang-kurangnya 14 px; sasaran sentuh sekurang-kurangnya 44 px. ===== */

/* ---------- Dikongsi ---------- */
/* klon terapung: spesifisiti lebih tinggi supaya tidak ditindih oleh position:relative kelas asal (papan, kad, helaian) */
.b2-main .b3-klon{position:absolute;z-index:40;margin:0;pointer-events:none;box-sizing:border-box}
.b2-main .b3-klon-seret{z-index:45;opacity:.97}
.b3-goncang{animation:goncang .4s}
.b3-percik{position:absolute;z-index:41;width:78px;height:28px;margin:-14px 0 0 -39px;border-radius:50%;border:3px solid rgba(255,255,255,.95);box-shadow:0 0 0 5px rgba(143,216,248,.55);pointer-events:none;animation:b3-percik .75s ease-out forwards}
@keyframes b3-percik{from{transform:scale(.3);opacity:1}to{transform:scale(1.7);opacity:0}}
@keyframes b3-denyut{0%,100%{box-shadow:0 0 0 0 rgba(255,229,127,.55)}50%{box-shadow:0 0 0 6px rgba(255,229,127,.22)}}
.b3-no{display:none}
body.mod-lebar .b3-no:empty{visibility:hidden}
body.mod-lebar .b3-no{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:9px;background:rgba(255,255,255,.8);color:var(--ink2);font-size:.875rem;font-weight:900;box-shadow:0 2px 0 rgba(27,42,92,.18)}
.b2-p-jambatan .b2-kad-isi,.b2-p-runding .b2-kad-isi{font-size:1rem;line-height:1.35}
/* label kecil kad teras (11–12 px) dinaikkan ke 14 px dalam enjin kumpulan ini */
.b2-p-jambatan .b2-kad-no,.b2-p-kalendar .b2-kad-no,.b2-p-runding .b2-kad-no,.b2-p-bina .b2-kad-no{font-size:.875rem;letter-spacing:.03em;text-transform:none;line-height:1.3}
.b2-p-bina .b3-bn-cip{font-size:.875rem;height:26px}
/* bar tindakan melekat (telefon sahaja): muncul apabila papan atau kad dipilih */
.b3-bar-tindak{position:fixed;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;justify-content:center;pointer-events:none}
body.mod-telefon .b3-jb:has(> .b3-bar-tindak:not([hidden])),body.mod-telefon .b3-rd:has(> .b3-bar-tindak:not([hidden])){padding-bottom:72px}
.b3-bar-tindak .btn{pointer-events:auto;min-width:230px;box-shadow:0 6px 0 var(--emas-d),0 12px 24px rgba(27,42,92,.32)}
.b3-bar-tindak .btn .ikon{width:20px;height:20px}
.b3-jb-letak2 .ikon{transform:rotate(-90deg)}
body.mod-lebar .b3-bar-tindak{display:none!important}

/* rumusan */
.b3-rumus-papan,.b3-rumus-kalendar{display:grid;gap:6px}
.b3-rumus-papan li,.b3-rumus-kalendar li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;padding:7px 10px;border-radius:12px;background:#F3F6FD;font-size:.875rem;font-weight:800;line-height:1.35}
.b3-rumus-papan b{width:26px;height:26px;border-radius:50%;background:#B8743C;color:#fff;display:grid;place-items:center;font-size:.875rem}
.b3-rumus-kalendar b{justify-self:start;padding:3px 9px;border-radius:9px;background:#C9323F;color:#fff;font-size:.875rem;white-space:nowrap}
.b3-rumus-kalendar li{grid-template-columns:minmax(0,1fr);gap:4px}
body.mod-lebar .b3-rumus-kalendar li{grid-template-columns:184px minmax(0,1fr);gap:10px}
.b3-rumus-dua{display:grid;gap:10px}
.b3-rumus-dua > div{border-radius:14px;padding:9px 12px;display:grid;gap:6px}
.b3-rumus-dua .kukuh{background:var(--betul-bg)}
.b3-rumus-dua .reput{background:#FFF1EF}
.b3-rumus-dua b{font-size:.9375rem}
.b3-rumus-dua ul{display:grid;gap:6px}
.b3-rumus-dua li{position:relative;display:grid;gap:2px;padding-left:15px;font-size:.875rem;font-weight:800;line-height:1.35;color:var(--ink)}
.b3-rumus-dua li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--hijau)}
.b3-rumus-dua .reput li::before{background:var(--merah)}
.b3-rumus-dua li span{font-weight:700;color:var(--ink2)}
.b3-rumus-dua s{text-decoration-thickness:2px;text-decoration-color:rgba(201,50,63,.75)}

/* skrin lebar: enjin bukan jalur kumpulan ini bermula di atas dan boleh ditatal jika Rumusan panjang */
body.mod-lebar .b2-main.b2-j-jambatan .main-badan,body.mod-lebar .b2-main.b2-j-kalendar .main-badan,body.mod-lebar .b2-main.b2-j-runding .main-badan{left:300px;width:720px;top:86px;bottom:12px;align-content:start;overflow-y:auto;padding:2px 4px 10px}
body.mod-lebar .b2-p-jambatan,body.mod-lebar .b2-p-kalendar,body.mod-lebar .b2-p-runding{gap:12px}

/* =====================================================================================
   3.9 JAMBATAN PAPAN
   ===================================================================================== */
.b3-jb{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"adegan" "bisik" "dulang";gap:10px}
.b3-jb-adegan{grid-area:adegan}.b3-jb > .bisik{grid-area:bisik}.b3-jb-dulang{grid-area:dulang}
.b3-jb-adegan{position:relative;isolation:isolate;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;box-shadow:var(--lip),inset 0 0 0 3px rgba(255,255,255,.5);background:linear-gradient(#5CC5F2,#1E8FD0)}
/* riak air: lapisan berasingan yang digerakkan dengan transform (murah untuk dilukis semula) */
.b3-jb-adegan::before{content:"";position:absolute;z-index:0;top:0;bottom:0;left:-72px;right:0;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='32'%3E%3Cpath d='M6 10q6-5 12 0t12 0M42 25q6-5 12 0t12 0' fill='none' stroke='white' stroke-opacity='.5' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/72px 32px;
  animation:b3-arus 6s linear infinite;will-change:transform}
@keyframes b3-arus{to{transform:translateX(72px)}}
.b3-jb-tebing{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;min-height:40px;padding:5px 12px;
  background:radial-gradient(circle at 8% 40%,#3F9E47 0 9px,transparent 10px),radial-gradient(circle at 92% 45%,#3F9E47 0 11px,transparent 12px),linear-gradient(#8ADB63,#62B94B)}
.b3-jb-tebing.jauh{box-shadow:inset 0 -7px 0 #EAD59C;padding-bottom:11px}
.b3-jb-tebing.dekat{box-shadow:inset 0 7px 0 #EAD59C;padding-top:11px;background:radial-gradient(circle at 6% 60%,#3F9E47 0 10px,transparent 11px),radial-gradient(circle at 95% 55%,#3F9E47 0 8px,transparent 9px),linear-gradient(#62B94B,#4FA63F)}
.b3-jb-panji{display:inline-flex;align-items:baseline;gap:6px;max-width:100%;padding:4px 12px;border-radius:12px;background:#FFFDF5;color:var(--ink);box-shadow:0 3px 0 rgba(27,42,92,.25);font-size:.875rem;line-height:1.25;text-align:center}
.b3-jb-panji small{font-size:.875rem;font-weight:900;color:var(--teal-teks);text-transform:uppercase;letter-spacing:.06em}
.b3-jb-panji b{font-weight:900}
.b3-jb-jambatan{position:relative;z-index:1;display:flex;flex-direction:column-reverse;align-items:center;gap:5px;padding:8px 26px}
.b3-jb-lubang{position:relative;display:grid;width:calc(100% - var(--i) * 14px);min-height:24px;border-radius:7px;border:2px dashed rgba(255,255,255,.62)}
.b3-jb-lubang::before,.b3-jb-lubang::after{content:"";position:absolute;top:-5px;bottom:-5px;width:9px;border-radius:4px;background:linear-gradient(90deg,#8A5226,#6E3F1B);box-shadow:0 2px 0 rgba(0,0,0,.2)}
.b3-jb-lubang::before{left:-15px}.b3-jb-lubang::after{right:-15px}
.b3-jb-kosong{display:block}
.b3-jb-lubang.aktif{min-height:46px;border:3px solid #FFE57F;background:rgba(255,246,216,.14);animation:b3-denyut 1.8s ease-in-out infinite}
.b3-jb-letak{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:42px;padding:4px 10px;border-radius:4px;color:#fff;font-weight:900;font-size:.9375rem;text-shadow:0 1px 2px rgba(27,42,92,.6)}
.b3-jb-letak .ikon{width:20px;height:20px;transform:rotate(-90deg)}
.b3-jb-adegan.b3-sedia .b3-jb-letak{background:rgba(255,201,51,.94);color:var(--ink);text-shadow:none}
.b3-jb-lubang.ada{border:0;min-height:0;background:none;animation:none}
.b3-jb-kayu,.b3-jb-papan{color:#3B2208;background:repeating-linear-gradient(180deg,rgba(138,82,38,0) 0 7px,rgba(138,82,38,.12) 7px 8px),linear-gradient(#F4D6A2,#DEAA66)}
.b3-jb-kayu{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 8px;width:100%;min-height:44px;padding:6px 22px;border-radius:6px;text-align:center;font-size:.875rem;font-weight:900;line-height:1.25;
  background:radial-gradient(circle at 10px 50%,#6E3F1B 2.6px,transparent 3.2px),radial-gradient(circle at calc(100% - 10px) 50%,#6E3F1B 2.6px,transparent 3.2px),repeating-linear-gradient(180deg,rgba(138,82,38,0) 0 7px,rgba(138,82,38,.12) 7px 8px),linear-gradient(#F4D6A2,#DEAA66);
  box-shadow:inset 0 -4px 0 #B9803F,0 3px 0 rgba(27,42,92,.25)}
.b3-jb-kayu .b3-jb-teks{flex:1 1 100%}
.b3-jb-lubang.jatuh .b3-jb-kayu{animation:b3-hentak .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes b3-hentak{0%{transform:translateY(-12px) scale(1.05)}60%{transform:translateY(2px) scale(.99)}100%{transform:none}}
.b3-jb-lubang.dibantu .b3-jb-kayu{background:radial-gradient(circle at 10px 50%,#8E1F2A 2.6px,transparent 3.2px),radial-gradient(circle at calc(100% - 10px) 50%,#8E1F2A 2.6px,transparent 3.2px),linear-gradient(#FBD0C4,#EFA590);color:#6B1520;box-shadow:inset 0 -4px 0 #C9323F,0 3px 0 rgba(27,42,92,.25)}
.b3-jb-lubang.emas .b3-jb-kayu{box-shadow:inset 0 -4px 0 #E8971A,0 0 0 3px #FFE57F,0 0 16px rgba(255,229,127,.85);animation:b3-emas .6s ease-out}
@keyframes b3-emas{0%{transform:none}40%{transform:scale(1.03)}100%{transform:none}}
.b3-jb-dulang{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.b3-jb-papan{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-height:48px;padding:7px 12px;border-radius:10px;text-align:left;font-size:.875rem;font-weight:800;line-height:1.28;
  box-shadow:0 4px 0 #9A6530,0 6px 10px rgba(27,42,92,.12);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform .15s ease,box-shadow .15s ease}
.b3-jb-teks{min-width:0;flex:1 1 12em}
.b3-jb-papan:active:not([disabled]){transform:translateY(2px)}
.b3-jb-papan.pilih{transform:translateY(-4px) rotate(-1deg);box-shadow:0 8px 0 #9A6530,0 0 0 3px #FFC933,0 14px 20px rgba(27,42,92,.28)}
.b3-jb-papan.diangkat,.b3-jb-papan.b3-diseret{visibility:hidden}
.b3-jb-papan.salah{background:linear-gradient(#FFD8DA,#F6AAAF);color:var(--salah-teks);box-shadow:0 4px 0 var(--merah-d),0 0 0 3px #E0555D;animation:goncang .4s}
.b3-jb-papan.kilat{background:linear-gradient(#E5FAEF,#BDEBD2);color:var(--betul-teks);box-shadow:0 4px 0 #1E9E63,0 0 0 3px var(--hijau)}
.b3-jb-papan.reput{background:linear-gradient(#CFCDB9,#AAA891);color:#4C4A3C;box-shadow:0 3px 0 #807E6A;cursor:default}
.b3-jb-papan.reput .b3-jb-teks{text-decoration:line-through;text-decoration-thickness:2px}
.b3-jb-papan.reput::after{content:"Reput";position:absolute;right:8px;top:-10px;padding:1px 9px;border-radius:9px;background:var(--merah-d);color:#fff;font-size:.875rem;font-weight:900}
.b3-jb-papan.retak::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:16px;margin-left:-8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 60' preserveAspectRatio='none'%3E%3Cpath d='M9 0 L4 14 L11 26 L5 40 L10 52 L7 60' fill='none' stroke='%238E1F2A' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.b3-jb-papan.belah-kiri{clip-path:polygon(0 0,55% 0,47% 38%,54% 68%,47% 100%,0 100%)}
.b3-jb-papan.belah-kanan{clip-path:polygon(55% 0,100% 0,100% 100%,47% 100%,54% 68%,47% 38%)}
.b3-jb-tarikh{flex:none;padding:2px 8px;border-radius:9px;background:var(--ink);color:#fff;font-size:.875rem;font-weight:900;white-space:nowrap}
.b3-jb-arak{position:absolute;left:0;top:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
/* skrin lebar: adegan mengisi tepat baki tinggi pentas (tebing seberang tidak terpotong); dulang boleh melimpah dan ditatal */
body.mod-lebar .b2-main.b2-j-jambatan .main-badan{grid-template-rows:minmax(0,1fr)}
body.mod-lebar .b2-p-jambatan{grid-template-rows:auto minmax(0,1fr)}
body.mod-lebar .b3-jb{grid-template-columns:380px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"adegan bisik" "adegan dulang";column-gap:16px;row-gap:8px;align-items:start}
body.mod-lebar .b3-jb-adegan{align-self:stretch;min-height:0}
body.mod-lebar .b3-jb-tebing{min-height:50px}
body.mod-lebar .b3-jb-jambatan{flex:1 1 auto;justify-content:flex-start;gap:7px;padding:10px 22px}
body.mod-lebar .b3-jb-lubang{flex:1 0 auto;max-height:none;width:calc(100% - var(--i) * 12px);min-height:40px}
body.mod-lebar .b3-jb-lubang.aktif{min-height:52px}
body.mod-lebar .b3-jb-kayu{min-height:100%;font-size:.875rem;padding:5px 20px}
body.mod-lebar .b3-jb-dulang{grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content;gap:5px;align-self:stretch;align-content:start;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;margin:-8px -6px 0;padding:10px 6px 8px}
body.mod-lebar .b3-jb-papan{min-height:44px;font-size:.875rem;line-height:1.25;padding:5px 12px 5px 10px}
@media (max-height:700px){
  body.mod-telefon .b3-jb-tebing{min-height:40px;padding-top:5px;padding-bottom:9px}
  body.mod-telefon .b3-jb-tebing.dekat{padding-top:9px;padding-bottom:5px}
  body.mod-telefon .b3-jb-lubang{min-height:24px}
  body.mod-telefon .b3-jb-papan{min-height:46px;padding-top:6px;padding-bottom:6px}
}

/* =====================================================================================
   3.10 KALENDAR KOYAK
   ===================================================================================== */
.b3-kl{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"kal" "kawal" "bisik" "garis";gap:12px}
.b3-kl-kalendar{grid-area:kal}.b3-kl-kawal{grid-area:kawal}.b3-kl > .bisik{grid-area:bisik}.b3-kl-bingkai{grid-area:garis}
.b3-kl-kad .b2-kad-isi{font-size:1.0625rem}
.b3-kl-cipbaris{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.b3-kl-cip{display:inline-flex;align-items:center;gap:5px;min-height:28px;padding:2px 10px;border-radius:14px;background:#EEF2FB;color:var(--ink);font-size:.875rem;font-weight:800;line-height:1.2}
.b3-kl-cip .ikon{width:16px;height:16px;color:var(--teal-d)}
.b3-kl-cip.tarikh{background:#FFF1BF;color:#7A4200}
.b2-kad.salah .b3-kl-cip,.b2-kad.betul .b3-kl-cip{background:rgba(255,255,255,.7)}
.b3-kl-kalendar{position:relative;justify-self:center;width:min(100%,240px);padding-top:26px}
.b3-kl-tali{position:absolute;left:50%;top:5px;width:132px;height:28px;margin-left:-66px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 28'%3E%3Cpath d='M6 28 L66 4 L126 28' fill='none' stroke='%236E3F1B' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.b3-kl-paku{position:absolute;left:50%;top:0;width:15px;height:15px;margin-left:-7.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#F1F4FB,#6074A8);box-shadow:0 2px 0 rgba(0,0,0,.25);z-index:3}
.b3-kl-kepala{position:relative;z-index:2;display:flex;justify-content:center;align-items:baseline;gap:8px;padding:10px 12px 8px;border-radius:14px 14px 0 0;background:linear-gradient(#E0454D,#C9323F);color:#fff;font-weight:900;letter-spacing:.08em;box-shadow:inset 0 -3px 0 rgba(0,0,0,.16)}
.b3-kl-kepala::before,.b3-kl-kepala::after{content:"";position:absolute;top:-7px;width:10px;height:15px;border-radius:5px;background:#C5D0EA;box-shadow:inset 0 -3px 0 #8594BD}
.b3-kl-kepala::before{left:26%}.b3-kl-kepala::after{right:26%}
.b3-kl-bulan{font-size:1.125rem}.b3-kl-tahun{font-size:1rem;opacity:.92}
.b3-kl-pad{position:relative}
.b3-kl-lapis{position:absolute;left:5px;right:5px;bottom:-8px;height:14px;border-radius:0 0 12px 12px;background:#EFE3C6;box-shadow:0 4px 0 #DCCBA6}
.b3-kl-helai{position:relative;display:grid;justify-items:center;align-content:center;min-height:128px;padding:8px 10px 14px;border-radius:0 0 14px 14px;background:#FFFDF5;box-shadow:0 5px 14px rgba(27,42,92,.16);transform-origin:50% 0}
.b3-kl-helai::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:radial-gradient(circle at 6px 0,#E4D5B4 2.5px,transparent 3px) 0 0/12px 6px repeat-x}
.b3-kl-no{font-size:4.75rem;line-height:1;font-weight:900;color:var(--ink);letter-spacing:-.02em}
.b3-kl-minggu{font-size:1.125rem;font-weight:900;color:var(--ink2);letter-spacing:.08em;text-transform:uppercase}
.b3-kl-helai.ahad .b3-kl-no,.b3-kl-helai.ahad .b3-kl-minggu{color:#C9323F}
.b3-kl-helai.salah{background:var(--salah-bg);box-shadow:0 5px 14px rgba(27,42,92,.16),inset 0 0 0 4px #E0555D}
.b3-kl-helai.salah .b3-kl-no,.b3-kl-helai.salah .b3-kl-minggu{color:var(--salah-teks)}
.b3-kl-helai.kilat{background:var(--betul-bg);box-shadow:0 5px 14px rgba(27,42,92,.16),inset 0 0 0 4px var(--hijau)}
.b3-kl-helai.kilat .b3-kl-no,.b3-kl-helai.kilat .b3-kl-minggu{color:var(--betul-teks)}
.b3-kl-bulat{position:absolute;left:50%;top:4px;width:124px;height:86px;margin-left:-62px;pointer-events:none;overflow:visible}
body.mod-lebar .b3-kl-bulat{top:8px;width:150px;height:112px;margin-left:-75px}
.b3-kl-bulat ellipse{fill:none;stroke:#E0454D;stroke-width:5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;opacity:0}
.b3-kl-helai.ditanda .b3-kl-bulat ellipse{opacity:1;animation:b3-lukis .5s ease-out forwards}
.b3-kl-helai.kilat .b3-kl-bulat ellipse{stroke:var(--hijau)}
@keyframes b3-lukis{to{stroke-dashoffset:0}}
.b3-klon.b3-kl-koyak,.b3-klon.b3-kl-terbang{box-shadow:0 8px 18px rgba(27,42,92,.22)}
.b3-kl-kawal{display:flex;align-items:center;justify-content:center;gap:6px;width:100%}
.b3-kl-btn{flex:none;width:50px;height:50px;border-radius:16px;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 4px 0 rgba(27,42,92,.22),inset 0 0 0 2px var(--garis);touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.b3-kl-btn:active:not([disabled]){transform:translateY(3px);box-shadow:0 1px 0 rgba(27,42,92,.22),inset 0 0 0 2px var(--garis)}
.b3-kl-btn[disabled]{opacity:.38;cursor:default}
.b3-kl-btn .ikon{width:22px;height:22px;stroke-width:3}
.b3-kl-dua{display:flex}.b3-kl-dua .ikon + .ikon{margin-left:-13px}
.b3-kl-tanda{flex:1 1 auto;max-width:180px;min-height:50px;padding:6px 14px;font-size:1.0625rem}
.b3-kl-bingkai{background:#fff;border-radius:20px;padding:10px 12px 12px;box-shadow:var(--lip);display:grid;gap:8px;align-content:start}
.b3-kl-garis-label{display:flex;align-items:center;gap:6px;font-size:.875rem;font-weight:900;color:var(--teal-teks);line-height:1.25}
.b3-kl-garis-label .ikon{width:17px;height:17px;flex:none}
.b3-kl-garis{display:flex;flex-wrap:wrap;gap:5px}
.b3-kl-item{display:flex;align-items:center;gap:8px;min-width:0}
.b3-kl-terkini{font-size:.875rem;font-weight:800;line-height:1.35;color:var(--ink2)}
body.mod-lebar .b3-kl-terkini{display:none}
body.mod-telefon .b3-kl-ringkas{display:none}
body.mod-telefon .b3-kl-mini{width:42px}
.b3-kl-mini{flex:none;width:50px;display:grid;justify-items:center;gap:1px;padding:8px 0 4px;border-radius:8px;background:#FFFDF5;box-shadow:inset 0 5px 0 #C9323F,0 2px 0 #DCCBA6,0 0 0 1px #EFE3C6;line-height:1}
.b3-kl-mini b{font-size:1.125rem;font-weight:900;color:var(--ink)}
.b3-kl-mini small{font-size:.875rem;font-weight:800;color:var(--ink2)}
.b3-kl-ringkas{min-width:0;font-size:.875rem;font-weight:800;line-height:1.25;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.b3-kl-item.kosong .b3-kl-mini{background:#F3F6FD;box-shadow:inset 0 5px 0 #C5D0EA,0 0 0 1px #E3E9F7}
.b3-kl-item.kosong .b3-kl-mini b{color:#AEB9D8}
.b3-kl-item.dibantu .b3-kl-mini{box-shadow:inset 0 5px 0 #C9323F,0 0 0 2px #F49AA0}
.b3-kl-item.dibantu .b3-kl-ringkas{color:var(--salah-teks)}
.b3-kl-item.tunggu .b3-kl-mini,.b3-kl-item.tunggu .b3-kl-ringkas{visibility:hidden}
.b3-kl-item.masuk{animation:lompat .4s ease-out}
body.mod-lebar .b3-kl{grid-template-columns:340px minmax(0,1fr);grid-template-rows:auto auto 1fr;grid-template-areas:"kal bisik" "kal garis" "kawal garis";column-gap:20px;row-gap:12px;align-items:start}
body.mod-lebar .b3-kl-kalendar{width:262px}
body.mod-lebar .b3-kl-no{font-size:7rem}
body.mod-lebar .b3-kl-helai{min-height:184px}
body.mod-lebar .b3-kl-garis{display:grid;grid-template-columns:1fr;gap:6px}
body.mod-lebar .b3-kl-item{min-height:36px}
body.mod-lebar .b3-kl-mini{padding:6px 0 3px}
.b3-kl-item.kosong .b3-kl-ringkas{color:#9AA7CB;font-weight:700}
body.mod-lebar .b3-kl-ringkas{font-size:.9375rem;-webkit-line-clamp:1}
body.mod-lebar .b3-kl-kawal{align-self:start}
body.mod-lebar .b3-kl-btn{width:50px;height:52px}
body.mod-lebar .b3-kl-tanda{min-height:52px}
@media (max-height:700px){
  body.mod-telefon .b3-kl{gap:9px}
  body.mod-telefon .b3-kl-no{font-size:4rem}
  body.mod-telefon .b3-kl-helai{min-height:104px}
  body.mod-telefon .b3-kl-btn{width:46px;height:46px}
  body.mod-telefon .b3-kl-tanda{min-height:46px}
}
@media (max-width:370px){ .b3-kl-btn{width:46px} .b3-kl-kawal{gap:5px} }

/* =====================================================================================
   3.11 MEJA DAMAI
   ===================================================================================== */
.b3-rd{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"meter" "bilik" "bisik" "tangan";gap:10px}
.b3-rd-meter{grid-area:meter}.b3-rd-bilik{grid-area:bilik}.b3-rd > .bisik{grid-area:bisik}.b3-rd-tangan{grid-area:tangan}
.b3-rd-situasi .b2-kad-isi{font-size:.9375rem;font-weight:800;line-height:1.4}
.b3-rd-meter{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px 12px;border-radius:16px;background:#fff;box-shadow:var(--lip)}
.b3-rd-meter-label{display:flex;align-items:center;gap:4px;font-size:.875rem;font-weight:900;color:var(--ink)}
.b3-rd-meter-label .ikon{width:18px;height:18px;color:var(--merah-d)}
.b3-rd-meter-bar{position:relative;height:16px;border-radius:8px;background:#EEF2FB;overflow:hidden;box-shadow:inset 0 2px 0 rgba(27,42,92,.08)}
.b3-rd-meter-isi{position:absolute;left:0;top:0;bottom:0;border-radius:8px;background:linear-gradient(90deg,#FFC933,#F94F55)}
.b3-rd-meter[data-aras="sederhana"] .b3-rd-meter-isi{background:linear-gradient(90deg,#8ADB63,#FFC933)}
.b3-rd-meter[data-aras="rendah"] .b3-rd-meter-isi,.b3-rd-meter[data-aras="damai"] .b3-rd-meter-isi{background:linear-gradient(90deg,#1A9A5C,#8ADB63)}
.b3-rd-meter-teks{min-width:82px;text-align:right;font-size:.875rem;font-weight:900;color:var(--salah-teks)}
.b3-rd-meter[data-aras="sederhana"] .b3-rd-meter-teks{color:#7A4200}
.b3-rd-meter[data-aras="rendah"] .b3-rd-meter-teks,.b3-rd-meter[data-aras="damai"] .b3-rd-meter-teks{color:var(--betul-teks)}
.b3-rd-bilik{position:relative;display:grid;gap:4px;padding:8px 10px;border-radius:20px;background:repeating-linear-gradient(90deg,rgba(184,116,60,.08) 0 1px,transparent 1px 34px),linear-gradient(#F4E8CF,#E8D5B0);box-shadow:var(--lip),inset 0 0 0 3px rgba(255,255,255,.6)}
.b3-rd-bilik.damai{box-shadow:var(--lip),inset 0 0 0 3px var(--hijau)}
.b3-rd-pihak{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.875rem;font-weight:900;color:var(--ink);text-align:center;line-height:1.2}
.b3-rd-pihak i{width:12px;height:12px;border-radius:50%;background:#12998A;flex:none}
.b3-rd-pihak.bawah i{background:#EC6F1F}
.b3-rd-lantai{position:relative}
.b3-rd-meja{display:block;width:100%;height:auto;max-height:190px;margin-inline:auto}
.b3-rd-kilat{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:0}
.b3-rd-kilat.b3-jalan{animation:b3-kilat .9s ease-out}
@keyframes b3-kilat{0%{opacity:0}20%{opacity:.95}40%{opacity:.25}60%{opacity:.9}100%{opacity:0}}
.b3-rd-bentang{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48%;min-height:46px;padding:6px 10px;border-radius:12px;border:2px dashed rgba(255,253,245,.95);background:rgba(110,63,27,.42);color:#fff;font-weight:900;font-size:.875rem;line-height:1.2;display:flex;align-items:center;justify-content:center;gap:6px;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.b3-rd-bentang .ikon{width:18px;height:18px;flex:none}
.b3-rd-bilik.b3-sedia .b3-rd-bentang{border:3px solid #FFE57F;background:rgba(255,201,51,.94);color:var(--ink);text-shadow:none;animation:b3-denyut 1.8s ease-in-out infinite}
.b3-rd-timbun{position:absolute;left:11%;top:50%;width:36px;height:30px;margin-top:-15px;border-radius:5px;background:#FFFDF5;box-shadow:3px 3px 0 #EFE3C6,6px 6px 0 #DCCBA6;display:grid;place-items:center;font-weight:900;font-size:1rem;color:var(--betul-teks);transition:opacity .3s ease}
.b3-rd-timbun[data-n="0"]{opacity:0}
.b3-rd-timbun.terima{animation:lompat .4s ease-out}
.b3-rd-salam{position:absolute;left:50%;top:50%;width:124px;height:124px;margin:-62px 0 0 -62px;pointer-events:none;opacity:0;overflow:visible;z-index:2}
.b3-rd-salam.besar{width:176px;height:176px;margin:-88px 0 0 -88px}
.b3-rd-salam.b3-jalan{animation:b3-salam 1.7s ease-in-out forwards}
.b3-rd-salam.b3-jalan .b3-rd-tangan-a{animation:b3-tangan-a 1.7s ease-in-out forwards}
.b3-rd-salam.b3-jalan .b3-rd-tangan-b{animation:b3-tangan-b 1.7s ease-in-out forwards}
.b3-rd-salam.b3-jalan .b3-rd-zaitun,.b3-rd-salam.b3-jalan .b3-rd-bintik{animation:b3-zaitun 1.7s ease-out forwards}
.b3-rd-zaitun,.b3-rd-bintik{transform-box:fill-box;transform-origin:center}
@keyframes b3-salam{0%{opacity:0}10%{opacity:1}86%{opacity:1}100%{opacity:0}}
@keyframes b3-tangan-a{0%{transform:translateY(-34px)}36%{transform:none}46%{transform:translateY(-4px)}56%{transform:translateY(2px)}66%,100%{transform:none}}
@keyframes b3-tangan-b{0%{transform:translateY(34px)}36%{transform:none}46%{transform:translateY(4px)}56%{transform:translateY(-2px)}66%,100%{transform:none}}
@keyframes b3-zaitun{0%,45%{opacity:0;transform:scale(.4)}66%{opacity:1;transform:scale(1.12)}80%,100%{opacity:1;transform:none}}
.b3-rd-tangan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.b3-rd-kad{position:relative;display:block;min-height:56px;padding:9px 12px 10px;font-size:.875rem;line-height:1.3;border-radius:14px;background:#FFFDF5;text-align:left;
  box-shadow:0 4px 0 #D9C8A2,inset 0 0 0 2px #EFE3C6;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform .15s ease,box-shadow .15s ease}
.b3-rd-kad::before{content:"";position:absolute;left:10px;right:10px;top:0;height:4px;border-radius:0 0 4px 4px;background:#C5D0EA}
.b3-rd-teks{font-size:.875rem;font-weight:800;line-height:1.3;color:var(--ink)}
.b3-rd-tag{display:inline-block;margin:0 6px 3px 0;padding:0 8px;border-radius:8px;background:#EEF2FB;color:var(--ink2);font-size:.875rem;font-weight:900;line-height:1.5;vertical-align:1px}
.b3-rd-kad:active:not([disabled]){transform:translateY(2px)}
.b3-rd-kad.pilih{transform:translateY(-4px);box-shadow:0 8px 0 #D9C8A2,0 0 0 3px #FFC933,0 14px 20px rgba(27,42,92,.25)}
.b3-rd-kad.diangkat,.b3-rd-kad.b3-diseret{visibility:hidden}
.b3-rd-kad.ditolak{background:#F6F0E4;box-shadow:inset 0 0 0 2px #F4B7BB;cursor:default}
.b3-rd-kad.ditolak .b3-rd-teks{color:#6D5F58;text-decoration:line-through;text-decoration-color:rgba(201,50,63,.75);text-decoration-thickness:2px}
.b3-rd-kad.ditolak::after{content:"Ditolak";position:absolute;right:8px;top:-10px;padding:1px 9px;border-radius:9px;background:var(--merah-d);color:#fff;font-size:.875rem;font-weight:900}
.b3-rd-kad.salah{background:var(--salah-bg);box-shadow:0 4px 0 var(--merah-d),inset 0 0 0 3px #E0555D;animation:goncang .4s}
.b3-rd-kad.kilat{background:var(--betul-bg);box-shadow:0 4px 0 #1E9E63,inset 0 0 0 3px var(--hijau)}
.b3-rd-cop{display:none}
.b2-main .b3-klon.b3-rd-terbang{box-shadow:0 10px 22px rgba(27,42,92,.3)}
.b3-klon .b3-rd-cop{display:block;position:absolute;right:8px;top:50%;padding:1px 9px;border:3px solid;border-radius:8px;font-size:1rem;font-weight:900;letter-spacing:.08em;opacity:0}
.b3-klon.setuju .b3-rd-cop{color:var(--hijau);border-color:var(--hijau);background:rgba(229,250,239,.94);animation:b3-cop .35s ease-out forwards}
.b3-klon.tolak .b3-rd-cop{color:var(--merah-d);border-color:var(--merah-d);background:rgba(255,233,234,.94);animation:b3-cop .35s ease-out forwards}
@keyframes b3-cop{from{opacity:0;transform:translateY(-50%) rotate(-10deg) scale(1.8)}to{opacity:1;transform:translateY(-50%) rotate(-10deg) scale(1)}}
.b3-klon.setuju{box-shadow:0 0 0 3px var(--hijau),0 8px 16px rgba(27,42,92,.25)}
.b3-klon.tolak{box-shadow:0 0 0 3px var(--merah-d),0 8px 16px rgba(27,42,92,.25)}
.b3-klon.kilat{box-shadow:0 0 0 3px var(--hijau),0 8px 16px rgba(27,42,92,.25)}
body.mod-lebar .b3-rd{grid-template-columns:306px minmax(0,1fr);grid-template-rows:auto auto 1fr;grid-template-areas:"meter tangan" "bilik tangan" "bisik tangan";column-gap:16px;row-gap:10px;align-items:start}
body.mod-lebar .b3-rd-tangan{grid-template-columns:minmax(0,1fr);gap:8px}
body.mod-lebar .b3-rd-kad{min-height:56px;padding:8px 12px 8px 44px}
body.mod-lebar .b3-rd-kad .b3-no{position:absolute;left:10px;top:50%;margin-top:-13px}
body.mod-lebar .b3-rd-kad{font-size:.9375rem}
body.mod-lebar .b3-rd-situasi .b2-kad-isi{font-size:1.0625rem;line-height:1.3}
/* 8 kad mesti muat tanpa tatal pada 1280×720: kawasan main dilebarkan ke 880px (hingga tiang kanan) dan kad dua lajur */
body.mod-lebar .b2-main.b2-j-runding .main-badan{width:880px}
body.mod-lebar .b3-rd-tangan{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
body.mod-lebar .b3-rd-kad{min-height:50px;padding:6px 10px 6px 42px}
@media (max-height:700px){
  body.mod-telefon .b3-rd-meja{max-height:150px}
  body.mod-telefon .b3-rd-kad{min-height:56px;padding:6px 10px 8px}
}

/* =====================================================================================
   3.12 BINA SEMULA BANDAR (tahap akhir; jalur + tanpa watak)
   ===================================================================================== */
.b3-bn-perancah rect{fill:#C58B4E}
.b3-bn-perancah path{stroke:#8A5226}
.b3-bn-perancah.merah rect{fill:#F94F55}
.b3-bn-perancah.merah path{stroke:#C9323F}
.b3-bn-kilau{fill:#FFE57F}
.b3-bn-bgn.siap .b3-bn-kilau{animation:b3-kilau .95s ease-out}
.b3-bn-bgn.siap .b3-bn-baik{animation:b3-lonjak .55s ease-out;transform-box:fill-box;transform-origin:50% 100%}
@keyframes b3-kilau{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
@keyframes b3-lonjak{0%{transform:scale(1,.94)}55%{transform:scale(1,1.04)}100%{transform:none}}
.b3-bn-cip{background:var(--ungu)}
.b3-bn-pilih{grid-template-columns:minmax(0,1fr)}
.b3-bn-pilih.j-bs{grid-template-columns:repeat(2,minmax(0,1fr))}
.b3-bn-op{min-height:50px;font-size:.9375rem}
.b3-bn-pilih.j-bs .b3-bn-op{justify-content:center;text-align:center;font-size:1.0625rem}
.b3-bn-pilih.j-tahun{gap:8px}
.b3-bn-digit{display:flex;justify-content:center;gap:8px;padding:8px;border-radius:18px;background:#fff;box-shadow:var(--lip),inset 0 0 0 2px var(--garis)}
.b3-bn-kotak{width:46px;height:52px;border-radius:12px;background:#F1F4FB;box-shadow:inset 0 -4px 0 #AEB9D8;display:grid;place-items:center;font-size:1.625rem;font-weight:900;color:var(--ink)}
.b3-bn-kotak.bayang{color:#AEB9D8}
.b3-bn-kotak.ada{background:#FFF6D8;box-shadow:inset 0 -4px 0 var(--emas-d)}
.b3-bn-kotak.kini{box-shadow:inset 0 -4px 0 var(--emas-d),0 0 0 3px var(--emas)}
.b3-bn-digit.salah{background:var(--salah-bg);box-shadow:var(--lip),inset 0 0 0 3px #E0555D;animation:goncang .4s}
.b3-bn-digit.salah .b3-bn-kotak{color:var(--salah-teks);background:#fff}
.b3-bn-digit.betul .b3-bn-kotak,.b3-bn-digit.kilat .b3-bn-kotak{background:var(--betul-bg);color:var(--betul-teks);box-shadow:inset 0 -4px 0 #1E9E63}
.b3-bn-digit.kilat{box-shadow:var(--lip),inset 0 0 0 3px var(--hijau)}
.b3-bn-pad{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.b3-bn-kekunci{min-height:46px;border-radius:12px;background:#fff;color:var(--ink);font-size:1.25rem;font-weight:900;box-shadow:0 4px 0 rgba(27,42,92,.22),inset 0 0 0 2px var(--garis);display:flex;align-items:center;justify-content:center;gap:6px}
.b3-bn-kekunci:active:not([disabled]){transform:translateY(3px);box-shadow:0 1px 0 rgba(27,42,92,.22),inset 0 0 0 2px var(--garis)}
.b3-bn-kekunci[disabled]{opacity:.5}
.b3-bn-padbaris{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:8px}
.b3-bn-padam{font-size:.9375rem}
.b3-bn-padam .ikon{width:18px;height:18px}
.b3-bn-pasang{min-height:48px;padding:6px 14px;font-size:1rem}
body.mod-lebar .b2-main.b2-j-bina .main-badan{left:796px;width:456px;top:84px;bottom:20px;display:flex;flex-direction:column;align-content:stretch}
body.mod-lebar .b2-p-bina{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
body.mod-lebar .b2-p-bina .b2-kad-isi{font-size:1.3125rem}
body.mod-lebar .b2-p-bina .b2-rumus{max-height:560px;overflow-y:auto}
body.mod-lebar .b2-p-bina .b2-rumus-tokoh{grid-template-columns:1fr}
body.mod-lebar .b3-bn-op{min-height:56px;font-size:1rem}
body.mod-lebar .b3-bn-kekunci{min-height:50px}
@media (max-height:700px){
  body.mod-telefon .main.b2-main.b2-j-bina .latar-babak{height:250px}
  body.mod-telefon .main.b2-main.b2-j-bina .main-badan{margin-top:194px}
  body.mod-telefon .b3-bn-op{min-height:46px}
  body.mod-telefon .b3-bn-kotak{height:46px}
  body.mod-telefon .b3-bn-kekunci{min-height:44px}
}