/* ===== Babak · gaya pakej enjin Sejarah Tingkatan 5 Bab 2, kumpulan 2d (js/pakej-t5-bab-02-2d.js): cabut, tembikar.
   Awalan kelas, keyframes dan pemboleh ubah: t5b2d- (cabut: t5b2d-cb-, tembikar: t5b2d-tk-). 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)). Animasi perlahan; keadaan akhir untuk prefers-reduced-motion. Palet Babak (SPEC §1.14). ===== */

/* ---------- Kongsi ---------- */
.b2-j-cabut .b2-kad-no,.b2-j-tembikar .b2-kad-no{font-size:.875rem;letter-spacing:.04em}
.b2-j-cabut .b2-rujuk-btn,.b2-j-tembikar .b2-rujuk-btn{font-size:.875rem;min-height:44px}
.b2-j-cabut .b2-rumus-label,.b2-j-tembikar .b2-rumus-label{font-size:.875rem}
.b2-j-cabut .b2-rumus-tokoh li,.b2-j-tembikar .b2-rumus-tokoh li{font-size:.875rem;line-height:1.35;align-content:start}
.b2-j-tembikar .b2-cip-tahun{height:26px;font-size:.875rem}

/* =====================================================================================
   4.7 CABUT · MENARA BLOK
   ===================================================================================== */
.t5b2d-cabut{display:grid;gap:10px;min-width:0}
.b2-j-cabut .b2-kad-isi{font-size:1.125rem;line-height:1.25}
.t5b2d-cb-petunjuk{margin:4px 0 0;font-size:.875rem;font-weight:800;line-height:1.3;color:var(--teal-teks)}
.t5b2d-cb-petunjuk[hidden],.t5b2d-cb-soal[hidden],.t5b2d-cb-dulang[hidden],.t5b2d-cb-lebih[hidden]{display:none}
.t5b2d-cb-soal-atas:empty{display:none}
.t5b2d-cb-soal{min-width:0}
.t5b2d-cb-pilih .op{min-height:54px;font-size:1rem}

