/* ===== Babak · gaya pakej enjin Bab 1 (versi baharu), kumpulan 1a (js/pakej-bab-01-1a.js): tiang, telaga, mahkota.
   Awalan b1a- bagi kelas, keyframes dan pemboleh ubah CSS. 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; teks telefon ≥ 14 px; sasaran tekan ≥ 44 px. Keadaan akhir untuk
   prefers-reduced-motion di hujung fail. ===== */

/* ---------- Bersama ---------- */
.b1a-goncang{animation:goncang .4s}
.b1a-klon-seret{position:absolute!important;z-index:40;margin:0!important;pointer-events:none;transition:none!important;animation:none!important;opacity:.95}
.b1a-terbang{position:absolute;z-index:42;margin:0;pointer-events:none;transition:none!important}
.b1a-terbang svg{display:block;width:100%;height:100%;overflow:visible}
.b2-main .b1a-tiang[data-sibuk],.b2-main .b1a-telaga[data-sibuk],.b2-main .b1a-mahkota[data-sibuk]{cursor:progress}
.b2-j-tiang .b2-kad-no,.b2-j-telaga .b2-kad-no,.b2-j-mahkota .b2-kad-no{font-size:.875rem;letter-spacing:.04em}
.b2-j-tiang .b2-kad-isi,.b2-j-telaga .b2-kad-isi,.b2-j-mahkota .b2-kad-isi{font-size:1.0625rem;overflow-wrap:break-word}
.b2-j-tiang .b2-rujuk-btn,.b2-j-telaga .b2-rujuk-btn,.b2-j-mahkota .b2-rujuk-btn{font-size:.875rem;min-height:44px}
.b2-j-tiang .b2-rumus-label,.b2-j-telaga .b2-rumus-label,.b2-j-mahkota .b2-rumus-label{font-size:.875rem}
.b2-j-tiang .b2-rumus-tokoh li,.b2-j-telaga .b2-rumus-tokoh li,.b2-j-mahkota .b2-rumus-tokoh li{font-size:.875rem;line-height:1.35;align-content:start}
.b2-j-tiang .op,.b2-j-telaga .op,.b2-j-mahkota .op{min-height:50px;font-size:.9375rem;overflow-wrap:break-word}
.b1a-tiang,.b1a-telaga,.b1a-mahkota{display:grid;gap:10px;min-width:0}
.b1a-op-teks{min-width:0;overflow-wrap:break-word}
/* kunci baca: pilihan pudar dan tidak boleh ditekan selama 650 ms selepas kad baharu, kemudian muncul perlahan */
.b1a-kunci-baca > *{transition:opacity .5s ease,transform .08s ease,box-shadow .12s ease,background-color .15s ease}
.b1a-kunci-baca.b1a-baca > *{opacity:.42}
.b1a-ul-lapis.b1a-kunci-baca > *{transition:opacity .5s ease}
/* adegan: bingkai (tinggi boleh dikecilkan pada skrin lebar) + kanvas berbucu bulat dengan cincin putih */
.b1a-bingkai{position:relative;min-width:0;transition:height .45s ease}
.b1a-adegan{position:relative;min-width:0;overflow:hidden;border-radius:20px;background:#BFE6F7;box-shadow:var(--bayang);transform-origin:50% 0;transition:transform .45s ease}
.b1a-adegan::after{content:"";position:absolute;inset:0;z-index:8;border-radius:inherit;box-shadow:inset 0 0 0 3px rgba(255,255,255,.92);pointer-events:none}
.b1a-tg-svg,.b1a-ul-svg,.b1a-mk-svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
/* kad soalan akhir (tema ikut enjin) */
.b1a-soal-tempat{display:grid;min-width:0}
.b1a-soal-tempat:empty{display:none}
.b1a-soal{display:grid;gap:8px;min-width:0;padding:12px 14px 14px;border-radius:18px;background:#FFFDF7;box-shadow:var(--lip),inset 0 0 0 2px #EADFC4,inset 5px 0 0 #7B57E0}
.b1a-soal.masuk{animation:lompat .35s ease-out both}
.b1a-soal.betul{box-shadow:var(--lip),inset 0 0 0 2px #9FE0BF,inset 5px 0 0 #1A9A5C}
.b1a-soal.b1a-gaya-batu{background:#FBF8F1;box-shadow:0 5px 0 #9C9586,inset 0 0 0 2px #D6CFBF,inset 6px 0 0 #9C9586}
.b1a-soal.b1a-gaya-air{background:#F3FAFF;box-shadow:0 5px 0 #8DB7E0,inset 0 0 0 2px #CFE5F7,inset 6px 0 0 #3D8BF2}
.b1a-soal.b1a-gaya-diraja{background:#FFFBEF;box-shadow:0 5px 0 #E8971A,inset 0 0 0 2px #F3D58C,inset 6px 0 0 #C9323F}
.b1a-soal.betul.b1a-gaya-batu,.b1a-soal.betul.b1a-gaya-air,.b1a-soal.betul.b1a-gaya-diraja{box-shadow:0 5px 0 #1E9E63,inset 0 0 0 2px #9FE0BF,inset 6px 0 0 #1A9A5C}
.b1a-soal-label{font-size:.875rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#5537A8}
.b1a-gaya-batu .b1a-soal-label{color:#6E6656}
.b1a-gaya-air .b1a-soal-label{color:#2563C4}
.b1a-gaya-diraja .b1a-soal-label{color:#A3222E}
.b1a-soal-s{font-size:1.0625rem;font-weight:900;line-height:1.3;color:var(--ink);overflow-wrap:break-word}
.b1a-soal-pilih{grid-template-columns:minmax(0,1fr);gap:8px}
/* helaian (telefon: tetap di bawah skrin; lebar: aliran biasa) */
.b1a-helai{display:grid;gap:10px;min-width:0}
/* Rumusan */
.b1a-rumus-lanjut{display:grid;gap:10px;min-width:0}
.b1a-rumus-kumpulan{display:grid;gap:8px;min-width:0}
.b1a-rumus-blok{display:grid;gap:4px;min-width:0;padding:8px 10px;border-radius:14px;background:#F3F6FD;box-shadow:inset 4px 0 0 var(--b1a-mk-w,#9C9586)}
.b1a-rumus-tajuk{display:flex;align-items:center;gap:8px;min-width:0;font-size:.9375rem;font-weight:900;line-height:1.2;color:var(--ink)}
.b1a-rumus-ikon{flex:none;display:grid;place-items:center;width:28px;height:28px}
.b1a-rumus-ikon svg{display:block;width:100%;height:100%}
.b1a-rumus-ket{font-size:.875rem;font-weight:700;color:var(--ink2)}
.b1a-rumus-blok ul{display:grid;gap:3px}
.b1a-rumus-blok li{position:relative;padding-left:14px;font-size:.875rem;font-weight:700;line-height:1.32;color:var(--ink);overflow-wrap:break-word}
.b1a-rumus-blok li::before{content:"";position:absolute;left:2px;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--b1a-mk-w,#9C9586)}
.b1a-rumus-cip{display:inline-block;margin-right:6px;padding:0 7px;border-radius:8px;background:#DDF3EE;color:#0C776B;font-style:normal;font-weight:900}
.b1a-rumus-langkah{display:grid;gap:6px;min-width:0}
.b1a-rumus-langkah li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:start;padding:7px 10px;border-radius:12px;background:#F3F6FD}
.b1a-rumus-no{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-size:.875rem;font-weight:900}
.b1a-rumus-langkah-t{display:grid;gap:1px;min-width:0;font-size:.875rem;line-height:1.32}
.b1a-rumus-langkah-t b{color:var(--ink)}
.b1a-rumus-langkah-t span{color:var(--ink2);font-weight:700}
.b1a-rumus-rantai .b1a-rumus-no{background:#2563C4}
.b1a-rumus-akhir{padding:8px 12px;border-radius:12px;background:#FFF6E0;box-shadow:inset 0 0 0 2px #FFC933;font-size:.875rem;font-weight:700;line-height:1.4;color:var(--ink)}
.b1a-rumus-soal li b{color:var(--ink)}
@keyframes b1a-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.1);opacity:1}100%{transform:scale(1)}}
@keyframes b1a-turun{0%{transform:translateY(-6px)}55%{transform:translateY(1.5px)}100%{transform:none}}
@keyframes b1a-muncul{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes b1a-lukis{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* =====================================================================================
   1.1 TIANG · EMPAT TIANG
   ===================================================================================== */
.b1a-tg-adegan{background:#CDEBF7}
.b1a-tg-tiang{transition:filter .2s ease}
.b1a-tiang[data-fasa="kad"] .b1a-tg-tiang{cursor:pointer}
.b1a-tg-hantu{fill:rgba(255,255,255,.28);stroke:#8E8676;stroke-width:1.6;stroke-dasharray:5 4}
.b1a-tg-tiang.b1a-dekat .b1a-tg-hantu{fill:rgba(255,229,127,.55);stroke:#E8971A}
.b1a-tg-tiang.salah .b1a-tg-hantu{fill:rgba(249,79,85,.28);stroke:#C9323F}
.b1a-tg-drum-badan{fill:#DDD6C6;stroke:#1B2A5C;stroke-width:2}
.b1a-tg-drum.b1a-dibantu .b1a-tg-drum-badan{fill:#F4EEE6;stroke:#C9323F;stroke-dasharray:5 3}
.b1a-tg-drum.b1a-baru{animation:b1a-turun .45s ease-out}
.b1a-tg-kepala{transform-box:fill-box;transform-origin:50% 100%}
.b1a-tg-kepala.b1a-baru{animation:b1a-pop .45s ease-out .1s both}
.b1a-tg-panji{transform-box:fill-box;transform-origin:50% 100%;transform:scale(0);opacity:0}
.b1a-tg-panji.b1a-naik{animation:b1a-pop .5s ease-out both}
.b1a-tg-bumbung-teks{font-family:var(--f);font-size:14px;font-weight:900;fill:#1B2A5C;letter-spacing:.02em}
/* kad petunjuk: pembalut bergerak (.b1a-tg-kad) + rupa kad batu bersurat (.b1a-tg-kad-dalam) */
.b1a-tg-kad{position:absolute;z-index:4;display:block;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;transform-origin:50% 50%}
.b1a-tg-kad.b1a-diseret{opacity:.35}
.b1a-tg-kad-dalam{position:relative;display:grid;gap:4px;padding:8px 14px 10px;border-radius:16px;background:#FBF7EE;color:var(--ink);
  box-shadow:0 4px 0 #9C9586,0 10px 18px rgba(27,42,92,.22),inset 0 0 0 2px #CFC8B8,inset 0 5px 0 #E8E1D2}
.b1a-tg-kad-dalam::before{content:"";position:absolute;left:50%;top:-7px;width:16px;height:9px;margin-left:-8px;border-radius:5px 5px 0 0;background:#CFC8B8}
.b1a-tg-kad-dalam.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 4px 0 var(--merah-d),0 10px 18px rgba(27,42,92,.22),inset 0 0 0 3px #E0555D}
.b1a-tg-kad-kepala{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;min-width:0}
.b1a-tg-kad-no{font-size:.875rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:#7A7262}
.b1a-tg-kad-dalam.salah .b1a-tg-kad-no{color:var(--salah-teks)}
.b1a-tg-contoh{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:1px 10px 1px 4px;border-radius:999px;background:#DDF3EE;color:#0C776B;font-size:.875rem;font-weight:900;line-height:1.2}
.b1a-tg-contoh i{padding:0 8px;border-radius:999px;background:#12998A;color:#fff;font-style:normal;font-size:.875rem;font-weight:800}
.b1a-tg-kad-t{font-size:1rem;font-weight:900;line-height:1.28;overflow-wrap:break-word}
.b1a-tg-ukur{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none}
.b1a-tg-ukur .b1a-tg-kad{position:static;margin-bottom:4px}
.b1a-tg-terbang{filter:drop-shadow(0 6px 5px rgba(27,42,92,.28))}
/* butang tiang */
.b1a-tg-pilih{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0}
.b1a-tg-pilih .op:last-child:nth-child(odd){grid-column:1/-1}
.op.b1a-tg-op{position:relative;align-items:center;gap:9px;min-height:54px;padding:7px 10px 7px 7px;border-radius:16px}
.b1a-tg-op-ikon{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#F4EFE4;box-shadow:inset 0 0 0 2px #D6CFBF}
.b1a-tg-op-ikon svg{display:block;width:32px;height:32px}
.b1a-tg-op-teks{display:grid;gap:1px;min-width:0}
.b1a-tg-op-nama{font-size:.9375rem;font-weight:900;line-height:1.18;overflow-wrap:break-word}
.b1a-tg-op-ket{font-size:.875rem;font-weight:700;line-height:1.25;color:var(--ink2);overflow-wrap:break-word}
.op.b1a-tg-op.b1a-dekat:not([disabled]){box-shadow:var(--lip),inset 0 0 0 3px var(--emas)}
.op.b1a-tg-op.salah .b1a-tg-op-ket{color:var(--salah-teks)}
.op.b1a-tg-op.kilat .b1a-tg-op-ket,.op.b1a-tg-op.betul .b1a-tg-op-ket{color:var(--betul-teks)}
.op.b1a-tg-op.kilat .b1a-tg-op-ikon,.op.b1a-tg-op.betul .b1a-tg-op-ikon{background:#D3F3E1;box-shadow:inset 0 0 0 2px #4ED68C}
.op.b1a-tg-op.salah .b1a-tg-op-ikon{background:#FFD6D9;box-shadow:inset 0 0 0 2px #E0555D}
.b1a-tiang.b1a-fasa-soal .b1a-tg-pilih,.b1a-tiang[data-fasa="tamat"] .b1a-tg-pilih{display:none}

/* =====================================================================================
   1.2 TELAGA · mod upacara
   ===================================================================================== */
.b1a-ul-adegan{background:#D7EEF6}
.b1a-ul-lapis{position:absolute;inset:0;z-index:3}
.b1a-ul-arus{fill:none;stroke:#3D8BF2;stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.b1a-ul-titis{fill:none;stroke:#3D8BF2;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.9}
.b1a-ul-corong-air{fill:none;stroke:#3D8BF2;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.b1a-ul-setia-teks{font-family:var(--f);font-size:14px;font-weight:900;fill:#C2560F;letter-spacing:.06em}
/* objek = butang lutsinar di atas lukisan (≥ 56 px) */
.b1a-ul-obj{position:absolute;z-index:3;display:flex;align-items:flex-end;justify-content:center;padding:0 0 5px;border-radius:16px;background:transparent;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .2s ease,opacity .5s ease}
.b1a-ul-cincin{position:absolute;inset:3px;border-radius:14px;border:2.5px dashed rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(27,42,92,.18);transition:border-color .2s ease,box-shadow .2s ease,opacity .3s ease;pointer-events:none}
.b1a-latihan .b1a-ul-cincin{border-color:rgba(255,255,255,.6)}
/* sorotan tuding/fokus tidak menutup keadaan merah, kilat atau betul */
.b1a-ul-obj:hover:not([disabled]):not(.salah):not(.kilat):not(.betul) .b1a-ul-cincin,.b1a-ul-obj:focus-visible:not(.salah):not(.kilat):not(.betul) .b1a-ul-cincin{border-style:solid;border-color:#FFC933;box-shadow:0 0 0 3px rgba(255,201,51,.35)}
.b1a-ul-obj[disabled]{cursor:default}
.b1a-ul-obj.b1a-label-atas{align-items:flex-start;padding:10px 0 0}
.b1a-ul-label{position:relative;z-index:1;max-width:calc(100% + 8px);padding:3px 9px;border-radius:999px;background:#FFF6E0;color:var(--ink);font-size:.875rem;font-weight:900;line-height:1.2;white-space:nowrap;
  box-shadow:0 2px 0 rgba(27,42,92,.28),inset 0 0 0 2px #E8971A}
.b1a-ul-obj.salah{background:rgba(249,79,85,.2);animation:goncang .4s}
.b1a-ul-obj.salah .b1a-ul-cincin{border-style:solid;border-color:#F94F55;box-shadow:0 0 0 3px rgba(249,79,85,.35)}
.b1a-ul-obj.salah .b1a-ul-label{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 2px 0 var(--merah-d),inset 0 0 0 2px #E0555D}
.b1a-ul-obj.kilat{background:rgba(47,160,92,.18)}
.b1a-ul-obj.kilat .b1a-ul-cincin,.b1a-ul-obj.betul .b1a-ul-cincin{border-style:solid;border-color:#2FA05C;box-shadow:0 0 0 4px rgba(78,214,140,.45)}
.b1a-ul-obj.b1a-selesai .b1a-ul-cincin{opacity:0}
.b1a-ul-obj.b1a-selesai .b1a-ul-label{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 2px 0 #1E9E63,inset 0 0 0 2px #4ED68C}
/* jalur langkah */
.b1a-ul-jalur{display:grid;gap:6px;min-width:0;counter-reset:none}
.b1a-ul-slot{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:8px;min-height:40px;padding:6px 10px 6px 7px;border-radius:12px;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 2px #D6E4F2;transition:background-color .3s ease,box-shadow .3s ease}
.b1a-ul-slot-no{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#C9D7EA;color:#fff;font-size:.875rem;font-weight:900}
.b1a-ul-slot-t{min-width:0;font-size:.875rem;font-weight:800;line-height:1.28;color:#7D8FC0;overflow-wrap:break-word}
.b1a-ul-slot.b1a-aktif{background:#FFF8E1;box-shadow:inset 0 0 0 2px #FFC933}
.b1a-ul-slot.b1a-aktif .b1a-ul-slot-no{background:#E8971A}
.b1a-ul-slot.b1a-isi{background:#EAF5FF;box-shadow:inset 0 0 0 2px #9CC6EF;animation:b1a-muncul .4s ease-out}
.b1a-ul-slot.b1a-isi .b1a-ul-slot-no{background:#2563C4}
.b1a-ul-slot.b1a-isi .b1a-ul-slot-t{color:var(--ink)}
.b1a-ul-slot.b1a-dibantu{background:#FFF4F4;box-shadow:inset 0 0 0 2px #F3A6AB;outline:2px dashed #E0555D;outline-offset:-4px}
.b1a-ul-slot.b1a-dibantu .b1a-ul-slot-no{background:#C9323F}
.b1a-telaga.b1a-fasa-soal .b1a-ul-jalur,.b1a-telaga[data-fasa="tamat"] .b1a-ul-jalur{display:none}

/* =====================================================================================
   1.2 TELAGA · mod aliran
   ===================================================================================== */
.b1a-al-adegan{background:#B4E19A}
.b1a-al-bukit{position:relative;display:grid;gap:16px;min-width:0;padding:24px 10px 14px 0;--b1a-al-kw:66px}
.b1a-al-svg{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;display:block}
.b1a-al-arus{fill:none;stroke:#3D8BF2;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}
.b1a-al-baris{position:relative;z-index:1;display:grid;grid-template-columns:var(--b1a-al-kw) minmax(0,1fr);gap:12px;align-items:center;min-width:0}
.b1a-al-kolam{height:44px}
.b1a-al-plak{position:relative;display:grid;align-content:center;gap:2px;min-width:0;padding:7px 12px 8px;border-radius:12px;background:#FDF3DC;color:var(--ink);
  box-shadow:0 3px 0 #8A5426,inset 0 0 0 2px #B7793F;transition:box-shadow .3s ease,background-color .3s ease}
.b1a-al-plak::before{content:"";position:absolute;left:-7px;top:50%;width:8px;height:12px;margin-top:-6px;border-radius:3px 0 0 3px;background:#8A5426}
.b1a-al-plak.b1a-kosong{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:10px;background:rgba(253,243,220,.72);box-shadow:inset 0 0 0 2px rgba(138,84,38,.45);outline:2px dashed rgba(138,84,38,.5);outline-offset:-6px}
.b1a-al-plak.b1a-aktif{background:#FFF8E1;box-shadow:0 0 0 3px #FFC933,0 3px 0 #8A5426,inset 0 0 0 2px #E8971A;outline-color:#E8971A}
.b1a-al-tanya{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#1B2A5C;color:#FFE9A3;font-size:1.125rem;font-weight:900}
.b1a-al-plak.b1a-aktif .b1a-al-tanya{background:#E8971A;color:#fff}
.b1a-al-tanya-t{font-size:.875rem;font-weight:800;color:#8A5426}
.b1a-al-nama{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-width:0}
.b1a-al-nama b{font-size:.9375rem;font-weight:900;line-height:1.2;overflow-wrap:break-word}
.b1a-al-abad{display:inline-block;padding:0 8px;border-radius:999px;background:#DCEBFB;color:#2563C4;font-size:.875rem;font-weight:900;line-height:1.5}
.b1a-al-per-t{font-size:.875rem;font-weight:700;line-height:1.28;color:var(--ink2);overflow-wrap:break-word}
.b1a-al-per-t.b1a-belum{color:#B7793F;font-style:italic}
.b1a-al-per-t.b1a-dibantu{color:var(--salah-teks);text-decoration:underline dashed #E0555D;text-underline-offset:3px}
.b1a-al-plak.b1a-sumber{box-shadow:0 3px 0 #0C776B,inset 0 0 0 2px #12998A}
.b1a-al-plak.b1a-dibantu{background:#FFF4F4;box-shadow:0 3px 0 #C9323F,inset 0 0 0 2px #E0555D}
.b1a-al-plak.b1a-baru{animation:b1a-muncul .45s ease-out}
.b1a-al-plak.b1a-tulis .b1a-al-per-t{animation:b1a-muncul .5s ease-out}
.b1a-al-akhir{position:relative;z-index:2;display:flex;align-items:flex-start;gap:10px;margin:2px 10px 0 12px;padding:10px 14px 11px;border-radius:14px;background:#FFF6E0;color:var(--ink);
  box-shadow:0 4px 0 #E8971A,inset 0 0 0 2px #FFC933}
.b1a-al-akhir.b1a-apung{position:absolute;margin:0}
.b1a-al-akhir.masuk{animation:lompat .4s ease-out both}
.b1a-al-akhir-ikon{flex:none;width:30px;height:30px}
.b1a-al-akhir-ikon svg{display:block;width:100%;height:100%}
.b1a-al-akhir-teks{display:grid;gap:2px;min-width:0;font-size:.875rem;font-weight:700;line-height:1.35}
.b1a-al-akhir-teks b{font-size:.9375rem;font-weight:900}
/* jubin kerajaan dan cip peranan */
.b1a-al-pilih{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0}
.b1a-al-pilih[hidden],.b1a-al-peranan[hidden]{display:none}
.op.b1a-al-op{gap:8px;min-height:52px;padding:6px 10px 6px 6px;border-radius:16px;line-height:1.2}
.b1a-al-op-ikon{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#FFF1DE;box-shadow:inset 0 0 0 2px #F3C99E}
.b1a-al-op-ikon svg{display:block;width:28px;height:28px}
.b1a-al-peranan{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0}
.op.b1a-al-per{min-height:50px;padding:7px 12px;font-size:.9375rem;line-height:1.25}
.b1a-telaga.b1a-fasa-soal .b1a-al-pilih,.b1a-telaga.b1a-fasa-soal .b1a-al-peranan{display:none}

/* =====================================================================================
   1.3 MAHKOTA · ENAM CIRI
   ===================================================================================== */
.b1a-mk-adegan{background:#F6E4B9}
.b1a-mk-adegan.b1a-dekat::after{box-shadow:inset 0 0 0 4px #FFC933}
.b1a-mk-label-lapis{position:absolute;inset:0;z-index:3;pointer-events:none}
.b1a-mk-label{position:absolute;display:flex;align-items:center;padding:4px 9px;border-radius:10px;background:rgba(255,253,247,.94);color:var(--ink);font-size:.875rem;font-weight:900;line-height:1.15;
  box-shadow:0 2px 0 rgba(27,42,92,.18),inset 0 0 0 2px var(--b1a-mk-w,#9C9586),inset 5px 0 0 var(--b1a-mk-w,#9C9586);opacity:0;transition:opacity .4s ease;overflow-wrap:break-word}
.b1a-mk-label.b1a-kiri{justify-content:flex-end;text-align:right;box-shadow:0 2px 0 rgba(27,42,92,.18),inset 0 0 0 2px var(--b1a-mk-w,#9C9586),inset -5px 0 0 var(--b1a-mk-w,#9C9586)}
.b1a-mk-label.b1a-ada{opacity:1}
.b1a-mk-label.b1a-baru{animation:b1a-muncul .45s ease-out}
.b1a-mk-label.b1a-dibantu{outline:2px dashed #E0555D;outline-offset:1px}
/* legenda telefon (mod soket): nombor soket berwarna permata + nama */
.b1a-mk-label.b1a-legenda{opacity:1;justify-content:flex-start;gap:7px;padding:3px 8px 3px 5px;box-shadow:0 2px 0 rgba(27,42,92,.18),inset 0 0 0 2px var(--b1a-mk-w,#9C9586)}
.b1a-mk-label.b1a-legenda:not(.b1a-ada){background:rgba(255,253,247,.72);color:#6B6456;box-shadow:inset 0 0 0 2px rgba(27,42,92,.22)}
.b1a-mk-leg-no{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#1B2A5C;color:#FFE9A3;font-size:14px;font-weight:900;line-height:1}
.b1a-mk-label.b1a-ada .b1a-mk-leg-no{background:var(--b1a-mk-w,#9C9586);color:#fff;box-shadow:inset 0 0 0 2px #1B2A5C;text-shadow:0 1px 0 #1B2A5C,0 -1px 0 #1B2A5C,1px 0 0 #1B2A5C,-1px 0 0 #1B2A5C}
.b1a-mk-leg-nama{min-width:0;font-size:14px;line-height:1.1}
.b1a-mk-garis{fill:none;stroke:#C2560F;stroke-width:1.6;stroke-linejoin:round;opacity:.85}
.b1a-mk-garis.b1a-baru{stroke-dasharray:1;animation:b1a-lukis .5s ease-out both}
.b1a-mk-soket{transform-box:fill-box;transform-origin:50% 50%}
.b1a-mk-soket.b1a-baru{animation:b1a-pop .45s ease-out}
.b1a-mk-soket-no{font-family:var(--f);font-size:14px;font-weight:900;fill:#FFE9A3}
.b1a-mahkota.b1a-mod-mutiara[data-fasa="kad"] .b1a-mk-soket.b1a-isi{cursor:pointer}
.b1a-mk-soket.b1a-dekat ellipse:first-child{fill:#FFF3B0;stroke:#C2560F;stroke-width:2.4}
.b1a-mk-soket.kilat ellipse:first-child{fill:#9BE3BC;stroke:#1A9A5C;stroke-width:2.6}
.b1a-mk-mutiara{transform-box:fill-box;transform-origin:50% 0}
.b1a-mk-mutiara.b1a-baru{animation:b1a-turun .5s ease-out}
.b1a-mk-terbang{filter:drop-shadow(0 6px 5px rgba(27,42,92,.3))}
/* kad huraian */
.b1a-mk-kad{position:relative;display:grid;gap:3px;min-width:0;padding:8px 14px 10px;border-radius:16px;background:#FFFDF7;color:var(--ink);
  box-shadow:var(--lip),inset 0 0 0 2px #EADFC4,inset 6px 0 0 #C9323F}
.b1a-mk-kad[hidden]{display:none}
.b1a-mk-kad.masuk{animation:lompat .35s ease-out both}
.b1a-mk-kad.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 5px 0 var(--merah-d),inset 0 0 0 3px #E0555D;animation:goncang .4s}
.b1a-mk-kad.betul{background:var(--betul-bg);box-shadow:0 5px 0 #1E9E63,inset 0 0 0 2px #9FE0BF,inset 6px 0 0 #1A9A5C}
.b1a-mk-kad-kepala{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.b1a-mk-kad-label{font-size:.875rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:#A3222E}
.b1a-mk-kad-no{flex:none;padding:0 8px;border-radius:999px;background:#FDE7C8;color:#8A5426;font-size:.875rem;font-weight:900}
.b1a-mk-kad-t{font-size:1rem;font-weight:900;line-height:1.28;overflow-wrap:break-word}
/* dulang permata / butang cermin */
.b1a-mk-dulang{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px;min-width:0;padding:10px 8px 8px;border-radius:16px;
  background:#8A5426;box-shadow:inset 0 0 0 3px #6E3F1B,inset 0 0 0 7px #B7793F,inset 0 6px 14px rgba(0,0,0,.25)}
.b1a-mk-slot{display:grid;min-width:0}
.b1a-mk-batu{position:relative;display:grid;justify-items:center;align-content:center;gap:2px;min-width:0;min-height:62px;padding:6px 4px 6px;border-radius:14px;background:#FFF6E0;color:var(--ink);text-align:center;
  box-shadow:0 4px 0 rgba(0,0,0,.35),inset 0 0 0 2px #EADFC4;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  transition:opacity .5s ease,transform .12s ease,box-shadow .15s ease,background-color .2s ease}
.b1a-mk-cermin{touch-action:manipulation}
.b1a-mk-batu-seni{display:grid;place-items:center;width:32px;height:32px}
.b1a-mk-batu-seni svg{display:block;width:100%;height:100%;overflow:visible}
.b1a-mk-batu-nama{min-width:0;max-width:100%;font-size:.875rem;font-weight:900;line-height:1.15;overflow-wrap:break-word}
.b1a-mk-permata,.b1a-mk-cermin{box-shadow:0 4px 0 rgba(0,0,0,.35),inset 0 0 0 2px #EADFC4,inset 0 -4px 0 var(--b1a-mk-w)}
.b1a-mk-pengacau{background:#EFEDE8;color:#4D5B8C}
.b1a-mk-batu:active:not([disabled]){transform:translateY(2px)}
.b1a-mk-batu.b1a-dekat:not([disabled]):not(.salah):not(.kilat):not(.betul){background:#FFF1BF;box-shadow:0 4px 0 rgba(0,0,0,.35),inset 0 0 0 3px #FFC933}
.b1a-mk-batu.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}
.b1a-mk-batu.kilat,.b1a-mk-batu.betul{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 4px 0 #1E9E63,inset 0 0 0 3px var(--hijau),0 0 0 4px rgba(47,160,92,.35)}
.b1a-mk-batu.pudar{opacity:.45}
.b1a-mk-batu.b1a-pergi{opacity:.25}
.b1a-mk-batu.b1a-diseret{opacity:.35}
.b1a-mk-batu.b1a-masuk{animation:b1a-pop .5s ease-out}
.b1a-mk-dipasang{opacity:.62;background:#F1E6CF;box-shadow:inset 0 0 0 2px #D9C49A;cursor:default}
.b1a-mk-dipasang .b1a-mk-batu-seni{filter:grayscale(.35);opacity:.6}
.b1a-mk-tanda{font-size:.875rem;font-weight:900;color:#217F49}
.b1a-mk-kira{position:absolute;right:5px;top:4px;min-width:22px;padding:0 5px;border-radius:999px;background:#FFFDF7;color:#5537A8;font-size:.875rem;font-weight:900;line-height:1.4;box-shadow:inset 0 0 0 1.5px #C9B8F2}
.b1a-mk-kira:empty{display:none}
.b1a-mahkota.b1a-fasa-soal .b1a-mk-kad,.b1a-mahkota.b1a-fasa-soal .b1a-mk-dulang,.b1a-mahkota[data-fasa="tamat"] .b1a-mk-dulang{display:none}

/* =====================================================================================
   MOD LEBAR (pentas 1280 x 720; .main-badan: left 300, width 720)
   ===================================================================================== */
body.mod-lebar .b2-main.b2-j-tiang .main-badan,body.mod-lebar .b2-main.b2-j-telaga .main-badan,body.mod-lebar .b2-main.b2-j-mahkota .main-badan{left:300px;width:720px;top:88px;bottom:10px;
  display:flex;flex-direction:column;align-content:stretch;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
body.mod-lebar .b2-p-tiang,body.mod-lebar .b2-p-telaga,body.mod-lebar .b2-p-mahkota{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
body.mod-lebar .b1a-tiang,body.mod-lebar .b1a-telaga,body.mod-lebar .b1a-mahkota{flex:none;display:flex;flex-direction:column;gap:10px}
body.mod-lebar .b1a-tiang > *,body.mod-lebar .b1a-telaga > *,body.mod-lebar .b1a-mahkota > *{flex:none}
body.mod-lebar .b2-j-tiang .b2-kad,body.mod-lebar .b2-j-telaga .b2-kad,body.mod-lebar .b2-j-mahkota .b2-kad{padding:8px 18px 9px}
body.mod-lebar .b2-j-tiang .b2-kad-isi,body.mod-lebar .b2-j-telaga .b2-kad-isi,body.mod-lebar .b2-j-mahkota .b2-kad-isi{font-size:1.0625rem;line-height:1.25}
body.mod-lebar .b2-j-tiang .bisik,body.mod-lebar .b2-j-telaga .bisik,body.mod-lebar .b2-j-mahkota .bisik{min-height:48px;padding:7px 14px;font-size:.9375rem;line-height:1.32}
body.mod-lebar .b2-p-tiang > .b2-rumus,body.mod-lebar .b2-p-telaga > .b2-rumus,body.mod-lebar .b2-p-mahkota > .b2-rumus{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
body.mod-lebar .b2-p-tiang > .b2-rumus > *,body.mod-lebar .b2-p-telaga > .b2-rumus > *,body.mod-lebar .b2-p-mahkota > .b2-rumus > *{flex:none}
body.mod-lebar .b2-p-tiang > .b2-rumus > .b1a-rumus-lanjut,body.mod-lebar .b2-p-telaga > .b2-rumus > .b1a-rumus-lanjut,body.mod-lebar .b2-p-mahkota > .b2-rumus > .b1a-rumus-lanjut{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
body.mod-lebar .b1a-rumus-kumpulan{grid-template-columns:1fr 1fr}
body.mod-lebar .b1a-soal{padding:10px 14px 12px;gap:6px}
body.mod-lebar .b1a-soal-s{font-size:1rem}
body.mod-lebar .b1a-soal-pilih{grid-template-columns:1fr 1fr}
body.mod-lebar .b1a-soal-pilih .op{min-height:48px;padding:6px 12px}
body.mod-lebar .b1a-tg-adegan,body.mod-lebar .b1a-ul-adegan,body.mod-lebar .b1a-al-adegan,body.mod-lebar .b1a-mk-adegan{border-radius:22px}
/* tiang: butang tiang sebaris di bawah tiang masing-masing (lajur sama dengan adegan) */
body.mod-lebar .b1a-tg-pilih{grid-template-columns:repeat(var(--b1a-n,4),minmax(0,1fr));gap:10px}
body.mod-lebar .b1a-tg-pilih .op:last-child:nth-child(odd){grid-column:auto}
body.mod-lebar .b2-j-tiang .op.b1a-tg-op{flex-direction:column;justify-content:flex-start;align-items:center;gap:3px;min-height:58px;padding:8px 8px 9px;text-align:center}
body.mod-lebar .b2-j-tiang .op.b1a-tg-op .op-no{position:absolute;left:7px;top:7px;width:24px;height:24px;font-size:.8125rem}
body.mod-lebar .b1a-tg-op-ikon{width:38px;height:38px}
body.mod-lebar .b1a-tg-op-ikon svg{width:30px;height:30px}
body.mod-lebar .b1a-tg-op-teks{justify-items:center}
body.mod-lebar .b1a-tg-op-nama{font-size:1rem}
body.mod-lebar .b1a-tg-kad-dalam{padding:9px 18px 11px}
body.mod-lebar .b1a-tg-kad-t{font-size:1.125rem}
body.mod-lebar .b1a-tg-bumbung-teks{font-size:17px}
/* telaga */
body.mod-lebar .b1a-ul-jalur{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
body.mod-lebar .b1a-ul-slot{grid-template-columns:26px minmax(0,1fr);align-items:start;min-height:58px;padding:7px 9px 7px 7px}
body.mod-lebar .b1a-ul-slot-t{font-size:.8125rem}
body.mod-lebar .b1a-telaga.b1a-mod-upacara .bisik{order:5}
body.mod-lebar .b1a-telaga.b1a-mod-upacara .b1a-ul-jalur{order:3}
body.mod-lebar .b1a-telaga.b1a-mod-upacara .b1a-soal-tempat{order:4}
body.mod-lebar .b1a-ul-setia-teks{font-size:15px}
body.mod-lebar .b1a-al-bukit{gap:16px;padding:22px 14px 14px 0;--b1a-al-kw:88px}
body.mod-lebar .b1a-al-kolam{height:52px}
body.mod-lebar .b1a-al-plak{padding:7px 14px 8px}
body.mod-lebar .b1a-al-nama b{font-size:1rem}
body.mod-lebar .b1a-al-pilih{grid-template-columns:repeat(4,minmax(0,1fr))}
body.mod-lebar .b1a-al-peranan{grid-template-columns:1fr 1fr}
body.mod-lebar .op.b1a-al-op{min-height:54px}
body.mod-lebar .b1a-al-helai{gap:10px}
/* mahkota */
body.mod-lebar .b1a-mk-dulang{grid-template-columns:repeat(var(--b1a-mk-n,6),minmax(0,1fr));gap:8px;padding:10px 10px 9px}
body.mod-lebar .b1a-mk-batu{min-height:74px}
body.mod-lebar .b1a-mk-batu-seni{width:36px;height:36px}
body.mod-lebar .b1a-mk-label{font-size:.9375rem;padding:5px 10px}
body.mod-lebar .b1a-mk-soket-no{font-size:16px}
body.mod-lebar .b1a-mk-kad-t{font-size:1.0625rem}

/* =====================================================================================
   TELEFON (390 x 844) dan TELEFON PENDEK (375 x 667)
   ===================================================================================== */
body.mod-telefon .b2-j-tiang .b2-kad,body.mod-telefon .b2-j-telaga .b2-kad,body.mod-telefon .b2-j-mahkota .b2-kad{padding:8px 14px 9px}
body.mod-telefon .b2-j-tiang .b2-kad-isi,body.mod-telefon .b2-j-telaga .b2-kad-isi,body.mod-telefon .b2-j-mahkota .b2-kad-isi{font-size:1rem;line-height:1.26}
body.mod-telefon .b2-j-tiang .bisik,body.mod-telefon .b2-j-telaga .bisik,body.mod-telefon .b2-j-mahkota .bisik{min-height:2.8em;padding:7px 12px;font-size:.875rem;line-height:1.32}
/* helaian tetap di bawah skrin (aliran: jubin + bisik; mahkota: kad + dulang + bisik) */
body.mod-telefon .b1a-helai{position:fixed;left:0;right:0;bottom:0;z-index:20;max-width:560px;margin:0 auto;gap:8px;
  padding:8px 10px max(10px,env(safe-area-inset-bottom));border-radius:18px 18px 0 0;background:rgba(255,250,238,.97);box-shadow:0 -6px 18px rgba(27,42,92,.2)}
body.mod-telefon .b1a-helai .bisik{min-height:2.6em;padding:6px 10px;box-shadow:none;background:#F3F6FD}
body.mod-telefon .b1a-helai .bisik.betul{background:var(--betul-bg)}
body.mod-telefon .b1a-helai .bisik.salah{background:var(--salah-bg)}
body.mod-telefon .b1a-telaga[data-fasa="tamat"] .b1a-helai,body.mod-telefon .b1a-mahkota[data-fasa="tamat"] .b1a-helai{position:static;margin:0;border-radius:16px;box-shadow:none;background:none;padding:0}
body.mod-telefon .b1a-mk-dulang{gap:9px 7px;padding:9px 8px 8px}
body.mod-telefon .b1a-mk-kad{padding:7px 12px 8px}
@media (max-height:700px){
  body.mod-telefon .b1a-tiang,body.mod-telefon .b1a-telaga,body.mod-telefon .b1a-mahkota{gap:8px}
  body.mod-telefon .b2-j-tiang .b2-kad-isi,body.mod-telefon .b2-j-telaga .b2-kad-isi,body.mod-telefon .b2-j-mahkota .b2-kad-isi{font-size:.9375rem;line-height:1.24}
  body.mod-telefon .op.b1a-tg-op{min-height:48px;padding:5px 8px 5px 6px}
  body.mod-telefon .b1a-tg-op-ikon{width:34px;height:34px}
  body.mod-telefon .b1a-tg-op-ikon svg{width:28px;height:28px}
  body.mod-telefon .b1a-tg-kad-dalam{padding:7px 12px 8px}
  body.mod-telefon .b1a-tg-kad-t{font-size:.9375rem;line-height:1.24}
  body.mod-telefon .b1a-ul-slot{min-height:36px;padding:4px 9px 4px 6px}
  body.mod-telefon .b1a-al-bukit{gap:14px;padding-top:20px}
  body.mod-telefon .op.b1a-al-op{min-height:48px}
  body.mod-telefon .b1a-mk-batu{min-height:56px;padding:4px 3px 5px}
  body.mod-telefon .b1a-mk-batu-seni{width:28px;height:28px}
  body.mod-telefon .b1a-mk-dulang{gap:8px 6px;padding:8px 7px 7px}
}
@media (prefers-reduced-motion:reduce){
  .b1a-tg-panji{transform:none;opacity:1}
  .b1a-tg-panji.b1a-naik,.b1a-tg-kepala.b1a-baru,.b1a-tg-drum.b1a-baru,.b1a-mk-soket.b1a-baru,.b1a-mk-mutiara.b1a-baru,.b1a-mk-label.b1a-baru,.b1a-mk-batu.b1a-masuk,
  .b1a-al-plak.b1a-baru,.b1a-al-plak.b1a-tulis .b1a-al-per-t,.b1a-ul-slot.b1a-isi,.b1a-soal.masuk,.b1a-mk-kad.masuk,.b1a-al-akhir.masuk{animation:none}
  .b1a-mk-garis.b1a-baru{animation:none;stroke-dashoffset:0}
  .b1a-bingkai,.b1a-adegan,.b1a-kunci-baca > *,.b1a-mk-label{transition:none}
}