/* ===== Babak · gaya pakej enjin Bab 8, kumpulan 8b (js/pakej-bab-08-8b.js): filem, tapis. Awalan kelas dan keyframes b8b-.
   Susun atur diskop dengan .b2-j-<jenis> / .b2-p-<jenis>, body.mod-lebar (pentas 1280 x 720; .main-badan kiri 300, lebar 720)
   dan body.mod-telefon (390 x 844; telefon pendek @media (max-height:700px)). Palet Babak (SPEC-BAB-6-7 §1.14). Keadaan akhir
   animasi untuk prefers-reduced-motion (babak.css juga mematikan semua animasi dan peralihan). ===== */

/* ---------- Bersama ---------- */
.b8b-goncang{animation:goncang .4s}
/* klon terbang/seret: !important kerana gaya kepingan (position:relative) datang kemudian dengan kekhususan yang sama */
.b8b-terbang,.b8b-klon-seret{position:absolute!important;z-index:40;margin:0!important;pointer-events:none;box-sizing:border-box;overflow:hidden}
.b8b-klon-seret{transition:none!important;box-shadow:0 16px 28px rgba(27,42,92,.32)!important}
.b8b-terbang{transition:none!important}
.b2-main .b8b-filem[data-sibuk],.b2-main .b8b-tapis[data-sibuk]{cursor:progress}
.b2-j-filem .b2-kad-no,.b2-j-tapis .b2-kad-no{font-size:.875rem;letter-spacing:.04em}
.b2-j-filem .b2-kad-isi,.b2-j-tapis .b2-kad-isi{font-size:1.0625rem;overflow-wrap:break-word}
.b2-j-filem .b2-rujuk-btn,.b2-j-tapis .b2-rujuk-btn{font-size:.875rem;min-height:44px}
.b2-j-filem .b2-rumus-tokoh li,.b2-j-tapis .b2-rumus-tokoh li{font-size:.875rem;line-height:1.35;align-content:start}
.b2-j-filem .b2-rumus-label,.b2-j-tapis .b2-rumus-label{font-size:.875rem}
.b2-rumus-tokoh li.b8b-rumus-penuh{grid-column:1/-1}
.b8b-dulang-label{font-size:.875rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.b8b-baki{font-size:.875rem;font-weight:800;color:var(--ink2)}
.b8b-sisi-kepala{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.b8b-soal-panel{display:grid;gap:8px}
.b8b-soal-teks{display:none;font-size:1rem;font-weight:900;line-height:1.3;color:var(--ink)}
.b8b-soal-pilih{grid-template-columns:minmax(0,1fr);gap:8px}
.b8b-op{min-height:50px;font-size:.9375rem;overflow-wrap:break-word}
/* dulang yang ditatal mendatar: tepi yang masih ada isi dipudarkan */
.b8b-gulung.ada-kanan,.b8b-rak.ada-kanan,.b8b-dulang-tarikh.ada-kanan{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.b8b-gulung.ada-kiri,.b8b-rak.ada-kiri,.b8b-dulang-tarikh.ada-kiri{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
.b8b-gulung.ada-kiri.ada-kanan,.b8b-rak.ada-kiri.ada-kanan,.b8b-dulang-tarikh.ada-kiri.ada-kanan{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}

/* =====================================================================================
   8.3 FILEM · BILIK FILEM
   ===================================================================================== */
.b8b-filem{display:grid;gap:10px;min-width:0}
.b8b-atas{display:grid;gap:10px;min-width:0}
.b8b-atas-kiri{display:grid;gap:8px;min-width:0;align-content:start}
/* bilik projektor */
.b8b-bilik{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:20px;min-width:0;padding:8px 12px 8px 8px;border-radius:20px;overflow:hidden;
  background:radial-gradient(130% 110% at 12% 100%,#2E3F80 0%,#1B2A5C 58%,#15224D 100%);box-shadow:var(--bayang),inset 0 0 0 2px rgba(255,255,255,.07)}
.b8b-projektor{position:relative;z-index:2;display:block;width:62px;height:auto;overflow:visible}
.b8b-gegelung{transform-box:fill-box;transform-origin:50% 50%}
.b8b-filem.menayang .b8b-gegelung{animation:b8b-putar 3.4s linear infinite}
.b8b-filem.menayang .b8b-gegelung.kedua{animation-duration:2.4s}
.b8b-bilik.undur .b8b-gegelung,.b8b-bilik.undur .b8b-gegelung.kedua{animation:b8b-putar-undur 1.2s linear infinite}
@keyframes b8b-putar{to{transform:rotate(360deg)}}
@keyframes b8b-putar-undur{to{transform:rotate(-360deg)}}
.b8b-kanta{transition:fill .5s ease}
.b8b-bilik.hidup .b8b-kanta{fill:#FFFBE8}
.b8b-sinar{position:absolute;left:0;top:0;z-index:1;pointer-events:none;overflow:visible;opacity:0;transition:opacity .7s ease}
.b8b-bilik.hidup .b8b-sinar{opacity:1;animation:b8b-kelip-sinar 2.8s ease-in-out .7s infinite}
@keyframes b8b-kelip-sinar{0%,100%{opacity:1}50%{opacity:.86}}
.b8b-skrin{position:relative;z-index:2;align-self:stretch;min-height:76px;border-radius:10px;background:#FFF6E0;overflow:hidden;
  box-shadow:0 0 0 3px #0E1840,0 0 0 5px rgba(255,255,255,.1);transition:background-color .7s ease,box-shadow .7s ease}
.b8b-bilik.hidup .b8b-skrin{background:#F5E4C2;box-shadow:0 0 0 3px #0E1840,0 0 24px 4px rgba(255,236,170,.4)}
.b8b-skrin-isi{position:absolute;inset:0}
/* lapisan skrin: yang lama pudar dahulu (0.3 s), yang baharu muncul selepas itu, jadi teks tidak bertindih */
.b8b-skrin-lapis{position:absolute;inset:0;display:grid;padding:8px 12px;animation:b8b-skrin-masuk .4s ease-out .26s backwards;transition:opacity .3s ease}
.b8b-skrin-lapis.keluar{opacity:0}
@keyframes b8b-skrin-masuk{from{opacity:0}to{opacity:1}}
.b8b-skrin-judul{place-content:center;justify-items:center;gap:2px;text-align:center}
.b8b-skrin-reel{width:28px;height:28px}
.b8b-skrin-judul b{font-size:.9375rem;font-weight:900;line-height:1.2;color:var(--ink);overflow-wrap:break-word}
.b8b-skrin-judul small{font-size:.75rem;font-weight:700;line-height:1.25;color:#6B5A3A}
.b8b-skrin-babak{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px}
.b8b-skrin-ikon{width:50px;height:50px}
.b8b-skrin-teks{display:grid;gap:4px;min-width:0}
.b8b-skrin-kap{font-size:.875rem;font-weight:900;line-height:1.25;color:#33291A;overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.b8b-skrin-tarikh{justify-self:start;padding:1px 8px;border-radius:8px;background:#1B2A5C;color:#FFE9A8;font-size:.875rem;font-weight:900;white-space:nowrap}
.b8b-bilik.hidup .b8b-skrin-lapis{filter:sepia(.42) saturate(.92)}
.b8b-skrin-kelip{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,rgba(255,255,255,0) 52%,rgba(92,62,22,.24) 100%);transition:opacity .7s ease}
.b8b-bilik.hidup .b8b-skrin-kelip{opacity:1;animation:b8b-kelip-skrin 2.6s ease-in-out infinite}
@keyframes b8b-kelip-skrin{0%,100%{opacity:.82}50%{opacity:1}}
.b8b-skrin-no{position:absolute;right:7px;top:5px;z-index:3;font-size:.75rem;font-weight:900;color:#6B5A3A}
.b8b-skrin-no:empty{display:none}
.b8b-skrin-kosong{background:#FFFBEE}

/* jalur filem */
.b8b-jalur{display:grid;min-width:0}
.b8b-jalur-baris{display:grid;gap:8px;min-width:0;background-color:#1B2A5C}
.b8b-slot{position:relative;display:flex;width:100%;min-width:0;border-radius:8px;text-align:left;color:var(--ink)}
.b8b-slot-tetingkap{position:relative;flex:1 1 auto;display:grid;align-items:center;min-width:0;min-height:76px;border-radius:8px;background:#2A3A72;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.2);transition:background-color .25s ease,box-shadow .25s ease}
.b8b-slot-no{position:absolute;left:6px;top:6px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#1B2A5C;color:#fff;font-size:.75rem;font-weight:900;line-height:1}
.b8b-slot-tanda{display:none}
.b8b-slot-gambar{display:grid;place-items:center}
.b8b-slot-ikon{width:40px;height:40px}
.b8b-slot-kanan{display:grid;gap:4px;min-width:0}
.b8b-slot-teks{font-size:.875rem;font-weight:800;line-height:1.26;overflow-wrap:break-word}
/* kosong: tetingkap gelap, nombor besar pudar */
.b8b-slot.kosong .b8b-slot-tetingkap{place-items:center;outline:2px dashed rgba(255,255,255,.3);outline-offset:-7px}
.b8b-slot.kosong .b8b-slot-no,.b8b-slot.kosong .b8b-slot-gambar,.b8b-slot.kosong .b8b-slot-kanan{display:none}
.b8b-slot.kosong .b8b-slot-tanda{display:grid;place-items:center;grid-column:1/-1;font-size:1.625rem;font-weight:900;color:rgba(255,255,255,.36)}
.b8b-slot.lompang .b8b-slot-tanda{width:46px;height:46px;border-radius:50%;background:#FFC933;color:#1B2A5C;font-size:1.5rem;box-shadow:0 4px 0 #E8971A}
.b8b-slot.seterus .b8b-slot-tetingkap{outline-color:rgba(255,233,168,.9);animation:b8b-denyut 1.8s ease-in-out infinite}
.b8b-slot.seterus .b8b-slot-tanda{color:#FFE08A}
.b8b-slot.lompang.seterus .b8b-slot-tanda{color:#1B2A5C}
@keyframes b8b-denyut{0%,100%{box-shadow:inset 0 0 0 3px #FFC933,0 0 0 2px rgba(255,201,51,.3)}50%{box-shadow:inset 0 0 0 3px #FFC933,0 0 0 6px rgba(255,201,51,.45)}}
.b8b-filem.ada-pilih .b8b-slot.seterus .b8b-slot-tetingkap{background:#3A4C8E}
.b8b-slot.b8b-dekat .b8b-slot-tetingkap{background:#4B5EA6}
.b8b-slot.salah .b8b-slot-tetingkap{background:#7A2E3E;box-shadow:inset 0 0 0 3px #F94F55;animation:none}
/* berisi */
.b8b-slot.isi .b8b-slot-tetingkap{background:#FFFDF6;box-shadow:inset 0 0 0 2px #E7DCC0}
.b8b-slot.sedia .b8b-slot-tetingkap{background:#F7F1E2}
.b8b-slot.isi.salah .b8b-slot-tetingkap{background:var(--salah-bg);color:var(--salah-teks);box-shadow:inset 0 0 0 3px #E0555D}
.b8b-slot.dibantu .b8b-slot-tetingkap{outline:2px dashed #F94F55;outline-offset:-5px}
.b8b-slot.snap .b8b-slot-tetingkap{animation:b8b-snap .34s ease-out}
@keyframes b8b-snap{0%{transform:translateY(-6px) scale(1.03)}65%{transform:translateY(1px) scale(.995)}100%{transform:none}}
.b8b-slot.tayang .b8b-slot-tetingkap{box-shadow:inset 0 0 0 3px #FFC933,0 0 14px rgba(255,201,51,.6)}
.b8b-slot.kilat .b8b-slot-tetingkap{box-shadow:inset 0 0 0 3px var(--hijau),0 0 0 4px rgba(26,154,92,.35)}
.b8b-slot.tanpa-tarikh .b8b-slot-tetingkap{opacity:.5}
.b8b-filem.ada-pilih.mod-tarikh .b8b-slot.perlu-tarikh .b8b-slot-tetingkap{box-shadow:inset 0 0 0 3px #FFC933}
.b8b-slot-tarikh{justify-self:start;display:inline-flex;align-items:center;min-height:24px;padding:1px 8px;border-radius:7px;font-size:.875rem;font-weight:900;line-height:1.2;white-space:nowrap}
.b8b-slot-tarikh.isi{background:#1B2A5C;color:#FFE9A8;transform:rotate(-2deg)}
.b8b-slot-tarikh:not(.isi){border:2px dashed #E8971A;color:#8A4B00;background:#FFF6D8}
.b8b-slot-tarikh.dicop{animation:b8b-cop .5s ease-out}
.b8b-slot-tarikh.dibantu{outline:2px dashed #F94F55;outline-offset:1px}
@keyframes b8b-cop{0%{transform:rotate(-2deg) scale(1.5);opacity:0}60%{transform:rotate(-2deg) scale(.95);opacity:1}100%{transform:rotate(-2deg) scale(1)}}

/* gulungan: kepingan filem lepas (jalur bersproket di atas dan di bawah) */
.b8b-gulung{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;padding:6px 4px 8px}
.b8b-kepingan{position:relative;flex:none;display:flex;width:232px;padding:11px 5px;border-radius:10px;scroll-snap-align:start;text-align:left;color:var(--ink);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Crect x='3' y='2' width='6' height='4' rx='1.2' fill='%23F1E7CF'/%3E%3C/svg%3E") 0 2px/12px 8px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Crect x='3' y='2' width='6' height='4' rx='1.2' fill='%23F1E7CF'/%3E%3C/svg%3E") 0 calc(100% - 2px)/12px 8px repeat-x,#1B2A5C;
  box-shadow:0 4px 0 rgba(27,42,92,.3);touch-action:pan-x;user-select:none;-webkit-user-select:none;transition:transform .18s ease,box-shadow .18s ease}
.b8b-kep-tetingkap{flex:1 1 auto;display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:8px;min-width:0;min-height:62px;padding:6px 8px;border-radius:6px;background:#FFFDF6;transition:background-color .2s ease}
.b8b-kep-ikon{width:38px;height:38px}
.b8b-kep-kanan{display:grid;gap:3px;min-width:0}
.b8b-kep-teks{font-size:.875rem;font-weight:800;line-height:1.26;overflow-wrap:break-word}
.b8b-kep-tarikh{justify-self:start;padding:1px 7px;border-radius:7px;background:#1B2A5C;color:#FFE9A8;font-size:.875rem;font-weight:900;white-space:nowrap}
.b8b-kepingan:active{transform:translateY(2px)}
.b8b-kepingan.pilih{transform:translateY(-5px) rotate(-1deg);box-shadow:0 9px 0 var(--emas-d),0 0 0 4px var(--emas)}
.b8b-kepingan.pilih .b8b-kep-tetingkap{background:#FFF6D8}
.b8b-kepingan.salah{box-shadow:0 4px 0 var(--merah-d),0 0 0 3px #E0555D}
.b8b-kepingan.salah .b8b-kep-tetingkap{background:var(--salah-bg);color:var(--salah-teks)}
.b8b-kepingan.kilat{box-shadow:0 4px 0 #1E9E63,0 0 0 4px var(--hijau)}
.b8b-kepingan.kilat .b8b-kep-tetingkap{background:var(--betul-bg)}
.b8b-kepingan.guna{display:none}
.b8b-kepingan.pudar-keluar{opacity:0;transform:translateY(10px) scale(.94);transition:opacity .6s ease,transform .6s ease;pointer-events:none}
.b8b-kepingan.b8b-diseret{opacity:.35}
.b8b-terbang.salah{box-shadow:0 0 0 3px #E0555D!important}
.b8b-terbang.salah .b8b-kep-tetingkap{background:var(--salah-bg)!important;color:var(--salah-teks)}
.b8b-keriting{animation:b8b-keriting .42s ease-out forwards}
@keyframes b8b-keriting{0%{transform:none}100%{transform:perspective(420px) rotateX(22deg) rotateZ(-5deg) scale(.93);border-radius:10px 24px 10px 28px}}
/* cip tarikh */
.b8b-dulang-tarikh{display:flex;flex-wrap:wrap;gap:8px;padding:2px 2px 6px}
.b8b-cip-tarikh{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 14px 6px 10px;border-radius:12px;background:#FFFDF6;color:var(--ink);font-size:.9375rem;font-weight:900;white-space:nowrap;
  box-shadow:0 3px 0 rgba(27,42,92,.2),inset 0 0 0 2px #E4D8BC;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
.b8b-cip-ikon{width:18px;height:18px;color:#7B57E0}
.b8b-cip-tarikh.pilih{transform:translateY(-4px);background:#FFF6D8;box-shadow:0 7px 0 var(--emas-d),inset 0 0 0 3px var(--emas)}
.b8b-cip-tarikh.salah,.b8b-terbang.b8b-cip-terbang.salah{background:var(--salah-bg)!important;color:var(--salah-teks);box-shadow:0 3px 0 var(--merah-d),inset 0 0 0 3px #E0555D!important}
.b8b-cip-tarikh.kilat{background:var(--betul-bg);box-shadow:0 3px 0 #1E9E63,inset 0 0 0 3px var(--hijau)}
.b8b-cip-tarikh.dibuang{background:var(--salah-bg);color:var(--salah-teks);text-decoration:line-through;opacity:.7}
.b8b-cip-tarikh.guna{display:none}
.b8b-cip-tarikh.pudar-keluar{opacity:0;transform:scale(.92);transition:opacity .6s ease,transform .6s ease;pointer-events:none}
.b8b-cip-tarikh.b8b-diseret{opacity:.35}
.b8b-tayang-btn{width:100%;min-height:58px;font-size:1.25rem;letter-spacing:.03em}
.b8b-tayang-btn .main-ikon{width:24px;height:24px}
/* rumusan */
.b8b-rumus-lanjut{display:grid;gap:8px}
.b8b-rumus-filem li.b8b-rumus-babak{grid-template-columns:34px minmax(0,1fr);align-items:center;column-gap:10px}
.b8b-rumus-ikon{width:34px;height:34px}
.b8b-rumus-teks{display:grid;gap:1px;min-width:0}
.b8b-rumus-teks b{color:var(--ink)}
.b8b-rumus-olahan{font-size:.875rem;font-weight:700;font-style:italic;color:var(--ink2)}

/* =====================================================================================
   8.4 TAPIS · CORONG SYARAT
   ===================================================================================== */
.b8b-tapis{display:grid;gap:10px;min-width:0}
.b8b-tapis-meja{position:relative;display:grid;gap:10px;min-width:0}
.b8b-corong-baris{display:grid;grid-template-columns:repeat(var(--nc,2),minmax(0,1fr));gap:10px;align-items:start;min-width:0}
.b8b-corong{--w:#3D8BF2;--wd:#2563C4;--wt:#E6F0FE;position:relative;display:grid;justify-items:center;min-width:0;cursor:pointer}
.b8b-corong-mulut{position:relative;z-index:1;display:grid;justify-items:center;align-content:center;gap:1px;width:100%;min-height:58px;padding:7px 10% 9px;color:#fff;text-align:center;transition:filter .2s ease,transform .15s ease}
.b8b-corong-mulut::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--w),var(--wd));clip-path:polygon(0 0,100% 0,96% 100%,4% 100%);transition:background .2s ease}
.b8b-corong-mulut::after{content:"";position:absolute;left:3%;right:3%;top:5px;z-index:-1;height:5px;border-radius:3px;background:rgba(255,255,255,.35)}
.b8b-corong-nama{font-size:.9375rem;font-weight:900;line-height:1.15;text-shadow:0 1px 0 rgba(0,0,0,.2);overflow-wrap:break-word}
.b8b-corong-kira{font-size:.875rem;font-weight:900;opacity:.95}
.b8b-corong-kira:empty{display:none}
.b8b-tapis.ada-pilih .b8b-corong-mulut,.b8b-corong.b8b-dekat .b8b-corong-mulut{filter:drop-shadow(0 0 3px #FFC933) drop-shadow(0 0 2px #FFC933)}
.b8b-corong.b8b-dekat .b8b-corong-mulut{transform:translateY(-3px)}
.b8b-corong-mulut.salah::before{background:#F94F55}
.b8b-corong-mulut.kilat::before{background:var(--hijau)}
.b8b-corong.lengkap .b8b-corong-kira{color:#FFF3C4}
.b8b-corong-badan{position:relative;display:grid;gap:6px;width:92%;min-width:0;padding:7px 6px;
  background:linear-gradient(90deg,rgba(255,255,255,.6),rgba(255,255,255,.1) 26%,rgba(255,255,255,.1) 74%,rgba(255,255,255,.55)),var(--wt);
  box-shadow:inset 3px 0 0 var(--wd),inset -3px 0 0 var(--wd)}
.b8b-corong-muncung{position:relative;width:92%;height:40px}
.b8b-corong-muncung::before{content:"";position:absolute;inset:0;background:linear-gradient(var(--w),var(--wd));clip-path:polygon(0 0,100% 0,62% 100%,38% 100%)}
.b8b-corong-lubang{position:absolute;left:50%;bottom:-5px;width:30px;height:11px;margin-left:-15px;border-radius:50%;background:var(--wd);box-shadow:inset 0 3px 0 rgba(0,0,0,.25);transition:background-color .25s ease}
.b8b-corong-lubang.tutup{background:#F94F55}
.b8b-corong.siap .b8b-corong-badan{background:linear-gradient(90deg,rgba(255,255,255,.7),rgba(255,255,255,.15) 26%,rgba(255,255,255,.15) 74%,rgba(255,255,255,.6)),var(--wt)}
.b8b-corong.diuji .b8b-corong-mulut{filter:drop-shadow(0 0 4px #FFC933)}
.b8b-corong-hasil{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-top:10px;min-height:0;max-width:100%}
.b8b-corong-hasil:empty{display:none}
.b8b-hasil{display:inline-flex;align-items:center;gap:3px;padding:2px 8px 2px 5px;border-radius:9px;font-size:.875rem;font-weight:900;line-height:1.3;animation:lompat .38s ease-out both}
.b8b-hasil .ikon{width:15px;height:15px;stroke-width:3}
.b8b-hasil.lulus{background:var(--betul-bg);color:var(--betul-teks)}
.b8b-hasil.gagal{background:#EEF2FB;color:var(--ink2)}
/* plat dalam corong */
.b8b-slot-plat{position:relative;display:flex;align-items:center;gap:6px;min-width:0;min-height:48px;padding:6px 7px;border-radius:10px;font-size:.875rem;font-weight:800;line-height:1.22;overflow-wrap:break-word;
  transition:background-color .25s ease,box-shadow .25s ease}
.b8b-slot-plat-teks{flex:1 1 auto;min-width:0}
.b8b-slot-plat.kosong{justify-content:center;background:rgba(255,255,255,.5);color:#7D89B0;box-shadow:inset 0 0 0 2px rgba(27,42,92,.12);outline:2px dashed rgba(27,42,92,.22);outline-offset:-6px;text-align:center}
.b8b-slot-plat.kosong .b8b-plat-lubang{display:none}
.b8b-slot-plat.isi{background:#FFFDF6;color:var(--ink);box-shadow:0 3px 0 rgba(27,42,92,.16),inset 4px 0 0 var(--w)}
.b8b-slot-plat.masuk{animation:b8b-dentum .44s ease-out}
@keyframes b8b-dentum{0%{transform:translateY(-10px)}55%{transform:translateY(2px)}78%{transform:translateY(-1px)}100%{transform:none}}
.b8b-slot-plat.dibantu{outline:2px dashed #F94F55;outline-offset:1px}
.b8b-slot-plat.uji-lulus{background:var(--betul-bg);box-shadow:0 3px 0 rgba(27,42,92,.16),inset 0 0 0 3px var(--hijau)}
.b8b-slot-plat.uji-gagal{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 0 0 3px #E0555D;animation:goncang .4s}
.b8b-slot-plat.akan-tukar{animation:b8b-denyut-plat 1.8s ease-in-out infinite}
@keyframes b8b-denyut-plat{0%,100%{box-shadow:0 3px 0 rgba(27,42,92,.16),inset 4px 0 0 var(--w),0 0 0 2px rgba(255,201,51,.5)}50%{box-shadow:0 3px 0 rgba(27,42,92,.16),inset 4px 0 0 var(--w),0 0 0 5px rgba(255,201,51,.8)}}
.b8b-slot-plat.keluar{transform:translateX(45%);opacity:0;transition:transform .46s ease-in,opacity .46s ease-in}
.b8b-slot-plat.baharu{box-shadow:0 3px 0 rgba(27,42,92,.16),inset 4px 0 0 var(--emas-d),0 0 0 2px var(--emas)}
.b8b-plat-lubang{flex:none;align-self:stretch;width:6px;background:radial-gradient(circle,#B6C0DA 1.6px,transparent 2.1px) 0 1px/6px 8px repeat-y}
/* rak plat */
.b8b-rak{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;min-width:0}
.b8b-plat{position:relative;display:flex;align-items:center;gap:7px;min-width:0;min-height:48px;padding:6px 8px;border-radius:12px;background:#FFFDF6;color:var(--ink);font-size:.875rem;font-weight:800;line-height:1.22;text-align:left;
  box-shadow:0 3px 0 rgba(27,42,92,.22),inset 0 0 0 2px #D5DCEC;touch-action:pan-x;user-select:none;-webkit-user-select:none;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,opacity .3s ease}
.b8b-plat-teks{flex:1 1 auto;min-width:0;overflow-wrap:break-word}
.b8b-plat:active{transform:translateY(2px)}
.b8b-plat.pilih{transform:translateY(-4px);background:#FFF6D8;box-shadow:0 7px 0 var(--emas-d),inset 0 0 0 3px var(--emas)}
.b8b-plat.salah,.b8b-terbang.b8b-plat-terbang.salah{background:var(--salah-bg)!important;color:var(--salah-teks);box-shadow:0 3px 0 var(--merah-d),inset 0 0 0 3px #E0555D!important}
.b8b-plat.kilat{background:var(--betul-bg);box-shadow:0 3px 0 #1E9E63,inset 0 0 0 3px var(--hijau)}
.b8b-plat.betul{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 3px 0 #1E9E63,inset 0 0 0 3px var(--hijau)}
.b8b-plat.pudar{opacity:.5}
.b8b-plat.guna{display:none}
.b8b-plat.b8b-plat-pilihan.guna{display:flex;visibility:hidden}
.b8b-plat.dibuang{background:var(--salah-bg);color:var(--salah-teks);opacity:.8}
.b8b-plat.dibuang .b8b-plat-teks{text-decoration:line-through}
.b8b-plat.dibuang::after{content:"Bukan syarat";position:absolute;right:8px;top:-11px;padding:1px 8px;border-radius:7px;background:#C9323F;color:#fff;font-size:.875rem;font-weight:900;transform:rotate(3deg)}
.b8b-plat.pudar-keluar{opacity:0;transform:scale(.94);transition:opacity .6s ease,transform .6s ease;pointer-events:none}
.b8b-plat.b8b-diseret{opacity:.35}
.b8b-tukar-pilih{display:grid;gap:8px}
/* barisan pemohon rekaan dan token */
.b8b-barisan{display:grid;gap:6px;align-content:start;min-width:0}
.b8b-barisan-label{font-size:.875rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.b8b-barisan-isi{display:flex;flex-wrap:wrap;gap:8px}
.b8b-barisan-item{display:flex;align-items:center;gap:6px;min-width:0;padding:4px 10px 4px 4px;border-radius:22px;background:#fff;box-shadow:var(--lip);font-size:.875rem;font-weight:800;transition:opacity .3s ease,background-color .3s ease}
.b8b-barisan-nama{min-width:0;overflow-wrap:anywhere}
.b8b-token-kecil{display:block;flex:none;width:34px;height:34px}
.b8b-barisan-item.kini{background:#FFF6D8;box-shadow:0 4px 0 var(--emas-d),inset 0 0 0 3px var(--emas)}
.b8b-barisan-item.keluar .b8b-token-kecil{visibility:hidden}
.b8b-barisan-item.siap{opacity:.62}
.b8b-barisan-item.siap.lulus{box-shadow:0 3px 0 rgba(27,42,92,.12),inset 0 0 0 2px #9FE0BF}
.b8b-barisan-item.siap.gagal{box-shadow:0 3px 0 rgba(27,42,92,.12),inset 0 0 0 2px #C5D0EA}
.b8b-orang-svg{display:block;width:100%;height:100%}
.b8b-token{position:absolute;left:0;top:0;z-index:8;width:42px;height:42px;pointer-events:none;filter:drop-shadow(0 4px 4px rgba(27,42,92,.32));transition:opacity .35s ease}
.b8b-token.muncul{animation:b8b-muncul .35s ease-out}
.b8b-token.pudar{opacity:0}
@keyframes b8b-muncul{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
/* panel uji */
.b8b-uji-panel{display:grid;gap:8px}
.b8b-pemohon{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:start;gap:10px;min-width:0;padding:8px 10px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 2px var(--garis)}
.b8b-pemohon.masuk{animation:lompat .35s ease-out both}
.b8b-pemohon-avatar .b8b-orang-svg{width:44px;height:44px}
.b8b-pemohon-teks{display:grid;gap:3px;min-width:0}
.b8b-pemohon-nama{font-size:1rem;font-weight:900;line-height:1.2}
.b8b-pemohon-mohon{justify-self:start;padding:1px 9px;border-radius:8px;background:var(--w,#3D8BF2);color:#fff;font-size:.875rem;font-weight:900}
.b8b-pemohon-profil{display:grid;gap:1px}
.b8b-pemohon-profil li{position:relative;padding-left:12px;font-size:.875rem;font-weight:700;line-height:1.3;color:var(--ink2);overflow-wrap:break-word}
.b8b-pemohon-profil li::before{content:"";position:absolute;left:1px;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--kelabu)}
.b8b-ramal-baris{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.b8b-ramal{min-height:50px;justify-content:center;gap:8px;font-size:1rem}
.b8b-ramal .ikon{width:20px;height:20px;stroke-width:3}
.b8b-ramal.pilih{background:#FFF6D8;box-shadow:0 5px 0 var(--emas-d),inset 0 0 0 3px var(--emas)}
.b8b-uji-btn{width:100%}
.b8b-uji-btn .ikon{width:22px;height:22px;stroke-width:2.6}
/* notis kini */
.b8b-notis-kini{position:absolute;right:-2px;top:-14px;z-index:3;padding:3px 11px;border-radius:10px;background:var(--emas);color:var(--ink);font-size:.875rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 3px 0 var(--emas-d);transform:rotate(5deg);animation:b8b-notis .55s ease-out both}
@keyframes b8b-notis{0%{transform:translateY(-16px) rotate(-8deg);opacity:0}70%{transform:translateY(2px) rotate(6deg);opacity:1}100%{transform:rotate(5deg)}}
.b8b-notis-kini.siap{background:#FFE08A}
.b8b-corong.kini .b8b-corong-nama{color:#FFF6D8}
/* rumusan */
.b8b-rumus-tapis li.b8b-rumus-corong{box-shadow:inset 4px 0 0 var(--w,#3D8BF2);padding-left:14px}
.b8b-rumus-baris{display:grid;gap:3px}
.b8b-rumus-baris > span{position:relative;padding-left:12px}
.b8b-rumus-baris > span::before{content:"";position:absolute;left:1px;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--w,#3D8BF2)}
.b8b-rumus-tukar s{color:var(--ink2)}
.b8b-rumus-tukar b{color:var(--ink)}

/* =====================================================================================
   MOD LEBAR (pentas 1280 x 720; .main-badan: left 300, width 720)
   ===================================================================================== */
body.mod-lebar .b2-main.b2-j-filem .main-badan,body.mod-lebar .b2-main.b2-j-tapis .main-badan{left:300px;width:720px;top:86px;bottom:10px;display:flex;flex-direction:column;align-content:stretch;overflow:hidden}
body.mod-lebar .b2-p-filem,body.mod-lebar .b2-p-tapis{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
body.mod-lebar .b8b-filem,body.mod-lebar .b8b-tapis{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:8px}
body.mod-lebar .b2-j-filem .b2-kad-isi,body.mod-lebar .b2-j-tapis .b2-kad-isi{font-size:1.125rem}
body.mod-lebar .b2-j-filem .b2-kad,body.mod-lebar .b2-j-tapis .b2-kad{padding:8px 18px 9px}
body.mod-lebar .b8b-atas .bisik{min-height:0;padding:8px 12px;font-size:.875rem;line-height:1.32;align-items:flex-start}
body.mod-lebar .b2-p-filem > .b2-rumus,body.mod-lebar .b2-p-tapis > .b2-rumus{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
body.mod-lebar .b2-p-filem > .b2-rumus > *,body.mod-lebar .b2-p-tapis > .b2-rumus > *{flex:none}
body.mod-lebar .b2-p-filem > .b2-rumus > .b8b-rumus-lanjut,body.mod-lebar .b2-p-tapis > .b2-rumus > .b2-rumus-tokoh{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
body.mod-lebar .b8b-rumus-lanjut .b2-rumus-tokoh{grid-template-columns:1fr 1fr}
/* filem: kad | bilik projektor; jalur dua baris; dulang (bisik + gulungan / cip tarikh / Tayang / soalan) di bawah */
body.mod-lebar .b8b-filem > .b8b-atas{flex:none;grid-template-columns:minmax(0,1fr) 336px;align-items:stretch;gap:12px}
body.mod-lebar .b8b-atas-kiri{display:flex;flex-direction:column;justify-content:center;gap:8px}
body.mod-lebar .b8b-bilik{height:106px;grid-template-columns:62px minmax(0,1fr);gap:22px;padding:7px 10px 7px 8px;transition:height .55s ease}
body.mod-lebar .b8b-projektor{width:62px}
body.mod-lebar .b8b-skrin-ikon{width:42px;height:42px}
body.mod-lebar .b8b-skrin-babak{gap:10px;padding:6px 10px}
body.mod-lebar .b8b-skrin-kap{-webkit-line-clamp:3}
body.mod-lebar .b8b-skrin-judul{padding:4px 8px}
/* tayangan: skrin menjadi lebar penuh (kad disembunyikan, butang tip kekal) dan lebih tinggi */
body.mod-lebar .b8b-filem.menayang > .b8b-atas{grid-template-columns:auto minmax(0,1fr)}
body.mod-lebar .b8b-filem.menayang .b8b-atas-kiri .b2-kad{display:none}
body.mod-lebar .b8b-filem.menayang .b8b-atas-kiri{justify-content:flex-start}
body.mod-lebar .b8b-filem.menayang .b8b-bilik{height:178px;grid-template-columns:96px minmax(0,1fr);gap:44px;padding:10px 16px 10px 12px}
body.mod-lebar .b8b-filem.menayang .b8b-projektor{width:96px}
body.mod-lebar .b8b-filem.menayang .b8b-skrin-babak{gap:22px;padding:12px 26px}
body.mod-lebar .b8b-filem.menayang .b8b-skrin-ikon{width:92px;height:92px}
body.mod-lebar .b8b-filem.menayang .b8b-skrin-kap{font-size:1.1875rem;-webkit-line-clamp:4}
body.mod-lebar .b8b-filem.menayang .b8b-skrin-tarikh{font-size:1rem;padding:2px 10px}
body.mod-lebar .b8b-filem.menayang .b8b-skrin-judul b{font-size:1.25rem}
body.mod-lebar .b8b-filem.menayang .b8b-skrin-judul small{font-size:.875rem}
body.mod-lebar .b8b-filem.menayang .b8b-skrin-reel{width:40px;height:40px}
/* soalan akhir: bilik projektor mengecil supaya kad soalan lebih lebar (jalur penuh kekal kelihatan) */
body.mod-lebar .b8b-filem.mod-soal > .b8b-atas{grid-template-columns:minmax(0,1fr) 232px}
body.mod-lebar .b8b-filem.mod-soal .b8b-skrin-judul small{display:none}
body.mod-lebar .b8b-jalur{flex:0 1 auto;min-height:0;gap:8px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:1px 2px 4px}
body.mod-lebar .b8b-jalur-baris{grid-template-columns:repeat(var(--kol),minmax(0,1fr));gap:8px;padding:15px 10px;border-radius:12px;box-shadow:var(--lip);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Crect x='4' y='2' width='8' height='6' rx='1.8' fill='%23F1E7CF'/%3E%3C/svg%3E") 0 2px/16px 10px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Crect x='4' y='2' width='8' height='6' rx='1.8' fill='%23F1E7CF'/%3E%3C/svg%3E") 0 calc(100% - 2px)/16px 10px repeat-x,#1B2A5C}
/* bingkai lebar: ikon terapung di kiri atas, teks mengalir di sebelah dan di bawahnya (bingkai rendah walaupun teks panjang) */
body.mod-lebar .b8b-slot-tetingkap{display:block;min-height:92px;padding:9px 8px 8px}
body.mod-lebar .b8b-slot.kosong .b8b-slot-tetingkap{display:grid;place-items:center}
body.mod-lebar .b8b-slot-gambar{float:left;margin:1px 7px 3px 0}
body.mod-lebar .b8b-slot-ikon{width:38px;height:38px}
body.mod-lebar .b8b-slot-kanan{display:block;font-size:.875rem;line-height:1.26}
body.mod-lebar .b8b-slot-teks{overflow-wrap:normal;word-break:normal}
body.mod-lebar .b8b-slot.ada-tag .b8b-slot-tetingkap{padding-top:15px}
body.mod-lebar .b8b-slot-no{left:-5px;top:-6px;width:19px;height:19px;box-shadow:0 0 0 2px #FFFDF6}
/* tarikh pada skrin lebar: pelekat di penjuru kanan atas bingkai, separuh pada jalur sproket (tidak menambah tinggi) */
body.mod-lebar .b8b-slot-tarikh{position:absolute;right:5px;top:-12px;z-index:2;min-height:24px;box-shadow:0 2px 0 rgba(0,0,0,.25)}
body.mod-lebar .b8b-slot-tarikh:not(.isi){background:#FFF6D8}
body.mod-lebar .b8b-filem-sisi{flex:none;display:grid;grid-template-columns:118px minmax(0,1fr);align-items:center;column-gap:10px;row-gap:6px;padding:8px 10px;border-radius:18px;background:rgba(255,253,246,.95);box-shadow:var(--lip)}
body.mod-lebar .b8b-filem-sisi > .bisik{grid-column:2;grid-row:1;min-height:44px;padding:6px 12px;font-size:.875rem;line-height:1.3}
body.mod-lebar .b8b-filem-sisi > .b8b-sisi-kepala{grid-column:1;grid-row:1;flex-direction:column;align-items:flex-start;gap:2px}
body.mod-lebar .b8b-filem-sisi > .b8b-gulung,body.mod-lebar .b8b-filem-sisi > .b8b-dulang-tarikh,body.mod-lebar .b8b-filem-sisi > .b8b-tayang-btn,body.mod-lebar .b8b-filem-sisi > .b8b-soal-panel{grid-column:1 / -1}
body.mod-lebar .b8b-filem.mod-tayang .b8b-filem-sisi > .bisik,body.mod-lebar .b8b-filem.mod-soal .b8b-filem-sisi > .bisik{grid-column:1 / -1}
body.mod-lebar .b8b-filem .b8b-gulung{padding:4px 4px 6px}
body.mod-lebar .b8b-filem .b8b-kepingan{width:276px}
body.mod-lebar .b8b-filem .b8b-kep-tetingkap{min-height:58px}
body.mod-lebar .b8b-filem .b8b-soal-pilih{grid-template-columns:1fr 1fr}
body.mod-lebar .b8b-filem .b8b-soal-pilih .op{min-height:50px;padding:6px 12px}
/* tapis: kad | bisik; corong (dan lajur pemohon di kanan semasa uji); rak dua baris / panel di bawah */
body.mod-lebar .b8b-tapis > .b8b-atas{flex:none;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:stretch;gap:10px}
body.mod-lebar .b8b-tapis-meja{flex:1 1 auto;min-height:0;display:flex;align-items:flex-start;gap:14px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:8px 6px 6px}
body.mod-lebar .b8b-corong-baris{flex:1 1 auto;gap:22px;max-width:640px;margin:0 auto}
body.mod-lebar .b8b-tapis.mod-uji .b8b-corong-baris{margin:0;gap:14px}
body.mod-lebar .b8b-corong-mulut{min-height:46px}
body.mod-lebar .b8b-corong-muncung{height:22px}
body.mod-lebar .b8b-slot-plat{min-height:38px;padding:4px 7px}
body.mod-lebar .b8b-barisan{order:2;flex:none;width:236px;align-self:stretch;align-content:start;padding:8px;border-radius:18px;background:rgba(255,253,246,.95);box-shadow:var(--lip)}
body.mod-lebar .b8b-barisan-isi{gap:6px}
body.mod-lebar .b8b-barisan-item{padding-right:8px}
body.mod-lebar .b8b-barisan-item .b8b-token-kecil{width:28px;height:28px}
body.mod-lebar .b8b-barisan .b8b-uji-panel{margin-top:4px}
/* kad pemohon di lajur sempit: avatar kecil sebaris dengan nama; label dan profil memakai lebar penuh kad */
body.mod-lebar .b8b-barisan .b8b-pemohon{grid-template-columns:30px minmax(0,1fr);align-items:center;gap:5px 8px;padding:7px 9px}
body.mod-lebar .b8b-barisan .b8b-pemohon-teks{display:contents}
body.mod-lebar .b8b-barisan .b8b-pemohon-avatar .b8b-orang-svg{width:30px;height:30px}
body.mod-lebar .b8b-barisan .b8b-pemohon-nama{font-size:.9375rem}
body.mod-lebar .b8b-barisan .b8b-pemohon-mohon,body.mod-lebar .b8b-barisan .b8b-pemohon-profil{grid-column:1 / -1}
body.mod-lebar .b8b-barisan .b8b-ramal-baris{grid-template-columns:1fr}
body.mod-lebar .b8b-barisan .b8b-ramal{min-height:46px}
body.mod-lebar .b8b-barisan .b8b-uji-btn{min-height:50px;padding:6px 14px;font-size:1rem}
body.mod-lebar .b8b-tapis.mod-uji .b8b-tapis-sisi{display:none}
body.mod-lebar .b8b-tapis-sisi{flex:none;display:grid;gap:6px;padding:8px 10px;border-radius:18px;background:rgba(255,253,246,.95);box-shadow:var(--lip)}
body.mod-lebar .b8b-rak{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:206px;gap:8px;overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;padding:4px 2px 6px}
body.mod-lebar .b8b-rak .b8b-plat{scroll-snap-align:start}
body.mod-lebar .b8b-tukar-pilih{grid-template-columns:repeat(3,minmax(0,1fr))}
body.mod-lebar .b8b-tapis .b8b-soal-pilih{grid-template-columns:1fr 1fr}
body.mod-lebar .b8b-tapis .b8b-soal-pilih .op{min-height:50px;padding:6px 12px}

/* =====================================================================================
   TELEFON (390 x 844) dan TELEFON PENDEK (375 x 667)
   ===================================================================================== */
body.mod-telefon .b2-j-filem .b2-kad-isi,body.mod-telefon .b2-j-tapis .b2-kad-isi{font-size:1rem;line-height:1.25}
body.mod-telefon .b8b-soal-teks{display:block}
/* helaian bawah tetap: bisik di dalamnya supaya maklum balas sentiasa kelihatan */
body.mod-telefon .b8b-sisi{position:fixed;left:0;right:0;bottom:0;z-index:20;max-width:560px;max-height:72vh;margin:0 auto;display:grid;gap:7px;overflow-y:auto;overscroll-behavior:contain;
  padding:8px 12px max(10px,env(safe-area-inset-bottom));border-radius:20px 20px 0 0;background:rgba(255,253,246,.98);box-shadow:0 -6px 18px rgba(27,42,92,.2),inset 0 3px 0 #fff}
body.mod-telefon .b8b-sisi::before{content:"";justify-self:center;width:42px;height:5px;border-radius:3px;background:#D6DCEB}
body.mod-telefon .b8b-sisi .bisik{min-height:2.7em;padding:6px 10px;font-size:.875rem;line-height:1.32}
/* filem */
body.mod-telefon .b8b-bilik{height:98px;transition:height .55s ease}
body.mod-telefon .b8b-filem.menayang .b8b-bilik{height:200px}
body.mod-telefon .b8b-filem.menayang .b8b-skrin-ikon{width:70px;height:70px}
body.mod-telefon .b8b-filem.menayang .b8b-skrin-kap{font-size:1rem;-webkit-line-clamp:5}
body.mod-telefon .b8b-filem.menayang .b8b-projektor{width:70px}
/* satu jalur menegak berterusan: latar sproket pada bekas, baris tanpa latar */
body.mod-telefon .b8b-jalur{gap:8px;padding:10px 22px;border-radius:14px;box-shadow:var(--bayang);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16'%3E%3Crect x='2' y='4' width='6' height='8' rx='1.8' fill='%23F1E7CF'/%3E%3C/svg%3E") 6px 2px/10px 16px repeat-y,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16'%3E%3Crect x='2' y='4' width='6' height='8' rx='1.8' fill='%23F1E7CF'/%3E%3C/svg%3E") calc(100% - 6px) 2px/10px 16px repeat-y,#1B2A5C}
body.mod-telefon .b8b-jalur-baris{grid-template-columns:minmax(0,1fr);gap:8px;background:none}
body.mod-telefon .b8b-slot-tetingkap{grid-template-columns:42px minmax(0,1fr);column-gap:10px;min-height:78px;padding:7px 10px 7px 32px}
body.mod-telefon .b8b-slot-no{top:50%;margin-top:-10px}
body.mod-telefon .b8b-kepingan{width:min(250px,68vw)}
body.mod-telefon .b8b-skrin-reel{display:none}
body.mod-telefon .b8b-skrin-judul small{font-size:.875rem;line-height:1.2}
body.mod-telefon .b8b-filem.menayang .b8b-skrin-reel{display:block}
/* cip tarikh: satu baris yang ditatal mendatar supaya helaian bawah rendah dan jalur kelihatan */
body.mod-telefon .b8b-dulang-tarikh{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;padding:4px 2px 8px}
body.mod-telefon .b8b-cip-tarikh{flex:none;scroll-snap-align:start}
/* tapis */
body.mod-telefon .b8b-tapis-meja{padding-top:6px}
body.mod-telefon .b8b-corong-baris{gap:8px}
body.mod-telefon .b8b-corong-badan{width:94%;padding:6px 5px}
body.mod-telefon .b8b-corong-muncung{width:94%}
body.mod-telefon .b8b-corong-mulut{padding-left:8%;padding-right:8%}
body.mod-telefon .b8b-slot-plat{padding:6px 6px 6px 9px;gap:4px}
body.mod-telefon .b8b-slot-plat .b8b-plat-lubang{display:none}
body.mod-telefon .b8b-rak{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:min(236px,64vw);gap:7px;overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;padding:4px 2px 6px}
body.mod-telefon .b8b-rak .b8b-plat{scroll-snap-align:start}
body.mod-telefon .b8b-barisan-isi{flex-wrap:nowrap;overflow-x:auto;padding:2px 2px 6px}
body.mod-telefon .b8b-barisan-item{flex:none}
body.mod-telefon .b8b-pemohon{padding:7px 9px}
/* semasa pemohon melalui corong: kad diringkaskan kepada nama supaya corong kelihatan di atas helaian */
body.mod-telefon .b8b-tapis.menguji .b8b-pemohon{grid-template-columns:32px minmax(0,1fr);align-items:center;padding:5px 9px}
body.mod-telefon .b8b-tapis.menguji .b8b-pemohon-avatar .b8b-orang-svg{width:32px;height:32px}
body.mod-telefon .b8b-tapis.menguji .b8b-pemohon-profil,body.mod-telefon .b8b-tapis.menguji .b8b-pemohon-mohon{display:none}
@media (max-height:700px){
  body.mod-telefon .b8b-sisi{gap:6px;padding-top:6px}
  body.mod-telefon .b8b-sisi .bisik{min-height:2.5em;padding:5px 10px}
  body.mod-telefon .b8b-bilik{height:88px}
  body.mod-telefon .b8b-filem.menayang .b8b-bilik{height:176px}
  body.mod-telefon .b8b-skrin-ikon{width:44px;height:44px}
  body.mod-telefon .b8b-slot-tetingkap{min-height:64px;padding-top:5px;padding-bottom:5px}
  body.mod-telefon .b8b-slot-ikon{width:36px;height:36px}
  body.mod-telefon .b8b-kep-tetingkap{min-height:54px}
  body.mod-telefon .b8b-slot-plat{min-height:44px}
  body.mod-telefon .b8b-pemohon-avatar .b8b-orang-svg{width:38px;height:38px}
  body.mod-telefon .b8b-pemohon{grid-template-columns:38px minmax(0,1fr)}
  body.mod-telefon .b8b-soal-pilih .op{min-height:44px;padding:6px 12px}
  body.mod-telefon .b8b-ramal{min-height:46px}
}
@media (max-width:370px){
  body.mod-telefon .b8b-corong-nama{font-size:.875rem}
}
@media (prefers-reduced-motion:reduce){
  .b8b-slot.seterus .b8b-slot-tetingkap{animation:none;box-shadow:inset 0 0 0 3px #FFC933,0 0 0 4px rgba(255,201,51,.4)}
  .b8b-slot-plat.akan-tukar{animation:none;box-shadow:0 3px 0 rgba(27,42,92,.16),inset 4px 0 0 var(--w),0 0 0 4px rgba(255,201,51,.7)}
  .b8b-bilik.hidup .b8b-sinar,.b8b-bilik.hidup .b8b-skrin-kelip{animation:none;opacity:1}
  .b8b-filem.menayang .b8b-gegelung,.b8b-bilik.undur .b8b-gegelung{animation:none}
  .b8b-slot.snap .b8b-slot-tetingkap,.b8b-slot-tarikh.dicop,.b8b-slot-plat.masuk,.b8b-keriting,.b8b-notis-kini,.b8b-hasil,.b8b-token.muncul,.b8b-skrin-lapis{animation:none}
  .b8b-slot-tarikh.isi{transform:rotate(-2deg)}
  .b8b-notis-kini{transform:rotate(5deg)}
}