/* ---- adegan: dinding papan, lantai, tikar (latar dilukis oleh enjin) ---- */
.t5b2d-cb-adegan{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:12px 0 16px;border-radius:24px;overflow:hidden;
  background:#F1DAB0;box-shadow:inset 0 0 0 3px #E2C48C,0 6px 0 rgba(27,42,92,.14),0 14px 24px rgba(27,42,92,.14)}
.t5b2d-cb-latar{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none}
.t5b2d-cb-kiri,.t5b2d-cb-kanan{position:relative;min-width:0}
.t5b2d-cb-pentas-menara{position:relative;min-width:0}
.t5b2d-cb-meja{position:absolute;display:block;overflow:visible;pointer-events:none}
.t5b2d-cb-menara{position:absolute;transform-origin:50% 100%}
.t5b2d-cb-menara.masuk{animation:t5b2d-cb-muncul .45s ease-out both}
@keyframes t5b2d-cb-muncul{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.t5b2d-cb-menara.t5b2d-cb-mendap{animation:t5b2d-cb-mendap .3s ease-out}
@keyframes t5b2d-cb-mendap{0%,100%{transform:none}45%{transform:translateY(3px)}}

/* ---- blok kayu: muka depan berlabel, muka atas dan sisi nipis (2.5D ringan) ---- */
.t5b2d-cb-blok{position:absolute;display:block;padding:0;margin:0;border:0;border-radius:6px;background:none;cursor:pointer;touch-action:pan-y;
  -webkit-tap-highlight-color:transparent;font:inherit}
.t5b2d-cb-blok[disabled]{cursor:default}
.t5b2d-cb-blok:focus-visible{outline:3px solid var(--fokus);outline-offset:4px}
.t5b2d-cb-muka{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.t5b2d-cb-atas{position:absolute;left:0;right:0;bottom:100%;height:7px;border-radius:3px 3px 0 0;background:var(--t5b2d-cb-a);
  transform-origin:0 100%;transform:skewX(-52deg);box-shadow:inset 0 0 0 1px rgba(110,63,27,.3)}
.t5b2d-cb-sisi{position:absolute;left:100%;top:0;width:9px;height:100%;background:linear-gradient(180deg,var(--t5b2d-cb-s),#8A5226);
  transform-origin:0 0;transform:skewY(-38deg);box-shadow:inset 0 0 0 1px rgba(80,44,18,.3)}
.t5b2d-cb-depan{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:4px 7px;border-radius:5px;overflow:hidden;
  background:linear-gradient(180deg,var(--t5b2d-cb-d1),var(--t5b2d-cb-d2));color:var(--t5b2d-cb-u);
  box-shadow:inset 0 0 0 1.5px rgba(110,63,27,.55),inset 0 3px 0 rgba(255,255,255,.42),inset 0 -4px 0 rgba(110,63,27,.16);transition:filter .2s ease}
.t5b2d-cb-urat{position:absolute;left:0;top:0;width:100%;height:100%;opacity:.42;pointer-events:none}
.t5b2d-cb-teks{position:relative;display:block;max-width:100%;font-size:.875rem;font-weight:800;line-height:1.15;text-align:center;color:#3B2414;
  overflow-wrap:break-word;text-wrap:balance}
.t5b2d-cb-teks.t5b2d-cb-padat{font-size:.8125rem;line-height:1.1}
.t5b2d-cb-teks.t5b2d-cb-padat2{font-size:.75rem;line-height:1.06}
.t5b2d-cb-no{display:none}
.t5b2d-cb-blok:not([disabled]):hover .t5b2d-cb-depan{filter:brightness(1.05)}
.t5b2d-cb-blok:not([disabled]):active .t5b2d-cb-depan{filter:brightness(.97)}
.t5b2d-cb-blok.t5b2d-cb-diseret .t5b2d-cb-depan{box-shadow:inset 0 0 0 2px #E8971A,0 0 0 3px rgba(255,201,51,.5)}
.t5b2d-cb-blok.salah .t5b2d-cb-depan{background:var(--salah-bg);color:#E0555D;box-shadow:inset 0 0 0 3px #E0555D,inset 0 -4px 0 rgba(201,50,63,.18);animation:goncang .4s}
.t5b2d-cb-blok.salah .t5b2d-cb-teks{color:var(--salah-teks)}
.t5b2d-cb-blok.salah .t5b2d-cb-atas{background:#FFD1D4}
.t5b2d-cb-blok.salah .t5b2d-cb-sisi{background:linear-gradient(180deg,#F08A90,#C9323F)}
.t5b2d-cb-blok.kilat .t5b2d-cb-depan{box-shadow:inset 0 0 0 3px var(--hijau),0 0 0 4px rgba(26,154,92,.32)}
.t5b2d-cb-blok.t5b2d-cb-hias{cursor:default}
/* blok dicabut: ruang kosong (lekuk gelap dengan muka atas blok di bawahnya) */
.t5b2d-cb-blok.t5b2d-cb-dicabut{cursor:default}
.t5b2d-cb-blok.t5b2d-cb-dicabut .t5b2d-cb-muka,.t5b2d-cb-blok.t5b2d-cb-dicabut .t5b2d-cb-no{visibility:hidden}
.t5b2d-cb-blok.t5b2d-cb-dicabut::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;border-radius:5px;
  background:linear-gradient(180deg,#3E2210 0%,#5A3418 calc(100% - 7px),#D6AA72 calc(100% - 7px));box-shadow:inset 0 7px 9px rgba(0,0,0,.45);opacity:.86}
/* blok kekal yang tersilap dicabut: dipaku (dua kepala paku loyang) */
.t5b2d-cb-blok.t5b2d-cb-dipaku .t5b2d-cb-depan::before,.t5b2d-cb-blok.t5b2d-cb-dipaku .t5b2d-cb-depan::after{content:"";position:absolute;top:5px;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#FFF0B8,#C9932F 72%);box-shadow:0 1px 0 rgba(80,44,18,.5)}
.t5b2d-cb-blok.t5b2d-cb-dipaku .t5b2d-cb-depan::before{left:5px}
.t5b2d-cb-blok.t5b2d-cb-dipaku .t5b2d-cb-depan::after{right:5px}
/* klon yang meluncur ke dulang */
.t5b2d-cb-klon{position:absolute;z-index:9;margin:0;pointer-events:none;transform-origin:0 0}

/* ---- papan nama dan label loyang ---- */
.t5b2d-cb-plak{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:12px;pointer-events:none}
.t5b2d-cb-papan{position:relative;z-index:1;display:grid;gap:4px;justify-items:center;max-width:100%;padding:6px 10px 7px;border-radius:9px;
  background:linear-gradient(180deg,#8A5226,#6E3F1B);box-shadow:inset 0 0 0 2px #B07A44,0 3px 0 rgba(60,30,10,.35);transition:box-shadow .4s ease}
.t5b2d-cb-plak.t5b2d-cb-bersinar .t5b2d-cb-papan{box-shadow:inset 0 0 0 2px #FFC933,0 0 0 4px rgba(255,201,51,.45),0 3px 0 rgba(60,30,10,.35)}
.t5b2d-cb-plak-tajuk{font-size:.875rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;color:#FFF6E0;text-align:center}
.t5b2d-cb-loyang-balut{display:grid;gap:4px;justify-items:center;align-content:start;width:100%}
.t5b2d-cb-loyang-balut:empty{display:none}
.t5b2d-cb-loyang{max-width:100%;padding:2px 9px;border-radius:5px;background:linear-gradient(180deg,#FFE9A6,#E2AE45);color:#4A2E06;font-size:.875rem;font-weight:800;line-height:1.3;
  white-space:nowrap;box-shadow:inset 0 0 0 1px #B07A10,0 1px 0 rgba(60,30,10,.35)}
.t5b2d-cb-loyang.t5b2d-cb-balut{white-space:normal;text-align:center}
.t5b2d-cb-loyang.masuk{animation:t5b2d-cb-muncul .4s ease-out both}
.t5b2d-cb-papan.t5b2d-cb-ukur{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none}
.t5b2d-nb{white-space:nowrap}
.t5b2d-cb-ukur-blok{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none}
.t5b2d-cb-ukur-blok .t5b2d-cb-teks{max-width:none}
.t5b2d-cb-teks.t5b2d-cb-ukur-kata{position:absolute;left:0;top:0;display:inline-block;width:auto;max-width:none;white-space:nowrap;visibility:hidden;pointer-events:none}
.t5b2d-cb-tiang{position:absolute;bottom:0;width:8px;height:14px;border-radius:2px;background:linear-gradient(90deg,#6E3F1B,#8A5226)}
.t5b2d-cb-tiang-kiri{left:calc(50% - var(--t5b2d-cb-tiang,40px) - 4px)}
.t5b2d-cb-tiang-kanan{left:calc(50% + var(--t5b2d-cb-tiang,40px) - 4px)}

/* ---- dulang ---- */
.t5b2d-cb-dulang{position:relative;display:grid;gap:8px;align-content:start;padding:11px 13px 14px;border-radius:16px;
  background:repeating-linear-gradient(90deg,rgba(138,82,38,.07) 0 2px,transparent 2px 10px),linear-gradient(180deg,#EBC892,#DDB277);
  box-shadow:inset 0 0 0 6px #B07A44,inset 0 0 0 8px #8A5226,0 5px 0 rgba(27,42,92,.18),0 10px 18px rgba(27,42,92,.14)}
.t5b2d-cb-dulang-kepala{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.t5b2d-cb-dulang-label{min-width:0;padding:4px 10px;border-radius:8px;background:#FFF6E0;color:#6E3F1B;font-size:.875rem;font-weight:900;line-height:1.2;box-shadow:0 2px 0 rgba(110,63,27,.25)}
.t5b2d-cb-kira{flex:none;padding:4px 10px;border-radius:999px;background:var(--ink);color:#fff;font-size:.875rem;font-weight:900;line-height:1.2;white-space:nowrap}
.t5b2d-cb-slot-balut{display:grid;gap:6px;min-width:0}
.t5b2d-cb-slot{display:flex;align-items:center;justify-content:center;min-width:0;min-height:40px;padding:4px 10px;border-radius:7px;
  border:2px dashed rgba(110,63,27,.42);background:rgba(255,246,224,.4)}
.t5b2d-cb-slot.t5b2d-cb-isi{border:0;padding:6px 10px;background:linear-gradient(180deg,var(--t5b2d-cb-d1),var(--t5b2d-cb-d2));box-shadow:inset 0 0 0 1.5px rgba(110,63,27,.5),0 3px 0 rgba(110,63,27,.35)}
.t5b2d-cb-slot.masuk{animation:t5b2d-cb-muncul .3s ease-out both}
.t5b2d-cb-slot.t5b2d-cb-tunggu{visibility:hidden}
.t5b2d-cb-slot-teks{font-size:.875rem;font-weight:800;line-height:1.2;text-align:center;color:#3B2414;overflow-wrap:break-word;min-width:0}
.t5b2d-cb-lebih{margin:0;font-size:.875rem;font-weight:800;color:#6E3F1B;text-align:right}

/* ---- rumusan ---- */
.t5b2d-cb-rumus li.t5b2d-cb-rumus-cabut{background:#FFF3DF}
.t5b2d-cb-rumus li.t5b2d-cb-rumus-kekal{background:#EEF6F1}

/* =====================================================================================
   4.8 TEMBIKAR · BENGKEL TEMBIKAR (jalur, tanpa watak)
   ===================================================================================== */
.t5b2d-tk-petunjuk{margin:4px 0 0;font-size:.875rem;font-weight:800;line-height:1.3;color:var(--teal-teks)}
.t5b2d-tk-petunjuk[hidden]{display:none}
.t5b2d-tk-pilih.j-tahun{grid-template-columns:minmax(0,1fr)}
.t5b2d-tk-taip{grid-column:1 / -1;display:flex;gap:10px;align-items:stretch}
.t5b2d-tk-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)}
.t5b2d-tk-tahun:focus{outline:none;border-color:var(--fokus);box-shadow:0 0 0 3px rgba(11,87,208,.18)}
.t5b2d-tk-tahun.salah{border-color:#E0555D;background:var(--salah-bg);color:var(--salah-teks);animation:goncang .4s}
.t5b2d-tk-tahun.betul,.t5b2d-tk-tahun.kilat{border-color:var(--hijau);background:var(--betul-bg);color:var(--betul-teks)}
.t5b2d-tk-semak{flex:none;min-width:112px}
/* kad akhir */
.t5b2d-tk-akhir{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:12px;row-gap:3px;align-items:center;padding:12px 16px;border-radius:20px;background:#FFFDF4;
  box-shadow:var(--bayang),inset 0 0 0 3px #FFC933;animation:lompat .45s ease-out both}
.t5b2d-tk-akhir-ikon{grid-row:1 / span 2;width:48px;height:48px}
.t5b2d-tk-akhir-tajuk{font-size:1.0625rem;font-weight:900;line-height:1.25;color:var(--ink)}
.t5b2d-tk-akhir-isi{font-size:.9375rem;font-weight:700;line-height:1.4;color:var(--ink2)}
.t5b2d-tk-rumus{display:grid;gap:10px}
.t5b2d-tk-rumus .t5b2d-tk-akhir{animation:none;box-shadow:inset 0 0 0 3px #FFC933}
/* adegan: garis tekstur tanah liat hanyut perlahan (satu kitaran 2.4 s), asap serombong bergoyang lembut */
.t5b2d-tk-hanyut{animation:t5b2d-tk-hanyut 2.4s linear infinite}
@keyframes t5b2d-tk-hanyut{from{transform:translateX(0)}to{transform:translateX(46px)}}
.t5b2d-tk-asap{animation:t5b2d-tk-asap 6s ease-in-out infinite alternate}
@keyframes t5b2d-tk-asap{from{transform:translateX(-2px)}to{transform:translateX(3px)}}

/* =====================================================================================
   MOD LEBAR (pentas 1280 x 720)
   ===================================================================================== */
/* cabut: kad atas, bisik, kemudian adegan (menara di kiri, dulang atau pilihan di kanan) memenuhi baki .main-badan */
body.mod-lebar .b2-main.b2-j-cabut .main-badan{left:300px;width:720px;top:92px;bottom:14px;display:flex;flex-direction:column;align-content:stretch;overflow:hidden}
body.mod-lebar .b2-p-cabut{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
body.mod-lebar .t5b2d-cabut{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
body.mod-lebar .t5b2d-cabut > .b2-atas{flex:none}
body.mod-lebar .t5b2d-cabut .b2-atas > .bisik{min-height:64px}
body.mod-lebar .t5b2d-cabut .b2-kad{padding:10px 20px 11px}
body.mod-lebar .b2-j-cabut .b2-kad-isi{font-size:1.25rem}
body.mod-lebar .t5b2d-cb-adegan{flex:1 1 auto;min-height:0;grid-template-columns:minmax(0,1fr) 262px;grid-template-rows:minmax(0,1fr);gap:12px;padding:12px 14px 12px 8px;border-radius:28px}
body.mod-lebar .t5b2d-cb-kiri,body.mod-lebar .t5b2d-cb-pentas-menara{height:100%;min-height:0}
body.mod-lebar .t5b2d-cb-kanan{display:flex;flex-direction:column;justify-content:flex-start;gap:10px;min-height:0}
body.mod-lebar .t5b2d-cb-dulang{margin-top:auto}
body.mod-lebar .t5b2d-cb-teks{font-size:.9375rem}
body.mod-lebar .t5b2d-cb-teks.t5b2d-cb-padat{font-size:.875rem}
body.mod-lebar .t5b2d-cb-teks.t5b2d-cb-padat2{font-size:.8125rem}
body.mod-lebar .t5b2d-cb-blok[data-no] .t5b2d-cb-no{display:grid;place-items:center;position:absolute;left:-4px;top:-6px;z-index:2;width:20px;height:20px;border-radius:7px;
  background:#FFFDF6;color:#6E3F1B;font-size:.75rem;font-weight:900;line-height:1;box-shadow:0 2px 0 rgba(110,63,27,.4),inset 0 0 0 1.5px #D9B27A}
body.mod-lebar .t5b2d-cb-plak-tajuk{font-size:.9375rem}
body.mod-lebar .t5b2d-cb-loyang{font-size:.875rem}
body.mod-lebar .t5b2d-cb-loyang.t5b2d-cb-kecil{font-size:.8125rem}
body.mod-lebar .t5b2d-cb-pilih{gap:8px}
body.mod-lebar .t5b2d-cb-pilih .op{min-height:56px;font-size:1rem;padding:9px 14px;line-height:1.25}
body.mod-lebar .t5b2d-cb-slot{min-height:42px}
/* dulang ringkas semasa soalan: blok kecil tanpa teks di bawah pilihan */
body.mod-lebar .t5b2d-cb-dulang.t5b2d-cb-ringkas{gap:6px;padding:9px 12px 11px}
body.mod-lebar .t5b2d-cb-dulang.t5b2d-cb-ringkas .t5b2d-cb-slot-balut{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
body.mod-lebar .t5b2d-cb-dulang.t5b2d-cb-ringkas .t5b2d-cb-slot{min-height:20px;padding:0}
body.mod-lebar .t5b2d-cb-dulang.t5b2d-cb-ringkas .t5b2d-cb-slot:not(.t5b2d-cb-isi),body.mod-lebar .t5b2d-cb-dulang.t5b2d-cb-ringkas .t5b2d-cb-slot-teks{display:none}
body.mod-lebar .b2-p-cabut > .b2-rumus{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
body.mod-lebar .b2-p-cabut > .b2-rumus > *{flex:none}
body.mod-lebar .b2-p-cabut > .b2-rumus > .b2-rumus-tokoh{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px;grid-template-columns:1fr}
/* tembikar: adegan penuh; kad soalan di lajur kanan seperti ronda dan bungaapi */
body.mod-lebar .b2-main.b2-j-tembikar .main-badan{left:796px;width:456px;top:84px;bottom:20px;display:flex;flex-direction:column;align-content:stretch}
body.mod-lebar .b2-p-tembikar{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
body.mod-lebar .b2-p-tembikar .b2-kad-isi{font-size:1.3125rem}
body.mod-lebar .b2-p-tembikar .b2-bawah.t5b2d-tk-ada-rumus{min-height:0;flex:1 1 auto;display:flex;flex-direction:column}
body.mod-lebar .b2-p-tembikar .b2-rumus{flex:0 1 auto;display:flex;flex-direction:column;min-height:0}
body.mod-lebar .b2-p-tembikar .b2-rumus > .t5b2d-tk-rumus{min-height:0;flex:1 1 auto;overflow-y:auto;padding-right:4px}
body.mod-lebar .b2-p-tembikar .b2-rumus > .btn{flex:none}
body.mod-lebar .b2-p-tembikar .b2-rumus-tokoh{grid-template-columns:1fr}

/* =====================================================================================
   TELEFON (390 x 844) dan TELEFON PENDEK (375 x 667)
   ===================================================================================== */
body.mod-telefon .t5b2d-cabut .b2-kad{padding:9px 14px 10px}
body.mod-telefon .b2-j-cabut .b2-kad-isi{font-size:1.0625rem}
body.mod-telefon .t5b2d-cb-kanan{padding:0 10px}
body.mod-telefon .t5b2d-cb-depan{padding:4px 3px}
body.mod-telefon .t5b2d-cb-slot-balut{grid-template-columns:repeat(2,minmax(0,1fr))}
body.mod-telefon .t5b2d-cb-slot{min-height:46px}
body.mod-telefon .b2-j-tembikar .b2-kad-isi{font-size:1.125rem}
@media (max-height:700px){
  body.mod-telefon .t5b2d-cabut{gap:8px}
  body.mod-telefon .t5b2d-cb-adegan{padding:10px 0 12px;gap:8px}
  body.mod-telefon .t5b2d-cb-pilih .op{min-height:48px}
  body.mod-telefon .t5b2d-cb-slot{min-height:44px}
  body.mod-telefon .b2-j-tembikar .b2-kad-isi{font-size:1.0625rem}
  body.mod-telefon .b2-p-tembikar .op.b2-op-boss{min-height:46px}
  body.mod-telefon .main.b2-main.b2-j-tembikar .latar-babak{height:252px}
  body.mod-telefon .main.b2-main.b2-j-tembikar .main-badan{margin-top:196px}
}
@media (prefers-reduced-motion:reduce){
  .t5b2d-cb-menara.masuk,.t5b2d-cb-menara.t5b2d-cb-mendap,.t5b2d-cb-loyang.masuk,.t5b2d-cb-slot.masuk,.t5b2d-tk-hanyut,.t5b2d-tk-asap,.t5b2d-tk-akhir{animation:none}
  .t5b2d-cb-blok.salah .t5b2d-cb-depan{animation:none}
  .t5b2d-cb-depan,.t5b2d-cb-papan{transition:none}
}