/* ===== Babak · gaya pakej Bab 5 (kumpulan 5b): jigsaw, rajah, benang, wau. Awalan kelas b5-, susun atur diskop dengan
   .b2-j-<jenis> dan body.mod-lebar / body.mod-telefon. Warna ikut palet Babak. ===== */

/* ---------- Kongsi ---------- */
.b5-terbang{position:absolute;z-index:40;margin:0;pointer-events:none;transform-origin:50% 50%}
.b2-main .b5-sibuk{cursor:progress}

/* =====================================================================================
   5.5 JIGSAW PERSEKUTUAN
   ===================================================================================== */
.b5-jig{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.b5-jig-kiri,.b5-jig-kanan{display:grid;gap:10px;min-width:0;align-content:start}
.b5-jig-sasar{display:block;width:100%;padding:0;text-align:left;color:inherit;transition:box-shadow .2s ease,border-color .2s ease,background-color .2s ease}
.b5-jig-papan{border-radius:22px;border:3px solid #fff;background:#2BA9E8;overflow:hidden;box-shadow:var(--bayang)}
.b5-jig-peta{display:block;width:100%;height:auto;aspect-ratio:590/612}
.b5-jig-papan.b5-dekat{border-color:var(--emas);box-shadow:0 0 0 5px rgba(255,201,51,.5),var(--bayang)}
.b5-jig-papan.salah{border-color:#E0555D;box-shadow:0 0 0 5px rgba(249,79,85,.4),var(--bayang);animation:goncang .4s}
.b5-jig-papan.kilat,.b5-jig-papan.lengkap{border-color:var(--hijau);box-shadow:0 0 0 5px rgba(26,154,92,.32),var(--bayang)}
.b5-jig-hantu{fill:#F4E8C8;stroke:#C8B07C;stroke-width:1.6;stroke-dasharray:5 4;stroke-linejoin:round;transition:fill .3s ease}
.b5-jig-hantu.sorot{fill:#FFF1BF;stroke:#E8971A;stroke-width:3.4;stroke-dasharray:none;animation:b5-jig-sorot 1.2s ease-in-out infinite}
@keyframes b5-jig-sorot{50%{fill:#FFE08A;stroke:#FFC933}}
.b5-jig-hantu.diisi{stroke:none}
.b5-jig-slot{opacity:0;transition:opacity .35s ease}
.b5-jig-slot.ada{opacity:1}
.b5-jig-slot.snap{animation:b5-jig-snap .5s ease-out;transform-box:fill-box;transform-origin:50% 50%}
@keyframes b5-jig-snap{0%{transform:scale(1.14)}55%{transform:scale(.96)}100%{transform:scale(1)}}
.b5-jig-isi{stroke:#fff;stroke-width:2.4;stroke-linejoin:round}
.b5-jig-slot.jajahan .b5-jig-isi{stroke:#5537A8;stroke-width:1.8;stroke-dasharray:4 3}
.b5-jig-slot.dibantu .b5-jig-isi{stroke:#C9323F;stroke-width:3;stroke-dasharray:7 4}
.b5-jig-label{opacity:0;transition:opacity .45s ease .12s;pointer-events:none}
.b5-jig-label.nampak{opacity:1}
.b5-jig-peta text{font-family:var(--f);font-size:23px;font-weight:900;fill:#1B2A5C;text-anchor:middle;stroke:#fff;stroke-width:5px;stroke-linejoin:round;paint-order:stroke}
.b5-jig-tunjuk{stroke:#1B2A5C;stroke-width:2.2;stroke-linecap:round;opacity:.7}
.b5-jig-titik{fill:#1B2A5C}

.b5-jig-legenda{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;padding:6px 10px;border-radius:16px;background:rgba(255,255,255,.94);box-shadow:var(--lip)}
.b5-jig-leg{display:inline-flex;align-items:center;gap:6px;font-size:.875rem;font-weight:800;color:var(--ink);white-space:nowrap}
.b5-jig-leg-w{display:inline-block;flex:none;width:16px;height:16px;border-radius:5px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18);vertical-align:-2px}
.b5-jig-leg-n{min-width:36px;padding:1px 7px;border-radius:9px;background:var(--ink);color:#fff;font-size:.875rem;text-align:center}

.b5-jig-dulang{display:flex;align-items:center;gap:12px;min-height:60px;padding:6px 14px 6px 7px;border-radius:18px;border:3px dashed #9D95C9;background:#F3F0FC;color:#3E3478;box-shadow:var(--lip)}
.b5-jig-dulang-slot{flex:none;display:flex;align-items:center;justify-content:center;gap:4px;width:84px;height:44px;padding:5px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 2px #D8D3EF}
.b5-jig-dulang-isi{display:block;width:100%;height:100%;overflow:visible;animation:lompat .4s ease-out}
.b5-jig-dulang-isi.dibantu{outline:2px dashed #C9323F;outline-offset:2px;border-radius:6px}
.b5-jig-dulang-teks{display:grid;gap:1px;font-size:.9375rem;font-weight:900;line-height:1.22}
.b5-jig-dulang-teks small{font-size:.875rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#6A60A8}
.b5-jig-dulang.ada{border-style:solid;background:#ECE8FB}
.b5-jig-dulang.b5-dekat{border-color:var(--emas);background:#FFF6D8}
.b5-jig-dulang.salah{border-color:#E0555D;background:var(--salah-bg);color:var(--salah-teks);animation:goncang .4s}
.b5-jig-dulang.kilat{border-color:var(--hijau);border-style:solid;background:var(--betul-bg);color:var(--betul-teks)}

.b5-jig-laci{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;padding:8px 4px 12px;margin:0 -4px;scroll-snap-type:x proximity;scroll-padding-inline:4px;scrollbar-width:thin}
.b5-jig-keping{position:relative;flex:0 0 94px;display:grid;justify-items:center;align-content:center;gap:4px;min-height:92px;padding:8px 6px;border-radius:16px;background:#FFFDF6;
  box-shadow:0 4px 0 rgba(27,42,92,.2),inset 0 0 0 2px #EADFC4;transform:rotate(var(--putar,0deg));transition:transform .2s ease,box-shadow .2s ease,opacity .3s ease;
  scroll-snap-align:start;touch-action:pan-x;user-select:none;-webkit-user-select:none}
.b5-jig-bentuk{display:block;width:100%;height:46px;overflow:visible;pointer-events:none}
.b5-jig-bentuk path,.b5-jig-terbang path{fill:#E9D7AE;stroke:#B8743C;stroke-width:2px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.b5-jig-terbang{overflow:visible;filter:drop-shadow(0 6px 5px rgba(27,42,92,.3))}
.b5-jig-terbang.angkat{opacity:.92}
.b5-jig-nama{font-size:.875rem;font-weight:900;line-height:1.15;text-align:center;color:var(--ink);pointer-events:none}
.b5-jig-keping.pilih{transform:translateY(-6px);background:#FFF6D8;box-shadow:0 8px 0 var(--emas-d),inset 0 0 0 3px var(--emas)}
.b5-jig-keping.pilih path{fill:#FFE08A}
.b5-jig-keping.salah{background:var(--salah-bg);box-shadow:0 4px 0 var(--merah-d),inset 0 0 0 3px #E0555D;animation:goncang .4s}
.b5-jig-keping.salah .b5-jig-nama{color:var(--salah-teks)}
.b5-jig-keping.salah path{fill:#FFC2C4;stroke:#C9323F}
.b5-jig-keping.b5-diseret{opacity:.35}
.b5-jig-keping.siap{opacity:.3;box-shadow:inset 0 0 0 2px #EADFC4;transform:none}
body.mod-telefon .b5-jig-keping.siap{display:none}
.b5-jig-pilih{grid-template-columns:minmax(0,1fr)}
.b5-jig-op{min-height:50px;font-size:.9375rem}
.b5-jig-rumus{display:grid;gap:12px;justify-items:center}
.b5-jig-mini{width:min(100%,250px);border-radius:16px;border:3px solid #fff;box-shadow:var(--lip)}
.b5-jig-rumus .b2-rumus-tokoh{width:100%}
.b5-jig-rumus .b2-rumus-tokoh b{display:flex;align-items:center;gap:6px}

/* =====================================================================================
   5.6 RAJAH STRUKTUR
   ===================================================================================== */
.b5-rajah{position:relative;padding:12px 10px 14px;border-radius:22px;background:linear-gradient(#F7FAFF,#EDF2FC);box-shadow:var(--bayang)}
.b5-rajah::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background-image:linear-gradient(rgba(61,139,242,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(61,139,242,.08) 1px,transparent 1px);background-size:18px 18px}
.b5-rajah-garis{position:absolute;left:0;top:0;z-index:0;overflow:visible;pointer-events:none}
.b5-rajah-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:8px;row-gap:34px;align-items:stretch}
.b5-rajah-kotak{display:grid;align-content:start;gap:6px;min-height:92px;padding:8px 8px 10px;border-radius:16px;background:#fff;text-align:center;color:var(--ink);
  box-shadow:0 4px 0 rgba(27,42,92,.16),inset 0 0 0 2px #C5D0EA;transition:box-shadow .2s ease,background-color .2s ease}
.b5-rajah-nama{display:grid;place-items:center;min-height:40px;padding:4px 6px;border-radius:11px;background:#F1F4FB;border:2px dashed #AEB9D8;font-size:.9375rem;font-weight:900;line-height:1.18;overflow-wrap:break-word}
.b5-rajah-kosong{font-size:.875rem;font-weight:800;color:#7D8FC0}
.b5-rajah-peranan{font-size:.875rem;font-weight:700;line-height:1.3;color:var(--ink2)}
.b5-rajah-kotak.isi{background:#FFFBEA;box-shadow:0 4px 0 var(--emas-d),inset 0 0 0 3px var(--emas)}
.b5-rajah-kotak.isi .b5-rajah-nama{border:0;background:var(--emas);color:var(--ink)}
.b5-rajah-kotak.dibantu .b5-rajah-nama{background:#FFD4D6;box-shadow:inset 0 0 0 2px #E0555D}
.b5-rajah-kotak.b5-dekat{background:#FFF6D8;box-shadow:0 4px 0 var(--emas-d),inset 0 0 0 3px var(--emas)}
.b5-rajah-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}
.b5-rajah-kotak.salah .b5-rajah-peranan{color:var(--salah-teks)}
.b5-rajah-kotak.kilat,.b5-rajah-kotak.jawab{background:var(--betul-bg);box-shadow:0 4px 0 #1E9E63,inset 0 0 0 3px var(--hijau)}
.b5-rajah-kotak.masuk{animation:lompat .35s ease-out}
.b5-rajah.soal .b5-rajah-kotak:not(.salah):not(.jawab):not(.kilat):hover{box-shadow:0 4px 0 var(--ungu-d),inset 0 0 0 3px var(--ungu)}
.b5-rajah-sambung{fill:none;stroke:#AEB9D8;stroke-width:3;stroke-dasharray:7 6;stroke-linejoin:round;stroke-linecap:round;transition:stroke .3s ease}
.b5-rajah-sambung.hidup{stroke:#1B2A5C;stroke-dasharray:none}
.b5-rajah-hubung{fill:none;stroke:#C4B5F2;stroke-width:3;stroke-dasharray:2 7;stroke-linecap:round;stroke-linejoin:round}
.b5-rajah-hubung.hidup{stroke:#7B57E0}
.b5-rajah-hubung-titik{fill:#C4B5F2}
.b5-rajah-hubung-titik.hidup{fill:#7B57E0}
.b5-rajah-dulang{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:10px;border-radius:18px;background:rgba(255,255,255,.9);box-shadow:var(--lip)}
.b5-rajah-label{min-height:44px;padding:6px 14px;border-radius:14px;background:#fff;font-size:.9375rem;font-weight:900;line-height:1.2;color:var(--ink);
  box-shadow:0 4px 0 rgba(27,42,92,.2),inset 0 0 0 2px var(--garis);transition:transform .15s ease,box-shadow .15s ease,opacity .3s ease;touch-action:none;user-select:none;-webkit-user-select:none}
.b5-rajah-label.pilih{transform:translateY(-3px);background:#FFF6D8;box-shadow:0 6px 0 var(--emas-d),inset 0 0 0 3px var(--emas)}
.b5-rajah-label.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-rajah-label.kilat{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 4px 0 #1E9E63,inset 0 0 0 3px var(--hijau)}
.b5-rajah-label.guna{display:none}
.b5-rajah-label.buang{visibility:visible;opacity:.5;text-decoration:line-through;background:#EEF1F8;box-shadow:inset 0 0 0 2px var(--garis)}
.b5-rajah-label.b5-diseret{opacity:.35}
.b5-rajah-klon{display:grid;place-items:center;overflow:hidden;text-align:center}
/* soal situasi dengan pilihan teks: butang di atas carta (telefon) atau di sisi carta (lebar) */
.b5-rajah-pilih{grid-template-columns:minmax(0,1fr)}
.b5-rajah-op{min-height:50px;font-size:.9375rem}

/* =====================================================================================
   5.7 PAPAN BENANG MERAH
   ===================================================================================== */
.b5-benang{padding:9px;border-radius:22px;background:linear-gradient(#9A5D2A,#7A4520);box-shadow:var(--bayang),inset 0 0 0 2px #5E3317}
.b5-benang-tatal{border-radius:14px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;box-shadow:inset 0 3px 8px rgba(40,20,5,.45)}
.b5-benang-isi{position:relative;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));column-gap:40px;padding:12px 16px 18px;min-width:100%;
  background-color:#C9965E;background-image:radial-gradient(rgba(110,63,27,.3) 1px,transparent 1.6px),radial-gradient(rgba(255,238,205,.28) 1px,transparent 1.6px);
  background-size:11px 11px,17px 17px;background-position:0 0,6px 8px}
.b5-benang-lajur{display:grid;align-content:start;gap:12px;min-width:0}
.b5-benang-tajuk{justify-self:center;margin-bottom:2px;padding:4px 12px;border-radius:5px;background:#FFF6E0;box-shadow:0 3px 0 rgba(40,20,5,.28);transform:rotate(-1.5deg);text-align:center}
.b5-benang-tajuk span{font-size:.875rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.b5-benang-kad{position:relative;display:block;width:100%;min-height:70px;padding:14px 13px 12px;border-radius:5px;background:#FFFDF4;text-align:left;font-size:.875rem;font-weight:800;line-height:1.3;color:var(--ink);
  background-image:linear-gradient(#F94F55,#F94F55);background-size:100% 3px;background-repeat:no-repeat;
  box-shadow:0 5px 9px rgba(40,20,5,.32);transform:rotate(var(--putar,0deg));transition:box-shadow .2s ease,background-color .2s ease;user-select:none;-webkit-user-select:none}
.b5-benang-teks{display:block;overflow-wrap:break-word}
.b5-benang-leret{display:none}
body.mod-telefon .b5-benang-leret{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:-4px;font-size:.875rem;font-weight:800;color:var(--ink2);transition:opacity .3s ease}
body.mod-telefon .b5-benang-leret .ikon{width:16px;height:16px;stroke-width:3;color:var(--merah-d)}
body.mod-telefon .b5-benang-leret.hilang{opacity:0}
.b5-benang-pin{position:absolute;top:18px;z-index:2;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 32%,#FF9EA2,#D22B36 58%,#9E1822);box-shadow:0 2px 2px rgba(0,0,0,.4);touch-action:none}
.b5-benang-pin::before{content:"";position:absolute;inset:-13px;border-radius:50%}
.b5-benang-pin.kiri{left:-9px}
.b5-benang-pin.kanan{right:-9px}
.b5-benang-kad.pilih{background-color:#FFF6D8;box-shadow:0 0 0 3px var(--emas),0 9px 14px rgba(40,20,5,.4)}
.b5-benang-kad.pilih .b5-benang-pin{background:radial-gradient(circle at 35% 32%,#FFF3BF,#FFC933 58%,#E8971A)}
.b5-benang-kad.b5-dekat{box-shadow:0 0 0 3px var(--emas),0 9px 14px rgba(40,20,5,.4)}
.b5-benang-kad.salah{background-color:var(--salah-bg);color:var(--salah-teks);box-shadow:0 0 0 3px #E0555D,0 5px 9px rgba(40,20,5,.32);animation:goncang .4s}
.b5-benang-kad.kilat{background-color:var(--betul-bg);box-shadow:0 0 0 3px var(--hijau),0 5px 9px rgba(40,20,5,.32)}
.b5-benang-kad.lengkap{background-color:#F1FBF5;background-image:linear-gradient(var(--hijau),var(--hijau))}
.b5-benang-kad.lengkap::after{content:"";position:absolute;right:7px;bottom:6px;width:18px;height:18px;border-radius:50%;background:var(--hijau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.b5-benang-kad.b5-diseret{box-shadow:0 0 0 3px var(--emas),0 9px 14px rgba(40,20,5,.4)}
.b5-benang-tali{position:absolute;left:0;top:0;z-index:3;overflow:visible;pointer-events:none}
.b5-benang-jalur{fill:none;stroke:#D22B36;stroke-width:3.2;stroke-linecap:round}
.b5-benang-bayang{fill:none;stroke:rgba(50,20,5,.3);stroke-width:3.2;stroke-linecap:round}
.b5-benang-kepala{fill:#C9323F;stroke:#fff;stroke-width:1.6}
.b5-benang-t.lengkap .b5-benang-jalur{stroke:#B3121E}
.b5-benang-t.lengkap .b5-benang-kepala{fill:#FFC933;stroke:#8A5226}
.b5-benang-t.putus .b5-benang-jalur{stroke:#FF2E3A;stroke-width:4.2}
.b5-benang-t.sementara .b5-benang-jalur{stroke-dasharray:7 5;opacity:.85}
.b5-benang-t.dibantu .b5-benang-jalur{stroke-dasharray:9 5}
.b5-benang-rumus li b{color:var(--ink)}

/* =====================================================================================
   5.8 WAU NAIK (tahap akhir, jalur)
   ===================================================================================== */
.b5-wau-goyang{transform-box:fill-box;transform-origin:50% 58%;animation:b5-wau-goyang 3.6s ease-in-out infinite}
@keyframes b5-wau-goyang{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.b5-wau-awan{animation:b5-wau-awan 38s linear infinite alternate}
@keyframes b5-wau-awan{from{transform:translateX(0)}to{transform:translateX(34px)}}
.b5-wau-merah{opacity:0;transition:opacity .25s ease}
.b5-wau-merah.aktif{opacity:.62}
.b5-wau-tali{fill:none;stroke:#1B2A5C;stroke-linecap:round;opacity:.72}
.b5-wau-tik{stroke:#1B2A5C;stroke-linecap:round;opacity:.35;transition:stroke .3s ease,opacity .3s ease}
.b5-wau-tik.capai{stroke:#E8971A;opacity:1}
.b5-wau-tonggak-garis{fill:none;stroke:#fff;stroke-dasharray:6 7;opacity:.75}
.b5-wau-tonggak-p{fill:rgba(27,42,92,.74);transition:fill .35s ease}
.b5-wau-tonggak text{fill:#fff;font-family:var(--f);font-weight:900}
.b5-wau-tonggak.capai .b5-wau-tonggak-p{fill:#FFC933}
.b5-wau-tonggak.capai text{fill:#1B2A5C}
.b5-wau-tonggak.capai .b5-wau-tonggak-garis{stroke:#FFC933;opacity:1}
.b5-wau-taip{grid-column:1 / -1;display:flex;gap:10px;align-items:stretch}
.b5-wau-tahun{flex:1 1 auto;min-width:0;height:56px;padding:0 14px;border-radius:18px;border:2px solid #C5D0EA;background:#fff;font:inherit;font-size:1.5rem;font-weight:900;letter-spacing:.24em;text-align:center;color:var(--ink)}
.b5-wau-tahun:focus{outline:none;border-color:var(--fokus);box-shadow:0 0 0 3px rgba(11,87,208,.18)}
.b5-wau-tahun.salah{border-color:#E0555D;background:var(--salah-bg);color:var(--salah-teks);animation:goncang .4s}
.b5-wau-tahun.betul,.b5-wau-tahun.kilat{border-color:var(--hijau);background:var(--betul-bg);color:var(--betul-teks)}
.b5-wau-semak{flex:none;min-width:112px}

/* =====================================================================================
   MOD LEBAR (pentas 1280 x 720)
   ===================================================================================== */
body.mod-lebar .b2-main.b2-j-jigsaw .main-badan{left:300px;width:720px;top:84px;bottom:12px;display:flex;flex-direction:column;align-content:stretch}
body.mod-lebar .b2-p-jigsaw{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
body.mod-lebar .b5-jig{flex:1 1 auto;min-height:0;grid-template-columns:374px minmax(0,1fr);gap:14px;align-items:start}
body.mod-lebar .b5-jig-kanan{gap:10px}
body.mod-lebar .b5-jig-laci{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible;padding:2px 0 0;margin:0}
body.mod-lebar .b5-jig-keping{min-height:86px;padding:7px 5px;touch-action:none}
body.mod-lebar .b5-jig-bentuk{height:42px}
body.mod-lebar .b5-jig-dulang{min-height:70px}
body.mod-lebar .b5-jig-dulang-teks{font-size:1rem}
body.mod-lebar .b5-jig-legenda{gap:6px 20px}
body.mod-lebar .b5-jig-pilih{gap:10px}
body.mod-lebar .b5-jig-op{min-height:58px;font-size:1rem}
body.mod-lebar .b5-jig-keping.siap{background:rgba(255,255,255,.3);box-shadow:inset 0 0 0 2px rgba(255,255,255,.75);opacity:1}
body.mod-lebar .b5-jig-keping.siap > *{opacity:.3}
body.mod-lebar .b2-p-jigsaw .b2-rumus{max-height:600px;overflow-y:auto}
body.mod-lebar .b5-jig-rumus{grid-template-columns:230px minmax(0,1fr);align-items:start;justify-items:stretch}
body.mod-lebar .b5-jig-rumus .b2-rumus-tokoh{grid-template-columns:1fr}

/* rajah: dulang label menjadi lajur di kanan carta supaya semuanya muat dalam pentas 720 x 624 */
body.mod-lebar .b2-main.b2-j-rajah .main-badan{top:84px;bottom:12px;overflow-y:auto;align-content:start;padding:2px 2px 8px}
body.mod-lebar .b2-p-rajah{grid-template-columns:minmax(0,1fr) 196px;column-gap:12px;align-items:start}
body.mod-lebar .b2-p-rajah > .b2-rumus{grid-column:1 / -1}
body.mod-lebar .b2-p-rajah > .b2-atas{grid-column:1;grid-row:1}
body.mod-lebar .b2-p-rajah > .b5-rajah{grid-column:1;grid-row:2}
body.mod-lebar .b2-p-rajah.b5-rajah-soal > .b2-atas{grid-column:1 / -1}
body.mod-lebar .b2-p-rajah.b5-rajah-soal > .b5-rajah{grid-column:1 / -1}
body.mod-lebar .b2-p-rajah.b5-rajah-pilih-mod{grid-template-columns:minmax(0,1fr) 250px}
body.mod-lebar .b2-p-rajah.b5-rajah-pilih-mod > .b5-rajah{grid-column:1;grid-row:2}
body.mod-lebar .b2-p-rajah.b5-rajah-pilih-mod > .b5-rajah-pilih{grid-column:2;grid-row:2;align-self:start;gap:8px}
body.mod-lebar .b5-rajah-op{min-height:54px;padding:8px 12px;font-size:.9375rem}
/* soal pilihan pada skrin lebar: carta padat (nama sahaja) di sebelah butang pilihan supaya semuanya muat dalam pentas */
body.mod-lebar .b2-p-rajah.b5-rajah-pilih-mod .b5-rajah-peranan{display:none}
body.mod-lebar .b2-p-rajah.b5-rajah-pilih-mod .b5-rajah-kotak{min-height:0}
body.mod-lebar .b2-p-rajah > .b5-rajah-dulang{grid-column:2;grid-row:1 / span 2;align-self:stretch;align-content:flex-start;justify-content:stretch;gap:7px;padding:9px}
body.mod-lebar .b5-rajah-dulang .b5-rajah-label,body.mod-lebar .b5-rajah-klon{flex:1 1 auto;min-height:42px;padding:5px 10px;font-size:.875rem;text-align:center}
body.mod-lebar .b2-p-rajah .b2-kad-isi{font-size:1.25rem}
body.mod-lebar .b5-rajah{padding:12px 12px 14px}
body.mod-lebar .b5-rajah-grid{column-gap:10px;row-gap:24px}
body.mod-lebar .b5-rajah-kotak{min-height:84px;padding:8px 8px 10px}
body.mod-lebar .b5-rajah-nama{min-height:36px;font-size:.9375rem}
body.mod-lebar .b5-rajah-peranan{font-size:.875rem}

/* benang: papan ditatal di dalam bingkainya supaya kad soalan dan bisik kekal kelihatan */
body.mod-lebar .b2-main.b2-j-benang .main-badan{top:84px;bottom:12px;overflow-y:auto;align-content:start;padding:2px 2px 8px;display:flex;flex-direction:column}
body.mod-lebar .b2-p-benang{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
body.mod-lebar .b2-p-benang > .b2-atas{flex:none}
body.mod-lebar .b2-p-benang > .b5-benang{flex:0 1 auto;min-height:0;display:flex;flex-direction:column}
body.mod-lebar .b5-benang-tatal{flex:0 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
body.mod-lebar .b2-p-benang > .b2-rumus{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
body.mod-lebar .b2-p-benang > .b2-rumus > *{flex:none}
body.mod-lebar .b2-p-benang > .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-benang > .b2-atas{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
body.mod-lebar .b2-p-benang .b2-kad-isi{font-size:1.25rem}
body.mod-lebar .b5-benang-isi{column-gap:40px;padding:10px 18px 14px}
body.mod-lebar .b5-benang-lajur{gap:10px}
body.mod-lebar .b5-benang-kad{font-size:.875rem;min-height:58px;padding:12px 13px 10px}

body.mod-lebar .b2-main.b2-j-wau .main-badan{left:796px;width:456px;top:84px;bottom:20px;display:flex;flex-direction:column;align-content:stretch}
body.mod-lebar .b2-p-wau{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
body.mod-lebar .b2-p-wau .b2-kad-isi{font-size:1.3125rem}
body.mod-lebar .b2-p-wau .b2-rumus{max-height:560px;overflow-y:auto}
body.mod-lebar .b2-p-wau .b2-rumus-tokoh{grid-template-columns:1fr}

/* =====================================================================================
   MOD TELEFON
   ===================================================================================== */
body.mod-telefon .b5-benang-isi{grid-template-columns:repeat(var(--n,3),156px);column-gap:32px;width:max-content;padding:12px 12px 18px}
body.mod-telefon .b5-benang-kad{padding:14px 12px 12px 12px}
body.mod-telefon .b5-rajah{padding:10px 6px 12px}
body.mod-telefon .b5-rajah-grid{column-gap:4px}
body.mod-telefon .b5-rajah-kotak{padding:7px 4px 9px}
body.mod-telefon .b5-rajah-nama{padding:4px 2px;font-size:.875rem}
/* rajah: label dalam jalur dua baris yang dileret ke kanan, supaya carta dan label kelihatan serentak */
body.mod-telefon .b5-rajah-dulang{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:max-content;justify-content:start;align-content:start;
  gap:8px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:10px;scrollbar-width:thin;padding:10px 10px 12px}
body.mod-telefon .b5-rajah-dulang .b5-rajah-label{min-width:104px}
/* telefon: carta lebih tinggi daripada skrin, jadi jalur label kekal di bawah skrin (tetap) semasa carta ditatal;
   ruang di bawah pentas supaya kotak terakhir boleh ditatal ke atas jalur itu */
body.mod-telefon .b2-p-rajah > .b5-rajah-dulang{position:fixed;left:0;right:0;bottom:0;z-index:20;max-width:560px;margin:0 auto;border-radius:18px 18px 0 0;
  padding-bottom:max(12px,env(safe-area-inset-bottom));background:rgba(255,255,255,.97);box-shadow:0 -6px 18px rgba(27,42,92,.18)}
body.mod-telefon .b2-p-rajah:not(.b5-rajah-soal){padding-bottom:128px}
body.mod-telefon .b5-rajah-dulang .b5-rajah-label,body.mod-telefon .b5-rajah-klon{max-width:204px;padding:6px 12px;text-align:center}
body.mod-telefon .b5-rajah-dulang .b5-rajah-label{touch-action:pan-x;scroll-snap-align:start}
body.mod-telefon .b5-rajah-dulang.lagi-kanan{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),rgba(0,0,0,.12));mask-image:linear-gradient(90deg,#000 calc(100% - 48px),rgba(0,0,0,.12))}
body.mod-telefon .b5-rajah-dulang.lagi-kiri{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.12),#000 48px);mask-image:linear-gradient(90deg,rgba(0,0,0,.12),#000 48px)}
body.mod-telefon .b5-rajah-dulang.lagi-kiri.lagi-kanan{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.12),#000 48px,#000 calc(100% - 48px),rgba(0,0,0,.12));
  mask-image:linear-gradient(90deg,rgba(0,0,0,.12),#000 48px,#000 calc(100% - 48px),rgba(0,0,0,.12))}
/* jigsaw: padat supaya kepingan kelihatan tanpa menatal pada 390 x 844 */
body.mod-telefon .b5-jig,body.mod-telefon .b5-jig-kiri,body.mod-telefon .b5-jig-kanan{gap:6px}
body.mod-telefon .b5-jig-legenda{gap:2px 14px;padding:4px 10px}
body.mod-telefon .b5-jig-leg-n{padding:0 7px}
body.mod-telefon .b5-jig-nama{line-height:1.1}
body.mod-telefon .b5-jig-dulang{gap:10px;min-height:56px;padding:5px 12px 5px 6px}
body.mod-telefon .b5-jig-dulang-slot{width:72px;height:42px}
body.mod-telefon .b5-jig-dulang-teks{display:block;line-height:1.25}
body.mod-telefon .b5-jig-dulang-teks small{display:inline;margin-right:6px}
body.mod-telefon .b5-jig-laci{padding:7px 4px 6px}
body.mod-telefon .b5-jig-keping{min-height:84px;padding:6px}
body.mod-telefon .b5-jig-bentuk{height:40px}
/* benang: tanda leret di atas papan */
body.mod-telefon .b5-benang-leret{justify-content:flex-end;margin:-4px 2px -2px}
body.mod-telefon .b5-benang-leret.tiada{display:none}
@media (max-height:700px){
  /* telefon pendek: jalur kepingan jigsaw kekal di bawah skrin supaya peta dan kepingan kelihatan serentak */
  body.mod-telefon .b2-p-jigsaw .b5-jig-laci{position:fixed;left:0;right:0;bottom:0;z-index:20;max-width:560px;margin:0 auto;padding:8px 10px max(8px,env(safe-area-inset-bottom));
    border-radius:18px 18px 0 0;background:rgba(255,255,255,.97);box-shadow:0 -6px 18px rgba(27,42,92,.18)}
  body.mod-telefon .b2-p-jigsaw{padding-bottom:112px}
  body.mod-telefon .main.b2-main.b2-j-wau .latar-babak{height:250px}
  body.mod-telefon .main.b2-main.b2-j-wau .main-badan{margin-top:194px}
}
@media (max-width:370px){
  body.mod-telefon .b5-rajah-dulang .b5-rajah-label,body.mod-telefon .b5-rajah-klon{padding:6px 11px}
  body.mod-telefon .b5-jig-keping{flex-basis:88px}
}
@media (prefers-reduced-motion:reduce){
  .b5-wau-goyang,.b5-wau-awan,.b5-jig-hantu.sorot{animation:none}
}