/* ===== Babak · pakej enjin Bab 4 (kumpulan 4b): undi, tajukberita, pindah, obor. Awalan kelas b4-.
   Susun atur diskop dengan .b2-j-<jenis> (main) / .b2-p-<jenis> (pentas) dan body.mod-lebar / body.mod-telefon. ===== */

/* ---------- pembantu kongsi ---------- */
.b4-hantu{position:absolute!important;z-index:30!important;margin:0!important;pointer-events:none!important;transform-origin:50% 50%;will-change:transform;transition:none!important;animation:none!important}
@keyframes b4-kilat{0%,100%{filter:none}50%{filter:brightness(1.12)}}
@keyframes b4-angguk{0%,100%{transform:none}30%{transform:translateY(-8px) rotate(-2deg)}60%{transform:translateY(-3px) rotate(1deg)}}
@keyframes b4-terima{0%{transform:none}35%{transform:translateY(4px) scaleY(.94)}70%{transform:translateY(-3px)}100%{transform:none}}

/* =====================================================================================
   4.5 UNDI · dewan majlis, papan kiraan, peti undi, kertas undi
   ===================================================================================== */
.b4-dewan{position:relative;display:grid;gap:10px;padding:10px 10px 0;border-radius:24px;overflow:hidden;
  background:repeating-linear-gradient(90deg,rgba(138,82,38,.08) 0 2px,transparent 2px 46px),linear-gradient(#F6E6C4,#EBCF9C);
  box-shadow:var(--bayang),inset 0 0 0 3px rgba(255,255,255,.45)}
.b4-papan-kira{background:radial-gradient(ellipse at 50% 25%,#3E7862,#29574A);border:6px solid #B8743C;border-radius:14px;padding:5px 10px 4px;color:#FFFDF2;box-shadow:0 4px 0 #8A5226,inset 0 0 0 2px rgba(255,255,255,.08)}
.b4-papan-tajuk{font-size:.875rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;text-align:center;opacity:.8;line-height:1.25}
.b4-kira-baris{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:2px 12px;margin-top:2px}
.b4-kira-lajur{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:6px;padding-top:3px;border-top:2px dashed rgba(255,255,255,.18);min-width:0}
.b4-kira-nama{grid-column:1/-1;display:flex;align-items:center;gap:6px;font-size:.875rem;font-weight:800;line-height:1.15;min-width:0}
.b4-kira-titik{flex:none;width:12px;height:12px;border-radius:50%;background:var(--w);box-shadow:0 0 0 2px rgba(255,255,255,.75)}
.b4-kira-garis{display:block;width:100%;height:30px;overflow:visible}
.b4-kira-n{font-size:1.5rem;font-weight:900;line-height:1;min-width:1.1em;text-align:right}
.b4-kira-lajur.tambah .b4-kira-n{animation:lompat .45s ease-out}
.b4-kapur{fill:none;stroke:#FFFDF2;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:40;stroke-dashoffset:40;animation:b4-lukis .38s ease-out forwards}
.b4-kapur.dibantu{stroke:#FF8F94}
.b4-kapur.siap{animation:none;stroke-dashoffset:0}
@keyframes b4-lukis{to{stroke-dashoffset:0}}

.b4-peti-baris{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:10px;padding:2px 4px 0}
.b4-peti{position:relative;display:flex;flex-direction:column;min-height:112px;padding:0 3px;background:none;color:var(--ink);transition:transform .18s ease}
.b4-peti-atas{position:relative;height:22px;border-radius:12px 12px 3px 3px;background:linear-gradient(var(--wd),var(--w));box-shadow:inset 0 3px 0 rgba(255,255,255,.28)}
.b4-peti-lubang{position:absolute;left:50%;top:7px;width:60%;height:8px;transform:translateX(-50%);border-radius:5px;background:#101838;box-shadow:inset 0 2px 1px #000,0 1px 0 rgba(255,255,255,.35);transition:box-shadow .15s}
.b4-peti-depan{position:relative;flex:1 1 auto;display:grid;align-content:center;justify-items:center;gap:4px;margin:0 3px;padding:12px 4px 12px;border-radius:0 0 10px 10px;background:linear-gradient(var(--w),var(--wd));box-shadow:0 6px 0 rgba(27,42,92,.3)}
.b4-peti-depan::before{content:"";position:absolute;left:8px;right:8px;top:5px;height:3px;border-radius:2px;background:rgba(255,255,255,.28)}
.b4-peti-nama{display:block;max-width:100%;background:#FFFDF7;color:var(--ink);border-radius:8px;padding:5px 6px;font-weight:900;font-size:.875rem;line-height:1.15;text-align:center;box-shadow:0 2px 0 rgba(0,0,0,.18);overflow-wrap:break-word}
.b4-nama-pendek{display:none}
body.mod-telefon .b4-kira-nama .b4-nama-penuh,body.mod-telefon .b4-n3 .b4-peti-nama .b4-nama-penuh{display:none}
body.mod-telefon .b4-kira-nama .b4-nama-pendek,body.mod-telefon .b4-n3 .b4-peti-nama .b4-nama-pendek{display:inline}
.b4-peti-sub{display:none;color:#fff;font-size:.875rem;font-weight:700;line-height:1.2;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,.2)}
.b4-peti-kaki{height:8px;margin:0 12px;background:linear-gradient(90deg,#6E3F1B 0 12px,transparent 12px calc(100% - 12px),#6E3F1B calc(100% - 12px))}
.b4-peti:not([disabled]):hover{transform:translateY(-3px)}
.b4-peti.dekat{transform:translateY(-6px) scale(1.04)}
.b4-peti.dekat .b4-peti-lubang,.b4-peti:focus-visible .b4-peti-lubang{box-shadow:0 0 0 4px #FFE57F}
.b4-peti.terima{animation:b4-terima .45s ease-out}
.b4-peti.terima .b4-peti-depan{box-shadow:0 6px 0 rgba(27,42,92,.3),0 0 0 4px #FFC933;transition:box-shadow .2s}
.b4-peti.terima .b4-peti-lubang{box-shadow:0 0 0 4px #FFE57F}
.b4-peti.salah{animation:goncang .4s}
.b4-peti.salah .b4-peti-depan{box-shadow:0 6px 0 var(--merah-d),0 0 0 4px #F94F55}
.b4-peti.kilat .b4-peti-depan{box-shadow:0 6px 0 #1E9E63,0 0 0 4px #2FA05C;animation:b4-kilat 1s ease-in-out infinite}
.b4-peti[disabled]{cursor:default}

.b4-meja{position:relative;display:grid;justify-items:center;margin:2px -10px 0;padding:16px 12px 16px;background:linear-gradient(#C08449,#99602F);box-shadow:inset 0 5px 0 #DDA86C}
.b4-kertas{position:relative;width:min(100%,330px);min-height:90px;padding:14px 46px 12px 14px;border-radius:6px;background:linear-gradient(#FFFDF7,#FBF1DA);color:var(--ink);
  box-shadow:0 5px 0 rgba(27,42,92,.18),0 12px 18px rgba(27,42,92,.22);display:grid;gap:5px;align-content:center;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.b4-kertas::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-radius:6px 6px 0 0;background:radial-gradient(circle at 5px 0,transparent 3px,#E6D7B5 3.5px) 0 0/10px 6px repeat-x}
.b4-kertas-kotak{position:absolute;right:12px;top:50%;width:24px;height:24px;margin-top:-12px;border:3px solid var(--ink2);border-radius:5px;opacity:.7}
.b4-kertas-tag{justify-self:start;padding:2px 10px;border-radius:10px;background:#EEF2FB;color:var(--ink2);font-size:.875rem;font-weight:900;line-height:1.3}
.b4-kertas-teks{font-size:1.0625rem;font-weight:900;line-height:1.3;text-wrap:balance}
.b4-kertas.masuk{animation:b4-kertas-masuk .5s ease-out both}
.b4-kertas.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 5px 0 var(--merah-d),0 0 0 3px #E0555D;animation:goncang .4s}
.b4-kertas.angguk{animation:b4-angguk .5s ease}
.b4-kertas-terbang{cursor:grabbing;box-shadow:0 14px 26px rgba(27,42,92,.32)}
.b4-kertas-terbang.lipat::after{content:"";position:absolute;left:6px;right:6px;top:50%;height:2px;background:rgba(27,42,92,.3)}
.b4-kertas-terbang.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 0 0 3px #E0555D,0 14px 26px rgba(27,42,92,.3)}
.b4-kertas-terbang.dibantu{background:#FFE3E5}
@keyframes b4-kertas-masuk{from{opacity:0;transform:translate(70px,16px) rotate(9deg)}to{opacity:1;transform:none}}

.b4-meja.ada-akhir{padding:12px 10px 14px}
.b4-undi-akhir{width:100%;max-width:560px;display:grid;gap:6px;padding:10px 16px 12px;border-radius:16px;background:radial-gradient(ellipse at 50% 20%,#3E7862,#29574A);border:5px solid #B8743C;color:#FFFDF2;box-shadow:0 5px 0 #6E3F1B}
.b4-undi-akhir.masuk{animation:lompat .45s ease-out both}
.b4-akhir-label{display:flex;align-items:center;gap:6px;font-size:.875rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#FFE57F}
.b4-akhir-label .ikon{width:17px;height:17px}
.b4-akhir-tajuk{font-size:1.125rem;line-height:1.25}
.b4-akhir-isi{font-size:.9375rem;font-weight:700;line-height:1.4}
.b4-akhir-kira{display:grid;gap:2px}
.b4-akhir-baris{display:grid;grid-template-columns:6.8em minmax(0,1fr) auto;align-items:center;gap:8px}
.b4-akhir-nama{font-size:.9375rem;font-weight:900}
.b4-akhir-n{font-size:1.625rem;font-weight:900;line-height:1}
.b4-akhir-hlm{font-size:.875rem;font-weight:700;opacity:.8}
.b4-rumus-peti{display:grid;gap:8px}
.b4-rumus-peti > div{border-radius:14px;padding:8px 12px;background:#F3F6FD;box-shadow:inset 5px 0 0 var(--w);display:grid;gap:4px;align-content:start}
.b4-rumus-peti b{font-size:.9375rem}
.b4-rumus-peti ul{display:grid;gap:3px}
.b4-rumus-peti li{position:relative;padding-left:14px;font-size:.875rem;font-weight:700;line-height:1.35;color:var(--ink2)}
.b4-rumus-peti li::before{content:"";position:absolute;left:0;top:.45em;width:7px;height:7px;border-radius:2px;background:var(--w)}

/* lajur lebar: flex + margin auto supaya isi berpusat jika muat, dan boleh ditatal dari atas jika lebih tinggi (contoh Rumusan) */
body.mod-lebar .b2-main.b2-j-undi .main-badan,body.mod-lebar .b2-main.b2-j-tajukberita .main-badan,body.mod-lebar .b2-main.b2-j-pindah .main-badan{display:flex;flex-direction:column;overflow-y:auto;padding:2px 4px 6px}
body.mod-lebar .b2-main.b2-j-undi .main-badan > .pentas,body.mod-lebar .b2-main.b2-j-tajukberita .main-badan > .pentas,body.mod-lebar .b2-main.b2-j-pindah .main-badan > .pentas{flex:none;margin-block:auto}
body.mod-lebar .b2-main.b2-j-undi .main-badan{top:90px;bottom:12px}
body.mod-lebar .b4-dewan{padding:12px 16px 0;gap:12px}
body.mod-lebar .b4-papan-kira{padding:6px 18px 6px}
body.mod-lebar .b4-kira-nama{font-size:.9375rem}
body.mod-lebar .b4-kira-baris{gap:2px 28px}
body.mod-lebar .b4-peti-baris{gap:26px;padding:2px 36px 0}
body.mod-lebar .b4-peti{min-height:136px}
body.mod-lebar .b4-peti-nama{font-size:1.0625rem;padding:6px 10px}
body.mod-lebar .b4-peti-sub{display:block}
body.mod-lebar .b4-peti .op-no{position:absolute;left:8px;top:10px}
body.mod-lebar .b4-meja{margin:2px -16px 0;padding:16px 16px 18px}
body.mod-lebar .b4-kertas{width:min(100%,440px);min-height:98px}
body.mod-lebar .b4-kertas-teks{font-size:1.25rem}
body.mod-lebar .b4-rumus-peti{grid-template-columns:repeat(var(--n,2),minmax(0,1fr))}
body.mod-lebar .b2-p-undi .b2-rumus{max-width:none}

/* =====================================================================================
   4.6 TAJUKBERITA · muka depan akhbar, jubin huruf cetak, penggelek
   ===================================================================================== */
.b4-akhbar-meja{display:grid;gap:12px}
.b4-akhbar{position:relative;overflow:hidden;display:grid;gap:6px;align-content:start;padding:12px 14px 16px;border-radius:6px;
  background:radial-gradient(rgba(90,70,40,.07) 1px,transparent 1.2px) 0 0/6px 6px,linear-gradient(#FDF6E4,#F8EBCB);
  color:#1D1A16;box-shadow:0 6px 0 rgba(27,42,92,.18),0 16px 26px rgba(27,42,92,.2)}
.b4-akhbar.masuk-halaman{animation:b4-halaman .5s ease-out}
@keyframes b4-halaman{from{transform:translateX(46px) rotate(2deg);opacity:0}to{transform:none;opacity:1}}
.b4-akhbar-kepala{display:grid;justify-items:center;gap:3px;padding-bottom:5px;border-bottom:4px double #1D1A16}
.b4-akhbar-nama{font-size:1.75rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase;line-height:1;text-align:center}
.b4-akhbar-baris{display:flex;flex-wrap:wrap;justify-content:center;gap:0 12px;width:100%;padding-top:4px;border-top:1px solid #1D1A16;font-size:.875rem;font-weight:800;color:#4A4236}
.b4-rekaan{color:#B34A0C}
.b4-akhbar-tarikh:empty{display:none}
.b4-akhbar-seksyen{justify-self:start;margin-top:2px;padding:1px 10px;background:#1D1A16;color:#FDF3DC;font-size:.875rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.b4-nota-wartawan{position:relative;justify-self:stretch;margin:2px 0;padding:8px 12px 9px;border-radius:4px;background:#FFF1A8;color:#3B352C;font-size:.9375rem;font-weight:700;line-height:1.4;box-shadow:0 3px 0 rgba(138,82,38,.18);transform:rotate(-.6deg)}
.b4-nota-wartawan b{display:block;font-size:.875rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#8A4B00}
.b4-nota-wartawan::before{content:"";position:absolute;left:50%;top:-6px;width:46px;height:12px;margin-left:-23px;background:rgba(255,255,255,.6);transform:rotate(3deg)}
.b4-tajuk{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;min-height:56px;padding:4px 0;font-size:1.3125rem;font-weight:900;line-height:1.15;letter-spacing:.01em;text-transform:uppercase}
.b4-slot{display:inline-flex;align-items:center;justify-content:center;min-width:calc(var(--c,4) * .62em + .4em);height:1.55em;padding:0 .2em;border-radius:6px;border-bottom:4px dashed #B9A98A;background:rgba(27,42,92,.05);color:#1D1A16}
.b4-slot.isi{border-bottom:0;background:none;padding:0;min-width:0;height:auto}
.b4-kata{color:#3B352C}
.b4-kata.beri{color:#0E7C6C}
.b4-kata.dibantu{color:#C9323F}
.b4-kata.masuk{animation:b4-tekan-kata .35s ease-out}
@keyframes b4-tekan-kata{0%{transform:scale(1.35);opacity:0;filter:blur(2px)}100%{transform:none;opacity:1;filter:none}}
.b4-tajuk.dicetak .b4-kata{color:#111}
.b4-tajuk.dicetak .b4-kata.dibantu{color:#C9323F}
.b4-kursor{display:inline-block;width:.45em;height:1.15em;border-radius:3px;background:#1D1A16;animation:kursor 1s steps(2,jump-none) infinite}
.b4-tajuk.dicetak .b4-kursor{display:none}
.b4-akhbar-isi{display:grid;gap:8px;padding-top:9px;border-top:1px solid #C9BB9C;min-height:74px;align-content:start}
.b4-garis-kabur{display:block;height:9px;border-radius:5px;background:#E6D9BB}
.b4-isi-teks{font-size:.9375rem;font-weight:700;line-height:1.5;color:#2B261F;animation:b4-dakwat .7s ease-out}
@keyframes b4-dakwat{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:none}}
.b4-akhbar-cop{position:absolute;right:12px;top:78px;padding:3px 12px;border:4px solid #C9323F;border-radius:10px;color:#C9323F;font-size:1.125rem;font-weight:900;letter-spacing:.12em;transform:rotate(-12deg) scale(1.8);opacity:0;pointer-events:none;background:rgba(253,246,228,.7)}
.b4-akhbar.siap .b4-akhbar-cop{animation:b4-cop .38s ease-out .12s forwards}
@keyframes b4-cop{to{transform:rotate(-12deg) scale(1);opacity:.92}}
.b4-penggelek{position:absolute;left:-12px;right:-12px;top:-44px;height:36px;border-radius:18px;background:linear-gradient(#6D7DB0,#1B2A5C 55%,#0C1538);box-shadow:0 12px 20px rgba(0,0,0,.28);opacity:0;pointer-events:none}
.b4-akhbar.menggelek .b4-penggelek{animation:b4-gelek .9s ease-in-out forwards}
@keyframes b4-gelek{0%{top:-44px;opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}
.b4-akhbar-sisi{display:grid;gap:10px;align-content:start}
.b4-bekas-label{display:flex;align-items:center;gap:6px;font-size:.875rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.b4-bekas-label .ikon{width:17px;height:17px}
.b4-bekas{display:flex;flex-wrap:wrap;gap:9px 8px;justify-content:center;padding:12px 10px 14px;border-radius:18px;background:linear-gradient(#8A5226,#6E3F1B);box-shadow:inset 0 3px 0 rgba(255,255,255,.12),0 5px 0 #4E2C12}
.b4-bekas.masuk{animation:lompat .35s ease-out both}
.b4-bekas.pudar{opacity:.35;transition:opacity .3s}
.b4-jubin{min-height:46px;padding:6px 13px;border-radius:10px;background:linear-gradient(#FFF3DA,#EFD3A3);color:#2B1C0E;font-size:1rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 4px 0 #B8743C,inset 0 -3px 0 rgba(138,82,38,.18);transition:transform .08s ease,opacity .25s ease}
.b4-jubin:active:not([disabled]){transform:translateY(3px);box-shadow:0 1px 0 #B8743C}
.b4-jubin.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 4px 0 var(--merah-d),0 0 0 3px #E0555D;animation:goncang .4s}
.b4-jubin.kilat{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 4px 0 #1E9E63,0 0 0 3px #2FA05C;animation:b4-kilat 1s ease-in-out infinite}
.b4-jubin.betul{background:var(--betul-bg);color:var(--betul-teks)}
.b4-jubin.guna{opacity:.22;transform:scale(.9);box-shadow:none}
.b4-soal-berita{display:grid;gap:8px;padding:12px 14px;border-radius:20px;background:#fff;box-shadow:var(--bayang)}
.b4-soal-berita.masuk,.b4-soal-akhir.masuk{animation:lompat .35s ease-out both}
.b4-soal-label{font-size:.875rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-teks)}
.b4-soal-s{font-size:1.0625rem;font-weight:900;line-height:1.3}
.b4-pilih-berita,.b4-pilih-akhir{grid-template-columns:minmax(0,1fr)}
.b4-op-berita,.b4-op-akhir{min-height:50px;font-size:.9375rem}
.b4-seterus{width:100%}
.b4-seterus.masuk{animation:lompat .35s ease-out both}
.b4-rumus-akhbar{display:grid;gap:8px}
.b4-rumus-akhbar li{display:grid;gap:3px;padding:8px 12px;border-radius:12px;background:#FDF6E4;box-shadow:inset 4px 0 0 #1D1A16}
.b4-rumus-akhbar b{font-size:.9375rem;font-weight:900;letter-spacing:.02em;text-transform:uppercase;color:#1D1A16}
.b4-rumus-akhbar span{font-size:.875rem;font-weight:700;line-height:1.4;color:var(--ink2)}

body.mod-telefon .b4-akhbar-nama{font-size:1.5rem}
body.mod-telefon .b4-akhbar:not(.siap) .b4-akhbar-isi{display:none}
body.mod-telefon .b4-nota-wartawan{font-size:.875rem}
body.mod-telefon .b4-tajuk{min-height:48px}
body.mod-lebar .b2-main.b2-j-tajukberita .main-badan{top:88px;bottom:12px}
body.mod-lebar .b4-akhbar-meja{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:start;gap:16px}
body.mod-lebar .b4-akhbar{padding:14px 18px 18px}
body.mod-lebar .b4-akhbar:not(.siap) .b4-garis-kabur:nth-child(n+4){display:none}
body.mod-lebar .b4-akhbar-nama{font-size:2.25rem}
body.mod-lebar .b4-tajuk{font-size:1.5rem;min-height:70px}
body.mod-lebar .b4-isi-teks{font-size:1rem}
body.mod-lebar .b4-akhbar-cop{top:92px}
body.mod-lebar .b4-jubin{min-height:50px;font-size:1.0625rem}
body.mod-lebar .b4-soal-s{font-size:1.125rem}

/* =====================================================================================
   4.7 PINDAH · peta Sabah + Labuan, pin bandar, kotak tindakan, dulang token pemimpin (rekod pindah)
   ===================================================================================== */
.b4-pindah-papan{display:grid;gap:12px}
.b4-peta-lajur{display:grid;gap:10px;align-content:start}
.b4-peta{position:relative;aspect-ratio:1000/700;border-radius:20px;overflow:hidden;box-shadow:var(--bayang);background:#2BA9E8}
.b4-peta-svg{position:absolute;inset:0;width:100%;height:100%}
/* butang bandar: kawasan 44 x 44 berpusat pada koordinat; label di atas, bawah, kanan atau kiri (dipilih oleh enjin) */
.b4-bandar{position:absolute;z-index:2;width:44px;height:44px;margin:0;padding:0;background:none;color:var(--ink);transform:translate(-50%,-50%)}
.b4-pin{position:absolute;inset:0;display:grid;place-items:center}
.b4-pin i{width:18px;height:18px;border-radius:50%;background:#C9323F;border:3px solid #fff;box-shadow:0 2px 0 rgba(0,0,0,.3)}
.b4-bandar-nama{position:absolute;padding:3px 9px;border-radius:10px;background:rgba(255,253,247,.95);font-size:.875rem;font-weight:900;line-height:1.2;white-space:nowrap;box-shadow:0 2px 0 rgba(27,42,92,.25);transition:box-shadow .15s ease,background-color .15s ease}
.b4-bandar.l-atas .b4-bandar-nama{left:50%;bottom:calc(100% - 9px);transform:translateX(calc(-50% + var(--geser,0px)))}
.b4-bandar.l-bawah .b4-bandar-nama{left:50%;top:calc(100% - 9px);transform:translateX(calc(-50% + var(--geser,0px)))}
.b4-bandar.l-kanan .b4-bandar-nama{left:calc(100% - 8px);top:50%;transform:translateY(-50%)}
.b4-bandar.l-kiri .b4-bandar-nama{right:calc(100% - 8px);top:50%;transform:translateY(-50%)}
.b4-bandar.asal .b4-pin::before{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:3px dashed var(--wa,#EC6F1F);animation:pusing 9s linear infinite}
.b4-bandar.sedia .b4-pin i{animation:b4-denyut 1.3s ease-in-out infinite}
.b4-bandar.sedia .b4-bandar-nama{box-shadow:0 0 0 3px #FFC933,0 2px 0 rgba(27,42,92,.25)}
.b4-bandar.dekat .b4-bandar-nama,.b4-bandar:focus-visible .b4-bandar-nama{background:#FFF1BF;box-shadow:0 0 0 4px #E8971A}
.b4-bandar:focus-visible{outline:none}
.b4-bandar.salah .b4-bandar-nama{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 0 0 3px #E0555D}
.b4-bandar.salah .b4-pin{animation:goncang .4s}
.b4-bandar.salah .b4-pin i{background:#F94F55}
.b4-bandar.kilat .b4-bandar-nama{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 0 0 3px #2FA05C;animation:b4-kilat 1s ease-in-out infinite}
.b4-bandar.terima .b4-pin i{animation:lompat .45s ease-out}
@keyframes b4-denyut{0%,100%{box-shadow:0 0 0 0 rgba(255,201,51,.9),0 2px 0 rgba(0,0,0,.3)}50%{box-shadow:0 0 0 9px rgba(255,201,51,0),0 2px 0 rgba(0,0,0,.3)}}
.b4-letak{display:flex;flex-wrap:wrap;gap:0;pointer-events:none}
.b4-bandar .b4-letak{position:absolute;left:29px;top:25px;flex-wrap:nowrap}
.b4-avatar{flex:none;display:grid;place-items:center;width:24px;height:24px;margin-right:-6px;border-radius:50%;background:var(--w);color:#fff;border:2px solid #fff;box-shadow:0 2px 0 rgba(27,42,92,.3)}
.b4-avatar svg{width:15px;height:15px;display:block}
.b4-avatar.dibantu{background:#F94F55}
.b4-avatar.masuk{animation:lompat .4s ease-out both}
.b4-anak{fill:none;stroke:#1B2A5C;stroke-width:6;stroke-dasharray:16 12;stroke-linecap:round;opacity:.75;animation:b4-anak-masuk .8s ease-out}
.b4-anak.dibantu{stroke:#C9323F}
@keyframes b4-anak-masuk{from{opacity:0}to{opacity:.75}}
.b4-kotak-baris{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:8px}
/* 4 kotak atau lebih: 2 x 2 (telefon dan lebar) supaya perkataan panjang seperti "Dipenjarakan" muat dalam kotak */
.b4-kotak-baris.b4-kotak-banyak{grid-template-columns:repeat(2,minmax(0,1fr))}
.b4-kotak{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:center;gap:6px;min-height:60px;padding:8px 6px 10px;border-radius:16px;background:#fff;color:var(--ink);text-align:center;box-shadow:var(--lip),inset 0 0 0 2px var(--garis);transition:transform .15s ease}
.b4-kotak-nama{font-size:.875rem;font-weight:900;line-height:1.2;overflow-wrap:break-word;max-width:100%}
.b4-kotak .b4-letak{justify-content:center;padding-right:6px}
.b4-kotak.sedia{box-shadow:var(--lip),inset 0 0 0 3px #FFC933}
.b4-kotak.dekat,.b4-kotak:focus-visible{transform:translateY(-3px);background:#FFF6D8;box-shadow:0 6px 0 var(--emas-d),inset 0 0 0 3px var(--emas)}
.b4-kotak.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}
.b4-kotak.kilat{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 5px 0 #1E9E63,inset 0 0 0 3px #2FA05C;animation:b4-kilat 1s ease-in-out infinite}
.b4-kotak.terima{animation:lompat .45s ease-out}
.b4-pindah-sisi{display:grid;gap:10px;align-content:start}
.b4-dulang-balut{display:grid;gap:8px;padding:10px;border-radius:20px;background:#fff;box-shadow:var(--bayang)}
.b4-dulang-balut.angguk{animation:goncang .4s}
.b4-dulang-kepala{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.b4-dulang-label{font-size:.875rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:var(--teal-teks);margin-right:auto}
.b4-org{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 4px 0 10px;border-radius:15px;background:var(--w);color:#fff;font-size:.875rem;font-weight:900;white-space:nowrap}
.b4-org-kira{min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:rgba(255,255,255,.3);display:grid;place-items:center;font-size:.875rem}
.b4-org-lemah{display:none;font-size:.875rem;font-weight:800;padding-right:6px}
.b4-org.kurang .b4-org-kira{animation:lompat .4s ease-out}
.b4-org.lemah{background:#8C98BC;animation:b4-lemah .6s ease-out}
.b4-org.lemah .b4-org-kira{display:none}
.b4-org.lemah .b4-org-lemah{display:inline}
.b4-org.lemah .b4-org-nama{text-decoration:line-through;text-decoration-thickness:2px}
@keyframes b4-lemah{0%{transform:none}40%{transform:scale(.9) rotate(-3deg)}100%{transform:none}}
.b4-dulang{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.b4-tokoh{display:flex;align-items:center;gap:8px;min-height:52px;padding:6px 8px;border-radius:16px;background:#fff;color:var(--ink);text-align:left;box-shadow:0 4px 0 var(--wd),inset 0 0 0 2px var(--w);touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .15s ease}
.b4-tokoh-wajah{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--w);color:#fff;box-shadow:inset 0 -3px 0 var(--wd)}
.b4-tokoh-wajah svg{width:22px;height:22px;display:block}
.b4-tokoh-teks{display:grid;min-width:0}
.b4-tokoh-teks b{font-size:.875rem;font-weight:900;line-height:1.2}
.b4-tokoh-teks small{font-size:.875rem;font-weight:800;color:var(--ink2);line-height:1.2}
.b4-tokoh-dari{color:#B34A0C!important}
.b4-tokoh-ke{display:none;color:var(--betul-teks)!important}
.b4-tokoh.pilih{transform:translateY(-4px);background:#FFF6D8;box-shadow:0 6px 0 var(--emas-d),inset 0 0 0 3px var(--emas)}
.b4-tokoh.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}
.b4-tokoh.salah small{color:var(--salah-teks)}
.b4-tokoh.siap{background:#F1F8F4;box-shadow:inset 0 0 0 2px #BFE6CF;cursor:default;touch-action:auto}
.b4-tokoh.siap .b4-tokoh-wajah{opacity:.75}
.b4-tokoh.siap .b4-tokoh-org,.b4-tokoh.siap .b4-tokoh-dari{display:none}
.b4-tokoh.siap .b4-tokoh-ke{display:block}
.b4-tokoh.siap.dibantu{background:#FFF1F2;box-shadow:inset 0 0 0 2px #F7B5BA}
.b4-tokoh.siap.dibantu .b4-tokoh-ke{color:var(--salah-teks)!important}
.b4-tokoh.masuk{animation:lompat .35s ease-out}
.b4-tokoh-terbang{box-shadow:0 12px 22px rgba(27,42,92,.3)}
.b4-tokoh-terbang.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 0 0 3px #E0555D,0 12px 22px rgba(27,42,92,.3)}
.b4-soal-akhir{display:grid;gap:8px;padding:12px 14px;border-radius:20px;background:#fff;box-shadow:var(--bayang)}
body.mod-telefon .b4-peta-lajur,body.mod-telefon .b4-pindah-sisi{display:contents}
body.mod-telefon .b4-peta{order:1}body.mod-telefon .b4-soal-akhir{order:2}body.mod-telefon .b4-dulang-balut{order:3}body.mod-telefon .b4-kotak-baris{order:4}
body.mod-telefon .b4-kotak-nama .b4-nama-penuh{display:none}body.mod-telefon .b4-kotak-nama .b4-nama-pendek{display:inline}
body.mod-telefon .b4-dulang{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
body.mod-telefon .b4-dulang .b4-tokoh{flex-direction:column;justify-content:center;gap:3px;min-height:74px;padding:6px 4px 7px;text-align:center}
body.mod-telefon .b4-dulang .b4-tokoh-org{display:none}
body.mod-telefon .b4-dulang .b4-tokoh-wajah{width:30px;height:30px}
body.mod-telefon .b2-p-pindah .b2-kad-isi,body.mod-telefon .b2-p-undi .b2-kad-isi,body.mod-telefon .b2-p-tajukberita .b2-kad-isi{font-size:1.0625rem}

body.mod-lebar .b2-main.b2-j-pindah .main-badan{top:88px;bottom:12px}
body.mod-lebar .b4-pindah-papan{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start;gap:14px}
body.mod-lebar .b4-dulang{grid-template-columns:minmax(0,1fr);gap:7px}
body.mod-lebar .b4-tokoh{min-height:50px}
body.mod-lebar .b4-bandar-nama{font-size:.9375rem}
body.mod-lebar .b4-kotak{min-height:66px}
body.mod-lebar .b4-kotak-nama{font-size:.9375rem}
body.mod-lebar .b2-p-pindah .b2-kad-isi{font-size:1.25rem}

/* =====================================================================================
   4.8 OBOR · larian obor (jalur, tanpa watak): tiang buluh, api berkelip perlahan, dail tahun
   ===================================================================================== */
.b4-api{transform-box:fill-box;transform-origin:50% 100%;animation:b4-kelip 1.9s ease-in-out infinite}
@keyframes b4-kelip{0%,100%{transform:scale(1,1) skewX(0)}30%{transform:scale(.96,1.07) skewX(-2deg)}65%{transform:scale(1.04,.95) skewX(2deg)}}
.b4-cahaya{animation:b4-cahaya 2.8s ease-in-out infinite}
@keyframes b4-cahaya{0%,100%{opacity:.8}50%{opacity:1}}
.b4-bintang{animation:b4-kerlip 4.6s ease-in-out infinite}
@keyframes b4-kerlip{0%,100%{opacity:.35}50%{opacity:.9}}
.b4-tiang.padam .b4-buluh{fill:#F94F55}
.b4-condong .b4-api{animation:b4-condong .9s ease-in-out}
@keyframes b4-condong{0%,100%{transform:none}35%{transform:skewX(-24deg) scale(.86,.9)}70%{transform:skewX(-10deg)}}
.b4-pilih-obor.j-dail{grid-template-columns:minmax(0,1fr)}
.b4-dail{display:grid;gap:12px;justify-items:center;padding:12px;border-radius:22px;background:linear-gradient(#44527F,#2E3A63);box-shadow:var(--bayang)}
.b4-dail.masuk{animation:lompat .3s ease-out both}
.b4-dail-roda-baris{display:flex;gap:10px;justify-content:center}
.b4-dail-roda{display:grid;justify-items:center;gap:4px;padding:4px;border-radius:16px;background:rgba(255,255,255,.08);transition:box-shadow .15s}
.b4-dail-roda.kursor{box-shadow:0 0 0 3px #FFC933}
.b4-dail-btn{width:54px;height:44px;border-radius:12px;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 3px 0 rgba(0,0,0,.3)}
.b4-dail-btn:active:not([disabled]){transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.3)}
.b4-dail-btn[disabled]{opacity:.55}
.b4-dail-btn .ikon{width:22px;height:22px;stroke-width:3;transform:rotate(90deg)}
.b4-dail-angka{width:54px;height:58px;border-radius:12px;background:#FFFDF7;display:grid;place-items:center;font-size:2.125rem;font-weight:900;color:var(--ink);box-shadow:inset 0 3px 0 rgba(27,42,92,.15)}
.b4-dail.salah{animation:goncang .4s}
.b4-dail.salah .b4-dail-angka{background:var(--salah-bg);color:var(--salah-teks)}
.b4-dail.betul .b4-dail-angka,.b4-dail.kilat .b4-dail-angka{background:var(--betul-bg);color:var(--betul-teks)}
.b4-dail-semak{min-width:210px}
body.mod-lebar .b2-main.b2-j-obor .main-badan{left:796px;width:456px;top:84px;bottom:20px;display:flex;flex-direction:column;align-content:stretch}
body.mod-lebar .b2-p-obor{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
body.mod-lebar .b2-p-obor .b2-kad-isi{font-size:1.3125rem}
body.mod-lebar .b2-p-obor .b2-bawah.b4-ada-rumus{min-height:0;flex:1 1 auto;display:flex;flex-direction:column}
body.mod-lebar .b2-p-obor .b2-rumus{flex:0 1 auto;display:flex;flex-direction:column;min-height:0}
body.mod-lebar .b2-p-obor .b2-rumus > .b2-rumus-tokoh{min-height:0;flex:1 1 auto;overflow-y:auto;padding-right:4px}
body.mod-lebar .b2-p-obor .b2-rumus > .btn{flex:none}
body.mod-lebar .b2-p-obor .b2-rumus-tokoh{grid-template-columns:1fr}

/* ---------- telefon pendek (375 x 667) ---------- */
@media (max-height:700px){
  body.mod-telefon .main.b2-main.b2-j-obor .latar-babak{height:250px}
  body.mod-telefon .main.b2-main.b2-j-obor .main-badan{margin-top:194px}
  body.mod-telefon .b4-peti{min-height:98px}
  body.mod-telefon .b4-kira-garis{height:24px}
  body.mod-telefon .b4-kertas{min-height:78px}
  body.mod-telefon .b4-meja{padding:12px 12px 12px}
  body.mod-telefon .b4-akhbar-isi{min-height:60px}
  body.mod-telefon .b4-dail-angka{height:52px}
}