/* ===== Babak · gaya pakej enjin Bab 5, kumpulan 5a (js/pakej-bab-05-5a.js): meja, silang, kren, kaunter.
   Awalan kelas b5-. Susun atur diskop dengan .b2-j-<jenis> dan body.mod-lebar / body.mod-telefon. ===== */

/* ---------- Bersama ---------- */
.b5-goncang{animation:goncang .4s}
.b5-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-meja .b2-kad-no,.b2-j-silang .b2-kad-no,.b2-j-kren .b2-kad-no,.b2-j-kaunter .b2-kad-no{font-size:.875rem;letter-spacing:.04em}
.b2-j-meja .b2-kad-isi,.b2-j-kren .b2-kad-isi,.b2-j-kaunter .b2-kad-isi{font-size:1.0625rem}
.b2-j-meja .b2-rujuk-btn,.b2-j-silang .b2-rujuk-btn,.b2-j-kren .b2-rujuk-btn,.b2-j-kaunter .b2-rujuk-btn{font-size:.875rem;min-height:40px}
.b2-j-meja .b2-rumus-tokoh li,.b2-j-silang .b2-rumus-tokoh li,.b2-j-kren .b2-rumus-tokoh li,.b2-j-kaunter .b2-rumus-tokoh li{font-size:.875rem;line-height:1.35;align-content:start}
.b2-j-meja .b2-rumus-label,.b2-j-silang .b2-rumus-label,.b2-j-kren .b2-rumus-label,.b2-j-kaunter .b2-rumus-label{font-size:.875rem}
.b2-rumus-tokoh li.b5-rumus-penuh{grid-column:1/-1}
.b5-rumus-baris{display:grid;gap:3px}
.b5-rumus-baris > span{position:relative;padding-left:12px}
.b5-rumus-baris > span::before{content:"";position:absolute;left:1px;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--teal)}
@keyframes b5-pop{0%{transform:scale(.4)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes b5-masuk-atas{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}

/* =====================================================================================
   MEJA RUNDINGAN
   ===================================================================================== */
.b5-meja{display:grid;gap:10px;min-width:0}
.b5-meja-tengah{display:grid;gap:10px;min-width:0}
.b5-tangan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.b5-tangan-slot{display:grid;min-height:66px;border-radius:14px}
.b5-tangan-slot.kosong{background:rgba(255,255,255,.45);box-shadow:inset 0 0 0 2px rgba(27,42,92,.12)}
.b5-kad-nama{position:relative;display:grid;align-content:center;gap:2px;min-height:66px;padding:8px 10px 8px 24px;border-radius:14px;background:#FFFDF6;text-align:left;
  box-shadow:0 4px 0 rgba(27,42,92,.2),inset 0 0 0 2px #EADFC4;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
.b5-kad-lubang{position:absolute;left:9px;top:50%;width:7px;height:7px;margin-top:-4px;border-radius:50%;background:#EADFC4;box-shadow:inset 0 1px 0 rgba(0,0,0,.12)}
.b5-kad-teks{font-size:.9375rem;font-weight:900;line-height:1.2;color:var(--ink);overflow-wrap:anywhere}
.b5-kad-jawatan{font-size:.875rem;font-weight:700;line-height:1.25;color:var(--ink2)}
.b5-kad-petunjuk{font-size:.875rem;font-weight:700;line-height:1.28;color:var(--teal-teks)}
.b5-kad-nama.salah .b5-kad-petunjuk{color:var(--salah-teks)}
.b5-kad-nama:active{transform:translateY(2px)}
.b5-kad-nama.pilih{transform:translateY(-4px) rotate(-1.2deg);background:#FFF6D8;box-shadow:0 8px 0 var(--emas-d),inset 0 0 0 3px var(--emas)}
.b5-kad-nama.pilih .b5-kad-lubang{background:var(--emas-d)}
.b5-kad-nama.salah{background:var(--salah-bg);box-shadow:0 4px 0 var(--merah-d),inset 0 0 0 3px #E0555D}
.b5-kad-nama.salah .b5-kad-teks,.b5-kad-nama.salah .b5-kad-jawatan{color:var(--salah-teks)}
.b5-kad-nama.masuk{animation:lompat .38s ease-out both}
.b5-kad-nama.b5-diseret{opacity:.35}
.b5-meja-bingkai{position:relative;width:min(100%,300px);aspect-ratio:1/1;margin-inline:auto}
.b5-meja-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.b5-sektor{opacity:.26;cursor:pointer;transition:opacity .25s ease}
.b5-meja.ada-pilih .b5-sektor{opacity:.5}
.b5-sektor.atas{opacity:.85}
.b5-sektor.salah{fill:#F94F55;opacity:.9}
.b5-sektor.kilat{opacity:.95;stroke:#FFE57F;stroke-width:6}
.b5-kerusi{cursor:pointer}
.b5-kerusi-bulat{fill:#fff;stroke:var(--w);stroke-width:3.5;stroke-dasharray:5 4}
.b5-kerusi.isi .b5-kerusi-bulat{fill:var(--w);stroke:#fff;stroke-width:3;stroke-dasharray:none}
.b5-kerusi.dibantu .b5-kerusi-bulat{stroke:#C9323F;stroke-width:5}
.b5-kerusi.baru .b5-kerusi-bulat{transform-box:fill-box;transform-origin:center;animation:b5-pop .45s ease-out}
.b5-kerusi-huruf{font-family:var(--f);font-size:19px;font-weight:900;fill:#fff;pointer-events:none;paint-order:stroke;stroke:rgba(0,0,0,.18);stroke-width:1px}
.b5-meja-pusat{position:absolute;left:25%;right:25%;top:22%;bottom:22%;display:grid;align-content:center;justify-items:center;gap:3px;text-align:center;pointer-events:none}
.b5-meja-pusat.baru{animation:lompat .4s ease-out}
.b5-pusat-tajuk{font-size:.9375rem;font-weight:900;line-height:1.2;color:#4A2A0E;overflow-wrap:break-word;hyphens:auto}
.b5-pusat-sub{font-size:.875rem;font-weight:800;line-height:1.25;color:#6E3F1B}
.b5-legenda{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.b5-legenda-btn:last-child:nth-child(odd){grid-column:1/-1}
.b5-legenda-btn{display:flex;align-items:center;gap:7px;min-height:44px;padding:5px 9px;border-radius:14px;background:#fff;text-align:left;color:var(--ink);
  box-shadow:0 4px 0 rgba(27,42,92,.18),inset 0 0 0 2px var(--garis);transition:box-shadow .2s ease,background-color .2s ease,transform .08s ease}
.b5-legenda-btn:active{transform:translateY(2px)}
.b5-legenda-warna{flex:none;width:16px;height:16px;border-radius:50%;background:var(--w);box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.b5-legenda-nama{flex:1 1 auto;min-width:0;font-size:.875rem;font-weight:900;line-height:1.12}
.b5-legenda-kira{flex:none;font-size:.875rem;font-weight:900;color:var(--ink2)}
.b5-legenda-pendek{display:none}
/* telefon: jalur warna di kiri butang (bukan titik), jadi nama kumpulan muat dalam dua baris */
body.mod-telefon .b5-legenda-btn{padding:5px 8px 5px 15px;box-shadow:0 4px 0 rgba(27,42,92,.18),inset 0 0 0 2px var(--garis),inset 6px 0 0 var(--w)}
body.mod-telefon .b5-legenda-btn .b5-legenda-warna{display:none}
body.mod-telefon .b5-legenda-btn.luar{box-shadow:0 4px 0 rgba(27,42,92,.12),inset 0 0 0 2px #B9C4E0,inset 6px 0 0 var(--w)}
body.mod-telefon .b5-meja.ada-pilih .b5-legenda-btn{box-shadow:0 4px 0 rgba(27,42,92,.18),inset 0 0 0 3px var(--w),inset 7px 0 0 var(--w)}
body.mod-telefon .b5-meja .b5-legenda-btn.salah{box-shadow:0 4px 0 var(--merah-d),inset 0 0 0 3px #E0555D,inset 7px 0 0 #E0555D}
body.mod-telefon .b5-meja .b5-legenda-btn.kilat{box-shadow:0 4px 0 #1E9E63,inset 0 0 0 3px var(--hijau),inset 7px 0 0 var(--hijau)}
/* telefon: nama pendek, tiga lajur, nama di atas kiraan */
body.mod-telefon .b5-legenda:has(.ada-pendek){grid-template-columns:repeat(3,minmax(0,1fr))}
body.mod-telefon .b5-legenda-btn.ada-pendek{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;gap:0;padding:5px 8px 5px 12px;box-shadow:0 4px 0 rgba(27,42,92,.18),inset 0 0 0 2px var(--garis),inset 5px 0 0 var(--w)}
body.mod-telefon .b5-legenda-btn.ada-pendek .b5-legenda-warna,body.mod-telefon .b5-legenda-btn.ada-pendek .b5-legenda-nama{display:none}
body.mod-telefon .b5-legenda-btn.ada-pendek .b5-legenda-pendek{display:block;font-size:.875rem;font-weight:900;line-height:1.15}
body.mod-telefon .b5-legenda:has(.ada-pendek) .b5-legenda-btn:last-child:nth-child(odd){grid-column:auto}
body.mod-telefon .b5-legenda:has(.ada-pendek) .b5-legenda-btn:nth-child(5):last-child{grid-column:span 2}
body.mod-telefon .b5-meja.ada-pilih .b5-legenda-btn.ada-pendek{box-shadow:0 4px 0 rgba(27,42,92,.18),inset 0 0 0 3px var(--w),inset 6px 0 0 var(--w)}
body.mod-telefon .b5-legenda-btn.ada-pendek.salah{box-shadow:0 4px 0 var(--merah-d),inset 0 0 0 3px #E0555D}
body.mod-telefon .b5-legenda-btn.ada-pendek.kilat{box-shadow:0 4px 0 #1E9E63,inset 0 0 0 3px var(--hijau)}
body.mod-telefon .b5-legenda-btn.ada-pendek.luar{box-shadow:0 4px 0 rgba(27,42,92,.12),inset 0 0 0 2px #B9C4E0,inset 5px 0 0 var(--w)}
.b5-legenda-btn.luar{background:#EEF1F8;box-shadow:0 4px 0 rgba(27,42,92,.12),inset 0 0 0 2px #B9C4E0}
.b5-legenda-btn.luar .b5-legenda-warna{background:#fff;box-shadow:inset 0 0 0 3px var(--w)}
.b5-meja.ada-pilih .b5-legenda-btn{box-shadow:0 4px 0 rgba(27,42,92,.18),inset 0 0 0 3px var(--w)}
.b5-legenda-btn.atas{background:#FFF6D8}
.b5-legenda-btn.penuh .b5-legenda-kira{color:var(--betul-teks)}
.b5-legenda-btn.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 4px 0 var(--merah-d),inset 0 0 0 3px #E0555D;animation:goncang .4s}
.b5-legenda-btn.kilat{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 4px 0 #1E9E63,inset 0 0 0 3px var(--hijau)}
/* draf perjanjian */
.b5-meja.mod-draf .b5-meja-tengah{display:none}
.b5-draf{position:relative;display:grid;gap:10px;padding:14px 14px 16px 22px;border-radius:20px;box-shadow:var(--bayang);
  background:linear-gradient(90deg,transparent 9px,#F7C6C9 9px,#F7C6C9 11px,transparent 11px),repeating-linear-gradient(#FFFDF7 0 33px,#EFE6D2 33px 35px),#FFFDF7}
.b5-draf.masuk{animation:b5-masuk-atas .45s ease-out both}
.b5-draf-label{display:flex;align-items:center;gap:8px;font-size:.875rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-teks);padding-right:120px}
.b5-draf-label .ikon{width:18px;height:18px;flex:none}
.b5-draf-senarai{display:grid;gap:8px}
.b5-draf-op{display:flex;align-items:center;gap:10px;min-height:50px;padding:8px 12px;border-radius:14px;background:#fff;text-align:left;font-size:.9375rem;font-weight:800;line-height:1.3;color:var(--ink);
  box-shadow:0 3px 0 rgba(27,42,92,.12),inset 0 0 0 2px #EADFC4;transition:background-color .2s ease,box-shadow .2s ease}
.b5-draf-op:active:not([disabled]){transform:translateY(2px)}
.b5-kotak-tanda{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#fff;box-shadow:inset 0 0 0 2.5px #9AA7CF}
.b5-kotak-tanda svg{width:24px;height:24px;fill:none;stroke:#2563C4;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.b5-tanda-garis{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .38s ease}
.b5-draf-op.tanda .b5-tanda-garis{stroke-dashoffset:0}
.b5-draf-op.tanda{background:#EEF4FF;box-shadow:0 3px 0 rgba(37,99,196,.25),inset 0 0 0 2px #9CC0F5}
.b5-draf-op.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 3px 0 var(--merah-d),inset 0 0 0 3px #E0555D;animation:goncang .4s}
.b5-draf-op.salah .b5-kotak-tanda svg{stroke:#C9323F}
.b5-draf-op.kilat,.b5-draf-op.betul{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 3px 0 #1E9E63,inset 0 0 0 3px var(--hijau)}
.b5-draf-op.kilat .b5-kotak-tanda svg,.b5-draf-op.betul .b5-kotak-tanda svg{stroke:var(--hijau)}
.b5-draf-op[disabled]{cursor:default}
.b5-draf-kaki{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.b5-draf-nota{font-size:.875rem;font-weight:700;color:var(--ink2)}
.b5-draf-hantar{min-width:150px}
.b5-draf-cop{position:absolute;right:16px;top:6px;max-width:190px;padding:5px 12px;border:4px solid var(--hijau);border-radius:10px;color:var(--hijau);background:rgba(255,255,255,.85);
  font-size:.875rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase;line-height:1.15;text-align:center;transform:rotate(-7deg) scale(1.6);opacity:0;pointer-events:none}
.b5-draf.dicop .b5-draf-cop{animation:b5-cop-masuk .5s ease-out forwards}
body.mod-telefon .b5-draf-label{padding-right:0}
body.mod-telefon .b5-draf-cop{top:auto;bottom:14px;right:12px;max-width:140px}
body.mod-telefon .b5-draf-kaki{justify-content:flex-start}
body.mod-telefon .b5-draf-nota:empty{display:none}
@keyframes b5-cop-masuk{to{transform:rotate(-7deg) scale(1);opacity:.95}}

/* =====================================================================================
   SILANG KATA
   ===================================================================================== */
.b5-silang{display:grid;gap:10px;min-width:0}
.b5-silang > .b2-atas{order:0}
.b5-grid-bungkus{order:1}
.b5-silang-sisi{display:contents}
.b5-silang-sisi > .bisik{order:2}
.b5-papan-huruf{order:3}
.b5-klu-senarai{order:4}
.b5-klu-bar{display:flex;align-items:flex-start;gap:6px;padding:8px 8px 9px 10px}
.b5-klu-bar.siap{background:var(--betul-bg)}
.b5-klu-bar .b2-tip-btn{flex:none;width:44px;height:44px;font-size:1.25rem}
.b5-klu-anak.b5-anak-lebar{display:none}
.b5-klu-anak{flex:none;width:44px;height:44px;border-radius:50%;background:#F3F6FD;display:grid;place-items:center;color:var(--ink);box-shadow:0 3px 0 rgba(27,42,92,.14)}
.b5-klu-anak .ikon{width:20px;height:20px;stroke-width:2.8}
.b5-klu-anak:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(27,42,92,.14)}
.b5-klu-isi{flex:1 1 auto;min-width:0;display:grid;gap:2px}
.b5-klu-label{font-size:.875rem;font-weight:900;letter-spacing:.03em;color:var(--teal-teks)}
.b5-klu-teks{font-size:.9375rem;font-weight:900;line-height:1.3;color:var(--ink);text-wrap:pretty}
.b5-klu-petunjuk{font-size:.875rem;font-weight:700;line-height:1.35;color:var(--ink2)}
.b5-grid-bungkus{position:relative;overflow:auto;max-width:100%;max-height:max(180px,calc(100dvh - 506px));padding:8px;border-radius:20px;
  background:radial-gradient(circle,#E8DDC4 1.2px,transparent 1.4px) 0 0/14px 14px,#FFFBEF;box-shadow:var(--lip),inset 0 0 0 2px #fff;display:grid;justify-content:center;overscroll-behavior:contain}
.b5-grid{display:grid;grid-template-columns:repeat(var(--lajur),var(--sel,30px));grid-template-rows:repeat(var(--baris),var(--sel,30px));padding:2px}
.b5-sel{position:relative;width:var(--sel,30px);height:var(--sel,30px);padding:0;display:grid;place-items:center;background:#fff;color:var(--ink);
  box-shadow:0 0 0 1.5px var(--ink);font-size:calc(var(--sel,30px) * .56);font-weight:900;line-height:1;transition:background-color .2s ease,color .2s ease}
.b5-sel-no{position:absolute;left:2px;top:1px;font-size:10px;font-weight:900;line-height:1;color:var(--ink2);pointer-events:none}
.b5-sel-h{display:block;pointer-events:none}
.b5-sel.aktif{background:#FFF1BF}
.b5-sel.kursor{background:var(--emas);z-index:1;box-shadow:0 0 0 1.5px var(--ink),inset 0 0 0 3px var(--emas-d)}
.b5-sel.beri{color:var(--teal-teks)}
.b5-sel.pop .b5-sel-h{animation:b5-pop .22s ease-out}
.b5-sel.siap{background:var(--betul-bg);color:var(--betul-teks)}
.b5-sel.siap.aktif{background:#CDEFDC}
.b5-sel.sapu{animation:b5-sapu .5s ease-out}
@keyframes b5-sapu{0%{transform:scale(1)}40%{transform:scale(1.14);background:#A8E6C4}100%{transform:scale(1)}}
.b5-sel.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 0 0 1.5px var(--ink),inset 0 0 0 3px #E0555D;animation:goncang .4s}
.b5-sel.kilat{background:#D3F3E1;color:var(--betul-teks);animation:b5-sapu .5s ease-out}
.b5-papan-huruf{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}
.b5-kekunci{height:44px;border-radius:11px;background:#fff;font-size:1.125rem;font-weight:900;color:var(--ink);box-shadow:0 3px 0 rgba(27,42,92,.22),inset 0 0 0 2px var(--garis);transition:transform .08s ease}
.b5-kekunci:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(27,42,92,.22),inset 0 0 0 2px var(--garis)}
.b5-kekunci-padam{display:flex;align-items:center;justify-content:center;gap:4px;font-size:.9375rem;color:var(--ink2)}
.b5-ikon-padam{width:24px;height:24px;flex:none}
.b5-padam-teks{display:none}
.b5-anak-telefon{display:grid;place-items:center;width:auto;height:44px;border-radius:11px;color:var(--ink2)}
.b5-anak-telefon .ikon{width:20px;height:20px;stroke-width:3}
.b5-semak{grid-column:span 3;min-height:44px!important;padding:4px 8px!important;border-radius:14px!important;font-size:1.0625rem!important;gap:6px!important}
.b5-semak .ikon{width:20px;height:20px;stroke-width:3}
.b5-klu-senarai{display:grid;gap:10px;padding:10px 10px 12px;border-radius:20px;background:#fff;box-shadow:var(--lip)}
.b5-klu-kumpulan h3{font-size:.875rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-teks);margin:0 0 4px 6px}
.b5-klu-kumpulan ol{display:grid;gap:3px}
.b5-klu{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:6px;align-items:start;width:100%;min-height:44px;padding:6px 8px;border-radius:12px;text-align:left;color:var(--ink);transition:background-color .2s ease}
.b5-klu-no{grid-row:span 2;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#EEF2FB;font-size:.875rem;font-weight:900}
.b5-klu-t{font-size:.875rem;font-weight:700;line-height:1.35}
.b5-klu-jwp{grid-column:2;font-size:.875rem;font-weight:900;letter-spacing:.1em;color:var(--betul-teks)}
.b5-klu-jwp:empty{display:none}
.b5-klu.aktif{background:#FFF3C4;box-shadow:inset 0 0 0 2px var(--emas)}
.b5-klu.aktif .b5-klu-no{background:var(--emas)}
.b5-klu.siap .b5-klu-no{background:var(--hijau);color:#fff}
.b5-klu.siap .b5-klu-t{color:var(--ink2)}
.b5-klu.siap.dibantu .b5-klu-no{background:var(--merah-d)}

/* =====================================================================================
   KREN TIGA TIANG
   ===================================================================================== */
.b5-kren{display:grid;gap:10px;min-width:0}
.b5-tapak{--blok:24px;--alas:18px;--kaki:66px;--tag:238px;--tiang:84px;position:relative;height:400px;border-radius:22px;overflow:hidden;user-select:none;-webkit-user-select:none;
  background:linear-gradient(#8ED5F6,#CDEFFC 62%,#E9F8FF);box-shadow:inset 0 0 0 3px #fff,var(--lip)}
.b5-tapak-langit{position:absolute;inset:0;pointer-events:none}
.b5-awan{position:absolute;display:block;width:70px;height:22px;border-radius:14px;background:#fff;opacity:.85}
.b5-awan::before,.b5-awan::after{content:"";position:absolute;border-radius:50%;background:#fff}
.b5-awan::before{width:30px;height:30px;left:12px;top:-14px}.b5-awan::after{width:22px;height:22px;left:36px;top:-9px}
.b5-awan.a1{left:6%;top:92px}.b5-awan.a2{right:8%;top:128px;transform:scale(.8)}.b5-awan.a3{left:44%;top:170px;transform:scale(.6);opacity:.7}
.b5-tapak-tanah{position:absolute;left:0;right:0;bottom:0;height:var(--kaki);background:#7CC04F;box-shadow:inset 0 5px 0 #9ED36A,inset 0 -6px 0 rgba(0,0,0,.06)}
.b5-kaki-kren{position:absolute;top:10px;bottom:calc(var(--kaki) - 4px);width:12px;background:repeating-linear-gradient(0deg,#FFC933 0 14px,#E8971A 14px 16px);box-shadow:inset -3px 0 0 rgba(0,0,0,.12);pointer-events:none}
.b5-kaki-kren.kiri{left:1.5%}.b5-kaki-kren.kanan{right:1.5%}
.b5-rel{position:absolute;left:1%;right:1%;top:6px;height:14px;border-radius:5px;background:repeating-linear-gradient(135deg,#FFC933 0 12px,#1B2A5C 12px 20px);box-shadow:0 3px 0 rgba(27,42,92,.3);pointer-events:none}
.b5-troli{position:absolute;left:0;top:2px;width:46px;height:22px;border-radius:7px;background:#1B2A5C;box-shadow:inset 0 -4px 0 #0E1840;pointer-events:none;z-index:4}
.b5-troli i{position:absolute;top:-4px;width:10px;height:10px;border-radius:50%;background:#44527F;border:2px solid #0E1840}
.b5-troli i:first-child{left:6px}.b5-troli i:last-child{right:6px}
.b5-kabel{position:absolute;left:0;top:14px;width:3px;height:20px;border-radius:2px;background:#1B2A5C;pointer-events:none;z-index:3}
.b5-muatan{position:absolute;left:0;top:38px;width:min(var(--tag),calc(100% - 12px));pointer-events:none;z-index:5}
.b5-cangkuk{position:absolute;top:-8px;width:18px;height:18px;z-index:2}
.b5-cangkuk svg{width:18px;height:18px;overflow:visible}
.b5-kren-tag{position:relative;margin-top:8px;padding:10px 12px 11px 16px;border-radius:12px;background:#FFFDF2;color:var(--ink);
  box-shadow:0 6px 0 #9AA3B8,0 10px 16px rgba(27,42,92,.22),inset 0 0 0 3px #C9D0E0}
.b5-tag-lubang{position:absolute;left:50%;top:-6px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#C9D0E0;box-shadow:inset 0 0 0 4px #FFFDF2}
.b5-kren-teks{display:block;font-size:.9375rem;font-weight:800;line-height:1.35;text-wrap:pretty}
.b5-tiang-btn{position:absolute;bottom:0;left:calc(var(--i) * 100% / var(--n));width:calc(100% / var(--n));top:calc(100% - var(--kaki) - var(--alas) - var(--maks) * var(--blok) - 18px);
  padding:0;border-radius:16px;background:none;z-index:2;cursor:pointer;-webkit-tap-highlight-color:transparent}
.b5-tiang-btn::before{content:"";position:absolute;left:8%;right:8%;top:0;bottom:var(--kaki);border-radius:14px;background:rgba(255,255,255,0);transition:background-color .25s ease}
.b5-tiang-btn.bawah-kren::before{background:rgba(255,255,255,.42)}
.b5-tiang-btn:focus-visible{outline-offset:-4px}
.b5-tiang-badan{position:absolute;left:50%;bottom:var(--kaki);width:min(var(--tiang),84%);transform:translateX(-50%);display:flex;flex-direction:column-reverse;pointer-events:none}
.b5-tiang-kaki{flex:none;height:calc(var(--alas) + var(--kurang) * var(--blok));border-radius:5px 5px 0 0;background:linear-gradient(90deg,#8D96AC,#B3BACB 45%,#8D96AC);box-shadow:inset 0 4px 0 var(--w),inset 0 -3px 0 rgba(0,0,0,.12)}
.b5-slot{flex:none;height:var(--blok);margin:0 3px;border:2px dashed rgba(27,42,92,.28);border-bottom:0;border-radius:4px 4px 0 0;background:rgba(255,255,255,.28)}
.b5-slot:first-of-type{border-bottom:0}
.b5-slot.isi{margin:0;border:0;border-radius:4px;background:linear-gradient(var(--w),var(--wd));box-shadow:inset 0 -3px 0 rgba(0,0,0,.2),inset 0 3px 0 rgba(255,255,255,.35),0 1px 0 rgba(0,0,0,.1)}
.b5-slot.dibantu{background:repeating-linear-gradient(135deg,var(--w) 0 8px,#fff 8px 13px);box-shadow:inset 0 0 0 3px #C9323F}
.b5-slot.mendarat{animation:b5-mendarat .34s ease-out}
.b5-slot.jatuh-masuk{animation:b5-jatuh-masuk .5s cubic-bezier(.4,0,.8,.6)}
@keyframes b5-mendarat{0%{transform:scaleY(.7) scaleX(1.08)}60%{transform:scaleY(1.08) scaleX(.97)}100%{transform:none}}
@keyframes b5-jatuh-masuk{from{transform:translateY(-60px);opacity:0}to{transform:none;opacity:1}}
.b5-tiang-nama{position:absolute;left:4px;right:4px;bottom:6px;height:calc(var(--kaki) - 12px);display:grid;place-items:center;padding:2px 4px;border-radius:11px;background:#fff;
  font-size:.875rem;font-weight:900;line-height:1.14;color:var(--ink);text-align:center;box-shadow:0 3px 0 var(--wd),inset 0 0 0 2px var(--w);overflow:hidden;transition:background-color .25s ease}
.b5-nama-pendek{display:none}
body.mod-telefon .b5-tiang-nama.ada-pendek .b5-nama-penuh{display:none}
body.mod-telefon .b5-tiang-nama.ada-pendek .b5-nama-pendek{display:block}
.b5-tiang-btn.bawah-kren .b5-tiang-nama{background:#FFF6D8;box-shadow:0 3px 0 var(--wd),inset 0 0 0 3px var(--w)}
.b5-tiang-btn.terima .b5-tiang-nama{animation:lompat .4s ease-out}
.b5-tiang-btn.salah .b5-tiang-nama{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 3px 0 var(--merah-d),inset 0 0 0 3px #E0555D;animation:goncang .4s}
.b5-tiang-btn.salah::before{background:rgba(249,79,85,.25)}
.b5-tiang-btn.kilat .b5-tiang-nama{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 3px 0 #1E9E63,inset 0 0 0 3px var(--hijau)}
.b5-tiang-btn.kilat::before{background:rgba(47,160,92,.22)}
.b5-seret-zon{position:absolute;left:0;right:0;top:0;height:calc(100% - var(--kaki) - var(--alas) - var(--maks) * var(--blok) - 18px);z-index:1;touch-action:pan-y;cursor:grab}
.b5-jatuh{position:absolute;z-index:6;display:grid;place-items:center;overflow:hidden;padding:6px 10px;border-radius:10px;background:#FFFDF2;color:var(--ink);
  box-shadow:0 5px 0 #9AA3B8,inset 0 0 0 3px #C9D0E0;pointer-events:none;transition:background-color .15s ease,border-radius .15s ease}
.b5-jatuh-teks{font-size:.875rem;font-weight:800;line-height:1.3;text-align:center}
.b5-jatuh.blok{padding:0;border-radius:4px;background:linear-gradient(#C3C9D8,#9AA3B8);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),inset 0 3px 0 rgba(255,255,255,.4)}
.b5-jatuh.salah{background:linear-gradient(#FF8A8F,#C9323F);box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.b5-debu{position:absolute;z-index:6;width:0;height:0;pointer-events:none}
.b5-debu i{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.9);animation:b5-debu .6s ease-out forwards}
.b5-debu i:nth-child(1){--dx:-26px}.b5-debu i:nth-child(2){--dx:0px}.b5-debu i:nth-child(3){--dx:26px}
@keyframes b5-debu{from{transform:translate(0,0) scale(.4);opacity:.95}to{transform:translate(var(--dx),-16px) scale(1.4);opacity:0}}
.b5-bumbung{position:absolute;left:0;top:-200px;z-index:4;display:grid;justify-items:stretch;pointer-events:none;filter:drop-shadow(0 6px 0 rgba(27,42,92,.22))}
.b5-bumbung-segi{height:34px;background:linear-gradient(#EC6F1F,#C2560F);clip-path:polygon(6% 100%,50% 0,94% 100%)}
.b5-bumbung-jalur{display:grid;justify-items:center;gap:0;padding:5px 8px 6px;border-radius:6px;background:#FFF6E0;box-shadow:inset 0 0 0 3px #C2560F;text-align:center}
.b5-bumbung-jalur b{font-size:.9375rem;font-weight:900;line-height:1.15;color:var(--ink)}
.b5-bumbung-jalur small{font-size:.875rem;font-weight:800;line-height:1.2;color:#8A4B00}
.b5-panji{position:absolute;left:6%;right:6%;top:100%;display:flex;justify-content:space-between;height:0}
.b5-panji i{width:14px;height:16px;margin-top:2px;clip-path:polygon(0 0,100% 0,50% 100%);opacity:0;transform:translateY(-10px)}
.b5-panji i:nth-child(3n+1){background:#F94F55}.b5-panji i:nth-child(3n+2){background:#FFC933}.b5-panji i:nth-child(3n){background:#3D8BF2}
.b5-tapak.rai .b5-panji i{animation:b5-panji .45s ease-out forwards;animation-delay:calc(var(--k) * 70ms)}
@keyframes b5-panji{to{opacity:1;transform:none}}
.b5-tapak.rai .b5-bumbung-jalur{animation:b5-sinar 1.2s ease-out}
@keyframes b5-sinar{0%{box-shadow:inset 0 0 0 3px #C2560F,0 0 0 0 rgba(255,201,51,.9)}100%{box-shadow:inset 0 0 0 3px #C2560F,0 0 0 18px rgba(255,201,51,0)}}
.b5-kilau{position:absolute;left:50%;top:26%;width:0;height:0;z-index:5;pointer-events:none}
.b5-kilau i{position:absolute;left:-6px;top:-6px;width:12px;height:12px;background:#FFE57F;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:0}
.b5-tapak.rai .b5-kilau i{animation:b5-kilau 1.3s ease-out forwards;animation-delay:calc(var(--k) * 90ms)}
.b5-kilau i:nth-child(1){--x:-150px;--y:-20px}.b5-kilau i:nth-child(2){--x:-100px;--y:-60px}.b5-kilau i:nth-child(3){--x:-40px;--y:-80px}.b5-kilau i:nth-child(4){--x:30px;--y:-76px}
.b5-kilau i:nth-child(5){--x:95px;--y:-58px}.b5-kilau i:nth-child(6){--x:150px;--y:-18px}.b5-kilau i:nth-child(7){--x:-70px;--y:24px}.b5-kilau i:nth-child(8){--x:80px;--y:26px}
@keyframes b5-kilau{0%{transform:translate(0,0) scale(.2);opacity:0}30%{opacity:1}100%{transform:translate(var(--x),var(--y)) scale(1.3) rotate(90deg);opacity:0}}
.b5-kren-bawah{display:grid;gap:10px;min-width:0}
.b5-kren-kawal{display:flex;align-items:center;justify-content:center;gap:14px}
.b5-kren-anak[disabled]{opacity:.45;cursor:default}
.b5-kren-lepas{flex:1 1 auto;max-width:250px}
.b5-kren-lepas[disabled]{opacity:.6;cursor:default}
.b5-panah-bawah{display:inline-grid;place-items:center;transform:rotate(90deg)}
.b5-panah-bawah .ikon{width:22px;height:22px;stroke-width:3}

/* =====================================================================================
   KAUNTER KEWARGANEGARAAN
   ===================================================================================== */
.b5-kaunter{display:grid;gap:10px;min-width:0}
.b5-kaunter-meja{display:grid;gap:10px;min-width:0}
.b5-kaunter-lajur{display:grid;gap:10px;min-width:0}
.b5-kaunter-kiri{display:grid;min-width:0;border-radius:22px;overflow:hidden;box-shadow:var(--bayang);background:#FFF6E0}
.b5-papan-tanda{display:grid;gap:1px;padding:8px 14px 9px;background:var(--ink);text-align:center;box-shadow:inset 0 -4px 0 #0E1840}
.b5-papan-judul{font-size:.875rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--emas)}
.b5-papan-kepala{display:block;font-size:1rem;font-weight:900;line-height:1.25;color:#fff}
.b5-papan-kepala.balik{animation:b5-balik .45s ease-in-out}
@keyframes b5-balik{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.b5-tingkap{position:relative;min-height:236px;padding:12px;overflow:hidden;background:linear-gradient(#D6EEF9,#EEF8FD);border-bottom:10px solid #B8743C;box-shadow:inset 0 -3px 0 rgba(0,0,0,.08)}
.b5-tingkap::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:rgba(27,42,92,.12)}
.b5-pemohon{position:relative;display:grid}
.b5-pemohon.datang{animation:b5-datang .5s ease-out both}
.b5-pemohon.keluar{position:absolute;left:12px;right:12px;top:12px;animation:b5-keluar .5s ease-in forwards}
@keyframes b5-datang{from{transform:translateX(70%);opacity:0}to{transform:none;opacity:1}}
@keyframes b5-keluar{to{transform:translateX(-80%);opacity:0}}
.b5-borang-kepala{display:flex;align-items:center;gap:10px;padding-bottom:6px;border-bottom:2px dashed #E3E9F7}
.b5-pemohon-foto{flex:none;width:52px;padding:3px;border-radius:10px;background:#fff;box-shadow:0 2px 0 rgba(27,42,92,.16),inset 0 0 0 1px #E3E9F7}
.b5-siluet{display:block;width:100%;height:auto}
.b5-borang{position:relative;min-height:176px;padding:10px 12px 8px;border-radius:14px;background:#fff;box-shadow:0 4px 0 rgba(27,42,92,.16),inset 0 0 0 2px #E3E9F7;transition:background-color .25s ease,box-shadow .25s ease}
.b5-borang-label{font-size:.875rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-teks)}
.b5-pemohon-label{font-size:1.125rem;font-weight:900;line-height:1.2;color:var(--ink)}
.b5-profil{display:grid;gap:4px;margin-top:8px}
.b5-profil li{position:relative;padding-left:16px;font-size:.9375rem;font-weight:700;line-height:1.35;color:var(--ink)}
.b5-profil li::before{content:"";position:absolute;left:3px;top:.52em;width:7px;height:7px;border-radius:2px;background:var(--teal)}
.b5-pemohon.betul .b5-borang{box-shadow:0 4px 0 #1E9E63,inset 0 0 0 3px var(--hijau)}
.b5-pemohon.salah .b5-borang{background:var(--salah-bg);box-shadow:0 4px 0 var(--merah-d),inset 0 0 0 3px #E0555D}
.b5-pemohon.salah .b5-profil li,.b5-pemohon.salah .b5-pemohon-label{color:var(--salah-teks)}
.b5-cap{display:flex;align-items:center;gap:10px;min-height:52px;margin-top:8px;padding-top:6px;border-top:2px dashed #E3E9F7;pointer-events:none}
.b5-cap-label{flex:none;font-size:.875rem;font-weight:900;color:#9AA7CF}
.b5-cap-isi{flex:1 1 auto;min-width:0;display:flex;flex-direction:row-reverse;align-items:center;justify-content:flex-start;gap:8px;min-height:44px}
.b5-cap-kesan{display:block;flex:0 1 auto;min-width:0;max-width:calc(62% - 4px);padding:3px 8px;border:3px solid var(--w);border-radius:9px;background:rgba(255,255,255,.55);color:var(--w);
  font-size:.875rem;font-weight:900;line-height:1.15;text-align:center;transform:rotate(-4deg);animation:b5-cap .32s ease-out;transition:opacity .35s ease}
@keyframes b5-cap{from{transform:rotate(-4deg) scale(1.3);opacity:0;filter:blur(1px)}to{transform:rotate(-4deg) scale(1);opacity:1;filter:none}}
.b5-cap-kesan.salah{--w:#C9323F!important;text-decoration:line-through;text-decoration-thickness:2px}
.b5-cap-kesan.dibantu{border-style:dashed;transform:rotate(3deg);animation-name:b5-cap-b}
@keyframes b5-cap-b{from{transform:rotate(3deg) scale(1.3);opacity:0}to{transform:rotate(3deg) scale(1);opacity:1}}
.b5-cap-kesan.padam{opacity:0}
.b5-cop-baris{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px;background:linear-gradient(#D9A86A,#C98B4F)}
.b5-cop{display:grid;justify-items:center;align-content:start;gap:3px;min-height:92px;padding:8px 4px 8px;border-radius:14px;background:#FFF6E4;color:var(--ink);text-align:center;
  box-shadow:0 5px 0 #8A5226;touch-action:none;user-select:none;-webkit-user-select:none;transition:background-color .2s ease,transform .08s ease}
.b5-cop:active:not([disabled]){transform:translateY(3px);box-shadow:0 2px 0 #8A5226}
.b5-cop[disabled]{cursor:default}
.b5-cop-pemegang{display:block;width:20px;height:22px;border-radius:50% 50% 5px 5px;background:linear-gradient(90deg,#6E3F1B,#8A5226 50%,#6E3F1B);box-shadow:inset 0 -3px 0 #4A2A0E;transition:opacity .2s ease}
.b5-cop-kepala{display:block;width:58px;height:15px;border-radius:5px 5px 3px 3px;background:var(--w);box-shadow:inset 0 -4px 0 rgba(0,0,0,.25);transition:opacity .2s ease}
.b5-cop-nama{font-size:.875rem;font-weight:900;line-height:1.15}
.b5-cop.diangkat .b5-cop-pemegang,.b5-cop.diangkat .b5-cop-kepala{opacity:.18}
.b5-cop.betul{background:var(--betul-bg);color:var(--betul-teks)}
.b5-cop.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 5px 0 var(--merah-d),inset 0 0 0 3px #E0555D;animation:goncang .4s}
.b5-cop.kilat{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 5px 0 #1E9E63,inset 0 0 0 3px var(--hijau)}
.b5-cop.b5-diseret{opacity:.4}
.b5-cop-terbang{position:absolute;z-index:40;display:grid;justify-items:center;gap:0;pointer-events:none;will-change:transform}
.b5-cop-terbang .b5-cop-pemegang{width:24px;height:26px}
.b5-cop-terbang .b5-cop-kepala{width:70px;height:18px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.25),0 8px 14px rgba(27,42,92,.3)}
.b5-buku{display:grid;align-content:start;gap:8px;padding:12px 14px 14px;border-radius:20px;background:#FFFDF7;box-shadow:var(--lip),inset 5px 0 0 #7B57E0}
.b5-buku-tajuk{display:flex;align-items:center;gap:8px;font-size:.9375rem;font-weight:900;color:var(--ungu-d)}
.b5-buku-tajuk .ikon{width:20px;height:20px;flex:none}
.b5-buku-isi{display:grid;gap:8px}
.b5-buku-bhg{display:grid;gap:4px}
.b5-buku-bhg h3{font-size:.875rem;font-weight:900;line-height:1.25;color:var(--teal-teks)}
.b5-buku ul{display:grid;gap:4px}
.b5-aturan{position:relative;padding:4px 6px 4px 18px;border-radius:9px;font-size:.875rem;font-weight:700;line-height:1.38;color:var(--ink);transition:background-color .3s ease}
.b5-aturan::before{content:"";position:absolute;left:5px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--ungu)}
.b5-aturan.sorot{background:#FFF1BF;box-shadow:inset 0 0 0 2px var(--emas);animation:b5-sorot .9s ease-out}
@keyframes b5-sorot{0%{background:#FFD95C;box-shadow:inset 0 0 0 3px var(--emas-d)}100%{background:#FFF1BF;box-shadow:inset 0 0 0 2px var(--emas)}}
.b5-buku.tutup{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#7B57E0,#5537A8);color:#fff;box-shadow:var(--lip)}
.b5-buku.tutup > div{min-width:0}
.b5-buku.tutup b{display:block;font-size:.9375rem;font-weight:900}
.b5-buku.tutup span{font-size:.875rem;font-weight:700;line-height:1.35;opacity:.95}
.b5-buku-kunci{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.18)}
.b5-buku-kunci .ikon{width:22px;height:22px;stroke-width:2.6}

/* =====================================================================================
   MOD LEBAR (pentas 1280 x 720; .main-badan: left 300, width 720)
   ===================================================================================== */
body.mod-lebar .b2-main.b2-j-meja .main-badan,body.mod-lebar .b2-main.b2-j-silang .main-badan,
body.mod-lebar .b2-main.b2-j-kren .main-badan,body.mod-lebar .b2-main.b2-j-kaunter .main-badan{left:300px;width:720px;top:90px;bottom:10px;display:flex;flex-direction:column;align-content:stretch;overflow-y:auto;overflow-x:hidden}
body.mod-lebar .b2-p-meja,body.mod-lebar .b2-p-silang,body.mod-lebar .b2-p-kren,body.mod-lebar .b2-p-kaunter{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
body.mod-lebar .b5-meja,body.mod-lebar .b5-silang,body.mod-lebar .b5-kren,body.mod-lebar .b5-kaunter{flex:1 1 auto;min-height:0}
body.mod-lebar .b2-j-meja .b2-kad-isi,body.mod-lebar .b2-j-kren .b2-kad-isi,body.mod-lebar .b2-j-kaunter .b2-kad-isi{font-size:1.1875rem}
body.mod-lebar .b2-j-meja .bisik,body.mod-lebar .b2-j-silang .bisik,body.mod-lebar .b2-j-kren .bisik,body.mod-lebar .b2-j-kaunter .bisik{min-height:48px;padding:8px 14px}
body.mod-lebar .b2-p-meja > .b2-rumus,body.mod-lebar .b2-p-silang > .b2-rumus,body.mod-lebar .b2-p-kren > .b2-rumus,body.mod-lebar .b2-p-kaunter > .b2-rumus{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
body.mod-lebar .b2-p-meja > .b2-rumus > *,body.mod-lebar .b2-p-silang > .b2-rumus > *,body.mod-lebar .b2-p-kren > .b2-rumus > *,body.mod-lebar .b2-p-kaunter > .b2-rumus > *{flex:none}
body.mod-lebar .b2-p-meja > .b2-rumus > .b2-rumus-tokoh,body.mod-lebar .b2-p-silang > .b2-rumus > .b2-rumus-tokoh,body.mod-lebar .b2-p-kren > .b2-rumus > .b2-rumus-tokoh,body.mod-lebar .b2-p-kaunter > .b2-rumus > .b2-rumus-tokoh{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
body.mod-lebar .b2-p-kren > .b2-rumus > .b2-rumus-tokoh{grid-template-columns:1fr}
/* meja */
body.mod-lebar .b5-meja-tengah{grid-template-columns:390px minmax(0,1fr);grid-template-rows:auto auto;grid-template-areas:"meja tangan" "meja legenda";column-gap:18px;row-gap:10px;align-items:start}
body.mod-lebar .b5-meja-bingkai{grid-area:meja;width:390px}
body.mod-lebar .b5-tangan{grid-area:tangan;grid-template-columns:1fr;gap:8px}
body.mod-lebar .b5-legenda{grid-area:legenda;grid-template-columns:1fr;gap:6px}
body.mod-lebar .b5-legenda-btn:last-child:nth-child(odd){grid-column:auto}
body.mod-lebar .b5-kad-teks{font-size:1rem}
body.mod-lebar .b5-pusat-tajuk{font-size:1.0625rem}
body.mod-lebar .b5-pusat-sub{font-size:.9375rem}
body.mod-lebar .b5-legenda-btn{min-height:44px}
body.mod-lebar .b5-legenda-nama{font-size:.9375rem}
body.mod-lebar .b5-draf{padding:12px 18px 12px 30px;gap:8px;background:linear-gradient(90deg,transparent 13px,#F7C6C9 13px,#F7C6C9 15px,transparent 15px),repeating-linear-gradient(#FFFDF7 0 35px,#EFE6D2 35px 37px),#FFFDF7}
body.mod-lebar .b5-draf-senarai{grid-template-columns:1fr 1fr;gap:8px}
body.mod-lebar .b5-draf-op{min-height:52px;padding:6px 10px;font-size:.875rem;line-height:1.28}
body.mod-lebar .b5-kotak-tanda{width:26px;height:26px}
body.mod-lebar .b5-kotak-tanda svg{width:21px;height:21px}
body.mod-lebar .b5-draf-cop{font-size:.9375rem;max-width:230px;right:22px}
/* silang */
body.mod-lebar .b5-silang{grid-template-columns:404px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:14px;row-gap:10px;
  grid-template-areas:"atas atas" "grid sisi" "papan papan"}
body.mod-lebar .b5-silang > .b2-atas{grid-area:atas}
body.mod-lebar .b5-grid-bungkus{grid-area:grid;align-self:start;max-height:100%;min-height:0}
body.mod-lebar .b5-silang-sisi{grid-area:sisi;display:flex;flex-direction:column;gap:8px;min-height:0}
body.mod-lebar .b5-silang-sisi > .bisik{flex:none;font-size:.9375rem}
body.mod-lebar .b5-klu-senarai{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
body.mod-lebar .b5-papan-huruf{grid-area:papan;grid-template-columns:repeat(13,minmax(0,1fr)) minmax(0,2.4fr);gap:5px}
body.mod-lebar .b5-kekunci:nth-child(-n+13){grid-row:1}
body.mod-lebar .b5-kekunci:nth-child(n+14):nth-child(-n+26){grid-row:2}
body.mod-lebar .b5-kekunci-padam{grid-row:1;grid-column:14}
body.mod-lebar .b5-padam-teks{display:inline}
body.mod-lebar .b5-ikon-padam{width:20px;height:20px}
body.mod-lebar .b5-semak{grid-row:2;grid-column:14}
body.mod-lebar .b5-klu-anak.b5-anak-telefon{display:none}
body.mod-lebar .b5-klu-anak.b5-anak-lebar{display:grid}
body.mod-lebar .b5-klu-bar{align-items:center}
body.mod-lebar .b5-klu-isi{text-align:center}
body.mod-lebar .b5-kekunci{height:42px}
body.mod-lebar .b5-klu-bar{padding:8px 10px}
body.mod-lebar .b5-klu-teks{font-size:1.125rem}
/* kren */
body.mod-lebar .b5-tapak{--blok:26px;--alas:16px;--kaki:58px;--tag:350px;--tiang:104px;height:402px;flex:none}
body.mod-lebar .b5-kren-bawah{grid-template-columns:290px minmax(0,1fr);align-items:center;column-gap:14px}
body.mod-lebar .b5-kren-kawal{gap:12px}
body.mod-lebar .b5-kren-bawah .bisik{min-height:56px;font-size:.9375rem;line-height:1.32}
body.mod-lebar .b5-kren-teks{font-size:1.0625rem}
body.mod-lebar .b5-tiang-nama{font-size:.9375rem}
body.mod-lebar .b5-bumbung-segi{height:40px}
body.mod-lebar .b5-bumbung-jalur b{font-size:1.125rem}
body.mod-lebar .b5-awan.a1{top:120px}body.mod-lebar .b5-awan.a2{top:150px}body.mod-lebar .b5-awan.a3{top:196px}
/* kaunter */
body.mod-lebar .b5-kaunter-meja{grid-template-columns:minmax(0,1fr) 256px;grid-template-areas:"kiri buku" "bisik bisik";align-items:start;column-gap:14px;row-gap:10px}
body.mod-lebar .b5-kaunter-lajur{display:contents}
body.mod-lebar .b5-kaunter-kiri{grid-area:kiri}
body.mod-lebar .b5-kaunter-lajur > .bisik{grid-area:bisik;min-height:52px}
body.mod-lebar .b5-buku{grid-area:buku;align-self:stretch}
body.mod-lebar .b5-tingkap{min-height:226px;padding:10px 12px}
body.mod-lebar .b5-papan-tanda{padding:6px 14px 7px}
body.mod-lebar .b5-pemohon-foto{width:44px}
body.mod-lebar .b5-borang-kepala{padding-bottom:4px}
body.mod-lebar .b5-borang{padding-top:8px}
body.mod-lebar .b2-j-kaunter .b2-kad{padding:9px 20px 10px}
body.mod-lebar .b5-pemohon.keluar{left:12px;right:12px;top:10px}
body.mod-lebar .b5-borang{min-height:204px;padding-bottom:8px}
body.mod-lebar .b5-cap{min-height:48px;margin-top:6px;padding-top:4px}
body.mod-lebar .b5-cap-kesan{text-transform:uppercase;letter-spacing:.03em}
body.mod-lebar .b5-profil li{font-size:1rem}
body.mod-lebar .b5-profil.panjang{grid-template-columns:1fr 1fr;column-gap:14px}
body.mod-lebar .b5-profil.panjang li{font-size:.9375rem}
body.mod-lebar .b5-kaunter-meja.tanpa-buku{grid-template-columns:minmax(0,1fr) 214px}
body.mod-lebar .b5-cop{min-height:80px;padding:7px 4px 7px}
body.mod-lebar .b5-cop-baris{padding:9px 10px}
body.mod-lebar .b5-buku{max-height:392px;overflow-y:auto;overscroll-behavior:contain}
/* bayang tatal: tanda masih ada peraturan di atas/bawah (buku terbuka, skrin lebar) */
body.mod-lebar .b5-buku:not(.tutup){background:linear-gradient(#FFFDF7 45%,rgba(255,253,247,0)) center top/100% 30px no-repeat local,linear-gradient(rgba(255,253,247,0),#FFFDF7 55%) center bottom/100% 30px no-repeat local,radial-gradient(farthest-side at 50% 0,rgba(27,42,92,.24),rgba(27,42,92,0)) center top/100% 14px no-repeat scroll,radial-gradient(farthest-side at 50% 100%,rgba(27,42,92,.24),rgba(27,42,92,0)) center bottom/100% 14px no-repeat scroll,#FFFDF7}
body.mod-lebar .b5-buku.tutup{align-self:start;flex-direction:column;align-items:flex-start;gap:8px}

/* =====================================================================================
   TELEFON (390 x 844) dan TELEFON PENDEK (375 x 667)
   ===================================================================================== */
body.mod-telefon .b2-j-meja .b2-kad-isi,body.mod-telefon .b2-j-kren .b2-kad-isi,body.mod-telefon .b2-j-kaunter .b2-kad-isi{font-size:1rem;line-height:1.25}
body.mod-telefon .b2-j-meja .bisik,body.mod-telefon .b2-j-silang .bisik,body.mod-telefon .b2-j-kren .bisik,body.mod-telefon .b2-j-kaunter .bisik{min-height:2.9em;padding:8px 12px}
body.mod-telefon .b2-j-silang .bisik{min-height:2.7em;padding:6px 8px 6px 12px;font-size:.875rem;line-height:1.32;flex-wrap:nowrap}
body.mod-telefon .b2-j-silang .b2-bisik-teks{flex:1 1 auto;min-width:0}
body.mod-telefon .b5-kekunci{height:42px}
body.mod-telefon .b5-cop-baris{gap:6px;padding:9px 8px}
body.mod-telefon .b5-cop{padding:8px 3px}
body.mod-telefon .b5-anak-telefon{height:42px}
body.mod-telefon .b5-papan-huruf{gap:4px}
@media (max-height:700px){
  body.mod-telefon .b5-meja-bingkai{width:min(100%,214px)}
  body.mod-telefon .b5-tangan-slot,body.mod-telefon .b5-kad-nama{min-height:58px}
  body.mod-telefon .b2-j-meja .bisik{min-height:2.6em;padding:6px 12px;font-size:.875rem;line-height:1.32}
  body.mod-telefon .b5-pusat-tajuk{font-size:.875rem}
  body.mod-telefon .b5-borang-label{display:none}
  body.mod-telefon .b5-pemohon-foto{width:42px}
  body.mod-telefon .b5-profil.panjang li{font-size:.875rem;line-height:1.3}
  body.mod-telefon .b5-profil{gap:3px}
  body.mod-telefon .b5-tingkap{padding:10px}
  body.mod-telefon .b5-legenda-btn{min-height:44px}
  body.mod-telefon .b5-tapak{--blok:18px;--alas:12px;--kaki:62px;--tag:236px;height:318px}
  body.mod-telefon .b5-awan.a1{top:80px}body.mod-telefon .b5-awan.a2{top:108px}body.mod-telefon .b5-awan.a3{top:140px}
  body.mod-telefon .b5-tingkap{min-height:204px}
  body.mod-telefon .b5-borang{min-height:168px}
  body.mod-telefon .b5-cap{min-height:46px;margin-top:6px;padding-top:4px}
  body.mod-telefon .b5-cop{min-height:78px;padding:6px 3px 7px}
  body.mod-telefon .b5-grid-bungkus{max-height:max(176px,calc(100dvh - 500px))}
}
@media (max-width:370px){
  .b5-kekunci{font-size:1rem}
  .b5-kekunci-padam{font-size:.875rem}
}
@media (prefers-reduced-motion:reduce){
  .b5-kad-nama.masuk,.b5-draf.masuk,.b5-pemohon.datang,.b5-sel.sapu,.b5-sel.kilat,.b5-slot.mendarat,.b5-slot.jatuh-masuk,.b5-meja-pusat.baru,.b5-kerusi.baru .b5-kerusi-bulat{animation:none}
  .b5-tapak.rai .b5-kilau i{animation:none}
  /* keadaan akhir yang biasanya dicapai melalui animasi */
  .b5-draf.dicop .b5-draf-cop{opacity:.95;transform:rotate(-7deg)}
  .b5-tapak.rai .b5-panji i{opacity:1;transform:none}
}