/* ===== Babak · gaya pakej enjin Sejarah Tingkatan 5 Bab 2, kumpulan 2b (js/pakej-t5-bab-02-2b.js): lingkar, jampasir.
   Awalan kelas, keyframes dan pemboleh ubah CSS: t5b2b- (lingkar t5b2b-lk-, jampasir t5b2b-jp-). 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)). Kelas keadaan teras (salah, betul, kilat, pudar) hanya dipakai di bawah
   kelas berawalan. Animasi perlahan; keadaan akhir untuk prefers-reduced-motion di hujung fail. Palet Babak (SPEC-T5-BAB-02 §1.14). ===== */

/* ---------- Bersama ---------- */
.b2-j-lingkar .b2-kad-no,.b2-j-jampasir .b2-kad-no{font-size:.8125rem;letter-spacing:.05em}
.b2-j-lingkar .b2-kad-isi,.b2-j-jampasir .b2-kad-isi{font-size:1.0625rem;line-height:1.28;overflow-wrap:break-word}
.b2-j-lingkar .b2-rujuk-btn,.b2-j-jampasir .b2-rujuk-btn{font-size:.875rem;min-height:44px}
.b2-j-lingkar .b2-rumus-label,.b2-j-jampasir .b2-rumus-label{font-size:.875rem}
.b2-j-lingkar .b2-rumus-tokoh li,.b2-j-jampasir .b2-rumus-tokoh li{font-size:.875rem;line-height:1.35;align-content:start}
.t5b2b-pet{font-size:.875rem;font-weight:700;line-height:1.3;color:#3B5B8C;overflow-wrap:break-word}
.t5b2b-pet b{font-weight:900;color:#2563C4}
.op.t5b2b-op{min-height:50px;font-size:.9375rem;padding:8px 14px}
.t5b2b-op-teks{min-width:0;overflow-wrap:break-word}
.b2-pilih.t5b2b-pilih{grid-template-columns:minmax(0,1fr);gap:8px;min-width:0}
.b2-pilih.t5b2b-pilih[hidden]{display:none}
.t5b2b-rumus-lanjut{display:grid;gap:10px;min-width:0}
.t5b2b-rumus-lanjut.t5b2b-ada-lagi{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 40px),transparent)}
.b2-rumus-tokoh.t5b2b-rumus-soal{grid-template-columns:minmax(0,1fr)}
.t5b2b-rumus-soal li b{color:var(--ink)}
.b2-rumus-tokoh li.t5b2b-rumus-ayat{display:block;color:var(--ink2);font-weight:700}
.b2-rumus-tokoh li.t5b2b-rumus-ayat b{color:var(--ink);font-weight:900;background:#FFF3C4;border-radius:5px;padding:0 4px}
@keyframes t5b2b-timbul{from{opacity:0}to{opacity:1}}
@keyframes t5b2b-gegar{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}

/* =====================================================================================
   4.3 LINGKAR · LINGKARAN TAHUN
   ===================================================================================== */
.t5b2b-lingkar{display:grid;gap:10px;min-width:0;grid-template-columns:minmax(0,1fr);
  grid-template-areas:"atas" "bisik" "adegan" "set" "senarai"}
.t5b2b-lingkar.t5b2b-lk-mod-soal{grid-template-areas:"atas" "bisik" "pilih" "adegan" "senarai"}
.t5b2b-lingkar.t5b2b-lk-mod-ukir{grid-template-areas:"atas" "bisik" "ukir"}
.t5b2b-lk-atas{grid-area:atas;min-width:0}
.t5b2b-lingkar > .bisik{grid-area:bisik}
.t5b2b-lk-pilih{grid-area:pilih}
.b2-kad.t5b2b-lk-kad .b2-kad-isi{overflow-wrap:break-word}
/* adegan balak */
.t5b2b-lk-adegan{grid-area:adegan;position:relative;min-width:0;border-radius:22px;overflow:hidden;border:3px solid #fff;background:#C6EACA;box-shadow:var(--bayang)}
.t5b2b-lk-balak{display:block;width:100%;height:auto;max-height:360px;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.t5b2b-lingkar.t5b2b-lk-sedia .t5b2b-lk-muka{cursor:pointer}
.t5b2b-lk-plak-teks,.t5b2b-lk-paku-no{font-family:var(--f);font-weight:900;fill:#4A2E06}
.t5b2b-lk-sinar{opacity:0;pointer-events:none;transition:opacity .2s ease,stroke .2s ease}
.t5b2b-lk-sinar.t5b2b-dekat{opacity:.42}
.t5b2b-lk-sinar.t5b2b-lk-kilat{stroke:#9BE3BC;opacity:.78}
.t5b2b-lk-sinar.t5b2b-lk-nyala{animation:t5b2b-nyala .5s ease-in-out}
@keyframes t5b2b-nyala{0%{opacity:0}40%{opacity:.9}100%{opacity:0}}
.t5b2b-lk-paku.t5b2b-baru{transform-box:fill-box;transform-origin:center;animation:t5b2b-paku .34s cubic-bezier(.3,1.5,.5,1) both}
@keyframes t5b2b-paku{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}
.t5b2b-lk-calar{transition:opacity .7s ease}
.t5b2b-lk-calar.t5b2b-lukis path{stroke-dasharray:100;animation:t5b2b-calar .24s ease-out both}
@keyframes t5b2b-calar{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.t5b2b-lk-calar.t5b2b-pudar{opacity:0}
.t5b2b-lk-pahat,.t5b2b-lk-serpih{pointer-events:none}
.t5b2b-lk-tunas{transform:scale(0);transform-box:fill-box;transform-origin:50% 100%;transition:transform .7s cubic-bezier(.3,1.35,.5,1)}
.t5b2b-lk-tunas.t5b2b-tumbuh{transform:none}
.t5b2b-lk-awal .t5b2b-lk-plak-lapis{animation:t5b2b-timbul .45s .5s both}
/* tag tahun (butang): telefon 3 + 2 dalam grid enam lajur */
.t5b2b-lk-set{grid-area:set;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;min-width:0}
.t5b2b-lk-set .t5b2b-lk-cincin{grid-column:span 2}
.t5b2b-lk-set.t5b2b-n5 .t5b2b-lk-cincin:nth-child(n+4),.t5b2b-lk-set.t5b2b-n4 .t5b2b-lk-cincin{grid-column:span 3}
.t5b2b-lk-cincin{position:relative;display:block;min-width:0;min-height:56px;padding:0;border-radius:16px;background:#fff;color:var(--ink);text-align:center;
  box-shadow:0 4px 0 var(--t5b2b-gelap,#8A5226),inset 0 0 0 2px var(--garis);transition:background-color .15s ease,box-shadow .15s ease,opacity .2s ease}
.t5b2b-lk-tag-dalam{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:56px;padding:6px 6px 8px;border-radius:inherit;
  box-shadow:inset 0 5px 0 var(--t5b2b-nada,#D29C5F)}
.t5b2b-lk-loyang{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:46px;padding:1px 8px;border-radius:8px;background:linear-gradient(180deg,#FFEBA8,#F2C553 55%,#D9A231);
  color:#4A2E06;font-size:1rem;font-weight:900;line-height:1.3;letter-spacing:.02em;font-variant-numeric:tabular-nums;
  box-shadow:inset 0 0 0 1.5px #B8851F,inset 0 2px 0 rgba(255,255,255,.6),0 2px 0 rgba(90,50,20,.25)}
.t5b2b-lk-tag-teks{display:grid;gap:1px;min-width:0}
.t5b2b-lk-tag-teks:empty{display:none}
.t5b2b-lk-tag-nama{font-size:.875rem;font-weight:900;line-height:1.15;color:var(--ink);overflow-wrap:break-word}
.t5b2b-lk-tag-ket{display:none;font-size:.8125rem;font-weight:700;line-height:1.22;color:var(--ink2);overflow-wrap:break-word}
.t5b2b-lk-kira{position:absolute;right:-5px;top:-7px;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--t5b2b-nada,#D29C5F);color:#3E220E;
  font-size:.875rem;font-weight:900;line-height:1;display:none;place-items:center;box-shadow:inset 0 0 0 1.5px var(--t5b2b-gelap,#8A5226),0 0 0 2px #fff}
.t5b2b-lk-kira.t5b2b-ada{display:grid}
.t5b2b-lk-no{display:none}
.t5b2b-lk-cincin:hover:not([disabled]){background:#FFFBEA}
.t5b2b-lk-cincin:active:not([disabled]){box-shadow:0 1px 0 var(--t5b2b-gelap,#8A5226),inset 0 0 0 2px var(--garis)}
.t5b2b-lk-cincin.betul,.t5b2b-lk-cincin.kilat{background:var(--betul-bg);box-shadow:0 4px 0 #1E9E63,inset 0 0 0 3px var(--hijau)}
.t5b2b-lk-cincin.salah{background:var(--salah-bg);box-shadow:0 4px 0 var(--merah-d),inset 0 0 0 3px #E0555D}
.t5b2b-lk-cincin.salah .t5b2b-lk-tag-dalam{animation:goncang .4s}
.t5b2b-lk-cincin.salah .t5b2b-lk-tag-nama{color:var(--salah-teks)}
.t5b2b-lk-cincin.pudar{opacity:.42}
.t5b2b-lk-cincin[disabled]{cursor:default}
.t5b2b-lingkar:not(.t5b2b-lk-sedia) .t5b2b-lk-cincin:not(.betul):not(.kilat){filter:saturate(.5);background:#FBF8F2}
/* senarai peristiwa diukir (tiga terakhir) */
.t5b2b-lk-senarai{grid-area:senarai;display:grid;gap:7px;align-content:start;min-width:0;padding:10px 12px 11px;border-radius:18px;background:rgba(255,255,255,.94);
  box-shadow:0 3px 0 rgba(27,42,92,.12),inset 0 0 0 2px var(--garis)}
.t5b2b-lk-senarai-kepala{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.8125rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#7A4620}
.t5b2b-lk-senarai-kepala b{padding:1px 8px;border-radius:9px;background:#FFF1D6;color:#6E3F1B;letter-spacing:0;box-shadow:inset 0 0 0 1.5px #E6C38E}
.t5b2b-lk-senarai-kosong{font-size:.875rem;font-weight:700;color:var(--ink2);line-height:1.35}
.t5b2b-lk-senarai-isi{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.t5b2b-lk-senarai-isi li{display:flex;align-items:flex-start;gap:8px;min-width:0;padding:5px 8px;border-radius:11px;background:#FBF4E6;font-size:.875rem;font-weight:700;line-height:1.3;color:var(--ink);
  box-shadow:inset 4px 0 0 var(--t5b2b-nada,#D29C5F)}
.t5b2b-lk-senarai-isi li.t5b2b-baru{animation:t5b2b-timbul .4s ease-out}
.t5b2b-lk-senarai-isi li.t5b2b-dibantu{background:#FFF1F1;box-shadow:inset 4px 0 0 #F94F55;outline:1.5px dashed #C9323F;outline-offset:-2px}
.t5b2b-lk-senarai-isi .t5b2b-lk-loyang{min-width:42px;font-size:.875rem;padding:0 6px}
.t5b2b-lk-senarai-teks{min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word}
.t5b2b-lk-senarai-lagi{font-size:.875rem;font-weight:800;color:var(--ink2)}
/* fasa ukir: jalur kayu dan cip */
.t5b2b-lk-ukir{grid-area:ukir;display:grid;gap:10px;min-width:0}
.t5b2b-lk-ukir[hidden]{display:none}
.t5b2b-lingkar.t5b2b-lk-mod-ukir .t5b2b-lk-adegan,.t5b2b-lingkar.t5b2b-lk-mod-ukir .t5b2b-lk-set,.t5b2b-lingkar.t5b2b-lk-mod-ukir .t5b2b-lk-senarai{display:none}
.t5b2b-lingkar.t5b2b-lk-mod-soal .t5b2b-lk-set{display:none}
.t5b2b-lk-jalur{position:relative;display:grid;gap:6px;align-content:start;min-width:0;min-height:160px;padding:10px 14px 22px;border-radius:22px;overflow:hidden;border:3px solid #fff;
  background:var(--t5b2b-nada,#C6884C);box-shadow:var(--bayang)}
.t5b2b-lk-jalur.t5b2b-gegar{animation:t5b2b-gegar .4s ease-in-out}
.t5b2b-lk-jalur-svg{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.t5b2b-lk-jalur-kepala{position:relative;z-index:1;display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.t5b2b-lk-jalur-kepala .t5b2b-lk-loyang{font-size:1.0625rem;padding:1px 10px}
.t5b2b-lk-jalur-ket{padding:2px 9px;border-radius:9px;background:rgba(255,246,224,.88);color:#5A3214;font-size:.875rem;font-weight:900;line-height:1.25;box-shadow:inset 0 0 0 1.5px rgba(138,82,38,.35)}
.t5b2b-lk-alur-senarai{position:relative;z-index:1;display:grid;gap:3px;margin:4px 0 0;padding:0;list-style:none}
.t5b2b-lk-alur{position:relative;min-height:1.6em;padding:2px 6px 2px 24px;font-size:.9375rem;font-weight:800;line-height:1.3;color:#4A2810}
.t5b2b-lk-alur::before{content:"";position:absolute;left:7px;top:.62em;width:9px;height:9px;border-radius:2px;background:var(--t5b2b-gelap,#6E3F1B);opacity:.32;transform:rotate(45deg)}
.t5b2b-lk-alur:not(.t5b2b-terukir)::after{content:"";position:absolute;left:24px;right:10px;top:50%;border-top:2px dashed rgba(78,42,16,.34)}
.t5b2b-lk-alur.t5b2b-terukir::before{opacity:.85}
.t5b2b-lk-alur-teks{overflow-wrap:break-word;text-shadow:0 1px 0 rgba(255,240,205,.8),0 -1px 0 rgba(70,35,10,.38)}
.t5b2b-lk-alur.t5b2b-mengukir .t5b2b-lk-alur-teks::after{content:"";display:inline-block;width:12px;height:18px;margin-left:3px;vertical-align:-3px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Cpath d='M4.6 17.4h2.8l.6-2.4H4z' fill='%238E99AD'/%3E%3Crect x='4' y='8' width='4' height='7' rx='.6' fill='%23D5DBE6' stroke='%237D8AA0' stroke-width='.6'/%3E%3Crect x='3.2' y='.6' width='5.6' height='7.6' rx='2.4' fill='%23C98B4F' stroke='%238A5226' stroke-width='.7'/%3E%3C/svg%3E") no-repeat center/contain}
.b2-pilih.t5b2b-lk-cip-set{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0}
.b2-pilih.t5b2b-lk-cip-set.t5b2b-panjang{grid-template-columns:minmax(0,1fr)}
.op.t5b2b-lk-ukiran{min-height:48px;padding:7px 12px;font-size:.9375rem;line-height:1.25}
.op.t5b2b-lk-ukiran.betul{opacity:.92}
/* Rumusan */
.b2-rumus-tokoh.t5b2b-lk-rumus,body.mod-lebar .b2-rumus-tokoh.t5b2b-lk-rumus{grid-template-columns:minmax(0,1fr)}
.t5b2b-lk-rumus > li{box-shadow:inset 4px 0 0 var(--t5b2b-nada,#D29C5F);padding-left:12px}
.t5b2b-lk-rumus > li > b{display:flex;align-items:center;gap:6px;color:var(--ink)}
.t5b2b-lk-rumus .t5b2b-lk-loyang{font-size:.875rem;min-width:42px;padding:0 6px;color:#4A2E06;font-weight:900}
.t5b2b-lk-rumus-terma{display:grid;gap:3px;margin:3px 0 0;padding:0 0 0 20px;list-style:decimal}
.b2-rumus-tokoh .t5b2b-lk-rumus-terma li{display:list-item;padding:0;background:none;border-radius:0;color:var(--ink2);font-weight:700}

/* =====================================================================================
   4.4 JAMPASIR · JAM PASIR WARISAN
   ===================================================================================== */
.t5b2b-jampasir{display:grid;gap:10px;min-width:0;grid-template-columns:minmax(0,1fr);grid-template-areas:"atas" "bisik" "rak" "pilih"}
.t5b2b-jp-atas{grid-area:atas;min-width:0}
.t5b2b-jampasir > .bisik{grid-area:bisik}
.t5b2b-jp-pilih{grid-area:pilih}
.b2-kad.t5b2b-jp-kad .b2-kad-isi{overflow-wrap:break-word}
.b2-kad.t5b2b-lipat{animation:t5b2b-lipat .42s ease-in-out}
@keyframes t5b2b-lipat{0%,100%{transform:none}40%{transform:scale(.97,.9)}}
.t5b2b-jampasir.t5b2b-jp-mod-soal .t5b2b-jp-rak{display:none}
/* rak: dinding papan kayu, rak di bawah setiap baris jam */
.t5b2b-jp-rak{grid-area:rak;position:relative;display:grid;gap:8px;min-width:0;padding:10px 0 0;border-radius:22px;border:3px solid #fff;overflow:hidden;box-shadow:var(--bayang);
  background:radial-gradient(120% 60% at 50% 0%,rgba(255,250,235,.85),rgba(255,250,235,0) 70%),
    repeating-linear-gradient(90deg,#F4DFB5 0 46px,#E8CB97 46px 48px,#F0D8AA 48px 94px,#E5C58E 94px 96px)}
.t5b2b-jp-legenda{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));justify-content:center;align-items:center;gap:2px 16px;padding:0 8px}
.t5b2b-jp-leg{display:flex;align-items:center;gap:5px;font-size:.875rem;font-weight:800;line-height:1.2;color:var(--ink)}
.t5b2b-jp-leg-ikon{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:rgba(255,255,255,.85);box-shadow:inset 0 0 0 1.5px #E3C795}
.t5b2b-jp-leg-ikon svg{width:19px;height:19px}
.t5b2b-jp-leg-teks{display:flex;flex-direction:column;gap:0}
.t5b2b-jp-leg-teks b{font-weight:900;color:#7A4620}
.t5b2b-jp-leg-alir{display:none}
.t5b2b-jp-barisan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:0;row-gap:0;min-width:0}
.t5b2b-jp-jam{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-width:0;border-radius:12px}
.t5b2b-jp-jam.t5b2b-jp-muncul{animation:t5b2b-naik .45s ease-out both}
@keyframes t5b2b-naik{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.t5b2b-jp-jam.t5b2b-jp-sinar .t5b2b-jp-badan{animation:t5b2b-sinar .6s ease-in-out}
@keyframes t5b2b-sinar{0%,100%{filter:none}50%{filter:drop-shadow(0 0 9px rgba(255,201,51,.95))}}
.t5b2b-jp-badan{position:relative;display:flex;flex-direction:column;align-items:stretch;padding:13px 7px 0}
.t5b2b-jp-tiang{position:absolute;top:17px;bottom:4px;width:7px;border-radius:4px;z-index:0;
  background:linear-gradient(90deg,#5A3214,#C98B4F 42%,#8A5226 70%,#6E3F1B);box-shadow:0 1px 0 rgba(0,0,0,.15)}
.t5b2b-jp-tiang::before,.t5b2b-jp-tiang::after{content:"";position:absolute;left:-2px;right:-2px;height:7px;border-radius:4px;background:linear-gradient(90deg,#6E3F1B,#D9A066 45%,#8A5226)}
.t5b2b-jp-tiang::before{top:28%}
.t5b2b-jp-tiang::after{bottom:28%}
.t5b2b-jp-tiang.t5b2b-kiri{left:8px}
.t5b2b-jp-tiang.t5b2b-kanan{right:8px}
.t5b2b-jp-tutup,.t5b2b-jp-tapak{position:relative;z-index:1;height:11px}
.t5b2b-jp-kayu-svg{position:absolute;left:0;top:0;width:100%;height:100%}
.t5b2b-jp-medal{position:absolute;left:50%;top:-14px;z-index:2;width:30px;height:30px;margin-left:-15px;padding:2.5px;border-radius:50%;background:#FFF6E0;
  box-shadow:0 0 0 2.5px #8A5226,inset 0 0 0 2px #E8C27A,0 4px 0 2px rgba(90,50,20,.28)}
.t5b2b-jp-medal svg{display:block;width:100%;height:100%}
.t5b2b-jp-medal text,.t5b2b-jp-jadual-ikon text{font-family:var(--f)}
.t5b2b-jp-leher{position:relative;z-index:1;height:6px;margin:0 16%}
.t5b2b-jp-leher-svg{position:absolute;left:0;top:0;width:100%;height:100%}
/* kaca (butang sasaran): telefon 96 px tinggi */
.t5b2b-jp-kaca{position:relative;z-index:1;display:block;height:72px;margin:0 8px;padding:0;background:none;border-radius:30% 30% 26% 26%;color:var(--ink);text-align:center}
.t5b2b-jp-kaca-dalam{position:absolute;left:0;top:0;right:0;bottom:0;display:block}
.t5b2b-jp-kaca-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;transition:filter .15s ease}
.t5b2b-jp-garis{stroke:#6FAED6;transition:stroke .15s ease}
.t5b2b-jp-pasir{transition:transform .35s ease-out}
.t5b2b-jp-alir .t5b2b-jp-pasir{transition:transform 1.5s linear}
.t5b2b-jp-arus{stroke:#D9A95A;stroke-width:2.6;stroke-dasharray:3 4;stroke-linecap:round;opacity:0;vector-effect:non-scaling-stroke}
.t5b2b-jp-alir .t5b2b-jp-arus{opacity:1;animation:t5b2b-titis .5s linear 3}
@keyframes t5b2b-titis{from{stroke-dashoffset:0}to{stroke-dashoffset:-14}}
.t5b2b-jp-zaman{display:none}
.t5b2b-jp-tag{position:absolute;left:15%;right:15%;display:none;justify-content:center;padding:3px 6px;border-radius:7px;background:#F7E2B0;color:#5A3A0A;
  font-size:.8125rem;font-weight:800;line-height:1.2;text-align:center;box-shadow:0 2px 0 rgba(140,90,30,.35),inset 0 0 0 1px #D9A95A}
.t5b2b-jp-atas .t5b2b-jp-tag{top:10%}
.t5b2b-jp-bawah .t5b2b-jp-tag{bottom:9%}
.t5b2b-jp-kaca.t5b2b-ada .t5b2b-jp-tag{display:flex}
.t5b2b-jp-tag-teks{min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.t5b2b-jp-tag.t5b2b-dibantu{background:#FFE9EA;color:#8E1F2A;outline:2px dashed #C9323F;outline-offset:1px}
.t5b2b-jp-tag.t5b2b-jatuh{animation:t5b2b-jatuh .45s ease-out}
@keyframes t5b2b-jatuh{0%{transform:translateY(-16px) scale(.7);opacity:0}60%{transform:translateY(3px) scale(1.04);opacity:1}100%{transform:none}}
.t5b2b-jp-kira{position:absolute;right:-6px;z-index:2;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:#E8C27A;color:#4A2E06;font-size:.875rem;font-weight:900;line-height:1;
  display:none;place-items:center;box-shadow:0 2px 0 #B8851F,0 0 0 2px #fff}
.t5b2b-jp-atas .t5b2b-jp-kira{top:6px}
.t5b2b-jp-bawah .t5b2b-jp-kira{bottom:4px}
.t5b2b-jp-kaca.t5b2b-ada .t5b2b-jp-kira{display:grid}
.t5b2b-jp-no{display:none}
.t5b2b-jp-kaca:hover:not([disabled]) .t5b2b-jp-garis{stroke:#3D8BF2}
.t5b2b-jp-kaca:focus-visible{outline:none}
.t5b2b-jp-kaca:focus-visible .t5b2b-jp-kaca-svg{filter:drop-shadow(0 0 3px #3D8BF2) drop-shadow(0 0 1px #2563C4)}
.t5b2b-jp-kaca.salah .t5b2b-jp-garis{stroke:#E0555D}
.t5b2b-jp-kaca.salah .t5b2b-jp-kaca-svg{filter:drop-shadow(0 0 4px rgba(249,79,85,.95)) drop-shadow(0 0 1px #C9323F)}
.t5b2b-jp-kaca.salah .t5b2b-jp-kaca-dalam{animation:goncang .4s}
.t5b2b-jp-kaca.kilat .t5b2b-jp-garis,.t5b2b-jp-kaca.betul .t5b2b-jp-garis{stroke:#1A9A5C}
.t5b2b-jp-kaca.kilat .t5b2b-jp-kaca-svg,.t5b2b-jp-kaca.betul .t5b2b-jp-kaca-svg{filter:drop-shadow(0 0 4px rgba(47,160,92,.9)) drop-shadow(0 0 1px #217F49)}
.t5b2b-jp-kaca.pudar{opacity:.4}
.t5b2b-jp-kaca[disabled]{cursor:default}
/* papan rak dan plat nama */
.t5b2b-jp-papan{position:relative;z-index:1;margin-top:2px;padding:8px 4px 5px;background:linear-gradient(180deg,#E2AE6E 0 5px,#B8743C 5px 8px,#9A5E2E 8px 100%);box-shadow:0 4px 0 #6E3F1B}
.t5b2b-jp-plat{display:grid;place-items:center;align-content:center;gap:1px;min-height:40px;padding:3px 4px;border-radius:9px;background:linear-gradient(180deg,#FFF6E0,#F1DFB8);color:var(--ink);
  text-align:center;box-shadow:inset 0 0 0 1.5px #C9A96E,0 2px 0 rgba(60,30,10,.4);transition:background-color .6s ease,box-shadow .6s ease}
.t5b2b-jp-plat-nama{font-size:.875rem;font-weight:900;line-height:1.12;letter-spacing:-.01em;overflow-wrap:break-word}
.t5b2b-jp-plat-ket{display:none;font-size:.75rem;font-weight:700;line-height:1.18;color:var(--ink2);overflow-wrap:break-word}
.t5b2b-jp-plat.t5b2b-emas{background:linear-gradient(180deg,#FFEFB8,#F2C553 60%,#E3B140);box-shadow:inset 0 0 0 1.5px #B8851F,0 2px 0 rgba(60,30,10,.4),0 0 0 3px rgba(255,214,102,.55)}
.t5b2b-jp-plat.t5b2b-emas .t5b2b-jp-plat-ket{color:#5A3A0A}
/* tag terbang (klon tanpa atribut data) */
.t5b2b-jp-terbang{position:absolute;z-index:46;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:4px 9px;border-radius:10px;background:#fff;color:var(--ink);
  font-size:.8125rem;font-weight:800;line-height:1.2;text-align:center;pointer-events:none;box-shadow:0 8px 16px rgba(27,42,92,.25),inset 0 0 0 2px var(--garis);transition:background-color .15s ease}
.t5b2b-jp-terbang span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.t5b2b-jp-terbang.t5b2b-pasir{background:#F7E2B0;color:#5A3A0A;box-shadow:0 6px 10px rgba(90,58,10,.3),inset 0 0 0 1px #D9A95A}
.t5b2b-jp-terbang.t5b2b-dibantu{outline:2px dashed #C9323F;outline-offset:2px}
/* Rumusan: jadual atas | bawah */
.t5b2b-jp-jadual{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:.875rem;line-height:1.32;color:var(--ink)}
.t5b2b-jp-jadual thead th{padding:0 9px 2px;font-size:.8125rem;font-weight:900;color:var(--teal-teks);text-align:left;vertical-align:bottom}
.t5b2b-jp-jadual tbody th,.t5b2b-jp-jadual td{padding:7px 9px;background:#F3F6FD;vertical-align:top;text-align:left}
.t5b2b-jp-jadual tbody th{border-radius:12px 0 0 12px;font-weight:900;width:26%}
.t5b2b-jp-jadual tbody th > span:last-child{display:block;margin-top:3px}
.t5b2b-jp-jadual td:last-child{border-radius:0 12px 12px 0}
.t5b2b-jp-jadual td{width:37%;font-weight:700;color:var(--ink2)}
.t5b2b-jp-jadual tbody tr td:nth-child(2){background:#FBF2DE}
.t5b2b-jp-jadual ul{display:grid;gap:5px;margin:0;padding:0;list-style:none}
.t5b2b-jp-jadual li{position:relative;padding-left:11px;overflow-wrap:break-word}
.t5b2b-jp-jadual li::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;border-radius:50%;background:#D9A95A}
.t5b2b-jp-jadual-ikon{display:block;width:30px;height:30px}
.t5b2b-jp-jadual-ikon svg{display:block;width:100%;height:100%}
.t5b2b-jp-kosong{color:var(--ink2);font-weight:700}

/* =====================================================================================
   MOD LEBAR (pentas 1280 x 720; .main-badan: left 300, width 720)
   ===================================================================================== */
/* lingkar: K1 dan bisik di atas; balak 392 di kiri; lajur tag dan senarai di kanan */
body.mod-lebar .b2-main.b2-j-lingkar .main-badan,body.mod-lebar .b2-main.b2-j-jampasir .main-badan{left:300px;width:720px;top:88px;bottom:12px;
  display:flex;flex-direction:column;align-content:stretch;overflow:hidden}
body.mod-lebar .b2-p-lingkar,body.mod-lebar .b2-p-jampasir{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
body.mod-lebar .b2-j-lingkar .b2-kad,body.mod-lebar .b2-j-jampasir .b2-kad{padding:9px 18px 11px}
body.mod-lebar .b2-j-lingkar .b2-kad-isi,body.mod-lebar .b2-j-jampasir .b2-kad-isi{font-size:1.125rem;line-height:1.28}
body.mod-lebar .b2-j-lingkar .bisik,body.mod-lebar .b2-j-jampasir .bisik{min-height:54px;padding:7px 14px;font-size:.9375rem;line-height:1.3}
body.mod-lebar .t5b2b-lingkar{flex:1 1 auto;min-height:0;grid-template-columns:392px minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr);column-gap:18px;row-gap:10px;
  grid-template-areas:"atas atas" "bisik bisik" "adegan set" "adegan senarai"}
body.mod-lebar .t5b2b-lingkar.t5b2b-lk-mod-soal{grid-template-areas:"atas atas" "bisik bisik" "adegan pilih" "adegan senarai"}
body.mod-lebar .t5b2b-lingkar.t5b2b-lk-mod-ukir{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"atas" "bisik" "ukir"}
body.mod-lebar .t5b2b-lk-adegan{align-self:stretch;min-height:0}
body.mod-lebar .t5b2b-lk-balak{height:100%;max-height:none}
body.mod-lebar .t5b2b-lk-set{grid-template-columns:minmax(0,1fr);gap:8px;align-content:start}
body.mod-lebar .t5b2b-lk-set .t5b2b-lk-cincin,body.mod-lebar .t5b2b-lk-set.t5b2b-n5 .t5b2b-lk-cincin:nth-child(n+4),body.mod-lebar .t5b2b-lk-set.t5b2b-n4 .t5b2b-lk-cincin{grid-column:auto}
body.mod-lebar .t5b2b-lk-cincin{text-align:left;border-radius:15px}
body.mod-lebar .t5b2b-lk-tag-dalam{flex-direction:row;justify-content:flex-start;gap:10px;min-height:58px;padding:5px 30px 5px 34px;box-shadow:inset 5px 0 0 var(--t5b2b-nada,#D29C5F)}
body.mod-lebar .t5b2b-lk-tag-ket{display:block}
body.mod-lebar .t5b2b-lk-kira{right:8px;top:50%;margin-top:-12px;box-shadow:inset 0 0 0 1.5px var(--t5b2b-gelap,#8A5226)}
body.mod-lebar .t5b2b-lk-no{display:grid;place-items:center;position:absolute;left:9px;top:50%;width:20px;height:22px;margin-top:-11px;border-radius:7px;background:#EEF2FB;color:var(--ink2);
  font-size:.75rem;font-weight:900;box-shadow:0 2px 0 #CBD5EC}
body.mod-lebar .t5b2b-lk-cincin[disabled] .t5b2b-lk-no{opacity:.5}
body.mod-lebar .t5b2b-lk-senarai{min-height:0;overflow:hidden;gap:6px;padding:8px 12px 9px}
body.mod-lebar .t5b2b-lk-senarai-isi{gap:4px}
body.mod-lebar .t5b2b-lk-senarai-isi li{align-items:center;padding:3px 8px}
body.mod-lebar .t5b2b-lk-senarai-teks{-webkit-line-clamp:1}
body.mod-lebar .t5b2b-lk-senarai-lagi{display:none}
body.mod-lebar .t5b2b-lk-pilih{align-content:start}
body.mod-lebar .t5b2b-lk-pilih .op{min-height:54px}
body.mod-lebar .t5b2b-lk-ukir{min-height:0;align-content:start}
body.mod-lebar .t5b2b-lk-jalur{min-height:188px;padding:12px 22px 24px}
body.mod-lebar .t5b2b-lk-alur{font-size:1rem;padding-left:26px}
body.mod-lebar .b2-pilih.t5b2b-lk-cip-set,body.mod-lebar .b2-pilih.t5b2b-lk-cip-set.t5b2b-panjang{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px}
body.mod-lebar .op.t5b2b-lk-ukiran{min-height:52px}
body.mod-lebar .b2-p-lingkar > .b2-rumus,body.mod-lebar .b2-p-jampasir > .b2-rumus{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
body.mod-lebar .b2-p-lingkar > .b2-rumus > *,body.mod-lebar .b2-p-jampasir > .b2-rumus > *{flex:none}
body.mod-lebar .b2-p-lingkar > .b2-rumus > .t5b2b-rumus-lanjut,body.mod-lebar .b2-p-jampasir > .b2-rumus > .t5b2b-rumus-lanjut{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
/* jampasir: legenda 118 di kiri, jam pasir sebaris di atas satu rak */
body.mod-lebar .t5b2b-jampasir{flex:1 1 auto;min-height:0;grid-template-rows:auto auto minmax(0,1fr) auto;row-gap:10px}
body.mod-lebar .t5b2b-jp-rak{grid-template-columns:118px minmax(0,1fr);align-items:end;gap:0;padding:12px 0 0;align-self:stretch}
body.mod-lebar .t5b2b-jp-legenda{display:flex;align-self:stretch;flex-direction:column;flex-wrap:nowrap;justify-content:space-between;align-items:stretch;gap:8px;padding:34px 4px 76px 12px}
body.mod-lebar .t5b2b-jp-leg{flex-direction:column;align-items:flex-start;gap:5px;padding:8px 9px;border-radius:14px;background:rgba(255,255,255,.82);box-shadow:inset 0 0 0 1.5px #E3C795}
body.mod-lebar .t5b2b-jp-leg-teks b{font-size:.9375rem}
body.mod-lebar .t5b2b-jp-leg-alir{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 4px;font-size:.75rem;font-weight:800;line-height:1.2;color:#7A4620;text-align:center}
body.mod-lebar .t5b2b-jp-leg-panah{display:block;width:4px;height:40px;border-radius:2px;background:repeating-linear-gradient(180deg,#D9A95A 0 4px,transparent 4px 8px);position:relative}
body.mod-lebar .t5b2b-jp-leg-panah::after{content:"";position:absolute;left:-5px;bottom:-6px;border:7px solid transparent;border-top:8px solid #D9A95A;border-bottom:0}
body.mod-lebar .t5b2b-jp-barisan{grid-template-columns:repeat(4,minmax(0,1fr))}
body.mod-lebar .t5b2b-jp-barisan.t5b2b-n3{grid-template-columns:repeat(3,minmax(0,1fr))}
body.mod-lebar .t5b2b-jp-barisan.t5b2b-n2{grid-template-columns:repeat(2,minmax(0,1fr))}
body.mod-lebar .t5b2b-jp-badan{padding:24px 9px 0}
body.mod-lebar .t5b2b-jp-tiang{top:30px;bottom:5px}
body.mod-lebar .t5b2b-jp-tiang.t5b2b-kiri{left:9px}
body.mod-lebar .t5b2b-jp-tiang.t5b2b-kanan{right:9px}
body.mod-lebar .t5b2b-jp-tutup,body.mod-lebar .t5b2b-jp-tapak{height:16px}
body.mod-lebar .t5b2b-jp-kaca{height:120px;margin:0 10px}
body.mod-lebar .t5b2b-jp-leher{height:9px}
body.mod-lebar .t5b2b-jp-medal{width:40px;height:40px;margin-left:-20px;top:-25px;padding:3px}
body.mod-lebar .t5b2b-jp-zaman{display:block;position:absolute;left:18%;right:18%;font-size:.75rem;font-weight:900;line-height:1.15;letter-spacing:.04em;text-transform:uppercase;color:#2563C4;opacity:.42}
body.mod-lebar .t5b2b-jp-atas .t5b2b-jp-zaman{top:16%}
body.mod-lebar .t5b2b-jp-bawah .t5b2b-jp-zaman{bottom:14%}
body.mod-lebar .t5b2b-jp-kaca.t5b2b-ada .t5b2b-jp-zaman{display:none}
body.mod-lebar .t5b2b-jp-tag{left:12%;right:12%}
body.mod-lebar .t5b2b-jp-no{display:grid;place-items:center;position:absolute;left:-7px;z-index:2;width:20px;height:22px;border-radius:7px;background:#EEF2FB;color:var(--ink2);
  font-size:.75rem;font-weight:900;box-shadow:0 2px 0 #CBD5EC}
body.mod-lebar .t5b2b-jp-atas .t5b2b-jp-no{top:6px}
body.mod-lebar .t5b2b-jp-bawah .t5b2b-jp-no{bottom:4px}
body.mod-lebar .t5b2b-jp-kaca[disabled] .t5b2b-jp-no{display:none}
body.mod-lebar .t5b2b-jp-papan{padding:9px 7px 9px}
body.mod-lebar .t5b2b-jp-plat{min-height:52px;padding:4px 6px}
body.mod-lebar .t5b2b-jp-plat-ket{display:block}
body.mod-lebar .t5b2b-jp-pilih .op{min-height:56px}

/* =====================================================================================
   MOD TELEFON (390 x 844; pendek: max-height 700)
   ===================================================================================== */
body.mod-telefon .b2-j-lingkar .b2-kad,body.mod-telefon .b2-j-jampasir .b2-kad{padding:7px 12px 8px}
body.mod-telefon .b2-j-lingkar .b2-kad-isi{font-size:1rem;line-height:1.28}
body.mod-telefon .b2-j-jampasir .b2-kad-isi{font-size:.9375rem;line-height:1.3}
body.mod-telefon .b2-j-jampasir .b2-kad.t5b2b-jp-panjang .b2-kad-isi{font-size:.875rem;line-height:1.3}
body.mod-telefon .b2-j-lingkar .b2-kad-no,body.mod-telefon .b2-j-jampasir .b2-kad-no{font-size:.875rem;letter-spacing:.03em}
body.mod-telefon .t5b2b-lingkar > .bisik,body.mod-telefon .t5b2b-jampasir > .bisik{min-height:2.9em;padding:6px 12px;font-size:.875rem;line-height:1.25}
body.mod-telefon .t5b2b-lk-senarai-kepala{font-size:.875rem;letter-spacing:.04em}
body.mod-telefon .t5b2b-lingkar > .bisik.salah,body.mod-telefon .t5b2b-jampasir > .bisik.salah{display:block}
body.mod-telefon .t5b2b-lingkar > .bisik.salah .b2-rujuk-btn,body.mod-telefon .t5b2b-jampasir > .bisik.salah .b2-rujuk-btn{vertical-align:top;margin:0 0 0 6px}
body.mod-telefon .t5b2b-jp-tag,body.mod-telefon .t5b2b-jp-terbang{font-size:.875rem}
body.mod-telefon .t5b2b-jp-papan{padding:6px 4px 4px}
body.mod-telefon .t5b2b-jp-plat{min-height:36px}
body.mod-telefon .t5b2b-lingkar.t5b2b-lk-mod-soal{grid-template-areas:"atas" "bisik" "pilih" "adegan"}
body.mod-telefon .t5b2b-lingkar.t5b2b-lk-mod-soal .t5b2b-lk-senarai{display:none}
body.mod-telefon .op.t5b2b-lk-ukiran{min-height:44px;padding:6px 10px;font-size:.875rem;line-height:1.2}
body.mod-telefon .b2-pilih.t5b2b-lk-cip-set{gap:7px}
body.mod-telefon .t5b2b-lk-jalur{min-height:0;gap:4px;padding:8px 12px 12px}
body.mod-telefon .t5b2b-lk-alur-senarai{gap:2px;margin-top:2px}
body.mod-telefon .t5b2b-lk-alur{font-size:.875rem;min-height:1.45em;padding-top:1px;padding-bottom:1px}
body.mod-telefon .t5b2b-jp-jadual,body.mod-telefon .t5b2b-jp-jadual tbody,body.mod-telefon .t5b2b-jp-jadual tr,body.mod-telefon .t5b2b-jp-jadual th,body.mod-telefon .t5b2b-jp-jadual td{display:block;width:auto}
body.mod-telefon .t5b2b-jp-jadual thead{display:none}
body.mod-telefon .t5b2b-jp-jadual tr{margin-bottom:8px;border-radius:13px;overflow:hidden;box-shadow:inset 0 0 0 1.5px var(--garis)}
body.mod-telefon .t5b2b-jp-jadual tbody th{display:flex;align-items:center;gap:8px;border-radius:0;background:#E9EEFA}
body.mod-telefon .t5b2b-jp-jadual tbody th > span:last-child{margin-top:0}
body.mod-telefon .t5b2b-jp-jadual td,body.mod-telefon .t5b2b-jp-jadual td:last-child{border-radius:0}
body.mod-telefon .t5b2b-jp-jadual td::before{content:attr(data-label);display:block;margin-bottom:3px;font-size:.875rem;font-weight:900;color:var(--teal-teks)}
@media (max-height:700px){
  body.mod-telefon .t5b2b-lingkar,body.mod-telefon .t5b2b-jampasir{gap:8px}
  body.mod-telefon .b2-j-lingkar .b2-kad-isi{font-size:.9375rem}
  body.mod-telefon .t5b2b-lk-cincin,body.mod-telefon .t5b2b-lk-tag-dalam{min-height:48px}
  body.mod-telefon .t5b2b-lk-tag-dalam{gap:2px;padding:5px 5px 6px}
  body.mod-telefon .t5b2b-lk-loyang{font-size:.9375rem}
  body.mod-telefon .t5b2b-lk-jalur{padding:7px 12px 10px}
  body.mod-telefon .t5b2b-lk-jalur-kepala{display:none}
  body.mod-telefon .op.t5b2b-lk-ukiran{min-height:44px;padding:5px 10px}
  body.mod-telefon .t5b2b-jp-rak{padding-top:4px;gap:4px}
  body.mod-telefon .b2-j-jampasir .b2-kad-isi{font-size:.875rem}
  body.mod-telefon .b2-j-jampasir .t5b2b-pet{font-size:.875rem;line-height:1.25}
  body.mod-telefon .t5b2b-jp-legenda{grid-template-columns:repeat(2,max-content);gap:0 14px}
  body.mod-telefon .t5b2b-jp-leg-teks{flex-direction:row}
  body.mod-telefon .t5b2b-jp-leg-teks b{display:none}
  body.mod-telefon .t5b2b-jp-badan{padding-top:8px}
  body.mod-telefon .t5b2b-jp-kaca{height:50px}
  body.mod-telefon .t5b2b-jp-medal{width:26px;height:26px;margin-left:-13px;top:-9px;padding:2px}
  body.mod-telefon .t5b2b-jp-tag-teks{-webkit-line-clamp:1}
  body.mod-telefon .t5b2b-jp-tutup,body.mod-telefon .t5b2b-jp-tapak{height:10px}
  body.mod-telefon .t5b2b-jp-tiang{top:12px;bottom:3px}
  body.mod-telefon .t5b2b-jp-leher{height:5px}
  body.mod-telefon .t5b2b-jp-papan{padding:5px 4px 3px}
  body.mod-telefon .t5b2b-jp-plat{min-height:32px;padding:2px 4px}
  body.mod-telefon .t5b2b-jp-tag{padding:2px 5px;top:6%}
  body.mod-telefon .t5b2b-jp-bawah .t5b2b-jp-tag{top:auto;bottom:6%}
}

/* ---------- Gerakan dikurangkan: keadaan akhir tanpa animasi ---------- */
@media (prefers-reduced-motion:reduce){
  .t5b2b-lk-sinar.t5b2b-lk-nyala,.t5b2b-lk-paku.t5b2b-baru,.t5b2b-lk-calar.t5b2b-lukis path,.t5b2b-lk-cincin.salah .t5b2b-lk-tag-dalam,.t5b2b-lk-jalur.t5b2b-gegar,
  .t5b2b-lk-awal .t5b2b-lk-plak-lapis,.t5b2b-lk-senarai-isi li.t5b2b-baru,.t5b2b-jp-tag.t5b2b-jatuh,.t5b2b-jp-kaca.salah .t5b2b-jp-kaca-dalam,
  .t5b2b-jp-jam.t5b2b-jp-sinar .t5b2b-jp-badan,.t5b2b-jp-jam.t5b2b-jp-muncul,.t5b2b-jp-alir .t5b2b-jp-arus,.b2-kad.t5b2b-lipat{animation:none!important}
  .t5b2b-lk-tunas,.t5b2b-lk-sinar,.t5b2b-lk-calar,.t5b2b-lk-cincin,.t5b2b-jp-pasir,.t5b2b-jp-alir .t5b2b-jp-pasir,.t5b2b-jp-plat,.t5b2b-jp-garis,.t5b2b-jp-kaca-svg,.t5b2b-jp-terbang{transition:none!important}
  .t5b2b-lk-paku.t5b2b-baru{transform:none;opacity:1}
  .t5b2b-lk-tunas.t5b2b-tumbuh{transform:none}
  .t5b2b-lk-sinar.t5b2b-lk-nyala{opacity:0}
  .t5b2b-jp-alir .t5b2b-jp-arus{opacity:0}
  .t5b2b-jp-jam.t5b2b-jp-muncul{opacity:1;transform:none}
}
