/* ===== Babak · gaya pakej enjin Bab 8, kumpulan 8d (js/pakej-bab-08-8d.js): jentera, suara. Awalan kelas dan keyframes b8d-.
   Susun atur diskop dengan .b2-j-<jenis> / .b2-p-<jenis>, body.mod-lebar (pentas 1280 x 720) dan body.mod-telefon
   (390 x 844; telefon pendek @media (max-height:700px)). Keadaan akhir animasi ditetapkan untuk prefers-reduced-motion. ===== */

/* ---------- Kongsi ---------- */
.b8d-goncang{animation:goncang .4s}
.b2-j-jentera .b2-kad-no,.b2-j-suara .b2-kad-no{font-size:.875rem;letter-spacing:.04em}
.b2-j-jentera .b2-kad-isi{font-size:1.0625rem}
.b2-j-suara .b2-cip-tahun{height:26px;font-size:.875rem}
.b2-j-jentera .b2-rujuk-btn,.b2-j-suara .b2-rujuk-btn{font-size:.875rem;min-height:40px}
.b2-j-jentera .b2-rumus-tokoh li,.b2-j-suara .b2-rumus-tokoh li{font-size:.875rem;line-height:1.35;align-content:start}
.b2-j-jentera .b2-rumus-label,.b2-j-suara .b2-rumus-label{font-size:.875rem}
.b2-rumus-tokoh li.b8d-rumus-penuh{grid-column:1/-1}
.b8d-label-kecil{font-size:.75rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}

/* =====================================================================================
   3.7 JENTERA PENTADBIRAN
   ===================================================================================== */
