/* ===== Babak · gaya pakej Bab 3 kumpulan 3a (js/pakej-bab-03-3a.js): kanta, domino, suis, dail.
   Awalan kelas b3-. Susun atur diskop dengan .b2-j-<jenis> dan body.mod-lebar / body.mod-telefon seperti enjin-bab.css. ===== */

/* ---------- Kongsi ---------- */
.b3-hantu{position:absolute!important;z-index:30;margin:0!important;pointer-events:none;transition:none!important;animation:none!important}
.b3-goncang{animation:goncang .4s}
.b3-denyut{animation:b3-denyut .7s ease-out}
@keyframes b3-denyut{0%{box-shadow:0 0 0 0 rgba(255,201,51,.85)}100%{box-shadow:0 0 0 16px rgba(255,201,51,0)}}
.b3-op{min-height:50px;font-size:.9375rem}
.b3-op-teks{min-width:0}
.b3-no{display:none}
.b3-tarikh-cip{flex:none;display:inline-grid;place-items:center;min-height:26px;padding:2px 10px;border-radius:13px;background:var(--ink);color:#fff;font-size:.8125rem;font-weight:900;line-height:1.2;white-space:nowrap}
.b3-rumus-garis{display:grid;gap:6px}
.b3-rumus-garis li{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:7px 10px;border-radius:14px;background:#F3F6FD;font-size:.9375rem;font-weight:700;line-height:1.35}
body.mod-lebar .b3-rumus-garis li{flex-direction:row;align-items:baseline;gap:12px}
body.mod-lebar .b3-rumus-garis .b3-tarikh-cip{min-width:8.4em}
.b3-rumus-garis li span{min-width:0}
.b3-rumus-senarai li b{font-weight:900}
.b3-rumus-papan{display:grid;gap:10px}
.b3-rumus-papan h3{font-size:.9375rem;margin-bottom:6px;color:var(--teal-teks)}
.b3-rumus-lanjut .b2-rumus-tokoh li,.b3-rumus-lanjut.b2-rumus-tokoh li{align-content:start}
.b2-rumus .b2-rumus-tokoh li{font-size:.875rem}
/* Rumusan pada skrin lebar: senarai ditatal di dalam kotak supaya butang Teruskan sentiasa kelihatan */
body.mod-lebar .b2-p-kanta > .b2-rumus,body.mod-lebar .b2-p-domino > .b2-rumus,body.mod-lebar .b2-p-suis > .b2-rumus,body.mod-lebar .b2-p-dail > .b2-rumus{display:flex;flex-direction:column;max-height:598px;overflow:hidden}
body.mod-lebar .b2-rumus > *{flex:none}
body.mod-lebar .b2-rumus > .b3-rumus-lanjut{flex:0 1 auto;min-height:0;overflow-y:auto;padding-right:4px}

/* =====================================================================================
   3.1 KANTA AKHBAR
   ===================================================================================== */
.b3-kanta{display:grid;gap:10px;grid-template-columns:minmax(0,1fr);grid-template-areas:"kad" "akhbar" "bisik" "senarai"}
.b3-kanta-kadbaris{grid-area:kad}
.b3-kanta > .bisik{grid-area:bisik}
.b3-kanta .b2-kad-isi{font-size:1rem;line-height:1.3}
.b3-akhbar{grid-area:akhbar;position:relative;height:min(470px,calc(100vh - 318px));height:min(470px,calc(100dvh - 318px));min-height:330px;border-radius:6px;overflow:hidden;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;
  background:radial-gradient(ellipse at 20% 15%,rgba(255,255,255,.35),transparent 55%),radial-gradient(ellipse at 85% 90%,rgba(170,120,50,.18),transparent 50%),linear-gradient(#F6EACB,#EFDFB8);
  box-shadow:0 6px 0 rgba(27,42,92,.2),0 16px 30px rgba(27,42,92,.22),inset 0 0 36px rgba(150,105,40,.28)}
.b3-akhbar.diseret{cursor:grabbing}
.b3-akhbar-isi{position:absolute;inset:0;padding:12px 12px 10px;display:flex;flex-direction:column;gap:8px;color:#3B3226;pointer-events:none}
.b3-akhbar-kepala{display:grid;justify-items:center;gap:3px;padding-bottom:7px;border-bottom:4px double #5A4A35;text-align:center}
.b3-akhbar-nama{font-size:1.625rem;font-weight:900;letter-spacing:.08em;line-height:1;color:#2E261C;text-transform:uppercase}
.b3-akhbar-tarikh{font-size:.75rem;font-weight:800;letter-spacing:.04em;color:#6B5A42}
.b3-akhbar-lajur{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;overflow:hidden}
.b3-akhbar-kol{display:flex;flex-direction:column;gap:5px;min-width:0;padding-right:9px;border-right:1px solid rgba(90,74,53,.35)}
.b3-akhbar-kol:last-child{border-right:0;padding-right:0}
.b3-akhbar-tajuk{font-size:.8125rem;font-weight:900;line-height:1.15;color:#2E261C;padding-bottom:4px;margin-bottom:2px;border-bottom:1px solid rgba(90,74,53,.45)}
.b3-akhbar-baris{display:block;flex:none;height:4px;border-radius:2px;background:rgba(80,64,44,.36)}
.b3-akhbar-gambar{display:block;flex:none;height:13%;min-height:42px;margin:1px 0 3px;border:1px solid rgba(80,64,44,.45);border-radius:2px;background:radial-gradient(ellipse at 50% 120%,rgba(80,64,44,.35) 0 38%,transparent 39%),repeating-linear-gradient(135deg,rgba(80,64,44,.18) 0 2px,transparent 2px 5px)}
.b3-akhbar-baris.akhir{margin-bottom:5px}
/* kod tersembunyi: cetakan halus yang kabur di halaman, jelas di bawah kanta */
.b3-kanta-frasa{position:absolute;z-index:1;transform:translate(-50%,-50%);width:max-content;max-width:48px;padding:1px 3px;border-radius:3px;background:#F2E5C3;font-size:6.5px;font-weight:900;line-height:1.22;color:#4A3D2C;text-align:center;overflow-wrap:break-word}
.b3-akhbar-isi:not(.dedah) .b3-kanta-frasa{font-size:4.5px;max-width:40px}
.b3-akhbar-isi:not(.dedah) .b3-kanta-frasa-teks{filter:blur(.6px);opacity:.7}
.b3-kanta.latihan .b3-akhbar-isi:not(.dedah) .b3-kanta-frasa{visibility:hidden}
.b3-akhbar-isi.dedah .b3-kanta-frasa{color:#1F1810;background:#F6EACB}
.b3-akhbar-isi.dedah .b3-kanta-frasa.jumpa{background:#FFE9A8;box-shadow:0 0 0 1px #E8971A}
.b3-akhbar-isi:not(.dedah) .b3-kanta-frasa.siap{visibility:visible;max-width:44%;padding:3px 6px;font-size:12px;line-height:1.2;color:#1B2A5C;background:#FFF1B8;box-shadow:0 0 0 2px #FFF1B8}
.b3-akhbar-isi:not(.dedah) .b3-kanta-frasa.siap .b3-kanta-frasa-teks{filter:none;opacity:1}
.b3-kanta-cop{display:none;position:absolute;left:50%;top:-3px;padding:0 6px;border:2px solid var(--hijau);border-radius:5px;background:rgba(255,255,255,.6);color:var(--hijau);font-size:9px;font-weight:900;letter-spacing:.12em;white-space:nowrap;transform:translate(-50%,-100%) rotate(-8deg)}
.b3-kanta-frasa.siap .b3-kanta-cop{display:block;animation:b3-cop .45s cubic-bezier(.3,1.6,.5,1) both}
.b3-kanta-frasa.siap.dibantu .b3-kanta-cop{border-color:var(--merah-d);color:var(--merah-d)}
@keyframes b3-cop{from{transform:translate(-50%,-100%) rotate(-8deg) scale(1.9);opacity:0}to{transform:translate(-50%,-100%) rotate(-8deg) scale(1);opacity:1}}
/* kawasan kod (butang): bulatan bertitik dalam Belajar, tidak kelihatan dalam Latihan */
.b3-kanta-lapis{position:absolute;inset:0;z-index:2;pointer-events:none}
.b3-kanta-titik{position:absolute;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;pointer-events:auto;background:none}
.b3-kanta-titik::before{content:"";position:absolute;inset:0;border-radius:50%;border:2.5px dashed rgba(27,42,92,.42);background:rgba(255,255,255,.12);animation:b3-nafas 2.6s ease-in-out infinite}
.b3-kanta-titik.jumpa::before{border-style:solid;border-color:var(--emas-d)}
.b3-kanta-titik:hover::before{border-color:rgba(27,42,92,.7);background:rgba(255,255,255,.3)}
.b3-domino-slot.seterus:hover{background:#FFE9A8}
.b3-dail-buka:not([disabled]):hover,.b3-jam-kunci:hover{filter:brightness(1.05)}
.b3-roda-btn:hover{background:linear-gradient(#fff,#DDE4F4)}
.b3-jam-btn:hover{background:#F7F9FE}
.b3-kanta-titik.siap::before{display:none}
.b3-kanta.latihan .b3-kanta-titik{opacity:0}
.b3-kanta.latihan .b3-kanta-titik::before{animation:none}
.b3-kanta.latihan .b3-kanta-titik:focus-visible{opacity:1}
.b3-kanta.latihan .b3-kanta-titik:focus-visible::before{border:3px solid var(--fokus)}
@keyframes b3-nafas{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
/* kanta */
.b3-kanta-lensa{position:absolute;left:0;top:0;z-index:3;pointer-events:none}
.b3-kanta-kaca{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#F6EACB;box-shadow:inset 0 0 16px rgba(80,58,24,.35)}
.b3-kanta-kaca-dalam{position:absolute;left:0;top:0;transform-origin:0 0}
.b3-kanta-kaca-dalam .b3-akhbar-isi{pointer-events:none}
.b3-kanta-kilau{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.6) 0 9%,rgba(255,255,255,0) 26%),radial-gradient(circle,rgba(255,255,255,0) 64%,rgba(150,190,255,.22) 100%)}
.b3-kanta-bingkai{position:absolute;inset:-8px;border-radius:50%;border:9px solid #2E3A63;box-shadow:inset 0 0 0 2px #7C8BC2,0 0 0 2px #1B2A5C,0 10px 18px rgba(27,42,92,.35);transition:border-color .25s,box-shadow .25s}
.b3-kanta-lensa.jumpa .b3-kanta-bingkai{border-color:#E8971A;box-shadow:inset 0 0 0 2px #FFE57F,0 0 0 2px #A8660A,0 0 0 9px rgba(255,201,51,.38),0 10px 18px rgba(27,42,92,.35)}
.b3-kanta-pemegang{position:absolute;left:84%;top:84%;width:18px;height:66px;margin-left:-9px;border-radius:9px;background:linear-gradient(90deg,#6E3F1B,#C98A4E 45%,#8A5226);box-shadow:0 4px 8px rgba(27,42,92,.3);transform:rotate(-45deg);transform-origin:50% 0}
.b3-kanta-buka{position:absolute;z-index:4;min-height:46px;padding:6px 18px;border-radius:16px;font-size:1rem;box-shadow:0 5px 0 var(--emas-d),0 10px 18px rgba(27,42,92,.28)}
.b3-kanta-buka .ikon{width:20px;height:20px;stroke-width:2.6}
/* kad soalan */
.b3-kanta-soal{grid-area:soal;display:grid;gap:10px;background:#fff;border-radius:22px;padding:14px 16px;box-shadow:var(--bayang)}
.b3-kanta-soal.salah{box-shadow:var(--bayang),inset 0 0 0 3px #E0555D;animation:goncang .4s}
.b3-kanta-soal.betul{box-shadow:var(--bayang),inset 0 0 0 3px var(--hijau)}
.b3-kanta-soal-kepala{display:flex;align-items:center;gap:10px}
.b3-kanta-soal-ikon{flex:none;width:40px;height:40px;border-radius:50%;background:var(--emas);color:var(--ink);display:grid;place-items:center;box-shadow:inset 0 -3px 0 var(--emas-d)}
.b3-kanta-soal-ikon .ikon{width:22px;height:22px;stroke-width:2.6}
.b3-kanta-soal-judul{display:grid;gap:1px;min-width:0}
.b3-kanta-soal-no{font-size:.6875rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-teks)}
.b3-kanta-soal-frasa{font-size:1.125rem;font-weight:900;line-height:1.2}
.b3-kanta-soal-s{font-size:1rem;font-weight:800;line-height:1.35}
.b3-kanta-soal-petunjuk{font-size:.875rem;font-weight:700;line-height:1.4;color:var(--teal-teks);background:#E7F7F4;border-radius:12px;padding:8px 10px}
.b3-kanta-pilih{grid-template-columns:minmax(0,1fr);gap:8px}
.b3-kanta-senarai{grid-area:senarai;display:grid;gap:6px;align-content:start}
.b3-kanta-senarai:empty{display:none}
.b3-kanta-senarai li{display:grid;gap:2px;padding:8px 12px;border-radius:14px;background:rgba(255,255,255,.95);box-shadow:var(--lip);font-size:.875rem;line-height:1.35}
.b3-kanta-senarai li b{font-weight:900;color:var(--betul-teks)}
.b3-kanta-senarai li span{font-weight:700;color:var(--ink2)}
.b3-kanta-senarai li.dibantu b{color:var(--salah-teks)}
.b3-kanta-senarai li.masuk{animation:lompat .35s ease-out}
/* telefon: kad soalan menjadi helaian bawah */
body.mod-telefon .b3-kanta-soal{position:fixed;left:0;right:0;bottom:0;z-index:40;margin:0 auto;max-width:560px;max-height:88vh;overflow-y:auto;border-radius:24px 24px 0 0;padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px));box-shadow:0 -12px 30px rgba(14,24,64,.35);transform:translateY(105%);transition:transform .45s cubic-bezier(.2,.9,.3,1.04)}
body.mod-telefon .b3-kanta-soal.buka{transform:none}
body.mod-telefon .b3-kanta.soal-buka .b3-akhbar::after{content:"";position:absolute;inset:0;z-index:5;background:rgba(14,24,64,.28)}
/* lebar */
body.mod-lebar .b2-main.b2-j-kanta .main-badan{top:86px;bottom:14px;align-content:stretch}
body.mod-lebar .b2-p-kanta{height:100%;min-height:0;grid-template-rows:minmax(0,1fr);align-content:stretch}
body.mod-lebar .b3-kanta{height:100%;min-height:0;grid-template-columns:404px minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr);grid-template-areas:"akhbar kad" "akhbar bisik" "akhbar soal" "akhbar senarai";column-gap:18px;row-gap:10px;align-items:start}
body.mod-lebar .b3-akhbar{height:100%;min-height:0;align-self:stretch}
body.mod-lebar .b3-kanta .b2-kad-isi{font-size:1.0625rem}
body.mod-lebar .b3-kanta.soal-buka > .bisik,body.mod-lebar .b3-kanta.soal-buka .b3-kanta-senarai,body.mod-lebar .b3-kanta.soal-buka .b3-kanta-kadbaris .b2-kad-isi{display:none}
body.mod-lebar .b3-kanta.soal-buka .b3-kanta-kadbaris .b2-kad{padding-top:12px;padding-bottom:12px}
body.mod-lebar .b3-kanta-soal{padding:12px 14px;gap:8px}
body.mod-lebar .b3-kanta-soal .b3-op{min-height:48px}
body.mod-lebar .b3-kanta-senarai{max-height:100%;overflow-y:auto;padding:2px 2px 6px}
body.mod-lebar .b3-akhbar-nama{font-size:1.875rem}
body.mod-lebar .b3-akhbar-tajuk{font-size:.875rem}
body.mod-lebar .b3-akhbar-baris{height:4.5px}
body.mod-lebar .b3-kanta-titik{width:74px;height:74px;margin:-37px 0 0 -37px}
body.mod-lebar .b3-kanta-frasa{max-width:54px}
body.mod-lebar .b2-p-kanta > .b2-rumus{align-self:center}

/* =====================================================================================
   3.2 RANTAI DOMINO
   ===================================================================================== */
.b3-domino{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.b3-domino .b2-kad-isi{font-size:1.0625rem}
.b3-domino-meja{position:relative;display:grid;gap:8px;padding:10px 10px 6px;border-radius:22px;background:linear-gradient(#FFF8E6,#F4E3BE);box-shadow:var(--bayang);transition:box-shadow .2s}
.b3-domino-meja.sasar{box-shadow:var(--bayang),inset 0 0 0 3px var(--emas)}
.b3-domino-rak{position:relative;padding-bottom:13px}
.b3-domino-rak::after{content:"";position:absolute;left:-6px;right:-6px;bottom:0;height:14px;border-radius:6px;background:linear-gradient(#C98A4E,#8A5226);box-shadow:0 4px 0 #6E3F1B}
.b3-domino-baris{position:relative;z-index:1;display:flex;align-items:flex-end;gap:var(--g,10px)}
.b3-domino-sel{position:relative;flex:none;width:var(--w,80px);display:flex;flex-direction:column;align-items:center;gap:5px}
.b3-domino-kilat{display:grid;place-items:center;min-height:30px;width:calc(100% + var(--g,10px));padding:0 2px;border-radius:9px;background:var(--ink);color:#fff;font-size:.6875rem;font-weight:900;line-height:1.05;text-align:center;opacity:0;transform:translateY(6px) scale(.7)}
.b3-domino-kilat.label{opacity:1;transform:none;background:var(--merah-d);font-size:.6875rem;letter-spacing:.04em}
.b3-domino-kilat.nyala{animation:b3-kilat .62s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes b3-kilat{0%{opacity:0;transform:translateY(8px) scale(.6);background:var(--emas);color:var(--ink)}55%{opacity:1;transform:scale(1.18);background:var(--emas);color:var(--ink)}100%{opacity:1;transform:none;background:var(--ink);color:#fff}}
.b3-domino-slot{position:relative;display:grid;place-items:center;width:var(--w,80px);height:var(--h,150px);padding:0;border-radius:12px;border:2.5px dashed rgba(27,42,92,.28);background:rgba(255,255,255,.5);transition:background-color .2s,border-color .2s,box-shadow .2s}
.b3-domino-slot-no{font-size:1.375rem;font-weight:900;color:rgba(27,42,92,.28)}
.b3-domino-slot.seterus{border-color:var(--emas-d);background:#FFF6D8;box-shadow:0 0 0 4px rgba(255,201,51,.3)}
.b3-domino-slot.seterus .b3-domino-slot-no{color:#A8660A}
.b3-domino.ada-pilih .b3-domino-slot.seterus{background:#FFE9A8;box-shadow:0 0 0 6px rgba(255,201,51,.45)}
.b3-domino-slot.salah{border-color:#E0555D;background:var(--salah-bg);box-shadow:0 0 0 4px rgba(249,79,85,.3);animation:goncang .4s}
.b3-domino-slot.isi{border:0;background:none;box-shadow:none}
.b3-domino-slot.isi .b3-domino-slot-no{display:none}
.b3-domino-slot[disabled]{cursor:default}
.b3-domino-sendal{position:relative;z-index:1;flex:none;align-self:flex-end;width:var(--sendal,20px);height:var(--sendal-h,24px);border-radius:6px 6px 2px 2px;background:linear-gradient(#A8672F,#6E3F1B);box-shadow:inset 0 2px 0 #C98A4E}
/* muka jubin: bahagian teks | garis | tarikh (atau titik). Berdiri = muka diputar -90 darjah. */
.b3-domino-muka{display:flex;align-items:stretch;overflow:hidden;border-radius:11px;background:linear-gradient(#FFFEF8,#F3ECD9);box-shadow:inset 0 0 0 2px #1B2A5C;color:var(--ink);text-align:left}
.b3-domino-teks{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:6px 8px;font-size:.9375rem;font-weight:800;line-height:1.18;overflow:hidden;overflow-wrap:break-word}
.b3-domino-garis{flex:none;width:2px;margin:9px 0;background:rgba(27,42,92,.3)}
.b3-domino-atas{flex:none;width:28%;max-width:72px;min-width:40px;display:grid;place-items:center;padding:4px;background:#FFF1BF;box-shadow:inset -2px 0 0 #1B2A5C}
.b3-domino-tarikh{font-size:.8125rem;font-weight:900;line-height:1.1;text-align:center;color:#8A4B00}
.b3-domino-mata{display:grid;grid-template-columns:repeat(3,7px);gap:3px;transform:rotate(45deg)}
.b3-domino-mata i{width:7px;height:7px;border-radius:50%;background:var(--ink)}
.b3-domino-diri{position:absolute;left:0;top:0;width:100%;height:100%;display:block;transform-origin:100% 100%;filter:drop-shadow(2px 3px 0 rgba(27,42,92,.35))}
.b3-domino-diri .b3-domino-muka{position:absolute;left:50%;top:50%;width:var(--h,150px);height:var(--w,80px);transform:translate(-50%,-50%) rotate(-90deg)}
.b3-domino-diri .b3-domino-teks{font-size:.875rem;line-height:1.15;padding:5px 7px}
.b3-domino-diri .b3-domino-atas{width:25%}
.b3-domino-diri.pencetus .b3-domino-muka{background:linear-gradient(#FFF1F1,#FFDADC);box-shadow:inset 0 0 0 2px var(--merah-d)}
.b3-domino-diri.pencetus .b3-domino-atas{background:var(--merah);box-shadow:inset -2px 0 0 var(--merah-d)}
.b3-domino-diri.pencetus .b3-domino-tarikh{color:#fff}
.b3-domino-diri.pencetus .b3-domino-mata i{background:#fff}
.b3-domino-diri.dibantu .b3-domino-muka{box-shadow:inset 0 0 0 3px var(--merah-d)}
/* dulang: jubin baring (jalur tarikh di atas, teks penuh di bawah) */
.b3-domino-muka.baring{flex-direction:column}
.b3-domino-muka.baring .b3-domino-atas{width:auto;max-width:none;min-width:0;min-height:24px;padding:2px 8px;justify-items:start;box-shadow:inset 0 -2px 0 #1B2A5C}
.b3-domino-muka.baring .b3-domino-tarikh{font-size:.8125rem}
.b3-domino-muka.baring .b3-domino-mata{transform:none;grid-template-columns:repeat(3,6px);gap:5px}
.b3-domino-muka.baring .b3-domino-mata i{width:6px;height:6px}
.b3-domino-muka.baring .b3-domino-teks{align-items:flex-start;padding:6px 9px 8px}
.b3-domino-dulang{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px;border-radius:20px;background:rgba(27,42,92,.1);box-shadow:inset 0 2px 6px rgba(27,42,92,.16)}
.b3-domino-jubin{position:relative;display:block;min-height:64px;padding:0;border-radius:12px;touch-action:none;transition:transform .2s ease,opacity .2s ease}
.b3-domino-jubin .b3-domino-muka{min-height:64px;height:100%;box-shadow:inset 0 0 0 2px #1B2A5C,0 4px 0 #1B2A5C}
.b3-domino-jubin:hover .b3-domino-muka{background:#fff}
.b3-domino-jubin:active{transform:translateY(2px)}
.b3-domino-jubin.dipilih{transform:translateY(-5px)}
.b3-domino-jubin.dipilih .b3-domino-muka{background:#FFFBEA;box-shadow:inset 0 0 0 3px var(--emas-d),0 7px 0 var(--emas-d),0 0 0 4px rgba(255,201,51,.45)}
.b3-domino-jubin.kosong{visibility:hidden}
.b3-domino-jubin.salah{animation:goncang .4s}
.b3-domino-jubin.salah .b3-domino-muka{background:var(--salah-bg);color:var(--salah-teks);box-shadow:inset 0 0 0 3px #E0555D,0 4px 0 var(--merah-d)}
.b3-domino-jubin.kilat .b3-domino-muka{background:var(--betul-bg);box-shadow:inset 0 0 0 3px var(--hijau),0 4px 0 #1E9E63}
.b3-domino-hantu.angkat{filter:drop-shadow(0 14px 12px rgba(27,42,92,.3))}
.b3-domino-hantu.salah .b3-domino-muka{background:var(--salah-bg);color:var(--salah-teks);box-shadow:inset 0 0 0 3px #E0555D}
.b3-domino-hantu.dibantu .b3-domino-muka{box-shadow:inset 0 0 0 3px var(--merah-d)}
.b3-domino-tolak{justify-self:center;min-width:230px;min-height:66px;font-size:1.5rem;letter-spacing:.05em}
.b3-domino-tolak .ikon{width:28px;height:28px;stroke-width:2.6}
.b3-domino-tangan{position:absolute;z-index:3;left:-12px;top:calc(30px + var(--h,150px) * .32);width:34px;height:34px;border-radius:50%;background:var(--emas);color:var(--ink);display:grid;place-items:center;box-shadow:0 3px 0 var(--emas-d);animation:b3-tolak .45s ease-out forwards}
.b3-domino-tangan .ikon{width:20px;height:20px;stroke-width:2.8}
@keyframes b3-tolak{0%{transform:translateX(-26px);opacity:0}70%{transform:translateX(8px);opacity:1}100%{transform:translateX(3px);opacity:1}}
/* telefon: tarikh menyala di bahagian atas petak (jimat ketinggian) */
body.mod-telefon .b3-domino-kilat{position:absolute;left:50%;top:22px;z-index:6;width:max-content;min-width:0;max-width:none;min-height:0;padding:4px 8px;font-size:.75rem;box-shadow:0 3px 0 rgba(0,0,0,.25);margin-left:0;translate:-50% 0}
body.mod-telefon .b3-domino-kilat.nyala{animation:b3-kilat-hp 1.1s ease-out forwards}
@keyframes b3-kilat-hp{0%{opacity:0;transform:translateY(8px) scale(.6);background:var(--emas);color:var(--ink)}25%{opacity:1;transform:scale(1.15);background:var(--emas);color:var(--ink)}70%{opacity:1;transform:none;background:var(--ink);color:#fff}100%{opacity:0;transform:translateY(-10px);background:var(--ink);color:#fff}}
body.mod-telefon .b3-domino-kilat.label{display:none}
body.mod-telefon .b3-domino-meja{padding-top:8px}
body.mod-telefon .b3-domino .b2-kad-isi{font-size:1rem}
body.mod-telefon .b3-domino-jubin .b3-domino-teks{font-size:.875rem;line-height:1.22}
body.mod-telefon .b3-domino-diri .b3-domino-teks{font-size:.8125rem;line-height:1.12;padding:4px 6px}
/* lebar */
body.mod-lebar .b2-main.b2-j-domino .main-badan{top:84px;bottom:12px;align-content:safe center;overflow-y:auto;overflow-x:hidden}
body.mod-lebar .b3-domino{gap:9px}
body.mod-lebar .b3-domino .b2-kad-isi{font-size:1.0625rem}
body.mod-lebar .b3-domino-meja{padding:8px 16px 6px}
body.mod-lebar .b3-domino-kilat{font-size:.75rem;min-height:26px}
body.mod-lebar .b3-domino-diri .b3-domino-teks{font-size:.9375rem}
body.mod-lebar .b3-domino-dulang{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:9px 10px}
body.mod-lebar .b3-domino-jubin,body.mod-lebar .b3-domino-jubin .b3-domino-muka{min-height:70px}
body.mod-lebar .b3-domino-jubin .b3-domino-teks{font-size:.9375rem;line-height:1.22}

/* =====================================================================================
   3.3 PAPAN SUIS
   ===================================================================================== */
.b3-suis{display:grid;gap:10px}
.b3-suis .b2-kad-isi{font-size:1.0625rem}
.b3-suis-bingkai{position:relative}
.b3-suis-papan{position:relative;padding:8px 8px 12px;border-radius:22px;background:linear-gradient(160deg,#8A5226,#6E3F1B 55%,#5A3316);box-shadow:0 6px 0 #4A2A12,0 14px 26px rgba(27,42,92,.3),inset 0 0 0 3px #A8672F;transition:transform .45s cubic-bezier(.3,1,.4,1),opacity .45s ease}
.b3-suis-papan.keluar{transform:translateX(-70px);opacity:0}
.b3-suis-papan.masuk-kanan{transform:translateX(70px);opacity:0;transition:none}
.b3-suis-plat{display:flex;align-items:center;justify-content:center;gap:10px;width:max-content;margin:0 auto 8px;padding:3px 14px;border-radius:8px;background:linear-gradient(#F2D27A,#C99A3A);color:#4A2A12;font-size:.75rem;font-weight:900;letter-spacing:.14em;box-shadow:inset 0 -2px 0 rgba(0,0,0,.2),0 2px 0 rgba(0,0,0,.25)}
.b3-suis-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);align-items:start}
.b3-suis-lajur{display:grid;gap:7px;align-content:start;min-width:0}
.b3-suis-lajur.kiri{grid-column:1}
.b3-suis-tengah{grid-column:2}
.b3-suis-lajur.kanan{grid-column:3}
.b3-suis-kabel{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.b3-suis-soket{position:relative;display:flex;align-items:center;gap:7px;width:100%;min-height:54px;padding:7px 8px;border-radius:14px;background:#FFF6E0;color:var(--ink);text-align:left;box-shadow:0 4px 0 #3E2410,inset 0 0 0 2px #E8D3A8;touch-action:none;transition:transform .15s ease,background-color .2s,box-shadow .2s}
.b3-suis-soket.kanan{touch-action:manipulation}
.b3-suis-teks{flex:1 1 auto;min-width:0;display:grid;gap:2px}
.b3-suis-label{font-size:.9375rem;font-weight:900;line-height:1.2;overflow-wrap:break-word}
.b3-suis-petunjuk{font-size:.8125rem;font-weight:700;line-height:1.25;color:#8A5226}
.b3-suis-jek{flex:none;display:grid;justify-items:center;gap:5px;width:24px}
.b3-suis-lampu{display:block;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#8A6A3A,#4A3418);box-shadow:inset 0 -2px 0 rgba(0,0,0,.35),0 0 0 2px #2E1B0A;transition:background .3s,box-shadow .3s}
.b3-suis-lampu.nyala{background:radial-gradient(circle at 35% 35%,#FFF9D6,#FFC933 55%,#E8971A);box-shadow:0 0 0 2px #2E1B0A,0 0 12px 4px rgba(255,201,51,.75)}
.b3-suis-lubang{display:block;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle,#0E0A06 0 36%,#D8B25A 38% 62%,#8A6A2A 64%);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.b3-suis-soket:hover:not([disabled]){background:#FFFBEF}
.b3-suis-soket:active:not([disabled]){transform:translateY(2px)}
.b3-suis-soket.dipilih{background:#FFF1BF;box-shadow:0 4px 0 #3E2410,inset 0 0 0 3px var(--emas)}
.b3-suis-soket.dipilih .b3-suis-lampu{background:radial-gradient(circle at 35% 35%,#FFE9A8,#E8971A);box-shadow:0 0 0 2px #2E1B0A,0 0 8px 2px rgba(232,151,26,.6)}
.b3-suis-soket.dekat{background:#FFF1BF;transform:scale(1.03)}
.b3-suis-soket.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}
.b3-suis-soket.salah .b3-suis-petunjuk{color:var(--salah-teks)}
.b3-suis-soket.kilat{background:var(--betul-bg);box-shadow:0 4px 0 #1E9E63,inset 0 0 0 3px var(--hijau)}
.b3-suis-soket.bersambung{background:#EAF8EF;box-shadow:0 4px 0 #3E2410,inset 0 0 0 2px #9FE0BF;cursor:default}
.b3-suis-soket.bersambung .b3-suis-label{color:var(--betul-teks)}
.b3-suis-soket.bersambung.dibantu{background:#FDEBEC;box-shadow:0 4px 0 #3E2410,inset 0 0 0 2px #F7B5BA}
.b3-suis-soket.bersambung.dibantu .b3-suis-label{color:var(--salah-teks)}
.b3-suis-soket.kanan .b3-no{order:3}
.b3-suis-papan.kelip .b3-suis-lampu.nyala{animation:b3-kelip .5s ease-in-out 2}
@keyframes b3-kelip{0%,100%{filter:none}50%{filter:brightness(1.6);box-shadow:0 0 0 2px #2E1B0A,0 0 18px 8px rgba(255,201,51,.9)}}
.b3-kabel-luar{stroke-width:8;stroke-linecap:round}
.b3-kabel-dalam{stroke-width:4.5;stroke-linecap:round}
.b3-kabel.dibantu .b3-kabel-dalam{stroke-dasharray:9 6}
.b3-kabel-palam{filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
.b3-suis-sepanduk{position:absolute;left:50%;top:45%;z-index:8;padding:12px 26px;border-radius:18px;background:var(--ink);color:#FFE57F;font-size:1.25rem;font-weight:900;letter-spacing:.05em;white-space:nowrap;box-shadow:var(--bayang);transform:translate(-50%,-50%);pointer-events:none}
.b3-suis-sepanduk.lalu{animation:b3-sepanduk 1.45s ease-in-out both}
@keyframes b3-sepanduk{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}78%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.95)}}
/* telefon: lajur lebih lebar, celah kabel lebih sempit */
body.mod-telefon .b3-suis-papan{padding:8px 6px 12px}
body.mod-telefon .b3-suis-grid{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr)}
body.mod-telefon .b3-suis-soket{gap:5px;padding:6px 6px 6px 8px}
body.mod-telefon .b3-suis-soket.kanan{padding:6px 8px 6px 6px}
body.mod-telefon .b3-suis-label{font-size:.875rem;line-height:1.2}
body.mod-telefon .b3-suis-jek{width:20px}
body.mod-telefon .b3-suis-lubang{width:18px;height:18px}
body.mod-telefon .b3-kabel-luar{stroke-width:7}
body.mod-telefon .b3-kabel-dalam{stroke-width:4}
/* lebar */
body.mod-lebar .b2-main.b2-j-suis .main-badan{top:84px;bottom:12px;align-content:safe center;overflow-y:auto;overflow-x:hidden}
body.mod-lebar .b3-suis .b2-kad-isi{font-size:1.1875rem}
body.mod-lebar .b3-suis-papan{padding:10px 12px 14px}
body.mod-lebar .b3-suis-grid{grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr)}
body.mod-lebar .b3-suis-soket{min-height:52px;padding:7px 10px;gap:9px}
body.mod-lebar .b3-suis-soket .b3-no{display:grid;visibility:hidden;place-items:center;flex:none;width:24px;height:24px;border-radius:8px;background:#EEF2FB;color:var(--ink2);font-size:.8125rem;font-weight:900;box-shadow:0 2px 0 #CBD5EC}
body.mod-lebar .b3-suis-soket[data-no] .b3-no{visibility:visible}
body.mod-lebar .b3-suis-soket.bersambung .b3-no{display:none}
body.mod-lebar .b3-kabel-luar{stroke-width:10}
body.mod-lebar .b3-kabel-dalam{stroke-width:5.5}
body.mod-lebar .b2-p-suis > .b2-rumus .b2-rumus-tokoh{grid-template-columns:1fr 1fr}

/* =====================================================================================
   3.4 PETI RAHSIA DAN JAM TOKYO
   ===================================================================================== */
.b3-dail{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.b3-dail-tahun{grid-template-areas:"kad" "peti" "buka" "soal" "bisik"}
.b3-dail-jam{grid-template-areas:"kad" "jam" "kunci" "bisik" "garis"}
.b3-dail-kadbaris{grid-area:kad}
.b3-dail > .bisik{grid-area:bisik}
.b3-dail .b2-kad-isi{font-size:1.125rem}
.b3-dail-klu{align-content:start}
.b3-dail-petunjuk{margin-top:4px;font-size:.875rem;font-weight:700;line-height:1.4;color:var(--teal-teks);background:#E7F7F4;border-radius:12px;padding:7px 10px}
.b3-dail-klu.betul .b3-dail-petunjuk,.b3-dail-klu.salah .b3-dail-petunjuk{background:rgba(255,255,255,.7);color:inherit}
/* peti besi */
.b3-peti-bekas{grid-area:peti;display:grid;justify-items:center;padding:4px 0 16px;perspective:760px;perspective-origin:30% 50%}
.b3-peti{position:relative;width:300px;height:318px;border-radius:22px;background:linear-gradient(#5F6B8C,#3E4866);box-shadow:0 10px 0 #2A3350,0 20px 30px rgba(27,42,92,.35),inset 0 0 0 3px #7D8AAE}
.b3-peti-kaki{position:absolute;left:26px;right:26px;bottom:-16px;height:10px;background:linear-gradient(90deg,#2A3350 0 40px,transparent 40px calc(100% - 40px),#2A3350 calc(100% - 40px));border-radius:0 0 6px 6px}
.b3-peti-dalam{position:absolute;inset:14px;display:grid;padding:14px;border-radius:12px;background:linear-gradient(#232B47,#161C35);box-shadow:inset 0 8px 18px rgba(0,0,0,.55)}
.b3-dokumen{position:relative;display:grid;align-content:start;gap:8px;padding:26px 14px 12px;border-radius:8px;background:linear-gradient(#FFFBF0,#FDF1D6);box-shadow:0 5px 12px rgba(0,0,0,.4);opacity:0;transform:rotate(-2deg) translateY(12px)}
.b3-peti.terbuka .b3-dokumen{animation:b3-dok .55s .5s ease-out forwards}
@keyframes b3-dok{to{opacity:1;transform:rotate(-2deg)}}
.b3-dokumen-cop{position:absolute;right:10px;top:8px;padding:0 8px;border:2px solid var(--merah-d);border-radius:6px;color:var(--merah-d);font-size:.6875rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;transform:rotate(7deg)}
.b3-dokumen-tahun{font-size:2.125rem;font-weight:900;line-height:1;color:var(--ink)}
.b3-dokumen-teks{font-size:.9375rem;font-weight:700;line-height:1.4;color:#3B3226}
.b3-peti-pintu{position:absolute;inset:14px;display:grid;grid-template-rows:auto 1fr;justify-items:center;align-items:center;gap:6px;padding:14px 10px 8px;border-radius:12px;background:linear-gradient(145deg,#A7B2CE,#7A87AA 55%,#636F93);box-shadow:inset 0 0 0 3px #C3CCE2,inset 0 -6px 0 rgba(0,0,0,.18),4px 0 10px rgba(0,0,0,.25);transform-origin:0 50%;transition:transform .9s cubic-bezier(.35,.1,.25,1)}
.b3-peti-pintu > *{transition:opacity .15s ease}
.b3-peti.terbuka .b3-peti-pintu{transform:rotateY(-104deg)}
.b3-peti.terbuka .b3-peti-pintu > *{opacity:0;transition:opacity .12s ease .38s}
.b3-peti-engsel{position:absolute;left:-8px;width:12px;height:40px;border-radius:5px;background:linear-gradient(90deg,#3E4866,#A7B2CE,#3E4866)}
.b3-peti-engsel.atas{top:34px}.b3-peti-engsel.bawah{bottom:34px}
.b3-peti-rivet{position:absolute;inset:7px;pointer-events:none;background:radial-gradient(circle at 5px 5px,#E3E9F7 2.5px,transparent 3px),radial-gradient(circle at calc(100% - 5px) 5px,#E3E9F7 2.5px,transparent 3px),radial-gradient(circle at 5px calc(100% - 5px),#E3E9F7 2.5px,transparent 3px),radial-gradient(circle at calc(100% - 5px) calc(100% - 5px),#E3E9F7 2.5px,transparent 3px)}
.b3-peti-panel{display:grid;justify-items:center;gap:6px;padding:8px 8px 8px;border-radius:14px;background:linear-gradient(#2A3350,#1B2240);box-shadow:inset 0 2px 0 rgba(255,255,255,.12),0 3px 0 rgba(0,0,0,.25)}
.b3-peti-label{font-size:.6875rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#C9D3F0}
.b3-peti-roda{display:flex;gap:6px}
.b3-roda{display:grid;justify-items:center;gap:4px}
.b3-roda-btn{width:52px;height:40px;border-radius:11px;background:linear-gradient(#F4F7FD,#C9D3F0);color:var(--ink);display:grid;place-items:center;box-shadow:0 3px 0 #6F7DA8}
.b3-roda-btn .ikon{width:22px;height:22px;stroke-width:3}
.b3-roda-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #6F7DA8}
.b3-roda-tingkap{position:relative;display:block;width:52px;height:62px;overflow:hidden;border-radius:10px;background:linear-gradient(#070B1E,#1B2A5C 28%,#1B2A5C 72%,#070B1E);box-shadow:inset 0 0 0 2px #0B1026;touch-action:none;cursor:ns-resize;transition:box-shadow .2s}
.b3-roda-jalur{position:absolute;left:0;right:0;top:50%;height:138px;margin-top:-69px;display:grid;grid-template-rows:repeat(3,46px);transition:transform .26s cubic-bezier(.3,1.3,.5,1)}
.b3-roda-jalur i{display:grid;place-items:center;font-style:normal;font-size:1.125rem;font-weight:900;color:rgba(255,255,255,.3)}
.b3-roda-jalur i.kini{font-size:1.875rem;color:#FFE57F;text-shadow:0 0 8px rgba(255,201,51,.45)}
.b3-roda.betul .b3-roda-tingkap{box-shadow:inset 0 0 0 3px #3DDC84,0 0 10px rgba(61,220,132,.5)}
.b3-roda.betul .b3-roda-jalur i.kini{color:#9FF0C2}
.b3-roda.salah .b3-roda-tingkap{background:linear-gradient(#2A060A,#7A1620 28%,#7A1620 72%,#2A060A);box-shadow:inset 0 0 0 3px #F94F55,0 0 10px rgba(249,79,85,.6)}
.b3-roda.salah .b3-roda-jalur i.kini{color:#FFD0D2}
.b3-roda.kilat .b3-roda-tingkap{box-shadow:inset 0 0 0 3px var(--emas),0 0 12px rgba(255,201,51,.6)}
.b3-dail.papan-kekunci .b3-roda.aktif .b3-roda-tingkap{outline:3px solid var(--emas);outline-offset:2px}
.b3-peti-papar{min-width:124px;padding:3px 10px;border-radius:8px;background:#0B1026;color:#7CF0B0;font-size:.8125rem;font-weight:900;letter-spacing:.2em;text-align:center;box-shadow:inset 0 0 0 2px #2A3350}
.b3-peti-papar.salah{color:#FF8A8F;animation:goncang .4s}
.b3-peti-papar.buka{color:#FFE57F}
.b3-peti-tombol{position:relative;display:block;width:72px;height:72px;border-radius:50%;background:radial-gradient(circle,#DDE4F4 0 15%,#6F7C9F 16% 21%,transparent 22%);transition:transform .7s cubic-bezier(.3,1.2,.4,1)}
.b3-peti-tombol i{position:absolute;left:50%;top:50%;width:8px;height:72px;margin:-36px 0 0 -4px;border-radius:4px;background:linear-gradient(90deg,#7D8AAE,#E3E9F7,#7D8AAE)}
.b3-peti-tombol i:nth-child(2){transform:rotate(60deg)}
.b3-peti-tombol i:nth-child(3){transform:rotate(120deg)}
.b3-peti-tombol b{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFE57F,#E8971A);box-shadow:0 2px 0 #A8660A}
.b3-peti-tombol.pusing{transform:rotate(300deg)}
.b3-dail-buka{grid-area:buka;justify-self:center;min-width:210px}
.b3-dail-soal{grid-area:soal;display:grid;gap:8px;padding:12px 14px;border-radius:20px;background:#fff;box-shadow:var(--bayang)}
.b3-dail-soal-label{font-size:.6875rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-teks)}
.b3-dail-soal-s{font-size:1rem;font-weight:900;line-height:1.35}
.b3-dail-pilih{grid-template-columns:minmax(0,1fr);gap:8px}
.b3-dail-soal.salah{box-shadow:var(--bayang),inset 0 0 0 3px #E0555D;animation:goncang .4s}
.b3-dail-soal.betul{box-shadow:var(--bayang),inset 0 0 0 3px var(--hijau)}
/* jam Tokyo */
.b3-jam-bekas{grid-area:jam;display:grid;justify-items:center;gap:10px}
.b3-jam{position:relative;width:min(248px,66vw);aspect-ratio:1/1}
.b3-jam::after{content:"";position:absolute;inset:2px;border-radius:50%;pointer-events:none;transition:box-shadow .25s}
.b3-jam.salah{animation:goncang .4s}
.b3-jam.salah::after{box-shadow:0 0 0 6px #F94F55,0 0 20px 6px rgba(249,79,85,.55)}
.b3-jam.dikunci::after{box-shadow:0 0 0 6px var(--hijau),0 0 20px 6px rgba(26,154,92,.45)}
.b3-jam.kilat::after{box-shadow:0 0 0 6px var(--emas),0 0 20px 6px rgba(255,201,51,.55)}
.b3-jam-svg{display:block;width:100%;height:100%;touch-action:none;cursor:grab;filter:drop-shadow(0 8px 10px rgba(27,42,92,.3))}
.b3-jam.seret .b3-jam-svg{cursor:grabbing}
.b3-jarum{transform-origin:110px 110px}
.b3-jam.lancar .b3-jarum{transition:transform .26s cubic-bezier(.3,1.35,.5,1)}
.b3-jam.lambat .b3-jarum{transition:transform .95s cubic-bezier(.3,1,.4,1)}
.b3-jam.dikunci .b3-jarum-minit path{stroke:var(--hijau)}
.b3-jam.dikunci .b3-jarum-minit circle{fill:var(--hijau)}
.b3-jam-cop{position:absolute;right:-6px;top:6px;padding:2px 10px;border:3px solid var(--hijau);border-radius:10px;background:rgba(255,255,255,.9);color:var(--hijau);font-size:1rem;font-weight:900;letter-spacing:.04em;white-space:nowrap;opacity:0;transform:rotate(10deg) scale(1.6);pointer-events:none}
.b3-jam-cop.nyala{animation:b3-cop-jam .45s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes b3-cop-jam{to{opacity:1;transform:rotate(10deg) scale(1)}}
.b3-jam-bacaan{display:flex;align-items:baseline;gap:8px;padding:4px 14px;border-radius:14px;background:var(--ink);color:#fff;box-shadow:var(--lip)}
.b3-jam-bacaan-masa{min-width:3.3em;font-size:1.5rem;font-weight:900;text-align:center;color:#FFE57F}
.b3-jam-bacaan span{font-size:.875rem;font-weight:800;color:#DDE6FF}
.b3-jam-kawal{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.b3-jam-kumpulan{display:flex;align-items:center;gap:4px;padding:4px;border-radius:18px;background:rgba(255,255,255,.94);box-shadow:var(--lip)}
.b3-jam-btn{width:48px;height:48px;border-radius:14px;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 3px 0 rgba(27,42,92,.22),inset 0 0 0 2px var(--garis);touch-action:manipulation;user-select:none;-webkit-user-select:none}
.b3-jam-btn .ikon{width:22px;height:22px;stroke-width:3}
.b3-jam-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(27,42,92,.22),inset 0 0 0 2px var(--garis)}
.b3-jam-kawal-label{min-width:50px;text-align:center;font-size:.875rem;font-weight:900}
.b3-jam-kunci{grid-area:kunci;justify-self:center;min-width:220px}
.b3-jam-garis{grid-area:garis;display:flex;flex-wrap:wrap;gap:6px}
.b3-jam-garis:empty{display:none}
.b3-jam-garis li{display:flex;align-items:center;gap:7px;padding:5px 12px 5px 5px;border-radius:15px;background:rgba(255,255,255,.95);box-shadow:var(--lip);font-size:.875rem;font-weight:800;line-height:1.25}
.b3-jam-garis li.masuk{animation:lompat .35s ease-out}
.b3-jam-garis li.dibantu .b3-tarikh-cip{background:var(--merah-d)}
/* lebar */
body.mod-lebar .b2-main.b2-j-dail .main-badan{top:84px;bottom:12px;align-content:safe center;overflow-y:auto;overflow-x:hidden}
body.mod-lebar .b3-dail-tahun{grid-template-columns:330px minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr);grid-template-areas:"peti kad" "peti buka" "peti soal" "peti bisik";column-gap:22px;row-gap:12px;align-items:start}
body.mod-lebar .b3-dail-tahun .b3-peti-bekas{align-self:center;padding:0 0 18px}
body.mod-lebar .b3-dail-tahun .b3-dail-buka{justify-self:start}
body.mod-lebar .b3-dail-jam{grid-template-columns:300px minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr);grid-template-areas:"jam kad" "jam kunci" "jam bisik" "jam garis";column-gap:22px;row-gap:12px;align-items:start}
body.mod-lebar .b3-dail-jam .b3-jam-bekas{align-self:center}
body.mod-lebar .b3-dail-jam .b3-jam{width:268px}
body.mod-lebar .b3-dail-jam .b3-jam-kunci{justify-self:start}
body.mod-lebar .b3-dail .b2-kad-isi{font-size:1.3125rem}
body.mod-lebar .b3-peti{width:320px;height:336px}
body.mod-lebar .b3-jam-garis{flex-direction:column;flex-wrap:nowrap;align-items:flex-start}

/* ===== Telefon pendek (375 x 667) ===== */
@media (max-height:720px){
  body.mod-telefon .b3-akhbar{min-height:318px}
  body.mod-telefon .b3-domino-jubin,body.mod-telefon .b3-domino-jubin .b3-domino-muka{min-height:60px}
  body.mod-telefon .b3-domino-jubin .b3-domino-teks{font-size:.875rem;padding:4px 7px}
  body.mod-telefon .b3-suis-soket{min-height:48px;padding:6px 7px}
  body.mod-telefon .b3-peti{width:286px;height:300px}
  body.mod-telefon .b3-roda-tingkap{height:56px}
  body.mod-telefon .b3-roda-btn{height:38px}
  body.mod-telefon .b3-peti-tombol{width:60px;height:60px}
  body.mod-telefon .b3-peti-tombol i{height:60px;margin-top:-30px}
  body.mod-telefon .b3-jam{width:min(214px,58vw)}
}
@media (max-width:370px){
  .b3-roda-btn,.b3-roda-tingkap{width:48px}
  .b3-suis-label{font-size:.875rem}
}