/* ===== Babak · gaya pakej enjin Bab 10, kumpulan 10c (js/pakej-bab-10-10c.js): payung, bungaapi. Awalan kelas, keyframes
   dan pemboleh ubah: b10c-. 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-BAB-10 §1.14). ===== */

/* ---------- Kongsi ---------- */
.b2-j-payung .b2-kad-no,.b2-j-bungaapi .b2-kad-no{font-size:.875rem;letter-spacing:.04em}
.b2-j-payung .b2-kad-isi{font-size:1.0625rem;overflow-wrap:break-word}
.b2-j-bungaapi .b2-cip-tahun{height:26px;font-size:.875rem}
.b2-j-payung .b2-rujuk-btn,.b2-j-bungaapi .b2-rujuk-btn{font-size:.875rem;min-height:44px}
.b2-j-payung .b2-rumus-tokoh li,.b2-j-bungaapi .b2-rumus-tokoh li{font-size:.875rem;line-height:1.35;align-content:start}
.b2-j-payung .b2-rumus-label,.b2-j-bungaapi .b2-rumus-label{font-size:.875rem}
.b2-rumus-tokoh li.b10c-rumus-penuh{grid-column:1/-1}
.b10c-rumus-baris{display:grid;gap:3px}
.b10c-rumus-baris > span{position:relative;padding-left:12px}
.b10c-rumus-baris > span::before{content:"";position:absolute;left:1px;top:.5em;width:6px;height:6px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#3D8BF2}
.b10c-op{min-height:50px;font-size:.9375rem}

/* =====================================================================================
   10.7 PAYUNG KEDAULATAN
   ===================================================================================== */
.b10c-payung{display:grid;gap:10px;min-width:0}
.b10c-py-meja{display:grid;gap:10px;min-width:0}
.b10c-py-adegan{position:relative;min-width:0;border-radius:22px;overflow:hidden;border:3px solid #fff;background:#D5DFE8;box-shadow:var(--bayang)}
.b10c-py-svg{display:block;width:100%;height:auto}
/* panel kanopi: bercahaya dan terangkat (betul), merah dan bergoyang (salah), hijau (jawapan betul dalam Latihan) */
.b10c-py-kanopi{cursor:pointer;transition:transform .38s ease,filter .38s ease}
.b10c-py-kain{transition:fill .32s ease,stroke .32s ease,stroke-width .32s ease}
.b10c-py-kanopi.sorot .b10c-py-kain{stroke:#FFF3C4;stroke-width:3}
.b10c-py-kanopi.buka{transform:translateY(-9px);filter:drop-shadow(0 0 5px #FFFFFF) drop-shadow(0 0 10px rgba(255,236,160,.95))}
.b10c-py-kanopi.buka .b10c-py-kain{fill:#FFF0B3;stroke:#FFFFFF;stroke-width:3.4}
.b10c-py-kanopi.salah .b10c-py-kain{fill:#F94F55;stroke:#C9323F}
.b10c-py-kanopi.salah{animation:b10c-goyang .45s ease}
.b10c-py-kanopi.kilat .b10c-py-kain{fill:#9BE3BC;stroke:#1A9A5C;stroke-width:3}
@keyframes b10c-goyang{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.b10c-py-hanyut{animation:b10c-hanyut 38s linear infinite alternate}
.b10c-py-hanyut.dua{animation-duration:46s;animation-direction:alternate-reverse}
@keyframes b10c-hanyut{from{transform:translateX(0)}to{transform:translateX(18px)}}
/* orang di bawah payung: senyum dan lompat kecil apabila dilindungi */
.b10c-py-mulut.senyum{opacity:0}
.b10c-py-orang.gembira .b10c-py-mulut.senyum{opacity:1}
.b10c-py-orang.gembira .b10c-py-mulut.neutral{opacity:0}
.b10c-py-orang.lompat .b10c-py-seorang{animation:b10c-lompat .55s ease-out}
.b10c-py-orang.lompat g:nth-child(2) > .b10c-py-seorang{animation-delay:.06s}
.b10c-py-orang.lompat g:nth-child(4) > .b10c-py-seorang{animation-delay:.1s}
@keyframes b10c-lompat{0%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}}
/* kad titisan: kad berhujung runcing di atas seperti titisan air, digantung dari awan */
.b10c-py-titis{position:absolute;left:50%;top:10%;z-index:2;width:94%;max-width:380px;transform:translateX(-50%);pointer-events:none}
.b10c-py-titis-kad{position:relative;isolation:isolate;display:grid;gap:4px;padding:10px 14px 11px;border-radius:20px 20px 28px 28px;background:linear-gradient(180deg,#F2FAFF,#CFEBFB);
  color:var(--ink);text-align:center;box-shadow:0 4px 0 rgba(37,99,196,.26),inset 0 0 0 2px #8FD0F2,0 12px 20px rgba(27,42,92,.16);transform-origin:50% 100%}
.b10c-py-titis-kad::before{content:"";position:absolute;left:50%;top:-12px;z-index:-1;width:24px;height:24px;margin-left:-12px;border-radius:0 55% 55% 55%;background:#F2FAFF;
  box-shadow:inset 2px 2px 0 #8FD0F2;transform:rotate(45deg)}
.b10c-py-titis-teks{font-size:1rem;font-weight:900;line-height:1.3;overflow-wrap:break-word}
.b10c-py-titis-pet{font-size:.875rem;font-weight:700;line-height:1.3;color:#3B5B8C;overflow-wrap:break-word}
.b10c-py-titis-pet::before{content:"Petunjuk: ";font-weight:900;color:#2563C4}
.b10c-py-titis-kad.turun{animation:b10c-turun .52s ease-out both}
@keyframes b10c-turun{from{opacity:0;transform:translateY(-22px) scale(.86)}to{opacity:1;transform:none}}
.b10c-py-titis-kad.kecut{opacity:0;transform:translateY(12px) scale(.12);transition:transform .36s ease-in,opacity .32s ease-in}
.b10c-py-titis-kad.hilang{visibility:hidden;opacity:0}
/* butang panel */
.b10c-py-sisi{display:grid;gap:10px;min-width:0;align-content:start}
.b10c-py-senarai{display:grid;gap:8px;min-width:0}
.b10c-py-senarai[hidden]{display:none}
.op.b10c-py-op{align-items:center;gap:10px;min-height:52px;padding:8px 12px 8px 8px}
.b10c-py-op-ikon{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:#FFC933;box-shadow:inset 0 -3px 0 #E8971A;color:var(--ink);transition:background-color .25s ease}
.b10c-py-op-ikon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.b10c-py-op-teks{display:grid;gap:1px;min-width:0}
.b10c-py-op-nama{font-size:.9375rem;font-weight:900;line-height:1.2;overflow-wrap:break-word}
.b10c-py-op-ket{font-size:.875rem;font-weight:700;line-height:1.3;color:var(--ink2);overflow-wrap:break-word}
.op.b10c-py-op.sorot:not([disabled]){box-shadow:var(--lip),inset 0 0 0 3px var(--emas)}
.op.b10c-py-op.betul .b10c-py-op-ket,.op.b10c-py-op.kilat .b10c-py-op-ket{color:var(--betul-teks)}
.op.b10c-py-op.salah .b10c-py-op-ket{color:var(--salah-teks)}
.op.b10c-py-op.salah .b10c-py-op-ikon{background:#F94F55;box-shadow:inset 0 -3px 0 #C9323F;color:#fff}
.op.b10c-py-op.kilat .b10c-py-op-ikon,.op.b10c-py-op.betul .b10c-py-op-ikon{background:#2FA05C;box-shadow:inset 0 -3px 0 #217F49;color:#fff}
/* soalan akhir */
.b10c-py-soal{display:grid;gap:8px}
.b10c-py-soal[hidden]{display:none}
.b10c-py-soal-teks{display:none;font-size:1rem;font-weight:900;line-height:1.3;color:var(--ink)}
.b10c-py-soal-pilih{grid-template-columns:minmax(0,1fr);gap:8px}

/* =====================================================================================
   10.8 BUNGA API MERDEKA (jalur, tanpa watak)
   ===================================================================================== */
.b10c-ba-tingkap{fill:#2A3063;transition:fill .7s ease}
.b10c-ba-tingkap.nyala{fill:#FFE08A}
.b10c-ba-mentol{transition:opacity .7s ease}
.b10c-ba-bintang.kelip{animation:b10c-kelip 4.8s ease-in-out infinite alternate}
@keyframes b10c-kelip{from{opacity:.35}to{opacity:1}}
.b10c-ba-api{transform-box:fill-box;transform-origin:50% 90%;animation:b10c-nyala 1.6s ease-in-out infinite alternate}
@keyframes b10c-nyala{from{transform:scale(1,1)}to{transform:scale(1.08,1.14)}}
.b10c-ba-fius{transition:opacity .3s ease}
.b10c-ba-asap{opacity:0;transition:opacity .8s ease}
.b10c-ba-tiub.guna .b10c-ba-fius,.b10c-ba-tiub.padam .b10c-ba-fius{opacity:0}
.b10c-ba-tiub.guna .b10c-ba-mulut{fill:#3B3550}
.b10c-ba-tiub.guna .b10c-ba-asap{opacity:.55}
.b10c-ba-tiub.padam .b10c-ba-tiub-badan{fill:#BDB8C9}
.b10c-ba-tiub.padam .b10c-ba-mulut{fill:#6B4A55}
.b10c-ba-tiub.padam .b10c-ba-asap{opacity:.35;stroke:#C99A9E}
/* kad soalan: jenis pilih/bs/tahun seperti taman */
.b10c-ba-pilih.j-tahun{grid-template-columns:minmax(0,1fr)}
.b10c-ba-taip{grid-column:1 / -1;display:flex;gap:10px;align-items:stretch}
.b10c-ba-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)}
.b10c-ba-tahun:focus{outline:none;border-color:var(--fokus);box-shadow:0 0 0 3px rgba(11,87,208,.18)}
.b10c-ba-tahun.salah{border-color:#E0555D;background:var(--salah-bg);color:var(--salah-teks);animation:goncang .4s}
.b10c-ba-tahun.betul,.b10c-ba-tahun.kilat{border-color:var(--hijau);background:var(--betul-bg);color:var(--betul-teks)}
.b10c-ba-semak{flex:none;min-width:112px}
/* kad akhir */
.b10c-ba-akhir{display:grid;grid-template-columns:44px 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}
.b10c-ba-akhir-ikon{grid-row:1 / span 2;width:44px;height:44px}
.b10c-ba-akhir-tajuk{font-size:1.0625rem;font-weight:900;line-height:1.25;color:var(--ink)}
.b10c-ba-akhir-isi{font-size:.9375rem;font-weight:700;line-height:1.4;color:var(--ink2)}
.b10c-rumus-ba{display:grid;gap:10px}
.b10c-rumus-ba .b10c-ba-akhir{animation:none;box-shadow:inset 0 0 0 3px #FFC933}

/* =====================================================================================
   MOD LEBAR (pentas 1280 x 720)
   ===================================================================================== */
/* payung: kad atas; adegan 400 px di kiri, bisik dan butang panel di kanan */
body.mod-lebar .b2-main.b2-j-payung .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-payung{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
body.mod-lebar .b10c-payung{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
body.mod-lebar .b10c-payung > .b2-atas{flex:none}
body.mod-lebar .b2-j-payung .b2-kad{padding:9px 20px 10px}
body.mod-lebar .b2-j-payung .b2-kad-isi{font-size:1.1875rem}
body.mod-lebar .b10c-py-meja{flex:1 1 auto;min-height:0;grid-template-columns:360px minmax(0,1fr);gap:14px;align-items:start}
body.mod-lebar .b10c-py-sisi{min-height:0;max-height:100%;display:flex;flex-direction:column;gap:9px;overflow-y:auto;overscroll-behavior:contain;padding:0 2px 6px}
body.mod-lebar .b10c-py-sisi > *{flex:none}
body.mod-lebar .b10c-py-sisi .bisik{order:2;min-height:92px;align-items:flex-start;align-content:flex-start;padding:9px 13px;font-size:.9375rem;line-height:1.35}
body.mod-lebar .b10c-py-senarai{gap:7px}
body.mod-lebar .op.b10c-py-op{min-height:56px}
body.mod-lebar .b10c-py-soal .op{min-height:52px;padding:8px 12px}
body.mod-lebar .b2-p-payung > .b2-rumus{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px}
body.mod-lebar .b2-p-payung > .b2-rumus > *{flex:none}
body.mod-lebar .b2-p-payung > .b2-rumus > .b2-rumus-tokoh{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
/* bungaapi: adegan penuh; kad soalan di lajur kanan seperti taman */
body.mod-lebar .b2-main.b2-j-bungaapi .main-badan{left:796px;width:456px;top:84px;bottom:20px;display:flex;flex-direction:column;align-content:stretch}
body.mod-lebar .b2-p-bungaapi{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
body.mod-lebar .b2-p-bungaapi .b2-kad-isi{font-size:1.3125rem}
body.mod-lebar .b2-p-bungaapi .b2-bawah.b10c-ada-rumus{min-height:0;flex:1 1 auto;display:flex;flex-direction:column}
body.mod-lebar .b2-p-bungaapi .b2-rumus{flex:0 1 auto;display:flex;flex-direction:column;min-height:0}
body.mod-lebar .b2-p-bungaapi .b2-rumus > .b10c-rumus-ba{min-height:0;flex:1 1 auto;overflow-y:auto;padding-right:4px}
body.mod-lebar .b2-p-bungaapi .b2-rumus > .btn{flex:none}
body.mod-lebar .b2-p-bungaapi .b2-rumus-tokoh{grid-template-columns:1fr}

/* =====================================================================================
   TELEFON (390 x 844) dan TELEFON PENDEK (375 x 667)
   ===================================================================================== */
body.mod-telefon .b2-j-payung .b2-kad{padding:8px 14px 9px}
body.mod-telefon .b2-j-payung .b2-kad-isi{font-size:1rem;line-height:1.25}
body.mod-telefon .b10c-py-titis{width:94%}
body.mod-telefon .b10c-py-kanopi.buka{transform:translateY(-6px)}
body.mod-telefon .b10c-py-titis-kad{padding:8px 12px 9px;gap:3px}
body.mod-telefon .b10c-py-titis-teks{font-size:.9375rem;line-height:1.28}
body.mod-telefon .b10c-py-sisi .bisik{min-height:2.9em;padding:8px 12px;font-size:.875rem;line-height:1.32}
body.mod-telefon .b10c-payung.latihan .b10c-py-senarai{grid-template-columns:repeat(2,minmax(0,1fr))}
body.mod-telefon .b10c-payung.latihan .b10c-py-senarai > .op:last-child:nth-child(odd){grid-column:1 / -1}
body.mod-telefon .b10c-payung.latihan .op.b10c-py-op{gap:7px;padding:6px 8px 6px 6px}
body.mod-telefon .b10c-payung.latihan .b10c-py-op-ikon{width:28px;height:28px;border-radius:9px}
body.mod-telefon .b10c-payung.latihan .b10c-py-op-ikon svg{width:18px;height:18px}
body.mod-telefon .b10c-py-senarai{gap:7px}
body.mod-telefon .op.b10c-py-op{gap:9px;padding:6px 10px 6px 7px;border-radius:16px}
body.mod-telefon .b10c-py-op-ikon{width:32px;height:32px;border-radius:10px}
body.mod-telefon .b10c-py-op-ikon svg{width:20px;height:20px}
body.mod-telefon .b10c-py-op-ket{line-height:1.22}
body.mod-telefon .b10c-payung.belajar .op.b10c-py-op{min-height:52px}
body.mod-telefon .b10c-py-soal-teks{display:block}
@media (max-height:700px){
  body.mod-telefon .b10c-payung,body.mod-telefon .b10c-py-meja,body.mod-telefon .b10c-py-sisi{gap:8px}
  body.mod-telefon .op.b10c-py-op{min-height:48px}
  body.mod-telefon .b10c-py-titis{top:5%}
  body.mod-telefon .b10c-py-titis-kad{padding:7px 12px 8px}
  body.mod-telefon .b10c-py-titis-teks,body.mod-telefon .b10c-py-titis-pet{line-height:1.22}
  body.mod-telefon .main.b2-main.b2-j-bungaapi .latar-babak{height:250px}
  body.mod-telefon .main.b2-main.b2-j-bungaapi .main-badan{margin-top:194px}
}
@media (max-width:370px){
  body.mod-telefon .b10c-py-op-nama{font-size:.875rem}
}
@media (prefers-reduced-motion:reduce){
  .b10c-py-hanyut,.b10c-py-orang.lompat .b10c-py-seorang,.b10c-py-kanopi.salah,.b10c-ba-bintang.kelip,.b10c-ba-api,.b10c-ba-akhir{animation:none}
  .b10c-py-titis-kad.turun{animation:none;opacity:1;transform:none}
  .b10c-py-kanopi,.b10c-py-kain,.b10c-ba-tingkap{transition:none}
}