.b8d-jentera{display:grid;gap:10px;min-width:0}
/* panel mesin di dinding: plat logam cerah dengan bolt di sudut */
.b8d-panel{position:relative;min-width:0;padding:8px;border-radius:22px;background:linear-gradient(#F6F8FD,#E8EDF8);box-shadow:var(--bayang),inset 0 0 0 2px #D3DBEE}
.b8d-panel::before{content:"";position:absolute;inset:7px;border-radius:16px;pointer-events:none;
  background:radial-gradient(circle at 8px 8px,#AEB9D8 0 3.5px,transparent 4.5px),radial-gradient(circle at calc(100% - 8px) 8px,#AEB9D8 0 3.5px,transparent 4.5px),
    radial-gradient(circle at 8px calc(100% - 8px),#AEB9D8 0 3.5px,transparent 4.5px),radial-gradient(circle at calc(100% - 8px) calc(100% - 8px),#AEB9D8 0 3.5px,transparent 4.5px)}
.b8d-mesin{position:relative;width:100%;min-height:200px}
.b8d-mesin-svg{position:absolute;left:0;top:0;display:block;overflow:visible;pointer-events:none}
.b8d-rel{fill:#DCE3F1;stroke:#C8D1E5;stroke-width:2}
.b8d-tali{fill:none;stroke:#6A7697;stroke-width:2;stroke-linecap:round}
.b8d-tali-cincin{fill:#FFFDF6;stroke:#6A7697;stroke-width:1.6}
.b8d-soket-bayang{fill:rgba(27,42,92,.05)}
.b8d-soket-garis{fill:rgba(255,255,255,.6);stroke:#9AA7CF;stroke-width:2.4;stroke-dasharray:7 6;transition:stroke .25s ease,fill .25s ease}
.b8d-paksi{fill:#C5CFE3;stroke:#8C97AE;stroke-width:2}
.b8d-jentera.ada-pilih .b8d-soket-garis{stroke:var(--emas-d);fill:rgba(255,241,191,.7)}
.b8d-gear-bayang{fill:rgba(27,42,92,.15)}
.b8d-g-lubang{fill:#EDF1F9}
.b8d-hab{fill:#FFFDF6;stroke:#6A7697;stroke-width:2}
.b8d-cincin-dibantu{fill:none;stroke:#C9323F;stroke-width:3;stroke-dasharray:7 5}
.b8d-kilau{fill:none;stroke:#FFC933;stroke-width:6;opacity:0;animation:b8d-kilau 1.2s ease-out}
@keyframes b8d-kilau{0%{opacity:0;stroke-width:16}30%{opacity:.95}100%{opacity:0;stroke-width:4}}
.b8d-tiang{fill:#8C97AE}
.b8d-tiang-bola{fill:#FFC933;stroke:#D98A12;stroke-width:2}
.b8d-tiang-kaki{fill:#6B7690}
/* tag teks gear */
.b8d-tag{position:absolute;z-index:2;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:5px 10px 5px 15px;border-radius:12px;
  background:#FFFDF6;color:var(--ink);font-size:.875rem;font-weight:800;line-height:1.22;overflow:hidden;cursor:pointer;
  box-shadow:0 3px 0 rgba(27,42,92,.16),inset 0 0 0 2px #E4D8BC;transition:background-color .25s ease,box-shadow .25s ease,color .25s ease;-webkit-tap-highlight-color:transparent}
.b8d-tag::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--w,#C5D0EA)}
.b8d-tag-teks{display:block;min-width:0;overflow-wrap:break-word}
.b8d-tag.kosong{background:rgba(255,255,255,.62);color:#7D89B0;font-weight:700;box-shadow:inset 0 0 0 2px #C5D0EA;outline:2px dashed #AEB9D8;outline-offset:-6px}
.b8d-tag.kosong::before{background:#DDE3F0}
.b8d-jentera.ada-pilih .b8d-tag.kosong{background:rgba(255,241,191,.75);color:#8A4B00;outline-color:var(--emas-d)}
.b8d-tag-menteri{display:inline;padding:1px 7px;border-radius:9px;background:#EEF2FB;color:#7D89B0;font-size:.875rem;font-weight:900;line-height:inherit;box-shadow:inset 0 0 0 2px #D5DDF0;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.b8d-tag-menteri.ada{background:#FFF1BF;color:#6E4200;box-shadow:inset 0 0 0 2px var(--emas)}
.b8d-tag.baru{animation:b8d-tag-masuk .55s ease-out}
@keyframes b8d-tag-masuk{0%{transform:translateY(-6px);box-shadow:0 3px 0 rgba(27,42,92,.16),inset 0 0 0 3px var(--emas)}60%{transform:translateY(1px)}100%{transform:none}}
.b8d-tag.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 3px 0 var(--merah-d),inset 0 0 0 3px #E0555D}
.b8d-tag.kilat{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 3px 0 #1E9E63,inset 0 0 0 3px var(--hijau)}
.b8d-tag.dibantu{outline:2px dashed #C9323F;outline-offset:2px}
.b8d-tag.b8d-goncang{animation:goncang .4s}
/* butang soket (kawasan sentuh bulat di atas gear) */
.b8d-soket{position:absolute;z-index:3;display:block;margin:0;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.b8d-soket:focus-visible{outline:3px solid var(--fokus);outline-offset:2px}
.b8d-soket.kilat{box-shadow:0 0 0 5px var(--hijau),0 0 0 9px rgba(26,154,92,.25)}
/* label pemacu dan panji hasil */
.b8d-label-pemacu{position:absolute;z-index:2;box-sizing:border-box;display:grid;gap:2px;align-content:center;padding:7px 12px;border-radius:12px;background:#24367A;color:#fff;
  font-size:.875rem;font-weight:900;line-height:1.22;box-shadow:0 3px 0 #16235A}
.b8d-label-pemacu .b8d-label-kecil{color:#FFD96B}
.b8d-panji{position:absolute;z-index:4;box-sizing:border-box;display:grid;gap:1px;align-content:center;padding:6px 24px 7px 12px;background:#FFC933;color:#1B2A5C;
  font-size:.875rem;font-weight:900;line-height:1.2;clip-path:polygon(0 0,100% 0,calc(100% - 14px) 50%,100% 100%,0 100%);transform-origin:0 50%;transition:background-color .6s ease,opacity .6s ease}
.b8d-panji .b8d-label-kecil{color:#8A4B00}
.b8d-jentera:not(.bergerak) .b8d-panji{background:#FFE08A;opacity:.9}
.b8d-panji.naik{background:#FFC933;animation:b8d-kibar 1.4s ease-in-out 3}
@keyframes b8d-kibar{0%,100%{transform:none}50%{transform:skewY(-2.5deg)}}
.b8d-ukur{visibility:hidden!important;left:0!important;top:0!important;height:auto!important;min-height:0!important;pointer-events:none}
/* rak gear */
.b8d-sisi{display:grid;gap:7px;min-width:0}
.b8d-rak-kepala{display:flex;align-items:center;gap:10px;min-width:0}
.b8d-rak-kepala[hidden]{display:none}
.b8d-rak-label{font-size:.875rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.b8d-baki{font-size:.875rem;font-weight:800;color:var(--ink2)}
.b8d-anak-panah-baris{display:none;gap:6px;margin-left:auto}
.b8d-anak-panah{width:44px;height:44px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:var(--lip),inset 0 0 0 2px var(--garis)}
.b8d-anak-panah:disabled{opacity:.35;cursor:default}
.b8d-anak-panah .ikon{width:22px;height:22px;stroke-width:2.6}
.b8d-rak{display:grid;grid-auto-flow:column;grid-auto-columns:min(236px,68vw);gap:8px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;padding:4px 2px 8px;min-width:0}
.b8d-rak[hidden]{display:none}
.b8d-rak.ada-kanan{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
.b8d-rak.ada-kiri{-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px);mask-image:linear-gradient(90deg,transparent,#000 34px)}
.b8d-rak.ada-kiri.ada-kanan{-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent)}
.b8d-kad{position:relative;display:flex;align-items:center;gap:9px;min-width:0;min-height:66px;padding:8px 12px 8px 8px;border-radius:16px;background:#FFFDF6;text-align:left;color:var(--ink);
  font-size:.875rem;font-weight:800;line-height:1.25;box-shadow:0 4px 0 rgba(27,42,92,.2),inset 0 0 0 2px #E4D8BC;scroll-snap-align:start;user-select:none;-webkit-user-select:none;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,opacity .5s ease}
.b8d-kad .b8d-ikon-gear{flex:none;width:42px;height:42px;overflow:visible}
.b8d-kad-teks{display:grid;gap:2px;min-width:0;overflow-wrap:break-word}
.b8d-kad-teks b{font-weight:900}
.b8d-kad-teks small{font-size:.875rem;font-weight:700;color:var(--ink2);line-height:1.25}
.b8d-kad:active{transform:translateY(2px)}
.b8d-kad.pilih{transform:translateY(-4px);background:#FFF6D8;box-shadow:0 8px 0 var(--emas-d),inset 0 0 0 3px var(--emas)}
.b8d-kad.pilih .b8d-ikon-gear{animation:b8d-pilih-putar 1.6s ease-out}
@keyframes b8d-pilih-putar{from{transform:rotate(-90deg)}to{transform:none}}
.b8d-kad.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 4px 0 var(--merah-d),inset 0 0 0 3px #E0555D}
.b8d-kad.salah .b8d-kad-teks small{color:var(--salah-teks)}
.b8d-kad.kilat{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 4px 0 #1E9E63,inset 0 0 0 3px var(--hijau)}
.b8d-kad.terbang-keluar{visibility:hidden}
.b8d-kad.keluar{opacity:0;transform:translateY(14px) scale(.94);pointer-events:none}
.b8d-kad.b8d-goncang{animation:goncang .4s}
/* klon gear terbang */
.b8d-terbang-gear{position:absolute;z-index:40;margin:0;pointer-events:none;will-change:left,top,transform}
.b8d-terbang-gear svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 6px rgba(27,42,92,.25))}
.b8d-terbang-gear.salah .b8d-g-badan{fill:#F94F55;stroke:#C9323F}
.b8d-terbang-gear.salah .b8d-g-cincin{stroke:#FFB3B6}
/* butang Pusing dan soalan akhir */
.b8d-pusing-btn{justify-self:center;min-width:220px}
.b8d-pusing-btn[hidden]{display:none}
.b8d-pusing-btn .ikon{width:26px;height:26px}
.b8d-soal-panel{display:grid;gap:8px}
.b8d-soal-panel[hidden]{display:none}
.b8d-soal-teks{display:none;font-size:1rem;font-weight:900;line-height:1.3;color:var(--ink)}
.b8d-soal-pilih{grid-template-columns:minmax(0,1fr);gap:8px}
.b8d-op{min-height:50px;font-size:.9375rem}

/* =====================================================================================
   3.8 SUARA RAKYAT (jalur, tanpa watak)
   ===================================================================================== */
.b8d-lampu-kaca{fill:#EEF1F7;stroke:#B9C3D6;stroke-width:1.5;transition:fill .5s ease,stroke .5s ease}
.b8d-lampu.nyala .b8d-lampu-kaca{fill:#FFD96B;stroke:#E8971A}
.b8d-lampu-cahaya{opacity:0;transition:opacity .5s ease}
.b8d-lampu.nyala .b8d-lampu-cahaya{opacity:1}
.b8d-lampu.padam-merah .b8d-lampu-kaca{fill:#F94F55;stroke:#C9323F;transition:none}
.b8d-suara-pilih.j-tahun{grid-template-columns:minmax(0,1fr)}
.b8d-suara-taip{grid-column:1 / -1;display:flex;gap:10px;align-items:stretch}
.b8d-suara-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)}
.b8d-suara-tahun:focus{outline:none;border-color:var(--fokus);box-shadow:0 0 0 3px rgba(11,87,208,.18)}
.b8d-suara-tahun.salah{border-color:#E0555D;background:var(--salah-bg);color:var(--salah-teks);animation:goncang .4s}
.b8d-suara-tahun.betul,.b8d-suara-tahun.kilat{border-color:var(--hijau);background:var(--betul-bg);color:var(--betul-teks)}
.b8d-suara-semak{flex:none;min-width:112px}
.b8d-rumus-suara{display:grid;gap:10px}
.b8d-papan-akhir{display:grid;gap:3px;padding:10px 14px;border-radius:14px;background:#FFF6E0;text-align:center;box-shadow:inset 0 0 0 3px #B8743C}
.b8d-papan-akhir b{font-size:1.0625rem;font-weight:900;line-height:1.25;color:var(--ink)}
.b8d-papan-akhir span{font-size:.9375rem;font-weight:700;line-height:1.4;color:var(--ink2)}

/* =====================================================================================
   MOD LEBAR (pentas 1280 x 720; .main-badan: left 300, width 720)
   ===================================================================================== */
body.mod-lebar .b2-main.b2-j-jentera .main-badan{left:300px;width:720px;top:84px;bottom:10px;display:flex;flex-direction:column;align-content:stretch;overflow:hidden}
body.mod-lebar .b2-p-jentera{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
body.mod-lebar .b8d-jentera{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:8px}
body.mod-lebar .b8d-jentera > .b2-atas{flex:none;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:stretch;gap:10px}
body.mod-lebar .b8d-jentera > .b2-atas > .bisik{min-height:0;padding:8px 12px;font-size:.875rem;line-height:1.32}
body.mod-lebar .b2-j-jentera .b2-kad{padding:9px 18px 10px}
body.mod-lebar .b2-j-jentera .b2-kad-isi{font-size:1rem;line-height:1.25}
/* mesin terlalu tinggi untuk panel (contoh soalan panjang pada kad atas): tag 13 px */
body.mod-lebar .b8d-jentera.rapat .b8d-tag{font-size:.8125rem;line-height:1.18;padding:4px 9px 4px 14px}
body.mod-lebar .b8d-jentera.rapat .b8d-tag-menteri{font-size:.8125rem}
body.mod-lebar .b8d-jentera.rapat .b8d-label-pemacu,body.mod-lebar .b8d-jentera.rapat .b8d-panji{font-size:.8125rem}
body.mod-lebar .b8d-panel{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
body.mod-lebar .b8d-mesin{flex:none;margin-block:auto}
body.mod-lebar .b8d-sisi{flex:none;padding:8px 10px;border-radius:18px;background:rgba(255,253,246,.95);box-shadow:var(--lip);gap:5px}
body.mod-lebar .b8d-rak-kepala.boleh-tatal .b8d-anak-panah-baris{display:flex}
body.mod-lebar .b8d-rak{grid-auto-columns:300px;padding:3px 2px 6px}
body.mod-lebar .b8d-kad{min-height:62px;padding-top:6px;padding-bottom:6px}
body.mod-lebar .b8d-kad .b8d-ikon-gear{width:38px;height:38px}
body.mod-lebar .b8d-anak-panah{width:36px;height:36px}
body.mod-lebar .b8d-jentera.mod-pusing .b8d-sisi{padding:12px}
body.mod-lebar .b8d-jentera.mod-soal .b8d-soal-pilih{grid-template-columns:1fr 1fr}
body.mod-lebar .b8d-jentera.mod-soal .b8d-soal-pilih .op{min-height:52px;padding:6px 12px;font-size:.9375rem}
body.mod-lebar .b2-p-jentera > .b2-rumus{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
body.mod-lebar .b2-p-jentera > .b2-rumus > *{flex:none}
body.mod-lebar .b2-p-jentera > .b2-rumus > .b2-rumus-tokoh{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
/* suara: adegan penuh; kad soalan di lajur kanan */
body.mod-lebar .b2-main.b2-j-suara .main-badan{left:796px;width:456px;top:84px;bottom:20px;display:flex;flex-direction:column;align-content:stretch}
body.mod-lebar .b2-p-suara{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
body.mod-lebar .b2-p-suara .b2-kad-isi{font-size:1.3125rem}
body.mod-lebar .b2-p-suara .b2-bawah.b8d-ada-rumus{min-height:0;flex:1 1 auto;display:flex;flex-direction:column}
body.mod-lebar .b2-p-suara .b2-rumus{flex:0 1 auto;display:flex;flex-direction:column;min-height:0}
body.mod-lebar .b2-p-suara .b2-rumus > .b8d-rumus-suara{min-height:0;flex:1 1 auto;overflow-y:auto;padding-right:4px}
body.mod-lebar .b2-p-suara .b2-rumus > .btn{flex:none}
body.mod-lebar .b2-p-suara .b2-rumus-tokoh{grid-template-columns:1fr}

/* =====================================================================================
   TELEFON (390 x 844) dan TELEFON PENDEK (375 x 667)
   ===================================================================================== */
body.mod-telefon .b2-j-jentera .b2-kad-isi{font-size:1rem;line-height:1.25}
body.mod-telefon .b8d-panel{padding:6px}
body.mod-telefon .b8d-panel::before{inset:5px}
body.mod-telefon .b8d-soal-teks{display:block}
/* rak = helaian bawah yang tetap; bisik di dalamnya supaya maklum balas sentiasa kelihatan */
body.mod-telefon .b8d-sisi{position:fixed;left:0;right:0;bottom:0;z-index:20;max-width:560px;margin:0 auto;display:grid;gap:7px;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 .b8d-sisi::before{content:"";justify-self:center;width:42px;height:5px;border-radius:3px;background:#D6DCEB}
body.mod-telefon .b8d-sisi .bisik{min-height:2.7em;padding:6px 10px;font-size:.875rem;line-height:1.32}
body.mod-telefon .b8d-jentera.mod-pusing .b8d-sisi{padding-bottom:max(14px,env(safe-area-inset-bottom))}
body.mod-telefon .b8d-jentera.mod-soal .b8d-sisi{position:static;max-width:none;margin:0;padding:12px;border-radius:20px;box-shadow:var(--bayang)}
body.mod-telefon .b8d-jentera.mod-soal .b8d-sisi::before{display:none}
@media (max-height:700px){
  body.mod-telefon .b8d-sisi{gap:5px;padding-top:6px}
  body.mod-telefon .b8d-sisi .bisik{min-height:2.5em;padding:5px 10px}
  body.mod-telefon .b8d-kad{min-height:58px;padding-top:6px;padding-bottom:6px}
  body.mod-telefon .b8d-kad .b8d-ikon-gear{width:36px;height:36px}
  body.mod-telefon .main.b2-main.b2-j-suara .latar-babak{height:250px}
  body.mod-telefon .main.b2-main.b2-j-suara .main-badan{margin-top:194px}
}
@media (max-width:370px){
  body.mod-telefon .b8d-rak{grid-auto-columns:min(226px,70vw)}
}
@media (prefers-reduced-motion:reduce){
  .b8d-kilau,.b8d-panji.naik,.b8d-tag.baru,.b8d-kad.pilih .b8d-ikon-gear{animation:none}
  .b8d-kad,.b8d-tag,.b8d-soket-garis,.b8d-panji,.b8d-lampu-kaca,.b8d-lampu-cahaya{transition:none}
}