/* ===== Babak · pakej enjin Bab 4 kumpulan 4a (js/pakej-bab-04-4a.js): misi, tirai, rombongan, keretapi.
   Awalan kelas b4-; semua peraturan diskop dengan .b2-j-<jenis> (kelas .main semasa pusingan) supaya salinan yang
   terbang (klon dalam .main) kekal bergaya. Susun atur: telefon 390/375 (bendalir) dan lebar 1280x720 (.main-badan). ===== */

/* ---------- bersama ---------- */
.b2-main .b4-lukis{display:block;width:100%;height:100%}
.b2-main .b4-klon{margin:0;box-sizing:border-box;transform-origin:50% 50%}
.b2-main .b4-op-teks{min-width:0}

/* =====================================================================================
   4.1 MISI BMA
   ===================================================================================== */
.b2-j-misi .b2-p-misi{grid-template-areas:"atas" "bawah" "panel";gap:10px}
.b2-j-misi .b4-misi-atas{grid-area:atas}
.b2-j-misi .b4-misi-panel{grid-area:panel}
.b2-j-misi .b4-misi-bawah{grid-area:bawah}
.b2-j-misi .b4-misi-kad{position:relative;overflow:hidden;align-content:start;gap:4px;padding:10px 14px 12px 20px;background:linear-gradient(90deg,transparent 7px,#F7C6C9 7px,#F7C6C9 9px,transparent 9px),#FFFDF7}
.b2-j-misi .b4-misi-kepala{display:flex;align-items:center;justify-content:space-between;gap:6px 10px;flex-wrap:wrap}
.b2-j-misi .b4-misi-tarikh{padding:1px 9px;border-radius:10px;background:#FFF6D8;color:#8A4B00;font-size:.8125rem;font-weight:900;white-space:nowrap}
.b2-j-misi .b4-misi-tajuk{font-size:1.125rem;line-height:1.25}
.b2-j-misi .b4-misi-teks{font-size:.9375rem;font-weight:700;line-height:1.42;color:var(--ink2)}
.b2-j-misi .b4-misi-kad.betul{background:linear-gradient(90deg,transparent 7px,#9FE0BF 7px,#9FE0BF 9px,transparent 9px),var(--betul-bg)}
.b2-j-misi .b4-misi-kad.salah{background:linear-gradient(90deg,transparent 7px,#F7B5BA 7px,#F7B5BA 9px,transparent 9px),var(--salah-bg)}
.b2-j-misi .b4-misi-kad.betul .b4-misi-teks{color:var(--betul-teks)}
.b2-j-misi .b4-misi-kad.salah .b4-misi-teks{color:var(--salah-teks)}
.b2-j-misi .b4-misi-kad.keluar{animation:b4-keluar .42s ease-in forwards}
@keyframes b4-keluar{to{transform:translateX(-26px);opacity:0}}
.b2-j-misi .b4-misi-cop{position:absolute;right:12px;top:8px;padding:1px 10px;border:3px solid var(--hijau);border-radius:10px;color:var(--hijau);background:rgba(255,255,255,.85);font-size:.875rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;transform:rotate(-10deg) scale(1.7);opacity:0;pointer-events:none}
.b2-j-misi .b4-misi-kad.dicop .b4-misi-cop{animation:b4-cop .45s ease-out forwards}
@keyframes b4-cop{to{transform:rotate(-10deg) scale(1);opacity:.95}}
/* jadual harga: tatal mendatar dalam kad jika perlu, lajur pertama melekat */
.b2-j-misi .b4-jadual-bungkus{display:grid;gap:4px;margin-top:4px;min-width:0}
.b2-j-misi .b4-jadual-bungkus[hidden]{display:none}
.b2-j-misi .b4-jadual-tatal{overflow-x:auto;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 2px #EADFC4;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.b2-j-misi .b4-jadual{border-collapse:separate;border-spacing:0;width:100%;font-size:.875rem;line-height:1.3}
.b2-j-misi .b4-jadual th,.b2-j-misi .b4-jadual td{padding:6px 7px;text-align:right;white-space:nowrap;border-bottom:1px solid #F1E6CC}
.b2-j-misi .b4-jadual thead th{background:var(--ink);color:#fff;font-size:.8125rem;font-weight:900;letter-spacing:.02em;white-space:normal;line-height:1.15;vertical-align:bottom}
.b2-j-misi .b4-jadual thead th:first-child{position:sticky;left:0;z-index:1;text-align:left;border-top-left-radius:10px}
.b2-j-misi .b4-jadual thead th:last-child{border-top-right-radius:10px}
.b2-j-misi .b4-jadual tbody th{position:sticky;left:0;background:#fff;text-align:left;font-weight:900;color:var(--ink)}
.b2-j-misi .b4-jadual tbody tr:last-child th,.b2-j-misi .b4-jadual tbody tr:last-child td{border-bottom:0}
.b2-j-misi .b4-jadual td{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;transition:color .3s ease}
.b2-j-misi .b4-jadual td.belum{color:transparent}
.b2-j-misi .b4-jadual td.naik{color:#C2560F}
.b2-j-misi .b4-jadual td.puncak{color:var(--merah-d);font-weight:900;background:#FFF1F1}
.b2-j-misi .b4-jadual-nota{font-size:.875rem;font-weight:700;color:var(--ink2);line-height:1.35}
/* soalan langkah 2 dalam kad */
.b2-j-misi .b4-misi-soal{display:grid;gap:2px;margin-top:6px;padding:8px 12px 10px;border-radius:14px;background:#FFF6D8;box-shadow:inset 0 0 0 2px var(--emas)}
.b2-j-misi .b4-misi-soal[hidden]{display:none}
.b2-j-misi .b4-misi-soal.masuk{animation:lompat .4s ease-out both}
.b2-j-misi .b4-misi-soal-label{font-size:.75rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#8A4B00}
.b2-j-misi .b4-misi-soal-s{font-size:1rem;font-weight:900;line-height:1.32;color:var(--ink)}
/* panel tolok */
.b2-j-misi .b4-misi-panel{position:relative;display:grid;gap:6px;padding:8px 8px 10px;border-radius:22px;background:linear-gradient(180deg,#2B3F7E,#1B2A5C);box-shadow:var(--bayang)}
.b2-j-misi .b4-misi-panel-label{display:flex;align-items:center;gap:8px;padding:0 6px;font-size:.75rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#FFE9B0}
.b2-j-misi .b4-lampu{flex:none;width:10px;height:10px;border-radius:50%;background:#35C274;box-shadow:0 0 0 3px rgba(53,194,116,.3)}
.b2-j-misi .b4-tolok-baris{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.b2-j-misi .b4-tolok{position:relative;display:grid;justify-items:center;align-content:start;gap:3px;min-height:44px;padding:8px 6px 9px;border-radius:16px;background:#34488A;color:#fff;text-align:center;box-shadow:0 4px 0 #0E1840,inset 0 0 0 2px rgba(255,255,255,.12);transition:transform .08s ease,box-shadow .25s ease,background-color .25s ease;overflow:hidden}
.b2-j-misi .b4-tolok[disabled]{cursor:default}
.b2-j-misi .b4-tolok.aktif{box-shadow:0 4px 0 #0E1840,inset 0 0 0 3px var(--emas)}
.b2-j-misi .b4-tolok.aktif:active{transform:translateY(3px);box-shadow:0 1px 0 #0E1840,inset 0 0 0 3px var(--emas)}
.b2-j-misi .b4-tolok.betul{background:#1F7A4D;box-shadow:0 4px 0 #0E4A2C,inset 0 0 0 3px #7BE0A8,0 0 20px rgba(123,224,168,.6)}
.b2-j-misi .b4-tolok.salah{background:#9E2530;box-shadow:0 4px 0 #5E1119,inset 0 0 0 3px #FF8A90;animation:goncang .4s}
.b2-j-misi .b4-tolok.kilat{background:#1F7A4D;box-shadow:0 4px 0 #0E4A2C,inset 0 0 0 4px #7BE0A8}
.b2-j-misi .b4-tolok-kepala{display:flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 2px}
.b2-j-misi .b4-tolok-ikon{flex:none;width:26px;height:26px}
.b2-j-misi .b4-tolok-nama{font-size:.875rem;font-weight:900;line-height:1.15;text-wrap:balance}
.b2-j-misi .b4-tolok-svg{width:100%;max-width:168px;height:auto}
.b2-j-misi .b4-tolok-status{display:inline-flex;align-items:center;gap:3px;padding:1px 10px;border-radius:10px;background:rgba(255,255,255,.14);font-size:.75rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.b2-j-misi .b4-tolok-status.kukuh{color:#9BF0C0}
.b2-j-misi .b4-tolok-status.goyah{color:#FFE57F}
.b2-j-misi .b4-tolok-status.genting{color:#FFA6AB}
.b2-j-misi .b4-tolok.susut .b4-tolok-status::after{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid currentColor}
.b2-j-misi .b4-tolok-petunjuk{font-size:.875rem;font-weight:700;line-height:1.25;color:#DDE6FF;text-wrap:balance}
.b2-j-misi .b4-tolok-cop{position:absolute;left:50%;top:50%;padding:2px 14px;border:4px solid #C9323F;border-radius:12px;background:rgba(255,255,255,.94);color:#C9323F;box-shadow:0 3px 0 rgba(0,0,0,.25);font-size:1.125rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;transform:translate(-50%,-50%) rotate(-12deg) scale(1.8);opacity:0;pointer-events:none}
.b2-j-misi .b4-tolok.dicop .b4-tolok-cop{animation:b4-cop-t .5s ease-out forwards}
@keyframes b4-cop-t{to{transform:translate(-50%,-50%) rotate(-12deg) scale(1);opacity:1}}
/* laporan akhir */
.b2-j-misi .b4-misi-akhir{align-content:start;gap:4px;background:#FFF4F4;box-shadow:0 5px 0 var(--merah-d),inset 0 0 0 3px #E0555D}
.b2-j-misi .b4-misi-akhir .b2-kad-no{color:var(--salah-teks)}
.b2-j-misi .b4-misi-akhir .b4-misi-teks{color:var(--ink)}
.b2-j-misi .b4-akhir-sebab{display:grid;gap:5px;margin-top:4px}
.b2-j-misi .b4-akhir-sebab li{position:relative;padding:6px 10px 6px 32px;border-radius:12px;background:#fff;font-size:.875rem;font-weight:800;line-height:1.35;color:var(--ink);box-shadow:inset 0 0 0 2px #F7C6C9}
.b2-j-misi .b4-akhir-sebab li::before{content:"";position:absolute;left:10px;top:9px;width:14px;height:14px;border-radius:50%;background:var(--merah-d);box-shadow:inset 0 0 0 4px #FFD4D6}
.b2-j-misi .b4-akhir-sebab li.masuk{animation:lompat .4s ease-out both}
.b2-j-misi .b4-misi-pilih{grid-template-columns:minmax(0,1fr)}
.b2-j-misi .b4-misi-op{min-height:52px;font-size:.9375rem}
.b2-j-misi .b4-misi-rumus li{font-size:.875rem}
.b2-j-misi .b4-misi-vonis{display:grid;gap:6px;padding:10px 12px;border-radius:16px;background:#FFF4F4;box-shadow:inset 0 0 0 2px #F7B5BA}
.b2-j-misi .b4-misi-vonis-tajuk{font-size:.9375rem;font-weight:900;line-height:1.3;color:var(--salah-teks)}
.b2-j-misi .b4-misi-vonis-isi{font-size:.875rem;font-weight:700;line-height:1.4;color:var(--ink)}
.b2-j-misi .b4-misi-rumus-label{font-size:.75rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-teks)}
.b2-j-misi .b4-misi-rumus li b{font-size:.875rem}

/* =====================================================================================
   4.2 TIRAI SEBELUM / SELEPAS
   ===================================================================================== */
.b2-j-tirai .b4-tirai-kad{gap:8px}
.b2-j-tirai .b4-tirai-kad-teks{display:grid;gap:3px;min-width:0}
.b2-j-tirai .b4-tirai-judul{display:flex;align-items:center;gap:10px;min-width:0}
.b2-j-tirai .b4-tirai-ikon-kad{flex:none;width:42px;height:42px;padding:4px;border-radius:13px;background:#FFF6D8;box-shadow:inset 0 0 0 2px var(--emas)}
.b2-j-tirai .b4-tirai-kad.betul .b4-tirai-ikon-kad{background:#fff;box-shadow:inset 0 0 0 2px var(--hijau)}
.b2-j-tirai .b4-tirai-jejak{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:5px}
.b2-j-tirai .b4-jejak{width:32px;height:32px;padding:5px;border-radius:50%;background:#F3F6FD;box-shadow:inset 0 0 0 2px var(--garis);opacity:.55;transition:opacity .3s ease,transform .3s ease,box-shadow .3s ease}
.b2-j-tirai .b4-jejak.kini{opacity:1;box-shadow:inset 0 0 0 3px var(--emas),0 3px 0 var(--emas-d);transform:translateY(-2px)}
.b2-j-tirai .b4-jejak.siap{opacity:1;background:var(--betul-bg);box-shadow:inset 0 0 0 3px var(--hijau)}
.b2-j-tirai .b4-jejak.dibantu{opacity:1;background:var(--salah-bg);box-shadow:inset 0 0 0 3px #E0555D}
/* pentas terbelah */
.b2-j-tirai .b4-tirai-pentas{--k:1;--b:0;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:238px;border-radius:24px;overflow:hidden;background:#fff;box-shadow:var(--bayang);isolation:isolate}
.b2-j-tirai .b4-tirai-pentas[hidden]{display:none}
.b2-j-tirai .b4-tirai-sisi{position:relative;display:grid;align-content:start;justify-items:center;gap:8px;min-width:0;padding:22px 12px 16px;text-align:center}
.b2-j-tirai .b4-tirai-sisi.kiri{background:linear-gradient(#F7ECD3,#EEDDB9);box-shadow:inset -3px 0 0 #D8C194}
.b2-j-tirai .b4-tirai-sisi.kanan{padding-right:calc(10px + 16% * var(--b));padding-left:10px;background:linear-gradient(#EAF8FF,#D3EEFB);transition:background-color .4s ease}
.b2-j-tirai .b4-tirai-sisi.kanan.betul{background:linear-gradient(#E5FAEF,#CBF1DB)}
.b2-j-tirai .b4-tirai-sisi.kanan.dibantu{background:linear-gradient(#FFF3F3,#FFE0E2)}
.b2-j-tirai .b4-tirai-sisi.kiri.masuk{animation:b4-pudar-masuk .55s ease-out both}
@keyframes b4-pudar-masuk{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.b2-j-tirai .b4-tirai-label{padding:3px 10px;border-radius:10px;background:rgba(255,255,255,.75);color:#8A5226;font-size:.75rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;line-height:1.25}
.b2-j-tirai .b4-tirai-sisi.kanan .b4-tirai-label{color:var(--teal-teks)}
.b2-j-tirai .b4-tirai-lukis{width:54px;height:54px}
.b2-j-tirai .b4-tirai-lukis.sepia svg{filter:sepia(.75) saturate(.8)}
.b2-j-tirai .b4-tirai-teks{font-size:.9375rem;font-weight:800;line-height:1.38;color:#5A3B16;overflow-wrap:break-word}
.b2-j-tirai .b4-tirai-slot{display:grid;justify-items:center;align-content:center;gap:6px;width:100%;min-height:120px}
.b2-j-tirai .b4-tirai-slot.menunggu::before{content:"?";display:grid;place-items:center;width:62px;height:62px;border-radius:50%;border:3px dashed #7FB8F7;color:#3D8BF2;font-size:2rem;font-weight:900}
.b2-j-tirai .b4-tirai-slot.masuk{animation:lompat .45s ease-out both}
.b2-j-tirai .b4-tirai-lukis-besar{width:58px;height:58px}
.b2-j-tirai .b4-tirai-jawapan{font-size:.875rem;font-weight:900;line-height:1.36;color:var(--betul-teks);overflow-wrap:break-word}
.b2-j-tirai .b4-tirai-slot.dibantu .b4-tirai-jawapan{color:var(--salah-teks)}
/* tirai baldu merah: dilipat ke kanan dengan scaleX(--k) */
.b2-j-tirai .b4-tirai-kain{position:absolute;z-index:3;top:0;bottom:0;right:0;width:50%;transform-origin:100% 50%;transform:scaleX(var(--k));cursor:grab;touch-action:pan-y;
  background:linear-gradient(180deg,rgba(0,0,0,0) 62%,rgba(0,0,0,.2)),repeating-linear-gradient(90deg,#A8202F 0 6px,#D23645 6px 15px,#EA5563 15px 19px,#BE2A39 19px 27px);box-shadow:inset 8px 0 12px rgba(0,0,0,.28)}
.b2-j-tirai .b4-tirai-kain::after{content:"";position:absolute;left:0;right:0;bottom:0;height:11px;background:repeating-linear-gradient(90deg,#FFC933 0 6px,#E8971A 6px 9px)}
.b2-j-tirai .b4-tirai-tali{position:absolute;left:-2px;right:-2px;top:56%;height:10px;border-radius:5px;background:#FFC933;box-shadow:0 2px 0 #E8971A;opacity:calc(var(--b) * 1.4 - .4)}
.b2-j-tirai .b4-tirai-pentas.diseret .b4-tirai-kain{cursor:grabbing}
.b2-j-tirai .b4-tirai-rod{position:absolute;z-index:4;top:0;left:50%;right:0;height:10px;background:linear-gradient(#FFE57F,#E8971A);box-shadow:0 2px 0 rgba(27,42,92,.25)}
.b2-j-tirai .b4-tirai-rod::after{content:"";position:absolute;right:-2px;top:-3px;width:16px;height:16px;border-radius:50%;background:#FFC933;box-shadow:inset 0 -3px 0 #E8971A}
/* pemegang tirai: kecil pada paparan, kawasan sentuh 48 px */
.b2-j-tirai .b4-tirai-tombol{position:absolute;z-index:5;top:50%;left:calc(100% - 50% * var(--k));transform:translate(-50%,-50%);display:grid;justify-items:center;align-content:center;gap:0;width:30px;height:92px;padding:0;border-radius:15px;border:3px solid #fff;background:linear-gradient(90deg,#FFE57F,#F5B52A);color:#6B3A00;box-shadow:0 4px 0 var(--emas-d),0 6px 14px rgba(27,42,92,.35);touch-action:none;cursor:grab;opacity:calc(1 - var(--b) * 1.7)}
.b2-j-tirai .b4-tirai-tombol::before{content:"";position:absolute;inset:-4px -14px}
.b2-j-tirai .b4-tirai-tombol span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.75rem;font-weight:900;letter-spacing:.06em}
.b2-j-tirai .b4-tirai-tombol .ikon{width:16px;height:16px;stroke-width:3}
.b2-j-tirai .b4-tirai-tombol[disabled]{cursor:default}
.b2-j-tirai .b4-tirai-bawah{min-height:56px}
.b2-j-tirai .b4-tirai-buka{justify-self:center;min-width:230px}
.b2-j-tirai .b4-tirai-buka .ikon{width:22px;height:22px}
.b2-j-tirai .b4-tirai-pilih{grid-template-columns:minmax(0,1fr)}
.b2-j-tirai .b4-tirai-op{min-height:54px;font-size:.9375rem;line-height:1.3}
.b2-j-tirai .b4-tirai-rumus{display:grid;gap:6px}
.b2-j-tirai .b4-tirai-rumus li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:start;padding:8px 10px;border-radius:14px;background:#F3F6FD}
.b2-j-tirai .b4-tirai-rumus li > svg{width:34px;height:34px}
.b2-j-tirai .b4-tirai-rumus li > div{display:grid;gap:2px;min-width:0}
.b2-j-tirai .b4-tirai-rumus b{font-size:.875rem;line-height:1.25}
.b2-j-tirai .b4-tirai-rumus .kiri{font-size:.875rem;font-weight:700;line-height:1.35;color:#8A5226}
.b2-j-tirai .b4-tirai-rumus .kanan{font-size:.875rem;font-weight:800;line-height:1.35;color:var(--betul-teks)}
.b2-j-tirai .b4-tirai-rumus .kanan::before{content:"→ "}

/* =====================================================================================
   4.3 ROMBONGAN (himpunan bantahan)
   ===================================================================================== */
.b2-j-rombongan .b2-p-rombongan{gap:10px}
.b2-j-rombongan .b4-padang{position:relative;width:100%;aspect-ratio:var(--nisbah,1.68);border-radius:22px;overflow:hidden;background:#8FD8F8;box-shadow:var(--bayang),inset 0 0 0 3px #fff}
.b2-j-rombongan .b4-padang-svg,.b2-j-rombongan .b4-padang-lukis{position:absolute;inset:0;width:100%;height:100%}
.b2-j-rombongan .b4-orang-lapis.sorak{animation:b4-sorak .5s ease-in-out 2}
@keyframes b4-sorak{50%{transform:translateY(-4px)}}
.b2-j-rombongan .b4-org.beredar{filter:saturate(.25)}
.b2-j-rombongan .b4-kira{position:absolute;z-index:3;left:8px;top:8px;display:flex;align-items:center;gap:7px;padding:4px 12px 4px 5px;border-radius:17px;background:rgba(27,42,92,.84);color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.2)}
.b2-j-rombongan .b4-kira-ikon{flex:none;width:28px;height:28px;padding:4px;border-radius:50%;background:var(--merah)}
.b2-j-rombongan .b4-kira > span{display:grid;line-height:1.05}
.b2-j-rombongan .b4-kira small{font-size:.75rem;font-weight:800;color:#FFE9B0}
.b2-j-rombongan .b4-kira b{font-size:1.1875rem;font-weight:900}
.b2-j-rombongan .b4-kira.naik{animation:lompat .45s ease-out}
.b2-j-rombongan .b4-kira.turun{animation:goncang .4s,b4-kira-merah .9s}
@keyframes b4-kira-merah{30%{background:#C9323F}}
.b2-j-rombongan .b4-tempat{position:absolute;z-index:3;left:50%;bottom:6px;transform:translateX(-50%);display:flex;align-items:center;gap:5px;width:max-content;max-width:94%;padding:3px 12px;border-radius:12px;background:rgba(27,42,92,.78);color:#fff;font-size:.875rem;font-weight:800;line-height:1.25;text-align:center}
.b2-j-rombongan .b4-tempat .ikon{flex:none;width:15px;height:15px;color:#FFE57F}
/* sepanduk (HTML di atas lukisan supaya teks jelas) */
.b2-j-rombongan .b4-sepanduk-lapis{position:absolute;z-index:2;inset:0;pointer-events:none}
.b2-j-rombongan .b4-sepanduk{position:absolute;left:50%;top:57%;width:64%;padding-bottom:24px;transform:translateX(-50%);transition:left .7s ease,top .7s ease,width .7s ease,opacity .6s ease,transform .8s cubic-bezier(.3,1.3,.5,1)}
.b2-j-rombongan .b4-sepanduk::before,.b2-j-rombongan .b4-sepanduk::after{content:"";position:absolute;top:-6px;bottom:0;width:5px;border-radius:3px;background:#8A5226}
.b2-j-rombongan .b4-sepanduk::before{left:3px}
.b2-j-rombongan .b4-sepanduk::after{right:3px}
.b2-j-rombongan .b4-sepanduk-kain{position:relative;z-index:1;display:block;margin:0 5px;padding:6px 10px;border-radius:4px;background:#FFFDF7;color:#C9323F;font-size:.875rem;font-weight:900;line-height:1.2;text-align:center;text-wrap:balance;box-shadow:0 3px 0 rgba(27,42,92,.25),inset 0 0 0 2px #F7C6C9}
.b2-j-rombongan .b4-sepanduk.naik{transform:translate(-50%,46px);opacity:0}
.b2-j-rombongan .b4-sepanduk.lama{padding-bottom:14px}
.b2-j-rombongan .b4-sepanduk.lama .b4-sepanduk-kain{padding:3px 5px;font-size:.6875rem;line-height:1.15}
.b2-j-rombongan .b4-sepanduk.hilang{opacity:0}
/* kad tonggak */
.b2-j-rombongan .b4-tonggak-pop{position:absolute;z-index:6;left:50%;top:50%;width:min(88%,460px);display:grid;justify-items:center;gap:4px;padding:12px 16px 14px;border-radius:18px;background:#FFF6D8;text-align:center;transform:translate(-50%,-50%);box-shadow:0 6px 0 var(--emas-d),0 14px 30px rgba(27,42,92,.35),inset 0 0 0 3px var(--emas)}
.b2-j-rombongan .b4-tonggak-pop.masuk{animation:b4-pop .55s cubic-bezier(.3,1.4,.5,1) both}
@keyframes b4-pop{from{transform:translate(-50%,-50%) scale(.5);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.b2-j-rombongan .b4-tonggak-pop.pergi{animation:b4-pop-pergi .5s ease-in forwards}
@keyframes b4-pop-pergi{to{transform:translate(-50%,30%) scale(.4);opacity:0}}
.b2-j-rombongan .b4-tonggak-label{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#8A4B00}
.b2-j-rombongan .b4-tonggak-bendera{flex:none;width:20px;height:20px}
.b2-j-rombongan .b4-tonggak-teks{font-size:1rem;font-weight:900;line-height:1.3;color:var(--ink);text-wrap:balance}
.b2-j-rombongan .b4-tonggak-jalur{display:flex;flex-wrap:wrap;gap:6px}
.b2-j-rombongan .b4-tonggak-jalur[hidden]{display:none}
.b2-j-rombongan .b4-tonggak-cip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 6px;border-radius:14px;background:#FFF6D8;color:#6B3A00;font-size:.875rem;font-weight:800;line-height:1.25;box-shadow:0 3px 0 var(--emas-d),inset 0 0 0 2px var(--emas)}
.b2-j-rombongan .b4-tonggak-cip .b4-tonggak-bendera{width:16px;height:16px}
.b2-j-rombongan .b4-tonggak-cip.masuk{animation:lompat .4s ease-out both}
/* kad soalan dan pilihan */
.b2-j-rombongan .b4-romb-cip.sepanduk{background:var(--merah-d)}
.b2-j-rombongan .b4-romb-kad .b2-kad-isi{font-size:1.0625rem}
.b2-j-rombongan .b4-romb-pilih{grid-template-columns:minmax(0,1fr)}
.b2-j-rombongan .b4-romb-op{min-height:52px;font-size:.9375rem}
.b2-j-rombongan .b4-op-sepanduk{position:relative;justify-content:center;min-height:58px;padding:10px 30px;background:#FFFDF7;color:#C9323F;font-size:1rem;font-weight:900;text-align:center;box-shadow:0 5px 0 rgba(27,42,92,.22),inset 0 0 0 2px #F7C6C9}
.b2-j-rombongan .b4-op-sepanduk::before,.b2-j-rombongan .b4-op-sepanduk::after{content:"";position:absolute;top:6px;bottom:-6px;width:6px;border-radius:3px;background:#8A5226}
.b2-j-rombongan .b4-op-sepanduk::before{left:9px}
.b2-j-rombongan .b4-op-sepanduk::after{right:9px}
.b2-j-rombongan .b4-op-sepanduk.betul,.b2-j-rombongan .b4-op-sepanduk.kilat{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 5px 0 #1E9E63,inset 0 0 0 3px var(--hijau)}
.b2-j-rombongan .b4-op-sepanduk.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 5px 0 var(--merah-d),inset 0 0 0 3px #E0555D}
.b2-j-rombongan .b4-romb-rumus-tonggak{display:grid;gap:5px}
.b2-j-rombongan .b4-romb-rumus-tonggak li{padding:6px 10px 6px 12px;border-radius:12px;background:#FFF6D8;box-shadow:inset 3px 0 0 var(--emas);font-size:.875rem;font-weight:800;line-height:1.35;color:#6B3A00}
.b2-j-rombongan .b2-rumus-tokoh li{font-size:.875rem}
.b2-j-rombongan .b4-romb-rumus b{font-size:.9375rem}

/* =====================================================================================
   4.4 KERETA API PROSES
   ===================================================================================== */
.b2-j-keretapi .b2-p-keretapi{gap:10px}
.b2-j-keretapi .b4-landasan{position:relative;padding-top:30px;border-radius:22px;overflow:hidden;background:linear-gradient(#A9E1FA 0,#E4F6FF 56%,#DCCBA5 56%,#C9B287 100%);box-shadow:var(--bayang),inset 0 0 0 3px #fff}
.b2-j-keretapi .b4-landasan[hidden]{display:none}
.b2-j-keretapi .b4-stesen{position:absolute;z-index:2;left:12px;top:6px;padding:2px 12px;border-radius:8px;background:var(--ink);color:#fff;font-size:.875rem;font-weight:900;letter-spacing:.04em;box-shadow:0 3px 0 rgba(0,0,0,.22),inset 0 0 0 2px rgba(255,255,255,.25)}
.b2-j-keretapi .b4-landasan-tatal{position:relative;overflow-x:auto;overflow-y:hidden;padding:22px 12px 16px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  background:linear-gradient(transparent calc(100% - 15px),#8A95B8 calc(100% - 15px),#8A95B8 calc(100% - 11px),transparent calc(100% - 11px)),repeating-linear-gradient(90deg,#7A4B26 0 7px,transparent 7px 20px) 0 calc(100% - 5px)/100% 9px no-repeat;background-attachment:local}
.b2-j-keretapi .b4-landasan-tatal.berlepas{overflow:hidden}
.b2-j-keretapi .b4-kereta{display:flex;align-items:flex-end;gap:6px;width:max-content;min-height:116px;padding-right:14px}
.b2-j-keretapi .b4-kereta.gegar{animation:b4-gegar .5s ease-out}
@keyframes b4-gegar{0%{transform:none}30%{transform:translateX(-7px)}60%{transform:translateX(3px)}100%{transform:none}}
.b2-j-keretapi .b4-lokomotif{flex:none;width:150px;margin-bottom:-2px}
.b2-j-keretapi .b4-loko-svg{display:block;width:100%;height:auto;overflow:visible}
.b2-j-keretapi .b4-asap circle{opacity:.75}
.b2-j-keretapi .b4-kereta.bergerak .b4-asap circle{animation:b4-asap 1.1s ease-out infinite}
.b2-j-keretapi .b4-kereta.bergerak .b4-asap circle:nth-child(2){animation-delay:.35s}
.b2-j-keretapi .b4-kereta.bergerak .b4-asap circle:nth-child(3){animation-delay:.7s}
@keyframes b4-asap{from{transform:translate(0,6px) scale(.6);opacity:.9}to{transform:translate(18px,-14px) scale(1.4);opacity:0}}
.b2-j-keretapi .b4-kereta.bergerak .b4-roda-l{animation:b4-putar .55s linear infinite}
@keyframes b4-putar{to{transform:rotate(-360deg)}}
/* gerabak (limbungan dan kereta) */
.b2-j-keretapi .b4-gerabak,.b2-j-keretapi .b4-gerabak-siap{position:relative;display:grid;align-content:start;gap:4px;padding:24px 10px 14px;border-radius:12px 12px 8px 8px;background:#FFFDF7;text-align:left;box-shadow:inset 0 0 0 3px var(--wd),0 5px 0 var(--wd)}
.b2-j-keretapi .b4-gerabak-atap{position:absolute;left:7px;right:7px;top:7px;height:11px;border-radius:5px;background:repeating-linear-gradient(90deg,#BFEAFB 0 13px,var(--w) 13px 18px)}
.b2-j-keretapi .b4-gerabak-kepala{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.b2-j-keretapi .b4-gerabak-tarikh{justify-self:start;padding:1px 8px;border-radius:9px;background:var(--ink);color:#fff;font-size:.875rem;font-weight:900;white-space:nowrap}
.b2-j-keretapi .b4-gerabak-teks{font-size:.875rem;font-weight:800;line-height:1.3;color:var(--ink)}
.b2-j-keretapi .b4-gerabak-muat{display:inline-flex;align-items:center;gap:3px;justify-self:start;padding:1px 8px 1px 3px;border-radius:9px;background:#F1E3C4;color:#6E3F1B;font-size:.75rem;font-weight:900}
.b2-j-keretapi .b4-peti-kecil{display:block;width:18px;height:18px;flex:none}
.b2-j-keretapi .b4-roda{position:absolute;bottom:-9px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,#C5D0EA 0 3px,#1B2A5C 3.5px);box-shadow:0 0 0 2px #fff}
.b2-j-keretapi .b4-roda.kiri{left:16px}
.b2-j-keretapi .b4-roda.kanan{right:16px}
.b2-j-keretapi .b4-gerabak-siap{flex:none;width:168px;min-height:104px;margin-bottom:10px}
.b2-j-keretapi .b4-gerabak-siap::before{content:"";position:absolute;left:-9px;bottom:14px;width:11px;height:5px;border-radius:2px;background:#6074A8}
.b2-j-keretapi .b4-gerabak-siap.hantu{visibility:hidden}
.b2-j-keretapi .b4-gerabak-siap.sambung{animation:b4-sambung .55s ease-out}
@keyframes b4-sambung{0%{transform:translateX(12px)}45%{transform:translateX(-5px)}100%{transform:none}}
.b2-j-keretapi .b4-gerabak-siap.dibantu{background:#FFF6F6;box-shadow:inset 0 0 0 3px #E0555D,0 5px 0 var(--merah-d)}
.b2-j-keretapi .b4-gerabak-no{position:absolute;left:8px;top:-11px;width:26px;height:26px;border-radius:50%;border:2px solid #fff;background:var(--wd);color:#fff;display:grid;place-items:center;font-size:.8125rem;font-weight:900}
.b2-j-keretapi .b4-kargo{position:absolute;right:6px;top:-17px;display:flex;gap:2px}
.b2-j-keretapi .b4-kargo-peti .b4-peti-kecil{width:20px;height:20px}
.b2-j-keretapi .b4-kargo-peti.masuk{animation:lompat .4s ease-out both}
.b2-j-keretapi .b4-kargo-peti.dibantu{filter:hue-rotate(-30deg) saturate(1.4)}
/* limbungan */
.b2-j-keretapi .b4-limbungan{display:grid;gap:8px;padding:10px 10px 18px;border-radius:22px;background:linear-gradient(#EFE3C6,#E2D0A8);box-shadow:inset 0 0 0 3px #fff,var(--lip)}
.b2-j-keretapi .b4-limbungan[hidden]{display:none}
.b2-j-keretapi .b4-yard-label{font-size:.75rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#6E3F1B}
.b2-j-keretapi .b4-yard{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 10px}
.b2-j-keretapi .b4-gerabak{min-height:100px;transition:transform .15s ease}
.b2-j-keretapi .b4-gerabak::after{content:"";position:absolute;left:-6px;right:-6px;bottom:-13px;height:4px;border-radius:2px;background:#8A95B8}
.b2-j-keretapi .b4-gerabak:active:not([disabled]){transform:translateY(3px)}
.b2-j-keretapi .b4-gerabak[disabled]{cursor:default}
.b2-j-keretapi .b4-gerabak.betul,.b2-j-keretapi .b4-gerabak.kilat{background:var(--betul-bg);box-shadow:inset 0 0 0 3px var(--hijau),0 5px 0 #1E9E63}
.b2-j-keretapi .b4-gerabak.kilat{box-shadow:inset 0 0 0 4px var(--hijau),0 5px 0 #1E9E63,0 0 16px rgba(26,154,92,.45)}
.b2-j-keretapi .b4-gerabak.salah{background:var(--salah-bg);box-shadow:inset 0 0 0 3px #E0555D,0 5px 0 var(--merah-d)}
.b2-j-keretapi .b4-gerabak.salah .b4-gerabak-teks{color:var(--salah-teks)}
.b2-j-keretapi .b4-gerabak.langgar{animation:b4-langgar .6s ease-out}
@keyframes b4-langgar{0%{transform:none}35%{transform:translateY(-14px)}55%{transform:translateY(4px)}72%{transform:translateX(-6px)}88%{transform:translateX(4px)}100%{transform:none}}
.b2-j-keretapi .b4-gerabak.dirangkai{visibility:hidden}
/* muatan */
.b2-j-keretapi .b4-muatan{display:grid;gap:10px;padding:12px;border-radius:22px;background:#FFFDF7;box-shadow:var(--bayang),inset 0 0 0 3px #EADFC4}
.b2-j-keretapi .b4-muatan[hidden]{display:none}
.b2-j-keretapi .b4-muatan.masuk{animation:lompat .4s ease-out both}
.b2-j-keretapi .b4-muatan-label{display:flex;align-items:center;gap:6px;font-size:.75rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#8A5226}
.b2-j-keretapi .b4-muatan-s{font-size:1.0625rem;font-weight:900;line-height:1.3;color:var(--ink)}
.b2-j-keretapi .b4-muatan-kotak{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.b2-j-keretapi .b4-kotak{display:flex;align-items:center;gap:10px;min-height:50px;padding:8px 12px 8px 8px;border-radius:14px;background:#fff;color:var(--ink);text-align:left;font-size:.9375rem;font-weight:800;line-height:1.3;box-shadow:0 4px 0 rgba(27,42,92,.2),inset 0 0 0 2px var(--garis);transition:transform .08s ease}
.b2-j-keretapi .b4-kotak:active:not([disabled]){transform:translateY(3px)}
.b2-j-keretapi .b4-kotak-peti{position:relative;flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#F1E3C4}
.b2-j-keretapi .b4-kotak-peti .b4-peti-kecil{width:24px;height:24px}
.b2-j-keretapi .b4-kotak-tanda{position:absolute;right:-6px;bottom:-6px;width:20px;height:20px;border-radius:50%;background:var(--hijau);box-shadow:0 0 0 2px #fff;opacity:0;transform:scale(.4);transition:opacity .2s ease,transform .2s ease}
.b2-j-keretapi .b4-kotak.pilih{background:#FFF6D8;box-shadow:0 4px 0 var(--emas-d),inset 0 0 0 3px var(--emas)}
.b2-j-keretapi .b4-kotak.pilih .b4-kotak-tanda{opacity:1;transform:none}
.b2-j-keretapi .b4-kotak.betul,.b2-j-keretapi .b4-kotak.kilat{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 4px 0 #1E9E63,inset 0 0 0 3px var(--hijau)}
.b2-j-keretapi .b4-kotak.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}
.b2-j-keretapi .b4-kotak.pudar{opacity:.5}
.b2-j-keretapi .b4-muat-btn,.b2-j-keretapi .b4-berlepas{justify-self:center;min-width:220px}
.b2-j-keretapi .b4-muat-btn .b4-peti-kecil{width:22px;height:22px}
.b2-j-keretapi .b4-berlepas .ikon{width:22px;height:22px}
.b2-j-keretapi .b4-kereta-rumus{display:grid;gap:6px}
.b2-j-keretapi .b4-kereta-rumus li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:start;padding:8px 10px;border-radius:14px;background:#F3F6FD}
.b2-j-keretapi .b4-kereta-rumus-no{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-size:.8125rem;font-weight:900}
.b2-j-keretapi .b4-kereta-rumus li > div{display:grid;gap:2px;min-width:0;font-size:.875rem;font-weight:800;line-height:1.35}
.b2-j-keretapi .b4-kereta-rumus b{font-size:.875rem;color:var(--teal-teks)}
.b2-j-keretapi .b4-kereta-rumus small{font-size:.875rem;font-weight:700;line-height:1.35;color:#8A5226}

/* ===== MOD LEBAR (pentas 1280 x 720; .main-badan: kiri 300, lebar 720) ===== */
body.mod-lebar .b2-main.b2-j-misi .main-badan,body.mod-lebar .b2-main.b2-j-tirai .main-badan,body.mod-lebar .b2-main.b2-j-rombongan .main-badan,body.mod-lebar .b2-main.b2-j-keretapi .main-badan{top:86px;bottom:12px;align-content:start;overflow-y:auto;overflow-x:hidden;padding:2px 6px 10px}
body.mod-lebar .b2-j-misi .b2-p-misi{grid-template-columns:268px minmax(0,1fr);grid-template-areas:"panel atas" "panel bawah";column-gap:16px;row-gap:12px;align-items:start}
body.mod-lebar .b2-j-misi .b4-tolok-baris{grid-template-columns:minmax(0,1fr);gap:10px}
body.mod-lebar .b2-j-misi .b4-tolok{padding:10px 10px 12px}
body.mod-lebar .b2-j-misi .b4-tolok-svg{max-width:208px}
body.mod-lebar .b2-j-misi .b4-tolok-nama{font-size:1rem}
body.mod-lebar .b2-j-misi .b4-tolok-petunjuk{font-size:.875rem}
body.mod-lebar .b2-j-misi .b4-misi-tajuk{font-size:1.375rem}
body.mod-lebar .b2-j-misi .b4-misi-teks{font-size:1rem}
body.mod-lebar .b2-j-misi .b4-jadual{font-size:.9375rem}
body.mod-lebar .b2-j-misi .b4-misi-soal-s{font-size:1.125rem}
body.mod-lebar .b2-j-misi .b4-misi-op{min-height:54px;font-size:1rem}
body.mod-lebar .b2-j-misi .b4-akhir-sebab li{font-size:.9375rem}
body.mod-lebar .b2-j-tirai .b4-tirai-kad{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:14px}
body.mod-lebar .b2-j-tirai .b4-tirai-jejak{gap:6px;justify-content:flex-end}
body.mod-lebar .b2-j-tirai .b4-jejak{width:36px;height:36px;padding:6px}
body.mod-lebar .b2-j-tirai .b4-tirai-kad .b2-kad-isi{font-size:1.3125rem}
body.mod-lebar .b2-j-tirai .b4-tirai-pentas{min-height:236px}
body.mod-lebar .b2-j-tirai .b4-tirai-sisi{padding:24px 26px 16px}
body.mod-lebar .b2-j-tirai .b4-tirai-sisi.kanan{padding-right:calc(26px + 16% * var(--b))}
body.mod-lebar .b2-j-tirai .b4-tirai-teks,body.mod-lebar .b2-j-tirai .b4-tirai-jawapan{font-size:1.0625rem}
body.mod-lebar .b2-j-tirai .b4-tirai-lukis{width:64px;height:64px}
body.mod-lebar .b2-j-tirai .b4-tirai-lukis-besar{width:66px;height:66px}
body.mod-lebar .b2-j-tirai .b4-tirai-pilih{grid-template-columns:minmax(0,1fr);gap:8px}
body.mod-lebar .b2-j-tirai .b4-tirai-op{min-height:52px;font-size:1rem}
body.mod-lebar .b2-j-tirai .b4-tirai-rumus{grid-template-columns:1fr 1fr}
body.mod-lebar .b2-j-rombongan .b4-romb-pilih{grid-template-columns:repeat(3,minmax(0,1fr))}
body.mod-lebar .b2-j-rombongan .b4-romb-op,body.mod-lebar .b2-j-rombongan .b4-op-sepanduk{min-height:78px}
body.mod-lebar .b2-j-rombongan .b4-sepanduk-kain{font-size:1.125rem;padding:8px 14px}
body.mod-lebar .b2-j-rombongan .b4-sepanduk.lama .b4-sepanduk-kain{font-size:.8125rem;padding:4px 8px}
body.mod-lebar .b2-j-rombongan .b4-sepanduk{width:52%}
body.mod-lebar .b2-j-rombongan .b4-tempat{font-size:.875rem}
body.mod-lebar .b2-j-rombongan .b4-romb-kad .b2-kad-isi{font-size:1.25rem}
body.mod-lebar .b2-j-rombongan .b2-rumus-tokoh{grid-template-columns:1fr 1fr}
body.mod-lebar .b2-j-keretapi .b2-p-keretapi{gap:9px}
body.mod-lebar .b2-j-keretapi .b4-kereta-kad{padding:9px 18px 10px}
body.mod-lebar .b2-j-keretapi .b4-kereta-kad .b2-kad-isi{font-size:1.1875rem}
body.mod-lebar .b2-j-keretapi .b4-yard{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 12px}
body.mod-lebar .b2-j-keretapi .b4-limbungan{padding:8px 10px 18px;gap:6px}
body.mod-lebar .b2-j-keretapi .b4-gerabak{min-height:88px;padding:22px 10px 12px}
body.mod-lebar .b2-j-keretapi .b4-gerabak-siap{width:252px;min-height:92px}
body.mod-lebar .b2-j-keretapi .b4-kereta-kad .b2-kad-isi{font-size:1.0625rem}
body.mod-lebar .b2-j-keretapi .b4-landasan{padding-top:26px}
body.mod-lebar .b2-j-keretapi .b4-stesen{top:5px}
body.mod-lebar .b2-j-keretapi .b4-muatan{grid-template-columns:minmax(0,1fr) auto;column-gap:14px;row-gap:8px;padding:10px 12px}
body.mod-lebar .b2-j-keretapi .b4-muatan-label,body.mod-lebar .b2-j-keretapi .b4-muatan-s{grid-column:1 / -1}
body.mod-lebar .b2-j-keretapi .b4-muatan-kotak{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
body.mod-lebar .b2-j-keretapi .b4-muat-btn{align-self:end;min-width:150px}
body.mod-lebar .b2-j-keretapi .b4-kotak{min-height:52px;padding:6px 10px 6px 7px;font-size:.9375rem;line-height:1.25}
body.mod-lebar .b2-j-keretapi .b4-lokomotif{width:138px}
body.mod-lebar .b2-j-keretapi .b4-kereta{min-height:100px}
body.mod-lebar .b2-j-keretapi .b4-landasan-tatal{padding:20px 12px 15px}
body.mod-lebar .b2-j-keretapi .b2-atas{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:stretch}
body.mod-lebar .b2-j-keretapi .b2-atas .bisik{min-height:0}
body.mod-lebar .b2-j-keretapi .b4-kereta-rumus{grid-template-columns:1fr 1fr}

/* ===== Telefon pendek (375 x 667) ===== */
@media (max-height:700px){
  body.mod-telefon .b2-j-misi .b4-tolok-svg{max-width:140px}
  body.mod-telefon .b2-j-tirai .b4-tirai-pentas{min-height:220px}
  body.mod-telefon .b2-j-tirai .b4-tirai-sisi{padding-top:18px}
  body.mod-telefon .b2-j-keretapi .b4-gerabak{min-height:92px}
}