/* ===== Babak · gaya pakej enjin Bab 1 versi baharu, kumpulan 1c (js/pakej-bab-01-1c.js): nakhoda, waadat, nobat.
   Awalan kelas, keyframes dan pemboleh ubah: b1c-. 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)).
   Animasi perlahan; keadaan akhir untuk prefers-reduced-motion di hujung fail. Palet Babak (SPEC-BAB-01-BAHARU §1.14). ===== */

/* ---------- Bersama ---------- */
.b2-j-nakhoda .b2-kad-no,.b2-j-waadat .b2-kad-no,.b2-j-nobat .b2-kad-no{font-size:.875rem;letter-spacing:.04em}
.b2-j-nakhoda .b2-rujuk-btn,.b2-j-waadat .b2-rujuk-btn,.b2-j-nobat .b2-rujuk-btn{font-size:.875rem;min-height:44px}
.b2-j-nakhoda .b2-rumus-label,.b2-j-waadat .b2-rumus-label,.b2-j-nobat .b2-rumus-label{font-size:.875rem}
.b2-j-nakhoda .b2-rumus-tokoh li,.b2-j-waadat .b2-rumus-tokoh li,.b2-j-nobat .b2-rumus-tokoh li{font-size:.875rem;line-height:1.35;align-content:start}
.b2-j-nakhoda .bisik,.b2-j-waadat .bisik,.b2-j-nobat .bisik{font-size:.9375rem}
.b2-j-nobat .b2-cip-tahun{height:26px;font-size:.875rem}
.b1c-goncang{animation:goncang .4s}
.b1c-op{min-height:52px;font-size:.9375rem;padding:9px 14px}
.b1c-op-teks{min-width:0;overflow-wrap:break-word}
/* kunci baca: pilihan kad baharu pudar lembut selama 650 ms */
.b1c-baca > .op,.b1c-baca > .b1c-wd-plak{opacity:.5}
.b1c-nk-pilih > .op,.b1c-soal-pilih > .op,.b1c-ph-senarai > .op,.b1c-nb-pilih > .op,.b1c-wd-plak{transition:opacity .35s ease,transform .08s ease,box-shadow .08s ease,background-color .12s ease}
.b1c-selesai > .op:not(.betul):not(.kilat):not(.salah){opacity:.5}
.b1c-cip-baris{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%}
.b1c-cip{display:inline-flex;align-items:center;min-height:26px;padding:2px 10px;border-radius:13px;font-size:.875rem;font-weight:900;line-height:1.2}
.b1c-cip-aspek{background:#12998A;color:#fff}
.b1c-cip-fasal{background:#1B2A5C;color:#fff}
.b1c-cip-bantu{background:var(--salah-bg);color:var(--salah-teks);box-shadow:inset 0 0 0 1.5px #F7B5BA}
.b1c-klon-seret{position:absolute!important;z-index:40!important;margin:0!important;pointer-events:none;transition:none!important;animation:none!important;opacity:.96!important;visibility:visible!important;box-shadow:0 16px 28px rgba(27,42,92,.32)!important}
.b1c-rumus-lanjut{display:grid;gap:10px;min-width:0}
.b2-rumus-tokoh li.b1c-rumus-penuh{grid-column:1/-1}
.b1c-rumus-baris{display:grid;gap:3px}
.b1c-rumus-baris > span{position:relative;padding-left:12px}
.b1c-rumus-baris > span::before{content:"";position:absolute;left:1px;top:.5em;width:6px;height:6px;border-radius:50%;background:#12998A}
.b1c-rumus-soal li b{color:var(--ink)}
.b1c-soal-pilih{grid-template-columns:minmax(0,1fr);gap:8px}

/* =====================================================================================
   1.7 NAKHODA
   ===================================================================================== */
.b1c-nakhoda{display:grid;gap:10px;min-width:0}
.b1c-nk-adegan{position:relative;min-width:0;border-radius:22px;overflow:hidden;border:3px solid #fff;background:#9FDCF7;box-shadow:var(--bayang)}
.b1c-nk-svg{display:block;width:100%;height:auto}
.b1c-nk-kad{gap:5px;padding:11px 16px 12px;background:#FFFDF6;box-shadow:var(--bayang),inset 5px 0 0 #12998A}
.b1c-nk-kad.betul{box-shadow:0 5px 0 #1E9E63,inset 0 0 0 3px var(--hijau)}
.b1c-nk-kepala{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.b1c-nk-cip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:2px 11px 2px 5px;border-radius:14px;background:#1B2A5C;color:#fff;font-size:.875rem;font-weight:900;line-height:1.2}
.b1c-nk-cip[hidden]{display:none}
.b1c-nk-cip-ikon{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#2BA9E8}
.b1c-nk-cip-svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.b1c-nk-s{font-size:1.0625rem;line-height:1.3;text-wrap:pretty}
.b1c-nk-tanya{justify-self:start;margin-top:2px;padding:4px 12px;border-radius:12px;background:#EFE9FD;color:#5537A8;font-size:.9375rem;font-weight:900}
.b1c-nk-tanya.masuk{animation:lompat .35s ease-out both}
.b1c-nk-kaki{display:flex;align-items:center;gap:6px;font-size:.875rem;font-weight:700;line-height:1.3;color:var(--ink2)}
.b1c-nk-kaki::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;background:#FFC933;box-shadow:inset 0 0 0 3px #E8971A}
.b2-kad.salah .b1c-nk-kaki,.b2-kad.betul .b1c-nk-kaki{color:inherit}
.b1c-nk-pilih{grid-template-columns:minmax(0,1fr);gap:8px}
.b1c-nk-pilih[hidden]{display:none}
/* jalur laut */
.b1c-nk-laluan{stroke:#FFFFFF;opacity:.9;transition:stroke .5s ease}
.b1c-nk-laluan.siap{stroke:#FFC933;opacity:1}
.b1c-nk-lencana{fill:#FFFFFF;stroke:#1B2A5C;transition:fill .4s ease,stroke .4s ease}
.b1c-nk-henti-ikon{stroke:#1B2A5C}
.b1c-nk-cincin{stroke:#FFC933;opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:50% 50%;transition:opacity .45s ease,transform .45s ease}
.b1c-nk-henti.kini .b1c-nk-cincin{opacity:1;transform:none}
.b1c-nk-henti.kini .b1c-nk-lencana{fill:#FFF3C4}
.b1c-nk-tanda{opacity:0;transition:opacity .4s ease}
.b1c-nk-tanda circle{fill:#1A9A5C;stroke:#fff;stroke-width:1.6}
.b1c-nk-henti.siap .b1c-nk-tanda,.b1c-nk-henti.dibantu .b1c-nk-tanda{opacity:1}
.b1c-nk-henti.siap .b1c-nk-lencana{fill:#E5FAEF;stroke:#1A9A5C}
.b1c-nk-henti.dibantu .b1c-nk-lencana{fill:#FFE9EA;stroke:#C9323F;stroke-dasharray:4 3}
.b1c-nk-henti.dibantu .b1c-nk-tanda circle{fill:#C9323F}
.b1c-nk-goyang{animation:b1c-bob 2.8s ease-in-out infinite alternate}
@keyframes b1c-bob{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-3px) rotate(1deg)}}
.b1c-nk-buih{opacity:0;transition:opacity .35s ease}
.b1c-nk-kapal.belayar .b1c-nk-buih{opacity:.85}
.b1c-nk-layar{transform-box:fill-box;transform-origin:50% 100%;transition:transform .7s ease}
.b1c-nk-kapal.labuh .b1c-nk-layar{transform:scaleY(.62)}
.b1c-nk-tambat{opacity:0;transition:opacity .6s ease .4s}
.b1c-nakhoda[data-fasa="tiba"] .b1c-nk-tambat,.b1c-nakhoda[data-fasa="soal"] .b1c-nk-tambat,.b1c-nakhoda[data-fasa="tamat"] .b1c-nk-tambat{opacity:1}
.b1c-nk-ombak{animation:b1c-hanyut 9s ease-in-out infinite alternate}
@keyframes b1c-hanyut{from{transform:translateX(0)}to{transform:translateX(10px)}}
.b1c-nk-bendera{transform-box:fill-box;transform-origin:0 50%;animation:b1c-kibar 2.4s ease-in-out infinite alternate}
@keyframes b1c-kibar{from{transform:skewY(0)}to{transform:skewY(-5deg)}}
/* buku log */
.b1c-nk-log{display:grid;gap:8px;min-width:0;padding:12px 14px 14px;border-radius:20px;background:#FFFDF4;box-shadow:var(--bayang),inset 0 0 0 2px #EADFC4;
  background-image:repeating-linear-gradient(180deg,transparent 0 27px,rgba(61,139,242,.12) 27px 28px)}
.b1c-nk-log[hidden]{display:none}
.b1c-nk-log.rumus{box-shadow:inset 0 0 0 2px #EADFC4}
.b1c-nk-log-tajuk{display:flex;align-items:center;gap:8px;font-size:.875rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#8A5426}
.b1c-nk-log-buku{flex:none;width:22px;height:18px;border-radius:3px 6px 6px 3px;background:#C9323F;box-shadow:inset 4px 0 0 #8E1F2A,inset 0 -3px 0 #FFF6E0}
.b1c-nk-log-senarai{display:grid;gap:6px;counter-reset:none}
.b1c-nk-log-baris{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:10px;row-gap:4px;align-items:start;padding:7px 10px;border-radius:14px;background:rgba(255,255,255,.88);box-shadow:inset 0 0 0 2px #EEE4CC;
  animation:b1c-baris .45s ease-out both;animation-delay:calc(var(--b1c-i,0) * 140ms)}
@keyframes b1c-baris{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.b1c-nk-log-baris.dibantu{box-shadow:inset 0 0 0 2px #F7B5BA}
.b1c-nk-log-no{grid-row:1 / span 2;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#1B2A5C;color:#fff;font-size:.875rem;font-weight:900}
.b1c-nk-log-teks{display:grid;gap:1px;min-width:0}
.b1c-nk-log-teks b{font-size:.9375rem;font-weight:900;line-height:1.25;color:var(--ink)}
.b1c-nk-log-isi{font-size:.875rem;font-weight:700;line-height:1.35;color:var(--ink2);overflow-wrap:break-word}
.b1c-nk-log-cip{display:flex;flex-wrap:wrap;gap:5px}
.b1c-nk-log-cip:empty{display:none}

/* =====================================================================================
   1.8 WAADAT · JANJI
   ===================================================================================== */
.b1c-waadat{display:grid;gap:10px;min-width:0}
.b1c-wd-adegan{position:relative;min-width:0;width:100%;border-radius:22px;overflow:hidden;border:3px solid #fff;background:#FFF6E0;box-shadow:var(--bayang);aspect-ratio:360/392}
.b1c-wd-lapis-svg,.b1c-wd-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.b1c-wd-tulisan{fill:#1B2A5C;paint-order:stroke;stroke:#FFF6E0;stroke-width:2px}
.b1c-waadat.b1c-dimeterai .b1c-wd-tulisan{fill:#C9323F}
.b1c-wd-simpul .b1c-wd-ikat{transition:opacity .3s ease}
.b1c-wd-simpul.bantu .b1c-wd-ikat circle{fill:#F7B5BA;stroke:#C9323F}
/* kad janji: gulungan warkah di atas tali */
.b1c-wd-kad{position:absolute;z-index:3;display:grid;gap:4px;padding:12px 16px 13px;border-radius:12px;background:#FFFDF4;color:var(--ink);text-align:center;
  box-shadow:0 4px 0 #D9C8A2,0 10px 18px rgba(27,42,92,.16),inset 0 0 0 2px #EFE3C6;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.b1c-wd-kad::before,.b1c-wd-kad::after{content:"";position:absolute;left:-6px;right:-6px;height:9px;border-radius:5px;background:#B7793F;box-shadow:inset 0 -3px 0 #8A5426}
.b1c-wd-kad::before{top:-5px}
.b1c-wd-kad::after{bottom:-5px}
.b1c-wd-kad.hilang{visibility:hidden;opacity:0}
.b1c-wd-kad.masuk{animation:b1c-turun .5s ease-out both}
@keyframes b1c-turun{from{opacity:0;transform:translateY(-16px) scale(.92)}to{opacity:1;transform:none}}
.b1c-wd-kad.dipilih{box-shadow:0 4px 0 #D9C8A2,0 0 0 4px rgba(255,201,51,.6),inset 0 0 0 3px var(--emas)}
.b1c-wd-kad.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}
.b1c-wd-kad.b1c-diseret{opacity:.4}
.b1c-wd-kad-label{font-size:.875rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#C2560F}
.b1c-wd-kad-teks{font-size:1rem;font-weight:900;line-height:1.3;overflow-wrap:break-word}
/* papan nama pihak (butang) */
.b1c-wd-plak-lapis{position:absolute;inset:0;z-index:2;pointer-events:none}
.b1c-wd-plak{position:absolute;pointer-events:auto;display:grid;align-content:center;justify-items:center;gap:3px;min-height:64px;padding:10px 10px 11px;border-radius:14px;background:#FFF6E0;color:var(--ink);text-align:center;
  box-shadow:0 5px 0 #6E3F1B,inset 0 0 0 4px #B7793F,inset 0 0 0 6px #8A5426}
.b1c-wd-plak:active:not([disabled]){transform:translateY(3px);box-shadow:0 2px 0 #6E3F1B,inset 0 0 0 4px #B7793F,inset 0 0 0 6px #8A5426}
.b1c-wd-plak[disabled]{cursor:default}
.b1c-wd-plak-no{display:none}
.b1c-wd-plak-nama{font-size:1rem;font-weight:900;line-height:1.2;overflow-wrap:break-word}
.b1c-wd-plak-ket{font-size:.875rem;font-weight:700;line-height:1.25;color:var(--ink2)}
.b1c-wd-plak.sorot:not([disabled]){box-shadow:0 5px 0 #6E3F1B,0 0 0 4px rgba(255,201,51,.65),inset 0 0 0 4px var(--emas),inset 0 0 0 6px #8A5426}
.b1c-wd-plak.betul{background:var(--betul-bg);color:var(--betul-teks);box-shadow:0 5px 0 #1E9E63,inset 0 0 0 4px var(--hijau)}
.b1c-wd-plak.kilat{background:var(--betul-bg);box-shadow:0 5px 0 #1E9E63,inset 0 0 0 4px var(--hijau)}
.b1c-wd-plak.salah{background:var(--salah-bg);color:var(--salah-teks);box-shadow:0 5px 0 var(--merah-d),inset 0 0 0 4px #E0555D}
.b1c-wd-plak.betul .b1c-wd-plak-ket,.b1c-wd-plak.kilat .b1c-wd-plak-ket{color:var(--betul-teks)}
.b1c-wd-plak.salah .b1c-wd-plak-ket{color:var(--salah-teks)}
.b1c-wd-plak.pudar{opacity:.5}
.b1c-waadat .b1c-soal-pilih[hidden]{display:none}

/* =====================================================================================
   1.8 WAADAT · POHON
   ===================================================================================== */
.b1c-ph-meja{display:grid;gap:10px;min-width:0}
.b1c-ph-sisi{display:grid;gap:10px;min-width:0;align-content:start}
.b1c-ph-adegan{position:relative;min-width:0;width:100%;border-radius:22px;overflow:hidden;border:3px solid #fff;background:#A6DEF7;box-shadow:var(--bayang);aspect-ratio:360/336}
.b1c-ph-lapis-svg,.b1c-ph-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.b1c-ph-zon{cursor:pointer}
.b1c-ph-hit{fill:transparent}
.b1c-ph-garis{fill:none;stroke:#FFFFFF;stroke-width:2.5;stroke-dasharray:7 6;opacity:0;transition:opacity .25s ease,stroke .25s ease}
.b1c-ph-zon.sorot .b1c-ph-garis{opacity:.95;stroke:#FFC933}
.b1c-ph-zon.salah .b1c-ph-garis{opacity:1;stroke:#F94F55;stroke-dasharray:8 5;stroke-width:4;fill:rgba(249,79,85,.12)}
.b1c-ph-zon.salah{animation:b1c-gegar .45s ease}
.b1c-ph-zon.kilat .b1c-ph-garis,.b1c-ph-zon.betul .b1c-ph-garis{opacity:1;stroke:#2FA05C;stroke-dasharray:none;stroke-width:4;fill:rgba(47,160,92,.14)}
@keyframes b1c-gegar{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.b1c-ph-tag{position:absolute;z-index:2;display:grid;justify-items:center;gap:0;padding:3px 11px 4px;border-radius:12px;background:rgba(255,253,244,.94);box-shadow:0 3px 0 rgba(27,42,92,.25),inset 0 0 0 2px #1B2A5C;
  transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap;text-align:center}
.b1c-ph-tag b{font-size:.9375rem;font-weight:900;line-height:1.2;color:var(--ink)}
.b1c-ph-tag small{font-size:.875rem;font-weight:700;line-height:1.15;color:#0C776B}
.b1c-ph-tag[data-zon="pohon"]{box-shadow:0 3px 0 #E8971A,inset 0 0 0 2px #E8971A;background:#FFF3C4}
.b1c-ph-tag[data-zon="akar"]{background:#FDF3DC;box-shadow:0 3px 0 rgba(0,0,0,.3),inset 0 0 0 2px #6E3F1B}
.b1c-ph-baru.bantu{opacity:.85}
.b1c-ph-petikan{position:absolute;z-index:4;left:4%;right:4%;bottom:4%;display:grid;gap:8px;justify-items:center;padding:12px 14px 13px;border-radius:14px;background:#FFF6E0;text-align:center;
  box-shadow:0 5px 0 #6E3F1B,0 10px 18px rgba(27,42,92,.25),inset 0 0 0 4px #B7793F,inset 0 0 0 6px #8A5426;animation:b1c-turun .5s ease-out both;transition:transform .5s ease-in,opacity .5s ease-in}
.b1c-ph-petikan.turun{transform:translateY(60px) scale(.9);opacity:0}
.b1c-ph-petikan-label{font-size:.875rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#C2560F}
.b1c-ph-petikan-teks{margin:0;font-size:1rem;font-weight:800;line-height:1.38;color:var(--ink)}
.b1c-ph-mula{min-height:46px;padding:6px 28px;font-size:1rem}
.b1c-ph-senarai{display:grid;gap:8px;min-width:0}
.b1c-ph-senarai[hidden]{display:none}
.op.b1c-ph-op{align-items:center;gap:10px;min-height:54px;padding:7px 12px 7px 8px}
.b1c-ph-op-ikon{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:#2FA05C;box-shadow:inset 0 -3px 0 #217F49;color:#fff}
.b1c-ph-op[data-id="pohon"] .b1c-ph-op-ikon{background:#FFC933;box-shadow:inset 0 -3px 0 #E8971A;color:var(--ink)}
.b1c-ph-op[data-id="akar"] .b1c-ph-op-ikon{background:#B7793F;box-shadow:inset 0 -3px 0 #8A5426}
.b1c-ph-op-ikon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.b1c-ph-op-teks{display:grid;gap:1px;min-width:0}
.b1c-ph-op-teks b{font-size:.9375rem;font-weight:900;line-height:1.2}
.b1c-ph-op-teks small{font-size:.875rem;font-weight:700;line-height:1.2;color:var(--ink2)}
.op.b1c-ph-op.sorot:not([disabled]){box-shadow:var(--lip),inset 0 0 0 3px var(--emas)}
.op.b1c-ph-op.salah .b1c-ph-op-ikon{background:#F94F55;box-shadow:inset 0 -3px 0 #C9323F;color:#fff}
.op.b1c-ph-op.betul .b1c-ph-op-ikon,.op.b1c-ph-op.kilat .b1c-ph-op-ikon{background:#1A9A5C;box-shadow:inset 0 -3px 0 #0F6B40;color:#fff}
.b1c-rumus-petikan{margin:0;padding:9px 12px 10px 14px;border-radius:12px;background:#FFF6E0;box-shadow:inset 4px 0 0 #B7793F;font-size:.9375rem;font-weight:800;line-height:1.4;color:var(--ink)}

/* =====================================================================================
   1.9 NOBAT (jalur, tanpa watak)
   ===================================================================================== */
.b1c-nobat{display:grid;gap:12px;min-width:0}
.b1c-nobat > .b2-atas > .b2-kad-baris[hidden]{display:none}
.b1c-nb-pilih{grid-template-columns:minmax(0,1fr)}
.b1c-nb-pilih.j-bs{grid-template-columns:repeat(2,minmax(0,1fr))}
.b1c-nb-pilih.j-bs .op{justify-content:center;text-align:center;font-size:1.0625rem}
.b1c-nb-ketuk{fill:#4A3A63;stroke:#9C8FD6;transition:fill .45s ease,stroke .45s ease}
.b1c-nb-ketuk.nyala{fill:#FFC933;stroke:#FFF3C4}
.b1c-nb-ketuk.terlepas{fill:#3A2F4F;stroke:#F94F55}
.b1c-nb-cahaya{opacity:0;transition:opacity .45s ease}
.b1c-nb-alat.nyala .b1c-nb-cahaya{opacity:.95}
.b1c-nb-lampu-kaca{fill:#7B6FB0;transition:fill .5s ease}
.b1c-nb-lampu-sinar{opacity:0;transition:opacity .6s ease}
.nyala > .b1c-nb-lampu .b1c-nb-lampu-kaca{fill:#FFD66B}
.nyala > .b1c-nb-lampu .b1c-nb-lampu-sinar{opacity:.42}
.b1c-nb-api{transform-box:fill-box;transform-origin:50% 90%;animation:b1c-nyala 1.8s ease-in-out infinite alternate}
@keyframes b1c-nyala{from{transform:scale(1,1)}to{transform:scale(1.06,1.12)}}
.b1c-nb-pelita.padam .b1c-nb-api{opacity:0;animation:none}
/* kad akhir */
.b1c-nb-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}
.b1c-nb-akhir-ikon{grid-row:1 / span 2;width:48px;height:48px}
.b1c-nb-akhir-tajuk{font-size:1.0625rem;font-weight:900;line-height:1.25;color:var(--ink)}
.b1c-nb-akhir-isi{font-size:.9375rem;font-weight:700;line-height:1.4;color:var(--ink2)}
.b1c-rumus-nb{display:grid;gap:10px}
.b1c-rumus-nb .b1c-nb-akhir{animation:none;box-shadow:inset 0 0 0 3px #FFC933}

/* =====================================================================================
   MOD LEBAR (pentas 1280 x 720)
   ===================================================================================== */
/* nakhoda: jalur laut di atas, kad situasi, pilihan 2 x 2, bisik */
body.mod-lebar .b2-main.b2-j-nakhoda .main-badan{left:300px;width:720px;top:84px;bottom:10px;display:flex;flex-direction:column;align-content:stretch;overflow-y:auto;overscroll-behavior:contain}
body.mod-lebar .b2-p-nakhoda{flex:none;display:flex;flex-direction:column;gap:10px}
body.mod-lebar .b1c-nakhoda{gap:10px}
body.mod-lebar .b1c-nk-kad{padding:10px 18px 11px}
body.mod-lebar .b1c-nk-s{font-size:1.125rem}
body.mod-lebar .b1c-nk-pilih{grid-template-columns:repeat(2,minmax(0,1fr))}
body.mod-lebar .b1c-nk-pilih .op{min-height:54px}
body.mod-lebar .b2-j-nakhoda .bisik{min-height:50px;padding:8px 14px}
body.mod-lebar .b1c-nk-log-senarai{grid-template-columns:repeat(2,minmax(0,1fr))}
body.mod-lebar .b1c-nk-log{padding:9px 12px 10px;gap:6px}
body.mod-lebar .b1c-nk-log-senarai{gap:6px 8px}
body.mod-lebar .b1c-nk-log-baris{padding:6px 9px;row-gap:3px}
body.mod-lebar .b2-p-nakhoda > .b2-rumus .b1c-nk-log-senarai{grid-template-columns:repeat(2,minmax(0,1fr))}
/* waadat */
body.mod-lebar .b2-main.b2-j-waadat .main-badan{left:300px;width:720px;top:84px;bottom:10px;display:flex;flex-direction:column;align-content:stretch;overflow-y:auto;overscroll-behavior:contain}
body.mod-lebar .b2-p-waadat{flex:none;display:flex;flex-direction:column;gap:10px}
body.mod-lebar .b2-j-waadat .b2-kad{padding:9px 18px 10px}
body.mod-lebar .b2-j-waadat .b2-kad-isi{font-size:1.125rem}
body.mod-lebar .b2-j-waadat .bisik{min-height:50px;padding:8px 14px}
body.mod-lebar .b1c-wd-adegan{aspect-ratio:720/330}
body.mod-lebar .b1c-wd-kad{padding:11px 18px 12px}
body.mod-lebar .b1c-wd-kad-teks{font-size:1.0625rem}
body.mod-lebar .b1c-wd-plak{min-height:70px;padding:10px 14px 12px}
body.mod-lebar .b1c-wd-plak-no{display:grid;place-items:center;position:absolute;left:-7px;top:-9px;width:24px;height:24px;border-radius:50%;background:#FFF6E0;color:var(--ink);font-size:.8125rem;font-weight:900;box-shadow:0 0 0 2px #8A5426,0 2px 0 rgba(0,0,0,.25)}
body.mod-lebar .b1c-wd-plak-nama{font-size:1.0625rem}
body.mod-lebar .mod-janji .b1c-soal-pilih{grid-template-columns:repeat(2,minmax(0,1fr))}
body.mod-lebar .mod-janji.b1c-fasa-soal .b1c-wd-adegan{aspect-ratio:720/300}
/* pohon: adegan pohon di kiri (360), kad, butang zon dan bisik di kanan */
body.mod-lebar .b1c-ph-meja{grid-template-columns:332px minmax(0,1fr);gap:14px;align-items:start}
body.mod-lebar .b1c-ph-adegan{aspect-ratio:360/520}
body.mod-lebar .b1c-ph-sisi{gap:10px}
body.mod-lebar .b1c-ph-senarai{gap:9px}
body.mod-lebar .op.b1c-ph-op{min-height:60px}
body.mod-lebar .b1c-ph-op .op-no{order:-1}
body.mod-lebar .b1c-ph-sisi .bisik{min-height:84px;align-items:flex-start;align-content:flex-start}
/* Rumusan pada skrin lebar: kotak muat dalam .main-badan, senarai di dalamnya ditatal */
body.mod-lebar .b2-p-waadat > .b2-rumus,body.mod-lebar .b2-p-nakhoda > .b2-rumus{display:flex;flex-direction:column;gap:10px;max-height:620px;min-height:0}
body.mod-lebar .b2-p-waadat > .b2-rumus > *,body.mod-lebar .b2-p-nakhoda > .b2-rumus > *{flex:none}
body.mod-lebar .b2-p-waadat > .b2-rumus > .b1c-rumus-lanjut,body.mod-lebar .b2-p-nakhoda > .b2-rumus > .b1c-rumus-lanjut{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
/* nobat: adegan penuh; kad soalan di lajur kanan seperti bungaapi */
body.mod-lebar .b2-main.b2-j-nobat .main-badan{left:796px;width:456px;top:84px;bottom:20px;display:flex;flex-direction:column;align-content:stretch}
body.mod-lebar .b2-p-nobat{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
body.mod-lebar .b1c-nobat{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
body.mod-lebar .b2-p-nobat .b2-kad-isi{font-size:1.3125rem}
body.mod-lebar .b1c-nb-op{min-height:56px;font-size:1rem}
body.mod-lebar .b2-p-nobat .b2-bawah.b1c-ada-rumus{min-height:0;flex:1 1 auto;display:flex;flex-direction:column}
body.mod-lebar .b2-p-nobat .b2-rumus{flex:0 1 auto;display:flex;flex-direction:column;min-height:0}
body.mod-lebar .b2-p-nobat .b2-rumus > .b1c-rumus-nb{min-height:0;flex:1 1 auto;overflow-y:auto;padding-right:4px}
body.mod-lebar .b2-p-nobat .b2-rumus > .btn{flex:none}
body.mod-lebar .b2-p-nobat .b2-rumus-tokoh{grid-template-columns:1fr}

/* =====================================================================================
   TELEFON (390 x 844) dan TELEFON PENDEK (375 x 667)
   ===================================================================================== */
body.mod-telefon .b2-j-nakhoda .b2-kad,body.mod-telefon .b2-j-waadat .b2-kad{padding:9px 14px 10px}
body.mod-telefon .b2-j-waadat .b2-kad-isi{font-size:1rem;line-height:1.28}
body.mod-telefon .b1c-nk-s{font-size:1rem;line-height:1.3}
body.mod-telefon .b2-j-nakhoda .bisik,body.mod-telefon .b2-j-waadat .bisik{min-height:2.9em;padding:8px 12px;font-size:.875rem;line-height:1.32}
body.mod-telefon .b1c-nk-adegan,body.mod-telefon .b1c-wd-adegan,body.mod-telefon .b1c-ph-adegan{border-radius:18px}
/* pohon (telefon): kad, adegan, butang zon sebaris, bisik */
body.mod-telefon .b1c-ph-sisi{display:contents}
body.mod-telefon .b1c-ph-atas{order:1}
body.mod-telefon .b1c-ph-adegan{order:2}
body.mod-telefon .b1c-ph-senarai{order:3;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
body.mod-telefon .b1c-ph-meja > .b1c-ph-sisi > .b1c-soal-pilih{order:4}
body.mod-telefon .b1c-ph-meja > .b1c-ph-sisi > .bisik{order:5}
body.mod-telefon .op.b1c-ph-op{flex-direction:column;justify-content:center;gap:4px;min-height:64px;padding:7px 4px 8px;text-align:center}
body.mod-telefon .b1c-ph-op-ikon{width:30px;height:30px;border-radius:10px}
body.mod-telefon .b1c-ph-op-ikon svg{width:19px;height:19px}
body.mod-telefon .b1c-ph-op-teks{justify-items:center}
body.mod-telefon .b1c-ph-op-teks b{font-size:.875rem}
body.mod-telefon .b1c-ph-op-teks small{font-size:.875rem}
body.mod-telefon .b1c-wd-plak-nama{font-size:.9375rem}
body.mod-telefon .b1c-wd-plak{padding:8px 8px 10px}
body.mod-telefon .b1c-wd-kad{padding:10px 12px 11px}
body.mod-telefon .b1c-wd-kad-teks{font-size:.9375rem}
@media (max-height:700px){
  body.mod-telefon .b1c-nakhoda,body.mod-telefon .b1c-waadat,body.mod-telefon .b1c-ph-meja{gap:8px}
  body.mod-telefon .b1c-nk-kad{padding:8px 13px 9px;gap:4px}
  body.mod-telefon .b1c-op{min-height:48px;padding:7px 12px}
  body.mod-telefon .b2-j-nakhoda .b2-kad-no{font-size:.875rem}
  body.mod-telefon .main.b2-main.b2-j-nobat .latar-babak{height:250px}
  body.mod-telefon .main.b2-main.b2-j-nobat .main-badan{margin-top:194px}
}
@media (max-width:370px){
  body.mod-telefon .b1c-ph-op-teks b,body.mod-telefon .b1c-wd-plak-nama{font-size:.875rem}
}
@media (prefers-reduced-motion:reduce){
  .b1c-nk-goyang,.b1c-nk-ombak,.b1c-nk-bendera,.b1c-nb-api,.b1c-nk-log-baris,.b1c-wd-kad.masuk,.b1c-ph-petikan,.b1c-nb-akhir,.b1c-ph-zon.salah,.b1c-nk-tanya.masuk{animation:none}
  .b1c-nk-layar,.b1c-nk-cincin,.b1c-nk-tambat,.b1c-nb-cahaya,.b1c-nb-lampu-kaca,.b1c-nb-lampu-sinar,.b1c-nb-ketuk,.b1c-ph-petikan{transition:none}
}