/* ===== Babak · gaya pakej Bab 7 (kumpulan 7b): bas, setem, layar, mozek. Awalan b7b-; susun atur diskop dengan
   .b2-j-<jenis> / .b2-p-<jenis>, body.mod-lebar (pentas 1280 x 720) dan body.mod-telefon. Palet Babak. ===== */

/* ---------- Kongsi ---------- */
.b7b-goncang{animation:goncang .4s}
.b7b-terbang{position:absolute;z-index:40;margin:0;pointer-events:none;box-sizing:border-box;transform-origin:50% 50%}
.b7b-klon-seret{position:absolute;z-index:40;margin:0;pointer-events:none;transition:none!important;filter:drop-shadow(0 14px 16px rgba(27,42,92,.32))}
.b7b-diseret{opacity:.35}
.b7b-op{min-height:50px;font-size:.9375rem}

/* =====================================================================================
   7.5 BAS SEKOLAH
   ===================================================================================== */
.b7b-bas{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.b7b-bas-petunjuk{font-size:.875rem;font-weight:800;line-height:1.3;color:var(--teal-teks)}
.b7b-bas-petunjuk[hidden]{display:none}
.b7b-bas-bingkai{position:relative;overflow:hidden;border-radius:20px;border:3px solid #fff;background:#BFEAFB;box-shadow:var(--bayang)}
.b7b-bas-svg{display:block;width:100%;height:auto}
.b7b-bas-svg text{font-family:var(--f);font-weight:900}
.b7b-papan-teks{font-size:12px;fill:#1B2A5C}
.b7b-papan-teks.terang{font-size:13px;fill:#FFF6E0}
.b7b-tiang-no{font-size:12.5px;fill:#fff}
.b7b-tiang-tahun{font-size:12px;fill:#1B2A5C}
.b7b-tiang-hentian.belum .b7b-tiang-tahun{fill:#7D8FC0}
.b7b-tiang-hentian.lalu circle{fill:#E8971A}
.b7b-tiang-hentian.tanam{animation:b7b-muncul .5s ease-out}
.b7b-feri-teks{font-size:11px;fill:#FFF6E0;letter-spacing:.12em}
.b7b-bas-pintu{transition:opacity .3s ease}
.b7b-bas-g.buka .b7b-bas-pintu{opacity:.1}
.b7b-anak.muncul{animation:b7b-muncul .4s ease-out}
@keyframes b7b-muncul{from{opacity:0}to{opacity:1}}
.b7b-anak-no text{font-size:12px;fill:#1B2A5C}
.b7b-anak.merah .b7b-anak-baju{fill:#F94F55}
.b7b-anak.merah .b7b-anak-no circle{stroke:#C9323F;fill:#FFE9EA}
.b7b-anak.merah .b7b-anak-no text{fill:#A3222E}
.b7b-akhir.rai .b7b-papan-sekolah rect{fill:#1A9A5C;stroke:#FFE57F}
/* jalur laluan (atas adegan) */
.b7b-jl-garis{fill:none;stroke:#AEB9D8;stroke-width:3.2;stroke-linecap:round}
.b7b-jl-garis.laut{stroke:#2BA9E8;stroke-dasharray:4 5}
.b7b-jl-garis.lalu{stroke:#E8971A}
.b7b-jl-nod circle,.b7b-jl-nod rect{fill:#6074A8;stroke:#fff;stroke-width:2}
.b7b-jl-nod.lalu circle,.b7b-jl-nod.lalu rect{fill:#E8971A}
.b7b-jl-nod.kini circle,.b7b-jl-nod.kini rect{fill:#1A9A5C}
.b7b-jl-nod text{font-size:12px;fill:#fff}
/* kad murid (cadangan) */
.b7b-bas-kawasan{display:grid;gap:8px;grid-template-columns:minmax(0,1fr);align-content:start}
.b7b-bas-kad{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:7px 10px 7px 8px;border-radius:16px;background:#fff;text-align:left;color:var(--ink);
  font-size:.9375rem;font-weight:800;line-height:1.28;box-shadow:0 4px 0 rgba(27,42,92,.16),inset 0 0 0 2px var(--garis);transition:transform .15s ease,box-shadow .15s ease,background-color .2s ease}
.b7b-bas-avatar{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--w);color:#fff;font-size:.9375rem;font-weight:900;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.b7b-bas-kad-teks{flex:1 1 auto;min-width:0;overflow-wrap:break-word}
.b7b-bas-tiket{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;border:2px dashed #C5D0EA;color:transparent}
.b7b-bas-tiket .ikon{width:18px;height:18px;stroke-width:3}
.b7b-bas-kad.naik{background:#FFF6D8;box-shadow:0 4px 0 var(--emas-d),inset 0 0 0 3px var(--emas);transform:translateY(-2px)}
.b7b-bas-kad.naik .b7b-bas-tiket{border-style:solid;border-color:var(--emas-d);background:var(--emas);color:var(--ink)}
.b7b-bas-kad.betul{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 4px 0 #1E9E63,inset 0 0 0 3px var(--hijau);transform:none}
.b7b-bas-kad.betul .b7b-bas-tiket{border-style:solid;border-color:var(--hijau);background:var(--hijau);color:#fff}
.b7b-bas-kad.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 4px 0 var(--merah-d),inset 0 0 0 3px #E0555D}
.b7b-bas-kad.salah .b7b-bas-tiket{border-color:#E0555D;color:#C9323F}
.b7b-bas-kad.kilat{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 4px 0 #1E9E63,inset 0 0 0 3px var(--hijau)}
.b7b-bas-kad.dibantu{outline:2px dashed #C9323F;outline-offset:2px}
.b7b-bas-kad.pudar{opacity:.5}
.b7b-bas-kad[disabled]{cursor:default}
/* papan tanda hentian seterusnya (urutan) */
.b7b-bas-tanda{display:flex;align-items:center;gap:10px;width:100%;min-height:54px;padding:8px 14px 8px 10px;border-radius:12px;background:#217F49;color:#fff;
  font-size:1rem;font-weight:900;line-height:1.2;text-align:left;box-shadow:0 5px 0 #145C33,inset 0 0 0 3px rgba(255,255,255,.85)}
.b7b-bas-tanda-panah{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:#217F49}
.b7b-bas-tanda-panah .ikon{width:18px;height:18px;stroke-width:3}
.b7b-bas-tanda-teks{min-width:0;overflow-wrap:break-word}
.b7b-bas-tanda.betul{background:#1A9A5C;box-shadow:0 5px 0 #0F6139,inset 0 0 0 3px #FFE57F}
.b7b-bas-tanda.salah{background:#C9323F;box-shadow:0 5px 0 #8E1F2A,inset 0 0 0 3px #FFD4D6}
.b7b-bas-tanda.salah .b7b-bas-tanda-panah{color:#C9323F}
.b7b-bas-tanda.kilat{background:#1A9A5C;box-shadow:0 5px 0 #0F6139,inset 0 0 0 4px #FFE57F}
.b7b-bas-tanda.pudar{opacity:.45}
.b7b-bas-perjalanan{display:flex;align-items:center;gap:8px;min-height:48px;padding:8px 14px;border-radius:16px;background:rgba(255,255,255,.92);font-size:.9375rem;font-weight:800;line-height:1.3;color:var(--ink2);box-shadow:inset 0 0 0 2px var(--garis)}
.b7b-bas-perjalanan .ikon{flex:none;width:20px;height:20px;color:var(--teal-d)}
.b7b-bas-perjalanan.tiba{background:var(--betul-bg);color:var(--betul-teks);box-shadow:inset 0 0 0 2px #9FE0BF}
.b7b-bas-perjalanan.tiba .ikon{color:var(--emas-d)}
.b7b-bas-bawah{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.b7b-bas-jalan{min-height:52px}
.b7b-bas-jalan[hidden]{display:none}
.b7b-bas-rumus li b{color:var(--ink)}

/* =====================================================================================
   7.6 SETEM · ALBUM SETEM PARTI
   Tepi berlubang: topeng (mask) bulatan lutsinar di sepanjang tepi; saiz kertas mesti gandaan 10 px supaya lubang sekata.
   ===================================================================================== */
.b7b-setem-kertas{position:relative;display:flex;box-sizing:border-box;width:110px;height:100px;padding:6px;background:#FFFDF6;color:var(--ink);
  -webkit-mask-image:radial-gradient(circle,transparent 3.2px,#000 3.7px),linear-gradient(#000,#000);-webkit-mask-size:10px 10px,calc(100% - 10px) calc(100% - 10px);
  -webkit-mask-position:-5px -5px,center;-webkit-mask-repeat:repeat,no-repeat;
  mask-image:radial-gradient(circle,transparent 3.2px,#000 3.7px),linear-gradient(#000,#000);mask-size:10px 10px,calc(100% - 10px) calc(100% - 10px);
  mask-position:-5px -5px,center;mask-repeat:repeat,no-repeat}
.b7b-setem-bingkai{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:9px 4px 5px;border-radius:3px;
  border:2px solid var(--w);background:linear-gradient(var(--w),var(--w)) top/100% 6px no-repeat,#fff;text-align:center;overflow:hidden}
.b7b-setem-sing{display:block;font-size:1.1875rem;font-weight:900;line-height:1.05;color:var(--ink);letter-spacing:.01em}
.b7b-setem-sing.panjang{font-size:.9375rem;line-height:1.1}
.b7b-setem-nama{display:block;font-size:.8125rem;font-weight:800;line-height:1.18;color:var(--ink2);overflow-wrap:normal}
.b7b-setem-kertas.pecah .b7b-setem-nama,.b7b-setem-kertas.pecah .b7b-setem-sing{overflow-wrap:anywhere}
.b7b-setem-tarikh{display:block;margin-top:4px;padding:1px 7px;border-radius:6px;background:#1B2A5C;color:#fff;font-size:.875rem;font-weight:900;line-height:1.35;letter-spacing:.03em}
.b7b-setem-kertas.kompak{width:60px;height:70px;padding:5px}
.b7b-setem-kertas.kompak.panjang{width:70px}
.b7b-setem-kertas.kompak .b7b-setem-bingkai{padding:8px 2px 4px;justify-content:flex-start}
.b7b-setem-kertas.kompak .b7b-setem-sing{font-size:.875rem}
.b7b-setem-kertas.kompak .b7b-setem-sing.panjang{font-size:.875rem;line-height:1.08}
.b7b-setem{position:relative;display:inline-flex;flex:none;padding:0;border:0;border-radius:4px;background:none;color:var(--ink);
  filter:drop-shadow(0 3px 2px rgba(27,42,92,.3));transform:rotate(var(--putar,0deg));transition:transform .18s ease,filter .18s ease,opacity .25s ease;
  touch-action:pan-x;user-select:none;-webkit-user-select:none}
.b7b-setem.pilih{transform:translateY(-7px) rotate(0deg) scale(1.04);filter:drop-shadow(0 0 0 #FFC933) drop-shadow(0 8px 6px rgba(27,42,92,.3))}
.b7b-setem.pilih .b7b-setem-kertas{background:#FFE9A6}
.b7b-setem.salah .b7b-setem-kertas{background:#FF9EA2}
.b7b-setem.salah .b7b-setem-bingkai{border-color:#C9323F;background:linear-gradient(#C9323F,#C9323F) top/100% 6px no-repeat,var(--salah-bg)}
.b7b-setem.salah{animation:goncang .4s}
.b7b-setem.kilat .b7b-setem-kertas{background:#9FE0BF}
.b7b-setem.keluar{opacity:.25}
.b7b-setem.siap{opacity:.3}
.b7b-setem[hidden]{display:none}
.b7b-setem.b7b-diseret{opacity:.3}
/* album */
.b7b-album{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 8px;padding:10px;border-radius:20px;background:#FBF1DA;
  background-image:linear-gradient(rgba(201,183,138,.18) 1px,transparent 1px);background-size:100% 22px;box-shadow:var(--bayang),inset 0 0 0 2px #E6D7B4}
.b7b-album[hidden]{display:none}
.b7b-album-sudut,.b7b-album-lajur{display:none}
.b7b-album-wilayah{grid-column:1 / -1;display:flex;align-items:center;gap:8px;margin-top:4px;font-size:.9375rem;font-weight:900;color:var(--ink)}
.b7b-album-wilayah::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--merah);box-shadow:inset 0 -2px 0 rgba(0,0,0,.2)}
.b7b-sel{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:4px;min-height:92px;padding:6px 8px 10px;border-radius:14px;background:#FFFDF6;text-align:left;color:var(--ink);
  box-shadow:inset 0 0 0 2px #E1CFA6;transition:box-shadow .2s ease,background-color .2s ease}
.b7b-sel-label{font-size:.875rem;font-weight:900;letter-spacing:.01em;color:#8A6A2E}
.b7b-sel-isi{display:flex;flex-wrap:wrap;gap:12px 16px;align-content:flex-start;min-height:70px;padding:2px 2px 0}
.b7b-setem-akar.ada-pilih .b7b-sel{cursor:pointer}
.b7b-setem-akar.ada-pilih .b7b-sel:not(.salah){box-shadow:inset 0 0 0 2px #E8C77A,0 0 0 3px rgba(255,201,51,.28)}
.b7b-sel.b7b-dekat,.b7b-sel.terima{background:#FFF6D8;box-shadow:inset 0 0 0 3px var(--emas),0 0 0 4px rgba(255,201,51,.35)}
.b7b-sel.salah{background:var(--salah-bg);box-shadow:inset 0 0 0 3px #E0555D}
.b7b-sel.salah .b7b-sel-label{color:var(--salah-teks)}
.b7b-sel.kilat{background:var(--betul-bg);box-shadow:inset 0 0 0 3px var(--hijau),0 0 0 4px rgba(26,154,92,.25)}
.b7b-sel.kosong{background:rgba(255,253,246,.55);box-shadow:inset 0 0 0 2px #EADFC4}
.b7b-sel.kosong .b7b-sel-isi::after{content:"Tiada parti dalam senarai ini";align-self:center;font-size:.875rem;font-weight:800;line-height:1.25;color:#8F7648}
.b7b-setem-letak{position:relative;display:inline-flex;flex:none;transform:rotate(var(--putar,0deg));filter:drop-shadow(0 2px 1.5px rgba(27,42,92,.3))}
.b7b-setem-letak.lekat{animation:b7b-lekat .35s ease-out}
@keyframes b7b-lekat{0%{transform:rotate(var(--putar,0deg)) scale(1.12)}100%{transform:rotate(var(--putar,0deg)) scale(1)}}
.b7b-setem-letak.dibantu .b7b-setem-kertas{background:#FFD4D6}
.b7b-cap{position:absolute;right:-16px;bottom:-11px;width:60px;height:auto;overflow:visible;color:rgba(27,42,92,.86);pointer-events:none;transform:rotate(-9deg)}
.b7b-cap text{font-family:var(--f);font-weight:900;fill:currentColor}
.b7b-cap-bulan{font-size:15px;letter-spacing:.02em}
.b7b-cap-tahun{font-size:16.5px}
.b7b-cap.hentak{animation:b7b-hentak .3s cubic-bezier(.3,1.4,.5,1)}
@keyframes b7b-hentak{0%{opacity:0;transform:rotate(-9deg) scale(1.9)}70%{opacity:1}100%{opacity:1;transform:rotate(-9deg) scale(1)}}
.b7b-terbang.keriting{animation:b7b-keriting .42s ease-in-out forwards}
.b7b-terbang.keriting .b7b-setem-bingkai{border-color:#C9323F;background:linear-gradient(#C9323F,#C9323F) top/100% 6px no-repeat,#FFE9EA}
@keyframes b7b-keriting{0%{transform:none}40%{transform:perspective(200px) rotateX(38deg) skewX(-8deg) scale(.94)}100%{transform:perspective(200px) rotateX(18deg) rotate(-10deg) scale(.9)}}
/* dulang setem */
.b7b-setem-rak{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:10px 8px;padding:12px 8px;border-radius:18px;background:#EDE3CC;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.22) 0 8px,transparent 8px 16px);box-shadow:inset 0 0 0 2px #DCCBA4}
.b7b-setem-rak[hidden]{display:none}
.b7b-setem-baki{flex:none;align-self:center;display:inline-flex;align-items:center;min-height:44px;padding:6px 12px;border-radius:12px;background:rgba(255,253,246,.8);
  font-size:.875rem;font-weight:900;color:#7A5A22;box-shadow:inset 0 0 0 2px #DCCBA4}
.b7b-setem-baki[hidden]{display:none}
.b7b-setem-akar{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.b7b-setem-soal[hidden]{display:none}
/* sampul surat (pos) */
.b7b-sampul{position:relative;display:grid;gap:10px;padding:14px 16px 18px;border-radius:10px;background:#FFFDF6;box-shadow:var(--bayang);
  background-image:linear-gradient(135deg,transparent 48%,rgba(201,183,138,.35) 49%,rgba(201,183,138,.35) 51%,transparent 52%),linear-gradient(225deg,transparent 48%,rgba(201,183,138,.35) 49%,rgba(201,183,138,.35) 51%,transparent 52%);
  background-size:50% 90px,50% 90px;background-position:left top,right top;background-repeat:no-repeat;border:2px solid #E6D7B4}
.b7b-sampul[hidden]{display:none}
.b7b-sampul::before{content:"";position:absolute;inset:5px;border-radius:7px;pointer-events:none;
  background:repeating-linear-gradient(135deg,#F94F55 0 10px,transparent 10px 20px,#3D8BF2 20px 30px,transparent 30px 40px);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:5px;opacity:.55}
.b7b-sampul-kepala{position:relative;display:grid;gap:6px;justify-items:end}
.b7b-sampul-arah{display:inline-flex;align-items:center;gap:4px;font-size:.875rem;font-weight:900;color:#8A6A2E}
.b7b-sampul-arah .ikon{width:15px;height:15px;stroke-width:3}
.b7b-sampul-tempat-baris{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px 10px}
.b7b-sampul-tempat{position:relative;display:grid;place-items:center;width:60px;height:70px;border-radius:5px;border:2px dashed #C9B78A;background:rgba(255,246,224,.7)}
.b7b-sampul.lebar .b7b-sampul-tempat{width:70px}
.b7b-sampul-no{font-size:1.125rem;font-weight:900;color:#B99F74}
.b7b-sampul-tempat.isi{border-color:transparent;background:none}
.b7b-sampul-tempat.isi .b7b-sampul-no{display:none}
.b7b-sampul-tempat > .b7b-setem-kertas{position:absolute;left:50%;top:0;transform:translateX(-50%) rotate(-2deg)}
.b7b-sampul-tempat.dibantu > .b7b-setem-kertas{background:#FFD4D6}
.b7b-sampul-alamat{position:relative;display:grid;gap:12px;width:min(62%,300px);margin:6px 0 0 6px}
.b7b-sampul-alamat i{display:block;height:3px;border-radius:2px;background:#D9C9A6}
.b7b-sampul-alamat i:nth-child(2){width:84%}.b7b-sampul-alamat i:nth-child(3){width:62%}
.b7b-sampul.siap{box-shadow:0 0 0 4px rgba(26,154,92,.35),var(--bayang)}
.b7b-setem-rumus li b{color:var(--ink)}

/* =====================================================================================
   7.7 LAYAR · PELABUHAN KERJASAMA
   ===================================================================================== */
.b7b-layar{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.b7b-pelabuhan{position:relative;display:grid;gap:8px;padding:10px 8px 12px;border-radius:22px;overflow:hidden;
  background:linear-gradient(#D2F0FF 0,#E9F8FF 48%,#2BA9E8 48%,#1B8FD2 100%);box-shadow:var(--bayang)}
.b7b-pelabuhan::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;pointer-events:none;
  background-image:radial-gradient(ellipse 14px 3px at 50% 50%,rgba(255,255,255,.4) 60%,transparent 64%);background-size:46px 22px}
.b7b-kuala{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px;border-radius:16px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 2px rgba(255,255,255,.8)}
.b7b-kuala[hidden]{display:none}
.b7b-kuala-label{grid-column:1 / -1;font-size:.875rem;font-weight:900;letter-spacing:.03em;text-transform:uppercase;color:var(--ink2)}
.b7b-tambatan{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 8px;align-items:end}
.b7b-berth{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:96px}
.b7b-berth-label{align-self:center;display:grid;place-items:center;width:100%;min-height:80px;border-radius:14px;border:2px dashed rgba(255,255,255,.85);background:rgba(27,42,92,.12);
  font-size:.875rem;font-weight:900;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.25)}
.b7b-berth.ada .b7b-berth-label{display:none}
.b7b-kapal{position:relative;display:flex;flex-direction:column;align-items:stretch;width:100%;padding:0;border-radius:16px;background:none;text-align:center;color:var(--ink);
  transition:filter .2s ease}
.b7b-kapal-tiang{display:block;width:100%;height:84px;overflow:visible}
.b7b-layar-kain{transform:scaleY(.03);transform-origin:50% 100%;transform-box:fill-box;transition:transform 1s cubic-bezier(.3,.8,.3,1)}
.b7b-layar-gulung{transition:opacity .5s ease}
.b7b-kapal.layar .b7b-layar-kain{transform:scaleY(1)}
.b7b-kapal.layar .b7b-layar-gulung{opacity:0}
.b7b-kapal-krew{display:grid;gap:4px;margin:0 8px;padding:6px 6px 7px;border-radius:12px 12px 4px 4px;background:rgba(255,253,246,.94);box-shadow:inset 0 0 0 2px rgba(27,42,92,.1)}
.b7b-krew{display:flex;align-items:center;gap:6px;min-height:26px;padding:2px 6px;border-radius:8px;border:2px dashed #AEB9D8;background:rgba(255,255,255,.6);
  font-size:.8125rem;font-weight:800;line-height:1.15;text-align:left;color:#7D8FC0}
.b7b-krew-panji{flex:none;width:16px;height:13px;background:#D5DCEC;clip-path:polygon(0 0,100% 0,70% 50%,100% 100%,0 100%)}
.b7b-krew-nama{min-width:0;overflow-wrap:break-word}
.b7b-krew.isi{border-style:solid;border-color:#9FE0BF;background:#fff;color:var(--ink);font-weight:900}
.b7b-krew.isi .b7b-krew-panji{background:var(--p,#2FA05C)}
.b7b-krew.dibantu{border-color:#C9323F;border-style:dashed}
.b7b-kapal-badan{position:relative;display:grid;place-items:center;align-content:center;gap:3px;min-height:58px;padding:8px 14px 13px;background:var(--w);color:#fff;
  clip-path:polygon(0 0,100% 0,90% 100%,10% 100%);box-shadow:inset 0 -7px 0 var(--wd)}
.b7b-kapal-nama{font-size:.875rem;font-weight:900;line-height:1.15;overflow-wrap:break-word}
.b7b-kapal-tarikh{padding:0 8px;border-radius:9px;background:rgba(255,255,255,.26);font-size:.75rem;font-weight:900;line-height:1.5}
.b7b-kapal-ket{display:block;margin:6px 4px 0;padding:3px 8px;border-radius:9px;background:rgba(255,255,255,.92);font-size:.8125rem;font-weight:800;line-height:1.25;color:var(--ink2);box-shadow:0 2px 0 rgba(27,42,92,.14)}
.b7b-kuala .b7b-kapal-tiang,.b7b-kuala .b7b-kapal-krew,.b7b-kuala .b7b-kapal-ket{display:none}
.b7b-kuala .b7b-kapal{filter:drop-shadow(0 4px 0 rgba(27,42,92,.2))}
.b7b-kuala .b7b-kapal-badan{min-height:54px}
.b7b-layar.ada-pilih .b7b-tambatan .b7b-kapal:not(.penuh) .b7b-kapal-krew{box-shadow:inset 0 0 0 2px rgba(255,201,51,.8)}
.b7b-kapal.b7b-dekat .b7b-kapal-krew{background:#FFF6D8;box-shadow:inset 0 0 0 3px var(--emas)}
.b7b-kapal.salah{animation:goncang .4s}
.b7b-kapal.salah .b7b-kapal-badan{background:#C9323F;box-shadow:inset 0 -7px 0 #8E1F2A}
.b7b-kapal.salah .b7b-kapal-krew{background:var(--salah-bg);box-shadow:inset 0 0 0 3px #E0555D}
.b7b-kapal.kilat{filter:drop-shadow(0 0 7px rgba(26,154,92,.9))}
.b7b-kapal.kilat .b7b-kapal-krew{box-shadow:inset 0 0 0 3px var(--hijau)}
.b7b-kapal.kilat .b7b-kapal-badan{box-shadow:inset 0 -7px 0 var(--wd),inset 0 0 0 4px #FFE57F}
.b7b-kapal.dibantu .b7b-kapal-badan{outline:3px dashed #C9323F;outline-offset:-6px}
.b7b-kapal.sorot{filter:drop-shadow(0 0 8px rgba(255,201,51,.95))}
.b7b-kapal.penuh .b7b-kapal-krew{background:#F1FBF5}
.b7b-kapal.belayar{animation:b7b-apung 1.4s ease-in-out 2}
@keyframes b7b-apung{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-1.2deg)}}
/* bendera di jeti */
.b7b-jeti{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:10px;border-radius:18px;background:#B8743C;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 40px,rgba(0,0,0,.08) 40px 42px);box-shadow:var(--lip),inset 0 0 0 2px #8A5226}
.b7b-jeti[hidden]{display:none}
.b7b-bendera{display:inline-flex;align-items:center;gap:6px;min-height:46px;padding:4px 12px 4px 6px;border-radius:12px;background:#FFFDF6;color:var(--ink);
  font-size:.875rem;font-weight:900;line-height:1.15;text-align:left;box-shadow:0 4px 0 rgba(40,20,5,.4);transition:transform .15s ease,box-shadow .15s ease,opacity .25s ease;
  touch-action:pan-x;user-select:none;-webkit-user-select:none}
.b7b-panji{flex:none;width:18px;height:26px}
.b7b-bendera-nama{min-width:0;overflow-wrap:break-word}
.b7b-bendera-lencana{flex:none;display:inline-grid;place-items:center;min-width:28px;height:24px;margin-left:2px;padding:0 6px;border-radius:12px;background:#1B2A5C;color:#fff;font-size:.875rem;font-weight:900;line-height:1}
.b7b-bendera-lencana[hidden]{display:none}
.b7b-bendera.pilih{transform:translateY(-4px);background:#FFF6D8;box-shadow:0 7px 0 var(--emas-d),inset 0 0 0 3px var(--emas)}
.b7b-bendera.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}
.b7b-bendera.keluar{opacity:.25}
.b7b-bendera.guna{display:none}
.b7b-bendera.buang{opacity:.55;text-decoration:line-through;background:#EEF1F8;box-shadow:inset 0 0 0 2px var(--garis)}
.b7b-bendera.b7b-diseret{opacity:.3}
.b7b-bendera-klon{display:inline-flex;overflow:hidden;white-space:nowrap}
.b7b-bendera-klon.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:inset 0 0 0 3px #E0555D}
.b7b-layar-soal{grid-template-columns:minmax(0,1fr)}
.b7b-layar-soal[hidden]{display:none}
.b7b-layar-rumus li b{color:var(--ink)}

/* =====================================================================================
   7.8 MOZEK MUAFAKAT (tahap akhir, jalur)
   ===================================================================================== */
.b7b-mozek{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.b7b-moz-k{opacity:0}
.b7b-moz-k.ada{opacity:1}
.b7b-moz-k.pasang{animation:b7b-moz-pasang .5s ease-out;transform-box:fill-box;transform-origin:50% 50%}
@keyframes b7b-moz-pasang{0%{transform:scale(1.07);filter:brightness(1.45)}100%{transform:scale(1);filter:none}}
.b7b-moz-k.retak{filter:url(#b7b-moz-merah)}
.b7b-moz-retak-garis{fill:none;stroke:#1B2A5C;stroke-width:4.5;stroke-linejoin:round;stroke-linecap:round}
.b7b-moz-sasar circle{transform-box:fill-box;transform-origin:50% 50%;animation:b7b-denyut 1.8s ease-in-out infinite}
@keyframes b7b-denyut{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.22);opacity:.5}}
.b7b-moz-jubin.goyah rect{fill:#F94F55;transform-box:fill-box;transform-origin:50% 50%;animation:goncang .4s}
.b7b-moz-plak-teks{font-family:var(--f);font-weight:900;font-size:22px;letter-spacing:.08em;fill:#FFF6E0;text-transform:uppercase}
.b7b-mozek-pilih{grid-template-columns:minmax(0,1fr)}
.b7b-mozek-pilih.j-bs,.b7b-mozek-pilih.j-tahun{grid-template-columns:repeat(2,minmax(0,1fr))}
.b7b-mozek-taip{grid-column:1 / -1;display:flex;gap:10px;align-items:stretch}
.b7b-mozek-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)}
.b7b-mozek-tahun:focus{outline:none;border-color:var(--fokus);box-shadow:0 0 0 3px rgba(11,87,208,.18)}
.b7b-mozek-tahun.salah{border-color:#E0555D;background:var(--salah-bg);color:var(--salah-teks)}
.b7b-mozek-tahun.betul,.b7b-mozek-tahun.kilat{border-color:var(--hijau);background:var(--betul-bg);color:var(--betul-teks)}
.b7b-mozek-semak{flex:none;min-width:112px}
.b2-kad[hidden]{display:none}

/* =====================================================================================
   MOD LEBAR (pentas 1280 x 720; .main-badan: kiri 300, lebar 720)
   ===================================================================================== */
body.mod-lebar .b2-main.b2-j-bas .main-badan,body.mod-lebar .b2-main.b2-j-setem .main-badan,body.mod-lebar .b2-main.b2-j-layar .main-badan{
  left:300px;width:720px;top:88px;bottom:10px;display:flex;flex-direction:column;align-content:stretch;overflow-y:auto;overflow-x:hidden;padding:2px 2px 6px}
body.mod-lebar .b2-p-bas,body.mod-lebar .b2-p-setem,body.mod-lebar .b2-p-layar{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
body.mod-lebar .b2-j-bas .b2-kad-isi,body.mod-lebar .b2-j-setem .b2-kad-isi,body.mod-lebar .b2-j-layar .b2-kad-isi{font-size:1.1875rem}
body.mod-lebar .b2-j-bas .bisik,body.mod-lebar .b2-j-setem .bisik,body.mod-lebar .b2-j-layar .bisik{min-height:48px;padding:8px 14px}
body.mod-lebar .b2-p-bas > .b2-rumus,body.mod-lebar .b2-p-setem > .b2-rumus,body.mod-lebar .b2-p-layar > .b2-rumus{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
body.mod-lebar .b2-p-bas > .b2-rumus > *,body.mod-lebar .b2-p-setem > .b2-rumus > *,body.mod-lebar .b2-p-layar > .b2-rumus > *{flex:none}
body.mod-lebar .b2-p-bas > .b2-rumus > .b2-rumus-tokoh,body.mod-lebar .b2-p-setem > .b2-rumus > .b2-rumus-tokoh,body.mod-lebar .b2-p-layar > .b2-rumus > .b2-rumus-tokoh{
  flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px;grid-template-columns:1fr}
/* bas */
body.mod-lebar .b7b-bas{gap:10px}
body.mod-lebar .b7b-bas-bingkai{flex:none}
body.mod-lebar .b7b-bas-mod-kad{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px}
body.mod-lebar .b7b-bas-mod-tanda{grid-template-columns:repeat(3,minmax(0,1fr))}
body.mod-lebar .b7b-bas-mod-soal{grid-template-columns:repeat(2,minmax(0,1fr))}
body.mod-lebar .b7b-bas-kad{min-height:46px;padding:5px 10px 5px 8px;font-size:.875rem;line-height:1.24}
body.mod-lebar .b7b-bas-bawah{grid-template-columns:minmax(0,1fr) 176px;align-items:end}
body.mod-lebar .b7b-bas-bawah .bisik{min-height:52px}
/* setem: kad + bisik sebaris; album grid 3 baris x 2 lajur dengan label wilayah di kiri */
/* kad + bisik sebaris; unsur lain selebar penuh (tiada baris grid kosong untuk unsur tersembunyi) */
body.mod-lebar .b7b-setem-akar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:start}
body.mod-lebar .b7b-setem-akar > *{grid-column:1 / -1}
body.mod-lebar .b7b-setem-akar > .b2-atas{grid-column:1;grid-row:1}
body.mod-lebar .b7b-setem-akar > .bisik{grid-column:2;grid-row:1;align-self:stretch;margin:0}
body.mod-lebar .b7b-album{grid-template-columns:96px var(--kolum,minmax(0,1fr) minmax(0,1fr));gap:6px 8px;padding:8px 10px 10px}
body.mod-lebar .b7b-setem-soal{grid-template-columns:repeat(2,minmax(0,1fr))}
body.mod-lebar .b7b-setem-rak{padding:8px}
body.mod-lebar .b7b-album-sudut{display:flex;align-items:center;font-size:.75rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#A58E62}
body.mod-lebar .b7b-album-lajur{display:flex;align-items:center;justify-content:center;min-height:26px;border-radius:10px;background:#1B2A5C;color:#fff;font-size:.875rem;font-weight:900}
body.mod-lebar .b7b-album-wilayah{grid-column:auto;margin:0;align-self:stretch;padding:6px 8px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 2px #E1CFA6;font-size:.875rem;line-height:1.2}
body.mod-lebar .b7b-album-wilayah::before{flex:none}
body.mod-lebar .b7b-sel{min-height:84px;padding:6px 8px 10px}
body.mod-lebar .b7b-sel-label{display:none}
body.mod-lebar .b7b-sel-isi{min-height:74px;gap:10px 8px}
body.mod-lebar .b7b-setem-nama{font-size:.8125rem}
body.mod-lebar .b7b-setem-kertas.kompak .b7b-setem-sing{font-size:.8125rem;letter-spacing:0}
/* layar */
body.mod-lebar .b7b-layar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:start}
body.mod-lebar .b7b-layar > *{grid-column:1 / -1}
body.mod-lebar .b7b-layar > .b2-atas{grid-column:1;grid-row:1}
body.mod-lebar .b7b-layar > .bisik{grid-column:2;grid-row:1;align-self:stretch;margin:0}
body.mod-lebar .b7b-layar-soal{grid-template-columns:repeat(2,minmax(0,1fr))}
body.mod-lebar .b7b-jeti{padding:8px;gap:7px 8px}
body.mod-lebar .b7b-tambatan{grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:8px}
body.mod-lebar .b7b-kuala{grid-template-columns:repeat(4,minmax(0,1fr))}
body.mod-lebar .b7b-bendera{min-height:44px;padding:3px 10px 3px 6px;font-size:.8125rem;line-height:1.12}
body.mod-lebar .b7b-bendera-nama{max-width:136px}
/* kapal lebih rendah supaya pelabuhan + jeti muat dalam pentas */
body.mod-lebar .b7b-kapal-tiang{height:64px}
body.mod-lebar .b7b-kapal-krew{gap:3px;padding:5px 5px 6px}
body.mod-lebar .b7b-krew{min-height:24px;padding:1px 6px}
body.mod-lebar .b7b-kapal-badan{min-height:50px;padding:7px 12px 12px}
body.mod-lebar .b7b-pelabuhan{padding:8px 8px 10px}
/* mozek: panel soalan di kanan, adegan di kiri */
body.mod-lebar .b2-main.b2-j-mozek .main-badan{left:796px;width:456px;top:84px;bottom:20px;display:flex;flex-direction:column;align-content:stretch}
body.mod-lebar .b2-p-mozek{flex:1 1 auto;display:flex;flex-direction:column}
body.mod-lebar .b7b-mozek{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
body.mod-lebar .b2-p-mozek .b2-kad-isi{font-size:1.3125rem}
body.mod-lebar .b7b-mozek .b2-rumus{max-height:560px;overflow-y:auto}
body.mod-lebar .b7b-mozek .b2-rumus-tokoh{grid-template-columns:1fr}

/* =====================================================================================
   MOD TELEFON (390 x 844) dan TELEFON PENDEK (375 x 667)
   ===================================================================================== */
body.mod-telefon .b2-j-bas .b2-kad-isi,body.mod-telefon .b2-j-setem .b2-kad-isi,body.mod-telefon .b2-j-layar .b2-kad-isi{font-size:1.0625rem;line-height:1.25}
body.mod-telefon .b2-j-bas .bisik,body.mod-telefon .b2-j-setem .bisik,body.mod-telefon .b2-j-layar .bisik{min-height:2.9em;padding:8px 12px}
/* bas: adegan + kad + Jalan muat dalam 844 px untuk lima kad */
body.mod-telefon .b7b-bas{gap:8px}
body.mod-telefon .b7b-bas-kad{min-height:46px;padding:5px 10px 5px 8px}
body.mod-telefon .b7b-bas-kawasan{gap:7px}
body.mod-telefon .b7b-bas-bawah{gap:8px}
/* setem: dulang = jalur tetap di bawah skrin, setem dileret mendatar */
body.mod-telefon .b7b-setem-kertas{width:120px;height:110px}
body.mod-telefon .b7b-setem-kertas.kompak{width:60px;height:70px}
body.mod-telefon .b7b-setem-nama{font-size:.875rem;line-height:1.15}
body.mod-telefon .b7b-setem-rak{position:fixed;left:0;right:0;bottom:0;z-index:20;max-width:560px;margin:0 auto;flex-wrap:nowrap;justify-content:flex-start;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:10px;padding:14px 12px max(12px,env(safe-area-inset-bottom));
  border-radius:18px 18px 0 0;box-shadow:0 -6px 18px rgba(27,42,92,.2),inset 0 2px 0 #DCCBA4}
body.mod-telefon .b7b-setem-rak .b7b-setem{scroll-snap-align:start}
body.mod-telefon .b7b-sampul{padding:12px 10px 16px}
body.mod-telefon .b7b-sampul-tempat-baris{gap:12px 6px;justify-content:center}
/* layar: kapal dalam grid 2 x 2, bendera = jalur tetap dua baris di bawah skrin */
body.mod-telefon .b7b-jeti{position:fixed;left:0;right:0;bottom:0;z-index:20;max-width:560px;margin:0 auto;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;padding:12px 10px max(12px,env(safe-area-inset-bottom));border-radius:18px 18px 0 0;box-shadow:0 -6px 18px rgba(27,42,92,.25),inset 0 2px 0 #8A5226}
body.mod-telefon .b7b-jeti .b7b-bendera{max-width:210px;scroll-snap-align:start}
body.mod-telefon .b7b-krew{font-size:.875rem}
body.mod-telefon .b7b-kapal-tiang{height:66px}
body.mod-telefon .b7b-kapal-nama{font-size:.875rem}
body.mod-telefon .b7b-kapal-ket{font-size:.875rem}
body.mod-telefon .b7b-kapal-tarikh{font-size:.875rem}
body.mod-telefon .b7b-kapal-krew{margin:0 4px;padding:5px 4px 6px}
body.mod-telefon .b7b-kapal-badan{padding:8px 10px 13px}
body.mod-telefon .b7b-pelabuhan{padding:8px 6px 10px;background:linear-gradient(#D2F0FF 0,#E9F8FF 40px,#2BA9E8 40px,#1B8FD2 100%)}
body.mod-telefon .b7b-pelabuhan::after{top:40px;height:auto}
body.mod-telefon .b7b-sel-isi{gap:12px 16px}
@media (max-height:700px){
  body.mod-telefon .b7b-bas-kad{min-height:44px;padding:5px 10px 5px 7px;font-size:.875rem;line-height:1.24}
  body.mod-telefon .b7b-bas-avatar,body.mod-telefon .b7b-bas-tiket{width:26px;height:26px}
  body.mod-telefon .b7b-bas-kawasan{gap:6px}
  body.mod-telefon .b7b-bas-tanda{min-height:48px;font-size:.9375rem}
  body.mod-telefon .b7b-setem-kertas{width:110px;height:100px}
  body.mod-telefon .b7b-setem-kertas.kompak{width:60px;height:70px}
  body.mod-telefon .b7b-setem-rak{padding-top:10px}
  body.mod-telefon .b7b-sel{min-height:84px}
  body.mod-telefon .b7b-kapal-tiang{height:54px}
  body.mod-telefon .main.b2-main.b2-j-mozek .latar-babak{height:250px}
  body.mod-telefon .main.b2-main.b2-j-mozek .main-badan{margin-top:194px}
}
@media (max-width:370px){
  body.mod-telefon .b7b-setem-kertas{width:110px}
  body.mod-telefon .b7b-bendera{padding:4px 10px 4px 5px}
}
@media (prefers-reduced-motion:reduce){
  .b7b-anak.muncul,.b7b-tiang-hentian.tanam,.b7b-setem-letak.lekat,.b7b-cap.hentak,.b7b-terbang.keriting,.b7b-kapal.belayar,.b7b-moz-k.pasang,.b7b-moz-sasar circle{animation:none}
  .b7b-kapal.layar .b7b-layar-kain{transform:scaleY(1)}
}