/* OLAH! — Halaman Utama (Mockup 01)
   Pentas 16:9. Semua saiz dalam unit "cqw" (1% lebar pentas) supaya
   susun atur kekal sama pada skrin besar atau kecil. */

:root {
  --kayu-gelap: #7a4a1d;
  --kayu: #c98a45;
  --krim: #fff6e0;
  --teks: #3b2410;
  --biru: #1c7fe0;
  --biru-gelap: #0f5db3;
  --jingga: #ee7a0c;
  --merah-jambu: #d6246e;
  --hijau: #18a553;
  --hijau-gelap: #0e7a3a;
  --fokus: #ffe53b;
  --ts: 1;                 /* pengganda saiz tulisan: Sederhana = 1 */
}
/* Tetapan > Saiz Tulisan > Besar (dihidupkan oleh script.js melalui data-teks pada <html>) */
html[data-teks="besar"] { --ts: 1.25; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #0a4a73;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Fon dengan huruf 'a' satu tingkat jika ada pada peranti */
  font-family: "Andika", "Century Gothic", "Comic Sans MS", "Comic Neue", "Chalkboard SE", "Trebuchet MS", sans-serif;
  color: var(--teks);
}

button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- Pentas 16:9 ---------- */
.pentas {
  position: relative;
  width: min(100vw, calc(100dvh * 16 / 9));
  height: min(calc(100vw * 9 / 16), 100dvh);
  container-type: size;
  background: url("assets/latar-pantai.png") center / cover no-repeat;
  overflow: hidden;
}

/* ---------- Butang gaya papan kayu ---------- */
.btn-papan {
  position: absolute;
  top: 2cqw;
  display: flex;
  align-items: center;
  gap: 1cqw;
  min-height: max(44px, 6.4cqw);
  padding: 0.6cqw 1.8cqw 0.6cqw 0.9cqw;
  background: var(--krim);
  border: max(2px, 0.28cqw) solid var(--kayu);
  border-radius: 1.6cqw;
  box-shadow: 0 0.4cqw 0 var(--kayu-gelap), 0 0.8cqw 1.4cqw rgba(0,0,0,.28);
  text-align: left;
  transition: transform .12s ease;
}
.btn-papan:hover { transform: translateY(-0.2cqw); }
.btn-papan:active { transform: translateY(0.2cqw); box-shadow: 0 0.15cqw 0 var(--kayu-gelap); }

.btn-profil {
  left: 2cqw;
  gap: 1cqw;
  width: fit-content;
  min-width: 18cqw;
  max-width: 25cqw;           /* tepi kanan 27cqw; piksel logo sebenar bermula >= 27.8cqw */
  padding: 0.8cqw 1.1cqw 0.9cqw 0.9cqw;
}
.btn-tetapan { padding-left: 1.4cqw; font-size: calc(max(14px, 2cqw) * var(--ts)); font-weight: 800; }

.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: max(56px, 7cqw);
  height: max(56px, 7cqw);
  border-radius: 50%;
  background: #ffd4e5;
  border: max(3px, 0.4cqw) solid #fff;
  box-shadow: 0 0 0 max(3px, 0.35cqw) var(--merah-jambu), 0 0.3cqw 0.8cqw rgba(0,0,0,.3);
  color: var(--merah-jambu);
  font-size: calc(max(18px, 2.6cqw) * var(--ts));
  font-weight: 800;
}

.profil-teks { display: flex; flex-direction: column; gap: 0.2cqw; min-width: 0; flex: 1; line-height: 1.1; }
.profil-label { font-size: calc(max(12px, 1.5cqw) * var(--ts)); font-weight: 700; opacity: .75; }
.profil-nama {
  font-size: calc(max(20px, 2.6cqw) * var(--ts));
  font-weight: 800;
  color: #3b1d05;
  overflow-wrap: break-word;       /* nama panjang turun ke baris baharu, tidak terpotong */
  line-height: 1.05;
}
.profil-kelas { font-size: calc(max(13px, 1.65cqw) * var(--ts)); font-weight: 700; line-height: 1.15; white-space: nowrap; }
/* Jika walaupun selepas dikecilkan masih tidak muat, baru turun baris (tidak dipotong) */
.profil-kelas.lipat { white-space: normal; overflow-wrap: break-word; }
.anak-panah { flex: none; font-size: calc(max(22px, 2.6cqw) * var(--ts)); font-weight: 800; line-height: 1; align-self: center; }

/* Nama lebih panjang: kecilkan sedikit supaya tidak melebihi 2 baris */
.btn-profil[data-panjang="sederhana"] .profil-nama { font-size: calc(max(17px, 2.1cqw) * var(--ts)); }
.btn-profil[data-panjang="panjang"] .profil-nama { font-size: calc(max(15px, 1.75cqw) * var(--ts)); }
.btn-profil[data-panjang="panjang"] .profil-kelas { font-size: calc(max(12px, 1.5cqw) * var(--ts)); }

.ikon-gear {
  width: max(26px, 3.4cqw);
  height: max(26px, 3.4cqw);
  color: var(--biru);
}

/* ---------- Watak (hiasan, tidak boleh diklik) ---------- */
.watak {
  position: absolute;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 0.5cqw 0.6cqw rgba(0,0,0,.28));
}
.watak-kiri  { left: 1cqw;  bottom: 18.4cqw; width: 28cqw; }
.watak-kanan { right: 1.2cqw; bottom: 18.4cqw; width: 25cqw; }

/* ---------- Logo (tengah atas) ---------- */
.logo-bungkus {
  position: absolute;
  left: 0; right: 0;
  top: 0.6cqw;
  margin: 0;
  line-height: 0;
  text-align: center;
  pointer-events: none;
}
.logo {
  display: inline-block;
  width: 48cqw;
  height: auto;
  filter: drop-shadow(0 0.5cqw 0.8cqw rgba(0,0,0,.3));
}

/* ---------- MULA (tengah, antara logo dan kad) ---------- */
.zon-mula {
  position: absolute;
  left: 0; right: 0;
  top: 23.4cqw;
  height: 15cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.zon-mula > * { pointer-events: auto; }

.btn-mula {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  min-width: max(150px, 21cqw);
  min-height: max(56px, 8.4cqw);
  padding: 0 3cqw;
  border: max(3px, 0.35cqw) solid #fff;
  border-radius: 5cqw;
  background: linear-gradient(#37c971, var(--hijau));
  color: #fff;
  font-size: calc(max(26px, 4cqw) * var(--ts));
  font-weight: 800;
  letter-spacing: .04em;
  text-shadow: 0 0.2cqw 0 rgba(0,0,0,.3);
  box-shadow: 0 0.7cqw 0 var(--hijau-gelap), 0 1.2cqw 1.8cqw rgba(0,0,0,.3);
  transition: transform .12s ease;
}
.btn-mula:hover { transform: translateY(-0.25cqw) scale(1.02); }
.btn-mula:active { transform: translateY(0.2cqw); }
.ikon-main { width: max(30px, 4.6cqw); height: max(30px, 4.6cqw); }

/* ---------- Tiga kad ilustrasi (butang HTML) ---------- */
.laluan {
  position: absolute;
  left: 5cqw; right: 5cqw;
  bottom: 1.2cqw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5cqw;
}
.kad {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 1.8cqw;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 0.5cqw 1.2cqw rgba(0,0,0,.4);
  transition: transform .12s ease;
}
.kad img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.kad:hover { transform: translateY(-0.4cqw); }
.kad:active { transform: translateY(0.2cqw); }

/* ---------- Fokus papan kekunci (jelas) ---------- */
button:focus-visible {
  outline: max(4px, 0.5cqw) solid var(--fokus);
  outline-offset: 3px;
  box-shadow: 0 0 0 max(7px, 0.8cqw) #000;
}

/* ---------- Dialog mesra murid ---------- */
.dialog {
  width: min(92vw, 560px);
  padding: 0;
  background: var(--krim);
  color: var(--teks);
  border: 5px solid var(--kayu);
  border-radius: 28px;
  box-shadow: 0 8px 0 var(--kayu-gelap), 0 20px 40px rgba(0,0,0,.4);
}
.dialog::backdrop { background: rgba(5, 40, 70, .6); }
.dialog-isi { padding: 24px 28px 26px; text-align: center; }
.dialog-ikon { font-size: calc(52px * var(--ts)); line-height: 1; }
.dialog h2 { margin: 8px 0 6px; font-size: calc(clamp(26px, 4vw, 34px) * var(--ts)); color: var(--biru-gelap); }
.dialog p { margin: 0; font-size: calc(clamp(18px, 2.6vw, 22px) * var(--ts)); line-height: 1.4; font-weight: 700; }
.dialog-nota { margin-top: 12px !important; font-size: calc(16px * var(--ts)) !important; color: #8a2a00; min-height: 1.4em; }
.dialog-butang { display: flex; justify-content: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }

.btn-dialog {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 130px;
  min-height: 56px;
  padding: 0 24px;
  border: 3px solid #fff;
  border-radius: 999px;
  font-size: calc(22px * var(--ts));
  font-weight: 800;
  color: #fff;
}
.btn-dialog svg { width: 26px; height: 26px; }
.btn-dialog-dengar { background: var(--biru); box-shadow: 0 5px 0 var(--biru-gelap); }
.btn-dialog-ok { background: var(--hijau); box-shadow: 0 5px 0 var(--hijau-gelap); }

/* Pengguna yang memilih kurang gerakan */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .btn-papan:hover, .kad:hover, .btn-mula:hover { transform: none; }
}

.btn-dialog[hidden] { display: none; }

/* ================= Avatar pada butang Profil (Halaman Utama) ================= */
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }

/* ================= Pop-up Profil Murid (Mockup 02) =================
   Dialog ialah bekas "inline-size" supaya semua saiz dalam "cqw"
   (1% lebar panel) dan panel kekal sama pada semua skrin landskap. */
.dialog-profil,
.dialog-tetapan {
  width: min(92vw, 136dvh);
  max-width: none;
  max-height: 97dvh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  container-type: inline-size;
  color: var(--teks);
  font-family: inherit;
}
.dialog-profil::backdrop,
.dialog-tetapan::backdrop { background: rgba(4, 36, 62, .58); }  /* latar menjadi gelap */

.profil-panel,
.tetapan-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.2cqw;
  padding: 1.8cqw 3cqw 2cqw;
  max-height: 97dvh;
  overflow: auto;
  background:
    radial-gradient(circle at 8% 100%, rgba(255,214,150,.55), transparent 35%),
    linear-gradient(#fffaf0 0%, #fff0cf 100%);
  border: max(4px, 0.7cqw) solid var(--kayu);
  border-radius: 3cqw;
  box-shadow: 0 0.8cqw 0 var(--kayu-gelap), 0 2cqw 4cqw rgba(0,0,0,.45);
}

/* Kepala: papan kayu + butang X */
.profil-kepala { position: relative; display: flex; justify-content: center; }
.papan-kayu {
  margin: 0;
  padding: 0.5cqw 6cqw 0.7cqw;
  font-size: calc(max(24px, 3.8cqw) * var(--ts));
  font-weight: 800;
  line-height: 1.15;
  color: #fff6e0;
  text-shadow: 0 0.2cqw 0 #5a3410, 0 0 0.6cqw rgba(0,0,0,.4);
  background:
    repeating-linear-gradient(98deg, rgba(90,52,16,.18) 0 0.25cqw, transparent 0.25cqw 1.4cqw),
    linear-gradient(#d9a15c, #b9772f);
  border: max(3px, 0.4cqw) solid #7a4a1d;
  border-radius: 1.4cqw;
  box-shadow: 0 0.4cqw 0 #5a3410, inset 0 0.2cqw 0 rgba(255,255,255,.3);
}
.btn-x {
  position: absolute;
  right: -0.8cqw; top: -0.6cqw;
  width: max(44px, 5cqw); height: max(44px, 5cqw);
  border: max(3px, 0.35cqw) solid #fff;
  border-radius: 50%;
  background: linear-gradient(#ff6b5c, #e0322a);
  color: #fff;
  font-size: calc(max(20px, 2.6cqw) * var(--ts));
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0.3cqw 0 #a01c16, 0 0.6cqw 1cqw rgba(0,0,0,.3);
}

/* Badan: avatar besar (kiri) + borang (kanan) */
.profil-badan { display: grid; grid-template-columns: 15.5cqw 1fr; gap: 3cqw; align-items: start; }

.profil-kiri { display: flex; flex-direction: column; align-items: stretch; gap: 1.4cqw; min-width: 0; }
.avatar-besar {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2cqw;
  box-shadow: 0 0.4cqw 1.2cqw rgba(0,0,0,.35);
}

.btn-kecil {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5cqw;
  width: 100%;                       /* tidak melimpah keluar lajur kiri */
  min-height: max(44px, 4.6cqw);
  padding: 0.6cqw 0.8cqw;
  border: max(2px, 0.25cqw) solid #fff;
  border-radius: 1.6cqw;
  background: linear-gradient(#3d9cf5, var(--biru));
  color: #fff;
  font-size: calc(max(13px, 1.5cqw) * var(--ts));
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  white-space: normal;               /* boleh turun baris jika fon peranti lebih lebar */
  box-shadow: 0 0.3cqw 0 var(--biru-gelap);
}
.btn-kecil svg { flex: none; width: max(18px, 2cqw); height: max(18px, 2cqw); }

.profil-kanan { display: flex; flex-direction: column; gap: 1.4cqw; min-width: 0; }

/* Papan galakan */
.papan-galak {
  display: flex; align-items: center; gap: 1.2cqw;
  padding: 0.8cqw 1.4cqw;
  background: #fff3d6;
  border: max(2px, 0.25cqw) dashed var(--kayu);
  border-radius: 1.4cqw;
}
.papan-galak p { margin: 0; flex: 1; font-size: calc(max(15px, 2cqw) * var(--ts)); font-weight: 800; line-height: 1.25; color: #6b3d10; }

/* Medan borang */
.medan { border: 0; margin: 0; padding: 0; min-width: 0; }
.medan-baris, .medan legend, .pilih-avatar legend {
  display: flex; align-items: center; gap: 0.8cqw; padding: 0;
}
.medan-baris label, .medan legend span, .pilih-avatar legend span {
  font-size: calc(max(15px, 1.9cqw) * var(--ts)); font-weight: 800; color: #6b3d10;
}
.medan input[type="text"] {
  width: 100%;
  min-height: max(48px, 5.2cqw);
  margin-top: 0.4cqw;
  padding: 0 1.4cqw;
  border: max(3px, 0.3cqw) solid #9ccbf0;
  border-radius: 1.4cqw;
  background: #fff;
  color: var(--teks);
  font: inherit;
  font-size: calc(max(17px, 2.3cqw) * var(--ts));
  font-weight: 700;
}
.medan input[type="text"]::placeholder { color: #9a8a78; font-weight: 600; }
.medan input[type="text"].perlu { border-color: #f08a24; background: #fff4e5; }

.dua-lajur { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }

.pil-tahun { display: flex; gap: 1cqw; margin-top: 0.4cqw; }
.pil { flex: 1; position: relative; }
.pil input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pil span {
  display: flex; align-items: center; justify-content: center;
  min-height: max(48px, 5.2cqw);
  border: max(3px, 0.3cqw) solid #9ccbf0;
  border-radius: 1.4cqw;
  background: #fff;
  font-size: calc(max(15px, 2cqw) * var(--ts));
  font-weight: 800;
}
.pil input:checked + span { background: var(--biru); border-color: var(--biru-gelap); color: #fff; }
.pil input:checked + span::before { content: "✓ "; white-space: pre; }

/* Butang audio kecil */
.btn-audio {
  flex: none;
  display: grid; place-items: center;
  width: max(44px, 4.2cqw); height: max(44px, 4.2cqw);
  padding: 0;
  border: max(2px, 0.2cqw) solid #fff;
  border-radius: 50%;
  background: linear-gradient(#3d9cf5, var(--biru));
  color: #fff;
  box-shadow: 0 0.25cqw 0 var(--biru-gelap);
}
.btn-audio svg { width: 58%; height: 58%; }

/* Pilihan avatar */
.pilih-avatar { border: 0; margin: 0; padding: 0; min-width: 0; }
.avatar-senarai { display: flex; justify-content: center; gap: 1.8cqw; margin-top: 0.6cqw; padding: 0.6cqw 0; }
.avatar-opsyen { position: relative; width: 7.4cqw; flex: none; line-height: 0; }
.avatar-opsyen input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.avatar-opsyen img {
  width: 100%; height: auto; display: block;
  border-radius: 1.4cqw;
  border: max(3px, 0.35cqw) solid transparent;
  box-shadow: 0 0.3cqw 0.8cqw rgba(0,0,0,.3);
  transition: transform .12s ease;
}
.avatar-opsyen:hover img { transform: translateY(-0.3cqw); }
.avatar-opsyen input:checked + img { border-color: #1c7fe0; box-shadow: 0 0 0 max(3px, 0.35cqw) #fff, 0 0 0 max(6px, 0.7cqw) #1c7fe0; }
.avatar-opsyen .tanda {
  position: absolute; right: -0.8cqw; bottom: -0.8cqw; z-index: 3;
  display: none; place-items: center;
  width: max(26px, 3cqw); height: max(26px, 3cqw);
  border: max(2px, 0.25cqw) solid #fff;
  border-radius: 50%;
  background: #1c7fe0; color: #fff;
  font-size: calc(max(15px, 1.9cqw) * var(--ts)); font-weight: 800; line-height: 1;
}
.avatar-opsyen input:checked ~ .tanda { display: grid; }
.avatar-opsyen input:focus-visible + img { outline: max(4px, 0.5cqw) solid var(--fokus); outline-offset: 3px; box-shadow: 0 0 0 max(7px, 0.8cqw) #000; }

/* Kaki: nota + Batal + Simpan */
.profil-kaki { display: flex; align-items: center; justify-content: flex-end; gap: 2cqw; }
.profil-nota { margin: 0 auto 0 0; font-size: calc(max(13px, 1.5cqw) * var(--ts)); font-weight: 700; color: #8a2a00; flex: 1; }
.btn-profil-aksi {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.8cqw;
  min-width: max(130px, 17cqw);
  min-height: max(52px, 6cqw);
  padding: 0 2.4cqw;
  border: max(3px, 0.3cqw) solid #fff;
  border-radius: 999px;
  font-size: calc(max(18px, 2.4cqw) * var(--ts));
  font-weight: 800;
  color: #fff;
}
.btn-profil-aksi svg { width: max(22px, 2.8cqw); height: max(22px, 2.8cqw); }
.btn-batal { background: linear-gradient(#3d9cf5, var(--biru)); box-shadow: 0 0.4cqw 0 var(--biru-gelap); }
.btn-simpan { background: linear-gradient(#37c971, var(--hijau)); box-shadow: 0 0.4cqw 0 var(--hijau-gelap); }

/* Fokus papan kekunci dalam pop-up */
.dialog-profil button:focus-visible,
.dialog-tetapan button:focus-visible,
.dialog-zoom button:focus-visible { outline: 4px solid var(--fokus); outline-offset: 3px; box-shadow: 0 0 0 7px #000; }
.dialog-profil input[type="text"]:focus-visible { outline: 4px solid var(--fokus); outline-offset: 2px; border-color: #000; }
.pil input:focus-visible + span { outline: 4px solid var(--fokus); outline-offset: 2px; box-shadow: 0 0 0 7px #000; }

/* Paparan avatar lebih dekat.
   PENTING: jangan letak "container-type: inline-size" pada dialog ini. Ia memaksa lebar
   intrinsik dialog menjadi 0, lalu dialog runtuh menjadi jalur sempit (punca ralat v3-v5). */
.dialog-zoom {
  width: fit-content;
  max-width: 94vw;
  max-height: 97dvh;
  margin: auto;
  padding: 18px 22px 20px;
  overflow: auto;
  background: var(--krim);
  border: 5px solid var(--kayu);
  border-radius: 28px;
  box-shadow: 0 8px 0 var(--kayu-gelap), 0 20px 40px rgba(0,0,0,.4);
  text-align: center;
}
.dialog-zoom[open] { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.dialog-zoom::backdrop { background: rgba(2, 20, 36, .82); }   /* latar digelapkan */
.dialog-zoom img {
  flex: none;
  display: block;
  height: min(calc(100dvh - 210px), 700px);
  width: auto;
  aspect-ratio: 338 / 498;                 /* kadar asal avatar */
  max-width: calc(94vw - 64px);
  object-fit: contain;                     /* tidak diregang atau dipotong */
  border-radius: 22px;
}
.dialog-zoom .btn-profil-aksi { flex: none; min-width: 170px; min-height: 60px; font-size: calc(24px * var(--ts)); padding: 0 32px; }

@media (prefers-reduced-motion: reduce) { .avatar-opsyen img { transition: none !important; } .avatar-opsyen:hover img { transform: none; } }

/* ---------- Keadaan murid baharu / pengesahan ---------- */
.btn-kecil:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.pilih-avatar.perlu .avatar-senarai { background: #fff4e5; outline: max(3px, 0.3cqw) dashed #f08a24; border-radius: 1.4cqw; }

/* ================= Pop-up Tetapan (Mockup 03) =================
   Berkongsi panel, papan kayu, butang X, butang audio dan kaki (Batal/Simpan) dengan pop-up Profil. */
.papan-kayu { display: flex; align-items: center; justify-content: center; gap: 1cqw; }
.ikon-papan { flex: none; width: max(26px, 3.6cqw); height: max(26px, 3.6cqw); color: #fff6e0; filter: drop-shadow(0 0.2cqw 0 #5a3410); }

.tetapan-badan { display: grid; grid-template-columns: 30cqw 1fr; gap: 2.6cqw; align-items: stretch; }

.tetapan-guru { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 1.6cqw; min-width: 0; }
.gelembung {
  position: relative;
  display: flex; align-items: center; gap: 1cqw;
  padding: 1cqw 1.2cqw;
  background: #fff;
  border: max(2px, 0.25cqw) solid #9ccbf0;
  border-radius: 2cqw;
  box-shadow: 0 0.3cqw 0.8cqw rgba(0,0,0,.15);
}
.gelembung::after {                               /* ekor gelembung menghala ke guru */
  content: ""; position: absolute; left: 30%; bottom: -1.5cqw;
  width: 2cqw; height: 2cqw; background: #fff;
  border-right: max(2px, 0.25cqw) solid #9ccbf0; border-bottom: max(2px, 0.25cqw) solid #9ccbf0;
  transform: rotate(45deg) skew(8deg, 8deg);
}
.gelembung p { margin: 0; flex: 1; font-size: calc(max(14px, 1.8cqw) * var(--ts)); font-weight: 800; line-height: 1.25; color: #6b3d10; }
.guru-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0.5cqw 0.6cqw rgba(0,0,0,.25)); }

.tetapan-kanan { display: flex; flex-direction: column; gap: 1.2cqw; min-width: 0; }

.kad-tetapan {
  display: flex; flex-direction: column; gap: 0.9cqw;
  padding: 1.1cqw 1.6cqw 1.3cqw;
  background: linear-gradient(#f7fbff, #e1f0fc);
  border: max(2px, 0.25cqw) solid #b6d9f3;
  border-radius: 1.8cqw;
  --warna: var(--biru);
}
.kad-tetapan:nth-child(2) { background: linear-gradient(#f4fcf6, #d8f1e1); border-color: #a5dbb8; --warna: #0e8a8a; }
.kad-tetapan:nth-child(3) { background: linear-gradient(#fffaf0, #ffe8c6); border-color: #f2c98c; --warna: #d96a00; }

.kad-kepala { display: flex; align-items: center; gap: 1.2cqw; }
.kad-ikon-t {
  flex: none; display: grid; place-items: center;
  width: max(40px, 4.6cqw); height: max(40px, 4.6cqw);
  border-radius: 50%; background: #fff; color: var(--warna);
  font-size: calc(max(18px, 2.4cqw) * var(--ts)); font-weight: 800;
  box-shadow: 0 0.2cqw 0.6cqw rgba(0,0,0,.2);
}
.kad-ikon-t svg { width: 62%; height: 62%; }
.kad-tajuk-t { flex: 1; min-width: 0; }
.kad-tajuk-t h3 { margin: 0; font-size: calc(max(17px, 2.2cqw) * var(--ts)); font-weight: 800; color: #3b2410; line-height: 1.1; }
.kad-tajuk-t p { margin: 0.3cqw 0 0; font-size: calc(max(13px, 1.5cqw) * var(--ts)); font-weight: 700; color: #6b5a4a; line-height: 1.2; }

/* Saiz Tulisan: dua butang besar */
.pilihan-saiz { display: flex; gap: 1.4cqw; }
.pil-saiz { flex: 1; position: relative; }
.pil-saiz input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.pil-isi {
  display: flex; align-items: center; justify-content: center; gap: 1cqw;
  min-height: max(52px, 5.4cqw);
  background: #fff; border: max(3px, 0.3cqw) solid #9ccbf0; border-radius: 1.4cqw;
  font-size: calc(max(16px, 2cqw) * var(--ts)); font-weight: 800;
}
.huruf { font-weight: 800; line-height: 1; }
.huruf-s { font-size: calc(max(20px, 2.6cqw) * var(--ts)); }
.huruf-b { font-size: calc(max(26px, 3.6cqw) * var(--ts)); }
.pil-saiz input:checked + .pil-isi { background: var(--biru); border-color: var(--biru-gelap); color: #fff; }
.pil-saiz input:checked + .pil-isi::before { content: "✓"; font-weight: 800; }
.pil-saiz input:focus-visible + .pil-isi { outline: 4px solid var(--fokus); outline-offset: 2px; box-shadow: 0 0 0 7px #000; }

/* Suis Hidup/Mati */
.kawalan-suis { display: flex; align-items: center; justify-content: space-between; gap: 1.6cqw; flex-wrap: wrap; }
.suis { --bulat: max(26px, 3.4cqw); position: relative; display: inline-flex; align-items: center; gap: 1.1cqw; min-height: max(44px, 5cqw); cursor: pointer; }
.suis input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.suis-trek {
  position: relative; flex: none;
  width: max(72px, 8.6cqw); height: max(38px, 4.6cqw);
  border-radius: 999px; background: #aab6c0;
  border: max(3px, 0.3cqw) solid #fff;
  box-shadow: inset 0 0.2cqw 0.5cqw rgba(0,0,0,.25), 0 0.2cqw 0.5cqw rgba(0,0,0,.2);
  transition: background .15s ease;
}
.suis-bulat {
  position: absolute; top: 50%; left: 0.4cqw;
  width: var(--bulat); height: var(--bulat); margin-top: calc(var(--bulat) / -2);
  border-radius: 50%; background: #fff; box-shadow: 0 0.2cqw 0.4cqw rgba(0,0,0,.35);
  transition: left .15s ease;
}
.suis input:checked ~ .suis-trek { background: var(--hijau); }
.suis input:checked ~ .suis-trek .suis-bulat { left: calc(100% - var(--bulat) - 0.4cqw); }
.suis input:focus-visible ~ .suis-trek { outline: 4px solid var(--fokus); outline-offset: 3px; box-shadow: 0 0 0 7px #000; }
.suis-teks { min-width: 3.4em; font-size: calc(max(16px, 2cqw) * var(--ts)); font-weight: 800; color: #3b2410; }

.btn-contoh {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7cqw;
  min-height: max(44px, 4.8cqw); padding: 0 1.8cqw;
  background: #fff; color: var(--biru-gelap);
  border: max(3px, 0.28cqw) solid #9ccbf0; border-radius: 999px;
  font-size: calc(max(14px, 1.8cqw) * var(--ts)); font-weight: 800;
  box-shadow: 0 0.3cqw 0 #9ccbf0;
}
.btn-contoh svg { flex: none; width: max(18px, 2cqw); height: max(18px, 2cqw); }
.btn-contoh.main { background: #fff3d6; border-color: var(--jingga); }

@media (prefers-reduced-motion: reduce) {
  .suis-trek, .suis-bulat { transition: none !important; }
}

/* Penanda "sedang dicuba, belum disimpan" dalam pop-up Tetapan */
.nota-lajur { flex: 1; display: flex; flex-direction: column; gap: 0.3cqw; min-width: 0; }
.nota-lajur .profil-nota { flex: none; margin: 0; }
.status-cuba {
  margin: 0; min-height: 1.2em;
  font-size: calc(max(13px, 1.6cqw) * var(--ts)); font-weight: 800; line-height: 1.2; color: #8a4a00;
}
.status-cuba:not(:empty)::before { content: "● "; color: var(--jingga); }
.kad-tetapan.berubah { box-shadow: 0 0 0 max(3px, 0.3cqw) var(--jingga); }


/* ================= Butang Info (Halaman Utama) =================
   Kumpulan kanan atas: Info (kiri) + Tetapan (kanan). Kedudukan Tetapan tidak berubah (right: 2cqw, top: 2cqw). */
.bar-kanan { position: absolute; top: 2cqw; right: 2cqw; display: flex; align-items: flex-start; gap: 1.2cqw; }
.bar-kanan .btn-papan { position: relative; top: auto; right: auto; }
.btn-info {
  flex-direction: column; justify-content: center; gap: 0.1cqw;
  min-width: max(64px, 7.4cqw);
  padding: 0.2cqw 1cqw 0.35cqw;
  font-size: calc(max(14px, 2cqw) * var(--ts)); font-weight: 800; line-height: 1;
}
.ikon-buku { width: max(22px, 2.5cqw); height: max(22px, 2.5cqw); color: var(--biru); }
.btn-info { border-bottom-color: var(--kayu); box-shadow: 0 0.4cqw 0 var(--kayu-gelap), 0 0.8cqw 1.4cqw rgba(0,0,0,.28), inset 0 -0.45cqw 0 rgba(28,127,224,.32); }

/* ================= Pop-up Info Pembelajaran (dua tab, mengikut mockup terbaru) =================
   Dialog = bekas "inline-size"; lebar ditetapkan secara eksplisit (rujuk catatan pop-up Profil).
   Hanya senarai objektif yang boleh ditatal; tajuk, tab, SK/SP, butang Dengar dan kaki sentiasa kelihatan. */
.dialog-info {
  width: min(96vw, 168dvh);
  max-width: none;
  max-height: 97dvh;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  container-type: inline-size;
  color: var(--teks);
  font-family: inherit;
}
/* Latar pantai sebenar (aset Halaman Utama) menggantikan latar gelap */
.dialog-info::backdrop {
  background: linear-gradient(rgba(4, 36, 62, .14), rgba(4, 36, 62, .14)), url("assets/latar-pantai.png") center / cover no-repeat, #0a4a73;
}
.info-adegan {
  --w: var(--biru); --w-muda: #e3f1ff; --w-latar: #f4faff; --bd: var(--biru);
  position: relative;
  display: flex; flex-direction: column;
  max-height: 97dvh;
}
.info-adegan:has(.tab-t6[aria-selected="true"]) { --w: var(--merah-jambu); --w-muda: #ffe6f0; --w-latar: #fff6fa; --bd: var(--merah-jambu); }

/* Hiasan 3D (slot fail; hanya kelihatan jika fail wujud) */
.hiasan { position: absolute; pointer-events: none; z-index: 5; height: auto; }
.hiasan[hidden] { display: none; }
.h-daun { left: 50%; top: -1cqw; width: 62cqw; transform: translateX(-50%); z-index: 0; }
.h-bunga-kiri { left: -3cqw; bottom: -3cqw; width: 15cqw; }
.h-bunga-kanan { right: -3cqw; bottom: -3cqw; width: 15cqw; }

/* Atas: guru (besar), papan kayu, ayat, X */
.info-atas { position: relative; z-index: 4; display: flex; justify-content: center; min-height: 8.7cqw; padding-top: 0.3cqw; }
.info-guru { position: absolute; z-index: 6; left: -1.8cqw; top: -0.6cqw; width: 23cqw; height: auto; pointer-events: none; filter: drop-shadow(0 0.5cqw 0.6cqw rgba(0,0,0,.35)); }
.info-judul { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.4cqw; }
.info-judul .papan-kayu { display: flex; align-items: center; gap: 1.2cqw; padding: 0.3cqw 3.2cqw 0.45cqw; font-size: calc(max(22px, 3.1cqw) * var(--ts)); border-radius: 1.8cqw; }
.ikon-papan-3d { width: 1.35em; height: 1.35em; flex: none; filter: drop-shadow(0 0.2cqw 0 rgba(0,0,0,.35)); }
.info-sapa {
  margin: 0; padding: 0.25cqw 2.4cqw;
  font-size: calc(max(15px, 1.5cqw) * var(--ts)); font-weight: 800; text-align: center;
  color: #5a3410; background: #fffbe8; border: max(2px, 0.2cqw) solid #f0d79a; border-radius: 2cqw;
  box-shadow: 0 0.25cqw 0 rgba(0,0,0,.15);
}
.info-atas .btn-x { right: 0.4cqw; top: 0.4cqw; z-index: 7; }

/* Tab besar (duduk di atas bingkai) */
.info-tab-baris { position: relative; z-index: 3; display: flex; justify-content: center; margin-bottom: -1.4cqw; }
.info-tab { display: flex; justify-content: center; gap: 1.6cqw; }
.tab {
  position: relative; flex: 0 1 24cqw; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 1cqw;
  min-height: max(46px, 4.7cqw);
  padding: 0.2cqw 1.6cqw 1.5cqw;
  font-family: inherit; text-align: left; cursor: pointer;
  color: var(--tw); background: #fff;
  border: max(3px, 0.35cqw) solid var(--tw); border-bottom: 0; border-radius: 2cqw 2cqw 0 0;
  box-shadow: 0 -0.2cqw 0 rgba(0,0,0,.08);
  opacity: .88;
}
.tab-t4 { --tw: var(--biru); --tw-gelap: var(--biru-gelap); }
.tab-t6 { --tw: var(--merah-jambu); --tw-gelap: #9c1450; }
.tab:not([aria-selected="true"]) { background: #fff; }
.tab-avatar { flex: none; width: max(38px, 4.6cqw); height: max(38px, 4.6cqw); border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: max(2px, .25cqw) solid #fff; background: #fff; box-shadow: 0 0 0 max(2px,.2cqw) var(--tw); }
.tab-teks { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.tab-teks b { white-space: nowrap; font-size: calc(max(18px, 2.4cqw) * var(--ts)); font-weight: 800; }
.tab-teks small { font-size: calc(max(14px, 1.8cqw) * var(--ts)); font-weight: 800; overflow-wrap: break-word; }
.tab-tanda { display: none; position: absolute; left: -1cqw; top: -1.1cqw; width: 1.7em; height: 1.7em; place-items: center; border-radius: 50%; background: #fff; color: var(--tw); border: max(2px, .2cqw) solid var(--tw); box-shadow: 0 0.2cqw 0 rgba(0,0,0,.25); font-weight: 800; font-size: calc(max(14px, 1.8cqw) * var(--ts)); }
/* Tab aktif: warna penuh + tanda ✓ (bukan warna sahaja); menyatu dengan bingkai */
.tab[aria-selected="true"] { opacity: 1; color: #fff; background: linear-gradient(var(--tw), var(--tw-gelap)); }
.tab[aria-selected="true"] .tab-teks small { color: #ffe65a; }
.tab[aria-selected="true"] .tab-tanda { display: grid; }
.tab[aria-selected="true"] .tab-avatar { box-shadow: none; }
.tab:hover:not([aria-selected="true"]) { opacity: 1; }
.dialog-info button:focus-visible, .objektif:focus-visible { outline: 4px solid var(--fokus); outline-offset: 2px; }

/* Bingkai kandungan */
.info-panel {
  position: relative;     /* tanpa z-index: murid (z-index -1) mesti terlukis DI BELAKANG bingkai ini */
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
  gap: 0.55cqw;
  padding: 1.5cqw 2.6cqw 0.9cqw;
  background:
    radial-gradient(circle at 90% 0%, rgba(120,200,255,.28), transparent 45%),
    linear-gradient(#f2f9ff 0%, #fdf6e4 100%);
  border: max(4px, 0.55cqw) solid var(--bd); border-radius: 2.6cqw;
  box-shadow: 0 0.8cqw 0 rgba(0,0,0,.25), 0 2cqw 4cqw rgba(0,0,0,.4);
}
/* Murid 3D mengintai dari belakang bingkai di penjuru kanan atas */
.info-murid { position: absolute; z-index: -1; right: 8cqw; bottom: calc(100% - 3.2cqw); width: 13cqw; height: auto; pointer-events: none; }
.info-tengah { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.info-lajur { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 1cqw; }
.info-lajur[hidden] { display: none; }
.panel-tajuk { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }

/* SK + SP + Dengar */
.baris-sksp { display: grid; grid-template-columns: 1fr 1fr auto; gap: 1.2cqw; align-items: stretch; flex: none; padding-left: 7cqw; }
.kad-info { display: flex; align-items: center; gap: 1.2cqw; min-width: 0; padding: 0.45cqw 1.2cqw; background: var(--w-muda); border-radius: 1.8cqw; box-shadow: inset 0 0 0 max(2px,.2cqw) rgba(255,255,255,.7); }
.kad-ilustrasi { flex: none; width: max(44px, 5cqw); height: max(44px, 5cqw); object-fit: contain; }
.kad-teks { min-width: 0; flex: 1; }
.kad-info h4, .kad-obj h4 { margin: 0 0 0.2cqw; font-size: calc(max(16px, 1.75cqw) * var(--ts)); font-weight: 800; color: var(--w); }
.kad-info p, .kad-obj p { margin: 0; font-size: calc(max(15px, 1.5cqw) * var(--ts)); line-height: 1.3; font-weight: 600; color: var(--teks); overflow-wrap: break-word; }
.kad-info p b { display: inline-block; margin-right: 0.6cqw; font-weight: 800; }

.btn-dengar {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2cqw;
  align-self: center;
  width: max(72px, 7.2cqw); height: max(72px, 7.2cqw); padding: 0;
  font-family: inherit; font-size: calc(max(14px, 1.55cqw) * var(--ts)); font-weight: 800; color: #fff; cursor: pointer;
  background: radial-gradient(circle at 35% 25%, #6fbcff, var(--bd) 70%);
  border: max(3px, .35cqw) solid #fff; border-radius: 50%;
  box-shadow: 0 0.4cqw 0 rgba(0,0,0,.28), 0 0.8cqw 1.2cqw rgba(0,0,0,.2);
}
.btn-dengar svg { width: 3cqw; min-width: 26px; height: 3cqw; min-height: 26px; }
.btn-dengar.main { background: #ffe65a; color: #3b2410; animation: denyut 1.2s ease-in-out infinite; }
@keyframes denyut { 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .btn-dengar.main { animation: none; } }

/* Objektif: satu panel kuning, tiga baris menegak */
.kad-obj { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 0.5cqw; padding: 0.6cqw 1.4cqw 0.7cqw; background: #fff3cf; border-radius: 2cqw; box-shadow: inset 0 0 0 max(2px,.2cqw) rgba(255,255,255,.7); }
.kad-obj h4 { color: #c85f00; }
.obj-kepala { display: flex; align-items: center; gap: 1.2cqw; flex: none; }
.obj-kepala .kad-teks { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1.2cqw; row-gap: 0; }
.obj-kepala .kad-teks h4 { margin: 0; }
.obj-kepala .kad-ilustrasi { width: max(34px, 3.2cqw); height: max(34px, 3.2cqw); }
.objektif { list-style: none; margin: 0; padding: 0 0.6cqw 0 0; display: flex; flex-direction: column; gap: 0.6cqw; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: auto; scrollbar-color: #e39a1b #ffe9a8; }
.objektif::-webkit-scrollbar { width: max(14px, 1.4cqw); }
.objektif::-webkit-scrollbar-track { background: #ffe9a8; border-radius: 2cqw; }
.objektif::-webkit-scrollbar-thumb { background: #e39a1b; border-radius: 2cqw; border: 3px solid #ffe9a8; }
.objektif li { flex: none; display: grid; grid-template-columns: auto 1fr 8.8cqw; align-items: center; gap: 1.4cqw; min-width: 0; padding: 0.45cqw 1.2cqw 0.45cqw 0.9cqw; background: #fffdf6; border-radius: 1.8cqw; box-shadow: 0 0.2cqw 0 rgba(0,0,0,.08); }
.obj-teks { min-width: 0; font-size: calc(max(15px, 1.5cqw) * var(--ts)); line-height: 1.3; font-weight: 600; overflow-wrap: break-word; }
.objektif .no { display: grid; place-items: center; width: max(34px, 3.7cqw); height: max(34px, 3.7cqw); border-radius: 50%; color: #fff; font-weight: 800; font-size: calc(max(17px, 2cqw) * var(--ts)); border: max(2px,.25cqw) solid #fff; box-shadow: 0 0.25cqw 0 rgba(0,0,0,.25); }
.objektif li:nth-child(1) .no { background: #f5a000; }
.objektif li:nth-child(2) .no { background: #1fa855; }
.objektif li:nth-child(3) .no { background: var(--merah-jambu); }
.obj-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 1.2cqw; border: max(2px,.28cqw) solid #fff; box-shadow: 0 0.3cqw 0.6cqw rgba(0,0,0,.3); }
.objektif li:nth-child(odd) .obj-img { transform: rotate(1.5deg); } .objektif li:nth-child(even) .obj-img { transform: rotate(-1.5deg); }

/* Petunjuk tatal (dalam aliran, bukan terapung) dan mesej audio ringkas (ruang kosong sebelah kanan tajuk objektif) */
.info-tatal { flex: none; margin: 0; text-align: center; font-size: calc(max(13px, 1.4cqw) * var(--ts)); font-weight: 800; color: #8a4b00; }
.info-tatal[hidden] { display: none; }
.info-nota-audio { position: absolute; top: 1cqw; right: 1.4cqw; max-width: 46%; margin: 0; padding: 0.4cqw 1.4cqw; border-radius: 2cqw; text-align: center; font-weight: 800; color: #5a2a00; background: #ffe9a8; border: max(2px,.2cqw) solid #e8b84a; }
.info-nota-audio:empty { display: none; }

/* Kaki: ayat + perjalanan mendatar */
.info-kaki { display: flex; align-items: center; justify-content: space-between; gap: 1.4cqw; flex: none; }
.info-ringkas { flex: 1.25 1 0; min-width: 0; margin: 0; display: flex; align-items: center; gap: 1cqw; padding: 0.2cqw 1.2cqw 0.2cqw 0.6cqw; font-size: calc(max(14px, 1.4cqw) * var(--ts)); font-weight: 700; line-height: 1.3; color: #0f4c8f; background: #e9f4ff; border: max(2px, 0.2cqw) solid #bcdcf7; border-radius: 2cqw; }
.mentol { flex: none; width: max(36px, 4cqw); height: max(36px, 4cqw); border-radius: 50%; }
.info-aliran { flex: 1 1 0; min-width: 0; list-style: none; margin: 0; padding: 0.2cqw 1cqw; display: flex; align-items: center; justify-content: space-between; gap: 0.3cqw; background: #fff; border: max(2px, 0.2cqw) solid #f0d79a; border-radius: 2cqw; }
.info-aliran li { display: flex; align-items: center; gap: 0.5cqw; min-width: 0; }
.a-lencana { flex: none; width: max(34px, 3.6cqw); height: max(34px, 3.6cqw); border-radius: 50%; box-shadow: 0 0.25cqw 0 rgba(0,0,0,.2); }
.a-teks { display: flex; flex-direction: column; line-height: 1.1; }
.a-teks b { font-size: calc(max(14px, 1.6cqw) * var(--ts)); font-weight: 800; }
.a-teks small { font-size: calc(max(12px, 1.2cqw) * var(--ts)); font-weight: 700; white-space: nowrap; }
.a-kutip b { color: var(--biru); } .a-cipta b { color: var(--jingga); } .a-cerita b { color: var(--merah-jambu); }
.a-sambung { flex: none; font-size: calc(max(20px, 2.6cqw) * var(--ts)); font-weight: 800; color: var(--biru); line-height: 1; }
html[data-teks="besar"] .btn-dengar { width: max(88px, 8.8cqw); height: max(88px, 8.8cqw); }

/* Tulisan Besar: bahagian "kulit" (papan tajuk, ayat, tab, kaki) sudah besar, jadi hanya dibesarkan sedikit;
   kandungan SK, SP dan objektif dibesarkan penuh (x1.25) supaya ruang untuk objektif lebih banyak. */
html[data-teks="besar"] .info-atas,
html[data-teks="besar"] .info-tab-baris,
html[data-teks="besar"] .info-kaki { --ts: 1.08; }
.objektif li { padding-top: 0.3cqw; padding-bottom: 0.3cqw; }

/* Pembetulan: ruang ilustrasi objektif dikekalkan (kosong sehingga aset 3D tersedia) dan ruang bawah lebih lapang */
.obj-slot { display: block; width: 100%; aspect-ratio: 16 / 9; }
.info-panel { padding-bottom: 1.9cqw; }
.info-aliran { padding-left: 1cqw; padding-right: 1.5cqw; }

/* Pembetulan susun atur: kad SK/SP lebih rendah; ruang yang diperoleh diberikan kepada panel Objektif */
.kad-info { padding: 0.3cqw 1.2cqw; }
.kad-info h4 { margin-bottom: 0; }
.kad-info p { line-height: 1.25; }
.baris-sksp .kad-ilustrasi { width: max(40px, 4.4cqw); height: max(40px, 4.4cqw); }
.baris-sksp .btn-dengar { margin-block: -1.4cqw; }        /* butang bulat kekal sama besar tetapi tidak menambah tinggi baris */
.objektif li { grid-template-columns: auto 1fr 7.8cqw; flex: 1 0 auto; padding-top: 0.25cqw; padding-bottom: 0.25cqw; }
.obj-teks { align-self: center; }


/* ================= Modul KENALI PANTAI KITA! — Slaid 1 (Pantai Kita) =================
   Skrin 16:9 sendiri (sama seperti Halaman Utama): semua saiz dalam "cqw". Halaman Utama disembunyikan semasa slaid dipaparkan. */
.pentas[hidden] { display: none; }
.pentas-kenali { font-family: inherit; }

/* Navigasi mengikut mockup: Profil kiri atas, Tetapan kanan atas, Kembali kiri bawah, Seterusnya kanan bawah */
.btn-profil-k { left: 1.4cqw; top: 1.4cqw; gap: 0.8cqw; min-width: 14cqw; max-width: 19cqw; padding: 0.5cqw 1.4cqw 0.5cqw 0.6cqw; min-height: max(48px, 6.2cqw); }
.btn-profil-k .avatar { width: max(44px, 5.2cqw); height: max(44px, 5.2cqw); }
.k-profil-teks { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.k-profil-teks b { font-size: calc(max(15px, 2cqw) * var(--ts)); font-weight: 800; color: #3b1d05; overflow-wrap: anywhere; }
.k-profil-teks small { font-size: calc(max(12px, 1.4cqw) * var(--ts)); font-weight: 700; overflow-wrap: anywhere; }
.btn-tetapan-k { right: 1.4cqw; top: 1.4cqw; min-height: max(48px, 6.2cqw); }

.btn-kembali { left: 1.4cqw; top: auto; bottom: 1.5cqw; min-height: max(48px, 6.2cqw); gap: 0.8cqw; padding: 0.5cqw 1.6cqw 0.5cqw 1.1cqw; z-index: 5; }
.btn-kembali svg { flex: none; width: max(26px, 3.4cqw); height: max(26px, 3.4cqw); color: #c2561a; }
.k-kembali-teks { display: flex; flex-direction: column; line-height: 1.1; }
.k-kembali-teks b { font-size: calc(max(15px, 2cqw) * var(--ts)); font-weight: 800; color: #3b1d05; }
.k-kembali-teks small { font-size: calc(max(12px, 1.4cqw) * var(--ts)); font-weight: 700; }

/* Tajuk modul */
.k-judul { position: absolute; left: 50%; transform: translateX(-50%); top: 0.5cqw; width: 33cqw; text-align: center; z-index: 2; }
.k-judul h1 { margin: 0; padding: 0.5cqw 2cqw 0.7cqw; display: flex; flex-direction: column; line-height: 1; background: linear-gradient(#fff8e4, #ffe9b8); border: max(3px, 0.4cqw) solid var(--kayu); border-radius: 2.4cqw; box-shadow: 0 0.4cqw 0 var(--kayu-gelap), 0 0.8cqw 1.4cqw rgba(0,0,0,.3); }
.k-judul h1:focus { outline: none; }
.k-judul h1:focus-visible { outline: 4px solid var(--fokus); }
.k-kenali, .k-pantai { font-weight: 900; -webkit-text-stroke: max(2px, 0.3cqw) #fff; paint-order: stroke fill; text-shadow: 0 0.25cqw 0 rgba(0,0,0,.25); }
.k-kenali { font-size: calc(max(20px, 3.5cqw) * var(--ts)); color: #1f86f0; }
.k-pantai { font-size: calc(max(24px, 4.3cqw) * var(--ts)); color: #ff8a00; }
.k-sub { margin: 0.4cqw auto 0; width: fit-content; max-width: 100%; padding: 0.2cqw 3cqw 0.3cqw; font-size: calc(max(16px, 2.5cqw) * var(--ts)); font-weight: 800; color: #5a3410; background: linear-gradient(#f4d9a6, #e2b574); border: max(2px, 0.3cqw) solid var(--kayu); border-radius: 1.4cqw; box-shadow: 0 0.3cqw 0 var(--kayu-gelap); }

/* Penunjuk kemajuan 1/3 */
.k-maju { position: absolute; left: 69.5cqw; top: 4.6cqw; margin: 0; padding: 0.7cqw 1.6cqw; list-style: none; display: flex; align-items: center; gap: 0.9cqw; background: #fff; border: max(2px, 0.25cqw) solid #f0d79a; border-radius: 3cqw; box-shadow: 0 0.3cqw 0 rgba(0,0,0,.15); z-index: 2; }
.k-maju li { display: grid; place-items: center; width: max(26px, 2.9cqw); height: max(26px, 2.9cqw); border-radius: 50%; background: #d9dde2; color: #fff; font-weight: 800; font-size: calc(max(13px, 1.6cqw) * var(--ts)); }
.k-maju li.aktif { background: var(--biru); box-shadow: 0 0 0 max(2px, .25cqw) #fff, 0 0 0 max(4px, .45cqw) var(--biru); }
.k-maju li.k-maju-teks { width: auto; height: auto; background: none; color: #3b2410; font-size: calc(max(15px, 2cqw) * var(--ts)); margin-left: 0.3cqw; }

/* Guru + gelembung kata */
.k-guru { position: absolute; left: 1cqw; bottom: 8.6cqw; width: 24cqw; height: auto; pointer-events: none; filter: drop-shadow(0 0.5cqw 0.7cqw rgba(0,0,0,.35)); z-index: 1; }
.k-gelembung { position: absolute; left: 2.4cqw; top: 9.6cqw; width: 23.5cqw; display: flex; align-items: center; gap: 0.8cqw; padding: 1cqw 1cqw 1cqw 1.4cqw; background: #fff; border: max(2px, 0.25cqw) solid #cfe6f7; border-radius: 2.4cqw; box-shadow: 0 0.4cqw 0.8cqw rgba(0,0,0,.25); z-index: 3; }
.k-gelembung::after { content: ""; position: absolute; left: 5cqw; bottom: -1.5cqw; width: 2.6cqw; height: 2.6cqw; background: #fff; border-right: max(2px, 0.25cqw) solid #cfe6f7; border-bottom: max(2px, 0.25cqw) solid #cfe6f7; transform: rotate(45deg) skew(10deg, 10deg); }
.k-gelembung p { margin: 0; flex: 1; min-width: 0; font-size: calc(max(14px, 1.6cqw) * var(--ts)); line-height: 1.3; font-weight: 700; color: #3b2410; overflow-wrap: break-word; }

/* Lajur kanan: soalan, panel pilihan, maklumat + Seterusnya */
.k-kolum { position: absolute; left: 32.8cqw; right: 1.4cqw; top: 14cqw; bottom: 1.5cqw; display: flex; flex-direction: column; z-index: 2; }
.k-soalan { align-self: flex-start; margin-left: 7.8cqw; position: relative; z-index: 3; display: flex; align-items: center; gap: 1cqw; padding: 0.4cqw 3.2cqw 0.4cqw 0.5cqw; margin-bottom: -1.6cqw; background: linear-gradient(#f4d9a6, #e2b574); border: max(2px, .3cqw) solid var(--kayu); border-radius: 3cqw; box-shadow: 0 0.35cqw 0 var(--kayu-gelap), 0 0.6cqw 1cqw rgba(0,0,0,.25); }
.k-soalan h2 { margin: 0; font-size: calc(max(18px, 2.6cqw) * var(--ts)); font-weight: 800; color: #3b1d05; }
.k-panel { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0.5cqw; padding: 2.4cqw 2cqw 2.6cqw; background: linear-gradient(#fff6dc, #ffeec3); border: max(3px, .4cqw) solid #f1cf8a; border-radius: 2.6cqw; box-shadow: 0 0.5cqw 0 rgba(0,0,0,.18), 0 1cqw 2cqw rgba(0,0,0,.2); }
.k-arahan { margin: 0; flex: none; min-height: 2.8cqw; display: flex; align-items: center; justify-content: center; gap: 0.8cqw; text-align: center; font-size: calc(max(16px, 2cqw) * var(--ts)); font-weight: 800; color: #3b2410; }
.k-arahan.betul { color: #0e7a3a; }
.k-arahan.cuba { color: #b04a00; }
.k-arahan svg { flex: none; width: 1.4em; height: 1.4em; }

.k-pilihan { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.k-kad { position: relative; min-height: 0; padding: 0; border: 0; background: none; border-radius: 2.2cqw; text-align: center; }
.k-gambar { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 2.2cqw; border: max(3px, .45cqw) solid #fff; box-shadow: 0 0.4cqw 0 rgba(0,0,0,.18), 0 0.7cqw 1.2cqw rgba(0,0,0,.25); background: #cfe6f7; }
.k-gambar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.k-kad:hover .k-gambar { transform: translateY(-0.2cqw); }
.k-label { position: absolute; left: 50%; bottom: -1.9cqw; transform: translateX(-50%); display: flex; align-items: center; gap: 1cqw; padding: 0.3cqw 3cqw 0.3cqw 0.6cqw; white-space: nowrap; font-size: calc(max(17px, 2.6cqw) * var(--ts)); font-weight: 800; border-radius: 3cqw; box-shadow: 0 0.3cqw 0 rgba(0,0,0,.2), 0 0.5cqw 0.8cqw rgba(0,0,0,.2); }
.k-kad-a .k-label { color: #0b5a2c; background: #dff5e6; border: max(2px,.25cqw) solid #b7e3c5; }
.k-kad-b .k-label { color: #6b1342; background: #ffe0ee; border: max(2px,.25cqw) solid #f6bad3; }
.k-bulat { flex: none; display: grid; place-items: center; width: max(30px, 3.6cqw); height: max(30px, 3.6cqw); border-radius: 50%; background: #fff; border: max(3px, .4cqw) solid currentColor; }
.k-bulat svg { width: 70%; height: 70%; }
.k-chip { display: none; position: absolute; left: 1.2cqw; top: 1.2cqw; z-index: 2; align-items: center; gap: 0.5cqw; padding: 0.3cqw 1.4cqw 0.3cqw 0.8cqw; font-size: calc(max(14px, 1.8cqw) * var(--ts)); font-weight: 800; color: #fff; border-radius: 3cqw; border: max(2px,.25cqw) solid #fff; box-shadow: 0 0.3cqw 0.6cqw rgba(0,0,0,.35); }
.k-chip svg { width: 1.2em; height: 1.2em; }
.k-kad.betul .k-gambar { border-color: #18a553; box-shadow: 0 0 0 max(4px,.5cqw) rgba(24,165,83,.45), 0 0.7cqw 1.2cqw rgba(0,0,0,.25); }
.k-kad.betul .k-chip { display: flex; background: var(--hijau); }
.k-kad.betul .k-bulat { background: var(--hijau); color: #fff; border-color: var(--hijau); }
.k-kad.cuba .k-gambar { border-color: var(--jingga); box-shadow: 0 0 0 max(4px,.5cqw) rgba(238,122,12,.45), 0 0.7cqw 1.2cqw rgba(0,0,0,.25); }
.k-kad.cuba .k-chip { display: flex; background: var(--jingga); }
.k-kad:focus-visible { outline: none; }
.k-kad:focus-visible .k-gambar { outline: 5px solid var(--fokus); outline-offset: 2px; }
.k-pantai-dummy { display: none; }

.k-bawah { flex: none; display: flex; align-items: center; gap: 1.4cqw; margin-top: 1.1cqw; padding-left: 10.8cqw; }
.k-maklumat { flex: 1; min-width: 0; display: flex; align-items: center; gap: 1cqw; padding: 0.6cqw 1.2cqw 0.6cqw 0.8cqw; background: #f1fbf4; border: max(2px, .25cqw) solid #c9ead3; border-radius: 2.4cqw; box-shadow: 0 0.3cqw 0 rgba(0,0,0,.12); }
.k-mentol { flex: none; width: max(38px, 4.4cqw); height: max(38px, 4.4cqw); border-radius: 50%; }
.k-maklumat-teks { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3cqw; }
.k-maklumat-teks p { margin: 0; font-size: calc(max(13px, 1.4cqw) * var(--ts)); line-height: 1.3; font-weight: 600; color: #1f3a2a; overflow-wrap: break-word; }
.k-maklumat-teks .k-nilai { display: flex; align-items: center; gap: 0.6cqw; width: fit-content; padding: 0.1cqw 1.2cqw 0.1cqw 0.6cqw; border-radius: 2cqw; background: #d7f3df; color: #0e6a34; font-weight: 800; }
.k-nilai svg { flex: none; width: 1.5em; height: 1.5em; }
.k-seterusnya { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.8cqw; min-width: 13.2cqw; min-height: max(52px, 6.4cqw); padding: 0.5cqw 2cqw; font-size: calc(max(17px, 2.4cqw) * var(--ts)); font-weight: 800; color: #fff; background: linear-gradient(#34c46d, #0e9a47); border: max(3px, .4cqw) solid #fff; border-radius: 4cqw; box-shadow: 0 0.5cqw 0 var(--hijau-gelap), 0 0.9cqw 1.4cqw rgba(0,0,0,.3); }
.k-seterusnya svg { width: 1.2em; height: 1.2em; }
.k-seterusnya:hover { transform: translateY(-0.2cqw); }
.pentas-kenali .btn-audio { flex: none; }
.btn-audio.main { background: #ffe65a; color: #3b2410; }

.k-nota-audio { position: absolute; left: 66cqw; top: 10cqw; width: 28cqw; margin: 0; padding: 0.4cqw 1.4cqw; border-radius: 2cqw; text-align: center; font-size: calc(max(13px, 1.5cqw) * var(--ts)); font-weight: 800; color: #5a2a00; background: #ffe9a8; border: max(2px,.2cqw) solid #e8b84a; box-shadow: 0 0.3cqw 0.8cqw rgba(0,0,0,.3); z-index: 6; }
.k-nota-audio:empty { display: none; }
.pentas-kenali button:focus-visible { outline: 4px solid var(--fokus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .k-kad:hover .k-gambar, .k-seterusnya:hover { transform: none; } }

/* Penambahbaikan susun atur Slaid 1 (selepas ujian visual) */
.k-kolum { top: 15.6cqw; }
.k-sub { font-size: calc(max(15px, 2.2cqw) * var(--ts)); }
.k-gelembung { width: 27cqw; top: 9.6cqw; left: 1.6cqw; }
.k-gelembung p { font-size: calc(max(13px, 1.5cqw) * var(--ts)); }
.k-bawah { padding-left: 3cqw; }
.k-maklumat-teks .k-nilai { white-space: nowrap; }
.k-label { bottom: -2.4cqw; }
.k-panel { padding-bottom: 3.4cqw; }
.k-gelembung::after { width: 0; height: 0; left: 5cqw; bottom: -1.5cqw; background: none; transform: none; border: 0; border-left: 1.2cqw solid transparent; border-right: 1.2cqw solid transparent; border-top: 1.6cqw solid #fff; filter: drop-shadow(0 0.2cqw 0 #cfe6f7); }
.k-maju { left: auto; right: 1.4cqw; top: 8.8cqw; }
.k-gelembung { top: 10.4cqw; }
html[data-teks="besar"] .k-gelembung { top: 12cqw; }
html[data-teks="besar"] .k-kolum { top: 18.4cqw; }
html[data-teks="besar"] .k-judul h1 { padding-top: 0.2cqw; padding-bottom: 0.4cqw; }
html[data-teks="besar"] .k-sub { margin-top: 0.2cqw; }
/* Tulisan Besar: papan tajuk & maklumat dihadkan supaya pilihan gambar kekal cukup besar */
html[data-teks="besar"] .k-kenali { font-size: max(20px, 3.5cqw); }
html[data-teks="besar"] .k-pantai { font-size: max(24px, 4.3cqw); }
html[data-teks="besar"] .k-sub { font-size: max(15px, 2.2cqw); }
html[data-teks="besar"] .k-judul { width: 36cqw; }
html[data-teks="besar"] .k-bawah { padding-left: 0; }
.k-maklumat-teks p { font-size: calc(max(13px, 1.4cqw) * min(var(--ts), 1.12)); }
html[data-teks="besar"] .k-kolum { top: 16cqw; }

/* ================= Naik taraf Slaid 1 (v15) ================= */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 1. Papan tajuk: papan tanda kayu pengembaraan pantai */
.k-judul { width: 31cqw; }
.k-judul::before, .k-judul::after { content: ""; position: absolute; top: -2cqw; width: max(3px, .45cqw); height: 2.6cqw; background: repeating-linear-gradient(#e8cf9a 0 .4cqw, #b8955a .4cqw .8cqw); border-radius: 1cqw; z-index: -1; }
.k-judul::before { left: 15%; } .k-judul::after { right: 15%; }
.k-judul h1 {
  position: relative;
  background:
    repeating-linear-gradient(90deg, rgba(90,45,10,.10) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(0deg, rgba(255,235,190,.16) 0 1px, transparent 1px 7px),
    linear-gradient(#e9b774, #cf8f48 55%, #b9733a);
  border: max(4px, .55cqw) solid #6b3b17;
  border-radius: 1.6cqw;
  box-shadow: inset 0 0.3cqw 0 rgba(255,235,190,.55), inset 0 -0.4cqw 0 rgba(70,30,5,.35), 0 0.5cqw 0 #4b2810, 0 1cqw 1.6cqw rgba(0,0,0,.35);
  padding: 0.5cqw 2.4cqw 0.7cqw;
}
.k-judul h1::before, .k-judul h1::after { content: ""; position: absolute; top: 50%; width: max(7px, .9cqw); height: max(7px, .9cqw); margin-top: -0.45cqw; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f4f0e6, #8a8579 70%); box-shadow: 0 0 0 max(1px,.12cqw) #4b2810; }
.k-judul h1::before { left: 1cqw; } .k-judul h1::after { right: 1cqw; }
.k-kenali, .k-pantai { -webkit-text-stroke: 0; paint-order: normal; letter-spacing: .03em; }
.k-kenali { color: #2a8cff; text-shadow: 0 0 0 #fff, 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 0 .12cqw 0 #0f4da8, 0 .26cqw 0 #0b3b82, 0 .42cqw .4cqw rgba(40,15,0,.45); }
.k-pantai { color: #ff9a1a; text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 0 .14cqw 0 #c25a00, 0 .3cqw 0 #8f3f00, 0 .46cqw .4cqw rgba(40,15,0,.45); }
.k-sub { background: linear-gradient(#f2cf94, #d9a060); border-color: #6b3b17; box-shadow: inset 0 .2cqw 0 rgba(255,240,205,.6), 0 .3cqw 0 #4b2810; }
.k-hias { position: absolute; overflow: visible; pointer-events: none; filter: drop-shadow(0 .25cqw .2cqw rgba(0,0,0,.35)); }
.k-hias-kelapa { left: -4.2cqw; top: -2.4cqw; width: 7.4cqw; height: 7.4cqw; }
.k-hias-siput { right: -2.4cqw; bottom: -1.5cqw; width: 4cqw; height: 4cqw; transform: rotate(14deg); }
.k-hias-bintang { left: -1.8cqw; bottom: -1.6cqw; width: 3.8cqw; height: 3.8cqw; transform: rotate(-12deg); }
.k-hias-bintang2 { right: -3.2cqw; top: -0.8cqw; width: 2.6cqw; height: 2.6cqw; transform: rotate(18deg); }

/* 2. Guru dibesarkan ~17% */
.k-guru { width: 28cqw; left: 0.4cqw; }
.k-gelembung { top: 9.6cqw; }
html[data-teks="besar"] .k-gelembung { top: 10.8cqw; width: 29cqw; }

/* 3. Seterusnya tidak aktif sehingga jawapan betul */
.k-seterusnya:disabled { cursor: not-allowed; color: #5f6b66; background: linear-gradient(#e4e9e6, #c9d1cc); border-color: #fff; box-shadow: 0 .5cqw 0 #9aa5a0, 0 .9cqw 1.4cqw rgba(0,0,0,.2); }
.k-seterusnya:disabled:hover { transform: none; }
.k-seterusnya:not(:disabled) { animation: k-sedia .5s ease-out 1; }
@keyframes k-sedia { 0% { transform: scale(.94); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* confetti: kanvas di atas skrin, tidak menerima klik */
.k-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 8; }
@media (prefers-reduced-motion: reduce) { .k-seterusnya:not(:disabled) { animation: none; } .k-confetti { display: none; } }
.k-judul { width: 34cqw; }
.k-judul h1 {
  background:
    linear-gradient(transparent calc(50% - 1px), rgba(70,30,5,.55) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    repeating-linear-gradient(90deg, rgba(90,45,10,.08) 0 1px, transparent 1px 23px),
    linear-gradient(#ebba78, #d29349 50%, #bb753a);
  padding: 0.5cqw 1.6cqw 0.7cqw;
}
.k-kenali { font-size: calc(max(18px, 3.1cqw) * var(--ts)); letter-spacing: 0; }
.k-pantai { font-size: calc(max(22px, 3.9cqw) * var(--ts)); letter-spacing: 0; white-space: nowrap; }
html[data-teks="besar"] .k-kenali { font-size: max(18px, 3.1cqw); }
html[data-teks="besar"] .k-pantai { font-size: max(22px, 3.9cqw); }

/* ================= Slaid 2 — Bahaya Pencemaran (templat sama seperti Slaid 1) ================= */
.k-maklumat-tunda { visibility: hidden; }
.k-maklumat-tunda.tampil { visibility: visible; }
.k-maju li.sudah { background: #7fb8f5; }
.pentas-kenali2 .k-soalan h2 { font-size: calc(max(16px, 2.3cqw) * min(var(--ts), 1.1)); white-space: nowrap; }
.pentas-kenali2 .k-maklumat-teks .k-nilai { white-space: normal; max-width: 100%; }
.pentas-kenali .k-maklumat-teks .k-nilai { white-space: normal; max-width: 100%; }

/* ================= Slaid 3 — Jom jaga pantai! (templat Slaid 2) ================= */
.pentas-kenali3 .k-soalan h2 { font-size: calc(max(16px, 2.3cqw) * min(var(--ts), 1.1)); white-space: nowrap; }
.pentas-kenali3 .k-maklumat-teks .k-nilai { white-space: normal; max-width: 100%; }
.pentas-kenali3 .k-label { max-width: 96%; }
.pentas-kenali3 .k-label { white-space: normal; text-align: left; line-height: 1.1; font-size: calc(max(14px, 2cqw) * min(var(--ts), 1.1)); max-width: 94%; padding-right: 2.4cqw; }
.pentas-kenali3 .k-label { width: 94%; left: 3%; transform: none; justify-content: flex-start; font-size: calc(max(14px, 1.9cqw) * min(var(--ts), 1.1)); padding: 0.3cqw 1.6cqw 0.3cqw 0.6cqw; gap: 0.8cqw; }
.pentas-kenali3 .k-bulat { width: max(26px, 3cqw); height: max(26px, 3cqw); }
.pentas-kenali3 .k-maklumat-teks .k-nilai { font-size: 0.94em; padding-right: 0.8cqw; }
.pentas-kenali3 .k-maklumat-teks { gap: 0.2cqw; }

/* ================= Fasa pengenalan: Selamat datang ke OLAH! (Mockup 04) dan Tonton video pengenalan (Mockup 05) ================= */
.pentas-pengenalan { font-family: inherit; }
.p-klaper { flex: none; width: 5.2cqw; height: 5.2cqw; filter: drop-shadow(0 .25cqw .2cqw rgba(0,0,0,.3)); }

/* Penunjuk langkah (hanya paparan kemajuan; bukan butang) */
.p-langkah { position: absolute; left: 23cqw; top: 1.4cqw; width: 45cqw; margin: 0; padding: .6cqw 1cqw .5cqw; list-style: none; display: flex; background: rgba(255,255,255,.93); border: max(2px,.25cqw) solid #cfe3f7; border-radius: 3cqw; box-shadow: 0 .3cqw 0 rgba(0,0,0,.14), 0 .6cqw 1cqw rgba(0,0,0,.18); z-index: 4; }
.p-langkah li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .2cqw; color: #6d7a8a; font-size: max(11px, 1.12cqw); font-weight: 700; white-space: nowrap; }
.p-langkah i { display: grid; place-items: center; width: max(26px, 3.3cqw); height: max(26px, 3.3cqw); border-radius: 50%; background: #d9dde2; color: #fff; font-style: normal; font-weight: 800; font-size: max(13px, 1.7cqw); }
.p-langkah li.aktif { color: #0f4ea3; }
.p-langkah li.aktif i { background: var(--biru); box-shadow: 0 0 0 max(2px,.25cqw) #fff, 0 0 0 max(4px,.45cqw) var(--biru); }

.p-dengar-semula { right: 17.6cqw; top: 1.4cqw; min-height: max(48px, 6.2cqw); padding: .5cqw 1.3cqw .5cqw 1cqw; gap: .8cqw; background: #e4f3ff; border-color: #78b8ee; box-shadow: 0 .4cqw 0 #3f86c4, 0 .8cqw 1.4cqw rgba(0,0,0,.25); font-weight: 800; color: #0f4ea3; z-index: 5; }
.p-dengar-semula svg { flex: none; width: max(26px, 3.4cqw); height: max(26px, 3.4cqw); }
.p-dengar-semula span { font-size: calc(max(12px, 1.35cqw) * min(var(--ts), 1.15)); line-height: 1.1; max-width: 7cqw; }
.p-dengar-semula.main { background: #ffe65a; color: #3b2410; border-color: var(--kayu); }
.pentas-pengenalan .btn-tetapan-k, .pentas-pengenalan .btn-profil-k { z-index: 5; }
.p-teruskan { position: absolute; right: 1.4cqw; bottom: 1.5cqw; z-index: 6; }
.p-nota { left: 30cqw; top: auto; bottom: 9.5cqw; width: 40cqw; z-index: 9; }
.pentas-pengenalan button:focus-visible { outline: 4px solid var(--fokus); outline-offset: 2px; }

/* --- Selamat datang ke OLAH! --- */
.p-guru { position: absolute; left: -3cqw; bottom: 9.4cqw; width: 31cqw; height: auto; pointer-events: none; z-index: 1; filter: drop-shadow(0 .5cqw .7cqw rgba(0,0,0,.35)); }
.w-kolum { position: absolute; left: 28.5cqw; right: 16cqw; top: 8.8cqw; bottom: 1.5cqw; display: flex; flex-direction: column; align-items: stretch; gap: .8cqw; z-index: 2; }
.w-papan { flex: none; padding: .8cqw 2cqw 1.2cqw; text-align: center; background: linear-gradient(#fff8e4, #ffeec3); border: max(3px,.5cqw) solid #cf9a52; border-radius: 2.4cqw; box-shadow: inset 0 0 0 max(2px,.25cqw) #f3dca4, 0 .5cqw 0 #8a5724, 0 1cqw 1.6cqw rgba(0,0,0,.3); }
.w-tajuk { margin: -2.2cqw auto .5cqw; width: fit-content; max-width: 100%; padding: .3cqw 3cqw .4cqw; font-size: calc(max(18px, 3.2cqw) * var(--ts)); font-weight: 900; color: #4a2a0a; background: linear-gradient(#f2cf94, #d9a060); border: max(2px,.3cqw) solid #6b3b17; border-radius: 1.6cqw; box-shadow: inset 0 .2cqw 0 rgba(255,240,205,.6), 0 .3cqw 0 #4b2810; text-shadow: 0 .15cqw 0 rgba(255,255,255,.4); }
.w-tajuk:focus { outline: none; }
.w-tajuk:focus-visible { outline: 4px solid var(--fokus); }
.w-isi { margin: 0; font-size: calc(max(14px, 2cqw) * var(--ts)); line-height: 1.35; font-weight: 700; color: #3b2410; }
.w-isi strong { color: #1565c0; font-weight: 800; }
.w-soalan { flex: none; align-self: center; margin: .2cqw 0 0; padding: .3cqw 3cqw .4cqw; font-size: calc(max(15px, 2cqw) * min(var(--ts), 1.15)); font-weight: 800; color: #3b1d05; background: linear-gradient(#f4d9a6, #e2b574); border: max(2px,.28cqw) solid var(--kayu); border-radius: 2cqw; box-shadow: 0 .3cqw 0 var(--kayu-gelap); }
.w-kad-baris { flex: 1 1 auto; min-height: 0; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1cqw; }
.w-kad { min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: .4cqw .7cqw; padding: .6cqw; border: max(2px,.22cqw) solid; border-radius: 1.8cqw; box-shadow: 0 .3cqw 0 rgba(0,0,0,.15); }
.w-kad img { grid-column: 1 / -1; width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 1.2cqw; }
.w-kad p { margin: 0; align-self: center; font-size: calc(max(12px, 1.35cqw) * min(var(--ts), 1.15)); line-height: 1.2; font-weight: 600; color: #2a2a2a; }
.w-no { display: grid; place-items: center; width: max(26px, 2.8cqw); height: max(26px, 2.8cqw); border-radius: 50%; color: #fff; font-weight: 800; font-size: max(13px, 1.6cqw); align-self: center; }
.w-kad1 { background: #e6f4ff; border-color: #9fd0f5; } .w-kad1 .w-no { background: #1f86f0; } .w-kad1 b { color: #0d5cb0; }
.w-kad2 { background: #fff0dc; border-color: #f5c48b; } .w-kad2 .w-no { background: #ee7a0c; } .w-kad2 b { color: #b45309; }
.w-kad3 { background: #ffe6ef; border-color: #f3aac6; } .w-kad3 .w-no { background: #e5367a; } .w-kad3 b { color: #a3154f; }
.w-kad4 { background: #e6f8ec; border-color: #a6dfbb; } .w-kad4 .w-no { background: #18a553; } .w-kad4 b { color: #0e6a34; }
.w-tonton { position: relative; flex: none; align-self: center; display: flex; align-items: center; gap: 1.3cqw; padding: .7cqw 4cqw .7cqw 1.6cqw; color: #fff; background: linear-gradient(#34c46d, #0e9a47); border: max(3px,.45cqw) solid #fff; border-radius: 4cqw; box-shadow: 0 .5cqw 0 var(--hijau-gelap), 0 1cqw 1.6cqw rgba(0,0,0,.35); }
.w-tonton:hover { transform: translateY(-.2cqw); }
.w-tonton-teks { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.w-tonton-teks b { font-size: calc(max(18px, 3cqw) * min(var(--ts), 1.15)); font-weight: 900; text-shadow: 0 .2cqw 0 rgba(0,0,0,.25); }
.w-tonton-teks small { font-size: calc(max(12px, 1.6cqw) * min(var(--ts), 1.15)); font-weight: 600; }
.w-hias { position: absolute; width: 3.6cqw; height: 3.6cqw; overflow: visible; pointer-events: none; filter: drop-shadow(0 .2cqw .2cqw rgba(0,0,0,.3)); }
.w-hias-siput { left: -2.6cqw; bottom: -1cqw; transform: rotate(-12deg); }
.w-hias-bintang { right: -2.4cqw; bottom: -1.2cqw; transform: rotate(14deg); }

/* --- Tonton video pengenalan --- */
.v-judul { position: absolute; left: 50%; transform: translateX(-50%); top: 8.2cqw; display: flex; align-items: center; gap: 1.4cqw; width: max-content; max-width: 58cqw; padding: .6cqw 3cqw .7cqw 1.4cqw; background: linear-gradient(#f2cf94, #d9a060); border: max(3px,.4cqw) solid #6b3b17; border-radius: 2cqw; box-shadow: inset 0 .2cqw 0 rgba(255,240,205,.6), 0 .45cqw 0 #4b2810, 0 .9cqw 1.4cqw rgba(0,0,0,.3); z-index: 3; }
.v-judul h1 { margin: 0; font-size: calc(max(17px, 2.8cqw) * min(var(--ts), 1.15)); font-weight: 900; color: #4a2a0a; line-height: 1.1; text-shadow: 0 .15cqw 0 rgba(255,255,255,.4); }
.v-judul h1:focus { outline: none; }
.v-judul h1:focus-visible { outline: 4px solid var(--fokus); }
.v-judul p { margin: .2cqw 0 0; font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.15)); font-weight: 700; color: #4a2a0a; }
.v-bingkai { position: absolute; left: 50%; transform: translateX(-50%); top: 15.6cqw; width: 52cqw; padding: .9cqw; background: linear-gradient(#fffaf0, #fff0cc); border: max(3px,.45cqw) solid #f0d79a; border-radius: 2.6cqw; box-shadow: 0 .5cqw 0 rgba(0,0,0,.15), 0 1cqw 2cqw rgba(0,0,0,.3); z-index: 2; }
.v-video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #0b2540; border-radius: 1.8cqw; }
.v-besar { position: absolute; left: 50%; top: 42%; width: 9cqw; height: 9cqw; margin: -4.5cqw 0 0 -4.5cqw; display: grid; place-items: center; color: #fff; background: rgba(10,40,80,.42); border: max(3px,.5cqw) solid #fff; border-radius: 50%; box-shadow: 0 .5cqw 1.2cqw rgba(0,0,0,.4); }
.v-besar svg { width: 55%; height: 55%; margin-left: 6%; }
.v-bingkai.main .v-besar { display: none; }
.v-ralat { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); margin: 0; padding: .8cqw 2cqw; width: 36cqw; text-align: center; font-size: calc(max(14px, 1.8cqw) * min(var(--ts), 1.15)); font-weight: 800; color: #7a1a00; background: #ffe9a8; border: max(2px,.25cqw) solid #e8b84a; border-radius: 1.6cqw; }
.v-ralat[hidden] { display: none; }
.v-kawalan { position: absolute; left: 1.4cqw; right: 1.4cqw; bottom: 1.4cqw; display: flex; flex-direction: column; gap: .5cqw; padding: .5cqw .9cqw .6cqw; background: rgba(15,25,45,.74); border-radius: 1.6cqw; }
.v-baris { display: flex; align-items: center; gap: .7cqw; }
.v-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .5cqw; min-height: max(36px, 4.2cqw); padding: 0 1.2cqw 0 .9cqw; font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.15)); font-weight: 800; color: #17407a; background: #fff; border: max(2px,.2cqw) solid #b9d6f5; border-radius: 2.2cqw; box-shadow: 0 .25cqw 0 rgba(0,0,0,.3); }
.v-btn svg { flex: none; width: max(18px, 2.3cqw); height: max(18px, 2.3cqw); }
.v-btn-ikon { padding: 0 .9cqw; }
.v-btn[aria-pressed="true"] { background: #ffe65a; color: #3b2410; }
.v-masa { flex: 1; text-align: center; color: #fff; font-size: max(12px, 1.4cqw); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v-cari { width: 100%; height: max(14px, 1.7cqw); margin: 0; accent-color: #ffb300; cursor: pointer; }
.v-bingkai:fullscreen { width: 100vw; height: 100vh; padding: 0; border: 0; border-radius: 0; transform: none; left: 0; top: 0; background: #000; }
.v-bingkai:fullscreen .v-video { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.p-teruskan:disabled { cursor: not-allowed; color: #5f6b66; background: linear-gradient(#e4e9e6, #c9d1cc); box-shadow: 0 .5cqw 0 #9aa5a0, 0 .9cqw 1.4cqw rgba(0,0,0,.2); }
@media (prefers-reduced-motion: reduce) { .w-tonton:hover, .p-dengar-semula:hover { transform: none; } }

/* penambahbaikan susun atur (selepas ujian visual) */
.p-langkah { left: 21.6cqw; width: 46.4cqw; }
.p-langkah li { font-size: max(10px, 1.02cqw); letter-spacing: -.01em; }
.w-kolum { top: 9.6cqw; }
.p-teruskan { min-width: 0; padding: .5cqw 1.6cqw .5cqw 2cqw; font-size: calc(max(15px, 2.1cqw) * min(var(--ts), 1.15)); }
.v-bingkai { width: 49cqw; top: 15.8cqw; }

/* Tulisan besar: elemen kawalan/papan dihadkan supaya halaman pengenalan tidak bertindih */
.pentas-pengenalan .k-kembali-teks b { font-size: calc(max(15px, 2cqw) * min(var(--ts), 1.05)); }
.w-tajuk { font-size: calc(max(18px, 3.2cqw) * min(var(--ts), 1)); white-space: nowrap; }
.w-isi { font-size: calc(max(14px, 2cqw) * min(var(--ts), 1.08)); }
.w-kad p { font-size: calc(max(12px, 1.35cqw) * min(var(--ts), 1.05)); }
.w-tonton-teks b { font-size: calc(max(18px, 3cqw) * min(var(--ts), 1)); }
.w-tonton-teks small { font-size: calc(max(12px, 1.6cqw) * min(var(--ts), 1.05)); }
.w-soalan { font-size: calc(max(15px, 2cqw) * min(var(--ts), 1)); }
.p-teruskan { font-size: calc(max(15px, 2.1cqw) * min(var(--ts), 1.05)); }
.w-kad p { overflow-wrap: anywhere; }
.pentas-pengenalan .btn-tetapan-k { font-size: calc(max(14px, 2cqw) * min(var(--ts), 1)); }
.pentas-pengenalan .btn-tetapan-k svg { width: max(26px, 3.4cqw); height: max(26px, 3.4cqw); }
.v-judul h1 { font-size: calc(max(17px, 2.8cqw) * min(var(--ts), 1.02)); }
.v-judul p { font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.02)); }
.w-kad p { overflow-wrap: break-word; font-size: calc(max(12px, 1.25cqw) * min(var(--ts), 1.05)); }
.w-kad { gap: .4cqw .5cqw; }

/* Audio pada setiap kad aktiviti */
.p-kad-audio { position: absolute; top: .5cqw; right: .5cqw; width: max(30px, 3cqw); height: max(30px, 3cqw); z-index: 3; box-shadow: 0 .2cqw 0 rgba(0,0,0,.3); }
.w-kad { position: relative; }
.w-kad p b { font-size: calc(max(13px, 1.7cqw) * min(var(--ts), 1.05)); font-weight: 800; }
.w-kad p { font-size: calc(max(13px, 1.7cqw) * min(var(--ts), 1.05)); }
.w-kad .p-kad-audio { top: auto; bottom: 1cqw; right: 1cqw; }
/* kad Selamat datang: lencana nombor di sudut, teks penuh lebar supaya tidak terpotong */
.w-kad { grid-template-columns: minmax(0, 1fr); }
.w-kad img { grid-column: 1; }
.w-no { position: absolute; left: -.9cqw; top: -.9cqw; z-index: 3; box-shadow: 0 .2cqw 0 rgba(0,0,0,.25); }
.w-kad p { grid-column: 1; text-align: center; padding: .2cqw .3cqw 0; font-size: calc(max(13px, 1.55cqw) * min(var(--ts), 1.05)); overflow-wrap: break-word; hyphens: none; }
.w-kad p b { font-size: 1em; }
.w-kad p { padding-left: 1.3cqw; }
/* gambar kad Selamat datang (3:2): pangkas ikut tindakan utama, tidak diregangkan */
.w-kad img { object-fit: cover; }
.w-kad1 img { object-position: 52% 50%; }
.w-kad2 img { object-position: 42% 50%; }
.w-kad3 img { object-position: 50% 70%; }
.w-kad4 img { object-position: 58% 60%; }
.w-kad3 img { object-position: 72% 74%; }

/* halaman video dipermudah: hanya video; bingkai dibesarkan (16:9 dikekalkan) */
.v-bingkai { width: 55cqw; top: 16.2cqw; }

/* Selamat datang: TONTON VIDEO di penjuru kanan bawah (ganti Teruskan); tengah bawah dikosongkan */
#skrin-sambutan .w-tonton { position: absolute; right: 1.4cqw; bottom: 1.5cqw; z-index: 6; align-self: auto; gap: 1cqw; padding: .6cqw 2.6cqw .6cqw 1.2cqw; }
#skrin-sambutan .w-tonton .p-klaper { width: max(34px, 4.4cqw); height: max(34px, 4.4cqw); flex: none; }
#skrin-sambutan .w-tonton-teks b { font-size: calc(max(15px, 2.1cqw) * min(var(--ts), 1.05)); white-space: nowrap; }
#skrin-sambutan .w-tonton-teks small { font-size: calc(max(11px, 1.25cqw) * min(var(--ts), 1.05)); white-space: nowrap; }
#skrin-sambutan .w-tonton .w-hias { display: none; }
#skrin-sambutan .w-kolum { bottom: 9.7cqw; }

/* ============ Fasa 1: KUTIP — halaman pembukaan ============ */
.p-langkah li.selesai { color: #1a7f3c; }
.p-langkah li.selesai i { background: #18a553; }
.kt-kolum { gap: 1.6cqw; }
.kt-misi { font-size: calc(max(16px, 2.6cqw) * min(var(--ts), 1.1)); color: #1565c0; }
.kt-bingkai { flex: 0 1 auto; position: relative; display: flex; justify-content: center; align-items: center; gap: 1.6cqw; padding: 1.2cqw; margin: 0 auto; background: linear-gradient(#fffaf0, #fff0cc); border: max(3px,.45cqw) solid #f0d79a; border-radius: 2.4cqw; box-shadow: 0 .5cqw 0 rgba(0,0,0,.15), 0 1cqw 2cqw rgba(0,0,0,.3); }
.kt-gambar { display: block; width: 25cqw; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 1.5cqw; border: max(2px,.25cqw) solid #fff; }
.kt-lencana { position: absolute; left: 50%; top: 50%; width: 6.6cqw; height: 6.6cqw; margin: -3.3cqw 0 0 -3.3cqw; filter: drop-shadow(0 .3cqw .4cqw rgba(0,0,0,.4)); }
.kt-gelembung { position: absolute; left: 1.6cqw; top: 11.2cqw; width: 25cqw; padding: 1cqw 1.4cqw 1.1cqw; background: #fff; border: max(3px,.4cqw) solid #7fb8ef; border-radius: 2cqw; box-shadow: 0 .4cqw 0 rgba(0,0,0,.18), 0 .8cqw 1.4cqw rgba(0,0,0,.25); z-index: 3; }
.kt-gelembung::after { content: ""; position: absolute; left: 6cqw; bottom: -1.6cqw; width: 2.6cqw; height: 2.6cqw; background: #fff; border-right: max(3px,.4cqw) solid #7fb8ef; border-bottom: max(3px,.4cqw) solid #7fb8ef; transform: rotate(45deg) skew(8deg,8deg); }
.kt-arahan { margin: 0; font-size: calc(max(13px, 1.75cqw) * min(var(--ts), 1.1)); line-height: 1.3; font-weight: 700; color: #1d2f4a; }
.kt-arahan b { display: block; font-size: 1.12em; color: #0d5cb0; }
#skrin-kutip .w-tonton { position: absolute; right: 1.4cqw; bottom: 1.5cqw; z-index: 6; align-self: auto; gap: 1cqw; padding: .6cqw 2.6cqw .6cqw 1.2cqw; }
#skrin-kutip .w-tonton .p-klaper { width: max(34px, 4.4cqw); height: max(34px, 4.4cqw); flex: none; }
#skrin-kutip .w-tonton-teks b { font-size: calc(max(15px, 2.1cqw) * min(var(--ts), 1.05)); white-space: nowrap; }
#skrin-kutip .w-kolum { bottom: 9.7cqw; }
#skrin-kutip .w-tajuk { white-space: nowrap; }
.kt-bingkai { margin: auto; } .kt-kolum { bottom: 9.7cqw; }

/* gelembung cikgu KUTIP: satu ayat ringkas, ruang dalaman selesa */
.kt-gelembung { width: 24cqw; padding: 1.4cqw 2cqw 1.6cqw; text-align: center; }
.kt-arahan { font-size: calc(max(15px, 2.1cqw) * min(var(--ts), 1.1)); line-height: 1.25; font-weight: 800; color: #0d5cb0; overflow-wrap: break-word; }
.kt-gelembung { width: 27cqw; padding: 1.2cqw 1.6cqw 1.4cqw; } .kt-arahan { font-size: calc(max(15px, 2.1cqw) * min(var(--ts), 1.04)); }
.kt-gelembung { width: 25.6cqw; }

/* ============ Fasa 1: KUTIP — Pusingan 1, Gambar 1 ============ */
.pentas-kutip-g1 { font-family: inherit; }
.pentas-kutip-g1 button:focus-visible { outline: 4px solid var(--fokus); outline-offset: 2px; }
.kg-latar { position: absolute; inset: 0; }
.kg-kepala { position: absolute; left: 0; right: 0; top: 0; height: 10cqw; }
.kg-tajuk { position: absolute; left: 1.4cqw; top: 1.4cqw; margin: 0; padding: .5cqw 2cqw .6cqw; font-size: calc(max(16px, 2.5cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #4a2a0a; background: linear-gradient(#f2cf94, #d9a060); border: max(3px,.35cqw) solid #6b3b17; border-radius: 1.6cqw; box-shadow: inset 0 .2cqw 0 rgba(255,240,205,.6), 0 .4cqw 0 #4b2810, 0 .8cqw 1.2cqw rgba(0,0,0,.3); white-space: nowrap; }
.kg-tajuk:focus { outline: none; } .kg-tajuk:focus-visible { outline: 4px solid var(--fokus); }
.kg-cip { position: absolute; left: 1.4cqw; top: 6.8cqw; margin: 0; display: flex; gap: .8cqw; align-items: center; }
.kg-cip span { padding: .3cqw 1.4cqw .35cqw; font-size: calc(max(12px, 1.6cqw) * min(var(--ts), 1.05)); font-weight: 800; border-radius: 2cqw; white-space: nowrap; box-shadow: 0 .25cqw 0 rgba(0,0,0,.2); }
.kg-cip1 { color: #fff; background: #1f86f0; border: max(2px,.2cqw) solid #fff; }
.kg-cip2 { color: #17407a; background: #fff; border: max(2px,.2cqw) solid #b9d6f5; }
.kg-alat { position: absolute; right: 1.4cqw; top: 1.4cqw; display: flex; gap: .8cqw; align-items: stretch; z-index: 5; }
.kg-alat .btn-papan { position: relative; top: auto; right: auto; min-height: max(48px, 6.2cqw); padding: .4cqw 1.2cqw .4cqw .8cqw; gap: .6cqw; font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #3b1d05; line-height: 1.1; }
.kg-alat .btn-papan svg { flex: none; width: max(24px, 3cqw); height: max(24px, 3cqw); }
.kg-alat .btn-papan:first-child { color: #17407a; }
.kg-alat .btn-papan span { max-width: 7cqw; }
.kg-alat .btn-tetapan svg { color: var(--biru); }

.kg-tengah, .kg-ringkas { position: absolute; left: 1.8cqw; right: 1.8cqw; top: 10.4cqw; bottom: 8.8cqw; display: flex; flex-direction: column; gap: .9cqw; z-index: 2; }
.kg-papan { flex: none; position: relative; align-self: center; width: 62cqw; max-width: 100%; padding: .7cqw 2cqw .8cqw; text-align: center; background: linear-gradient(#fff8e4, #ffeec3); border: max(3px,.4cqw) solid #cf9a52; border-radius: 2cqw; box-shadow: inset 0 0 0 max(2px,.2cqw) #f3dca4, 0 .4cqw 0 #8a5724, 0 .9cqw 1.4cqw rgba(0,0,0,.3); }
.kg-soalan { margin: 0 0 .5cqw; font-size: calc(max(16px, 2.8cqw) * min(var(--ts), 1.08)); font-weight: 900; color: #2a1a05; line-height: 1.15; }
.kg-soalan:focus { outline: none; }
.kg-tab { list-style: none; margin: 0 auto; padding: .25cqw; display: flex; width: fit-content; gap: .3cqw; background: rgba(0,0,0,.08); border-radius: 2cqw; }
.kg-tab li { display: flex; align-items: center; gap: .4cqw; padding: .25cqw 1.6cqw .3cqw; font-size: calc(max(11px, 1.4cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #6d7a8a; border-radius: 2cqw; white-space: nowrap; }
.kg-tab li.aktif { color: #fff; background: #1f86f0; box-shadow: 0 .2cqw 0 #155ea8; }
.kg-tab li.selesai { color: #0e6a34; background: #d6f3e0; }
.kg-tik { display: none; font-weight: 900; }
.kg-tab li.selesai .kg-tik { display: inline; }

.kg-panel { flex: 1 1 auto; min-height: 0; display: flex; gap: 1.6cqw; align-items: center; padding: 1.2cqw; background: linear-gradient(#fffaf0, #fff0cc); border: max(3px,.45cqw) solid #f0d79a; border-radius: 2.4cqw; box-shadow: 0 .5cqw 0 rgba(0,0,0,.15), 0 1cqw 2cqw rgba(0,0,0,.3); }
.kg-gambar { flex: none; position: relative; height: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 1.6cqw; border: max(2px,.25cqw) solid #fff; background: #0b2540; }
.kg-gambar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kg-sorot { position: absolute; border: max(4px,.5cqw) solid #ffd23f; border-radius: 1cqw; box-shadow: 0 0 0 max(2px,.2cqw) #fff, 0 0 1.6cqw 0 rgba(255,210,63,.9), 0 0 0 200cqw rgba(8,25,50,.38); pointer-events: none; }
.kg-sorot[hidden] { display: none; }
.kg-pilihan { flex: 1 1 0; min-width: 0; height: 100%; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .8cqw; }
.kg-baris { flex: 1 1 0; min-height: 0; display: flex; align-items: stretch; gap: .8cqw; padding: .3cqw .6cqw .3cqw .3cqw; background: #fff; border: max(2px,.25cqw) solid #b9d6f5; border-radius: 1.6cqw; box-shadow: 0 .3cqw 0 rgba(0,0,0,.14); align-items: center; }
.kg-baris .kg-audio { width: max(36px, 3.8cqw); height: max(36px, 3.8cqw); }
.kg-pilih { flex: 1 1 auto; min-width: 0; height: 100%; display: flex; align-items: center; gap: 1.2cqw; padding: 0 1cqw; text-align: left; color: #17407a; background: transparent; border: 0; border-radius: 1.2cqw; font-size: calc(max(15px, 2.3cqw) * min(var(--ts), 1.08)); font-weight: 800; }
.kg-huruf { flex: none; display: grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; background: #e3f0ff; color: #0d5cb0; font-size: .9em; font-weight: 900; }
.kg-teks { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; line-height: 1.1; }
.kg-tanda { flex: none; font-weight: 900; font-size: 1em; }
.kg-pilih:hover:not(:disabled) { background: #eaf4ff; }
.kg-baris.betul { background: #e2f8ea; border-color: #18a553; }
.kg-baris.betul .kg-huruf { background: #18a553; color: #fff; }
.kg-baris.betul .kg-tanda { color: #0e7a3a; }
.kg-baris.salah { background: #f1f1f1; border-color: #b9b9b9; border-style: dashed; }
.kg-baris.salah .kg-pilih { color: #6b6b6b; }
.kg-baris.salah .kg-tanda { color: #8a4b00; }
.kg-pilih:disabled { cursor: default; }

.kg-maklum { position: absolute; left: 19cqw; right: 20.5cqw; bottom: 1.5cqw; min-height: max(48px, 6.2cqw); display: flex; align-items: center; justify-content: center; gap: 1.2cqw; padding: .5cqw 2cqw; background: #fff; border: max(3px,.4cqw) solid #18a553; border-radius: 2cqw; box-shadow: 0 .4cqw 0 rgba(0,0,0,.18), 0 .8cqw 1.4cqw rgba(0,0,0,.25); z-index: 4; }
.kg-maklum[hidden] { display: none; }
.kg-maklum-ikon { flex: none; display: grid; place-items: center; width: 3.8cqw; height: 3.8cqw; border-radius: 50%; background: #18a553; color: #fff; font-size: 2.4cqw; font-weight: 900; }
.kg-maklum-ikon::before { content: "✓"; }
.kg-maklum-teks { font-size: calc(max(14px, 2.1cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #0e6a34; line-height: 1.15; }
.kg-maklum.cuba { border-color: #e8962b; }
.kg-maklum.cuba .kg-maklum-ikon { background: #e8962b; } .kg-maklum.cuba .kg-maklum-ikon::before { content: "↻"; }
.kg-maklum.cuba .kg-maklum-teks { color: #8a4b00; }
.kg-maklum.tampil .kg-maklum-ikon { animation: kg-timbul .45s ease-out; }
@keyframes kg-timbul { 0% { transform: scale(.3); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
.kg-seterusnya { position: absolute; right: 1.4cqw; bottom: 1.5cqw; z-index: 6; padding: .5cqw 1.6cqw .5cqw 2cqw; font-size: calc(max(15px, 2.1cqw) * min(var(--ts), 1.05)); min-width: 0; }
.kg-seterusnya:disabled { cursor: not-allowed; color: #5f6b66; background: linear-gradient(#e4e9e6, #c9d1cc); box-shadow: 0 .5cqw 0 #9aa5a0, 0 .9cqw 1.4cqw rgba(0,0,0,.2); }
#skrin-kg .btn-kembali { z-index: 6; }
#skrin-kg .btn-kembali .k-kembali-teks b { font-size: calc(max(15px, 2cqw) * min(var(--ts), 1.05)); }
#kg-nota { z-index: 40; left: 30cqw; top: auto; bottom: 9.5cqw; width: 40cqw; }

.kg-ringkas { align-items: center; }
.kg-ringkas-isi { margin: 0; font-size: calc(max(14px, 2cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #1565c0; }
.kg-kad-maklumat { list-style: none; margin: 1.6cqw 0 0; padding: 0; width: 86cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.kg-mk { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8cqw; min-height: 17cqw; padding: 1.4cqw; text-align: center; border: max(3px,.4cqw) solid; border-radius: 2.2cqw; box-shadow: 0 .5cqw 0 rgba(0,0,0,.16), 0 1cqw 1.6cqw rgba(0,0,0,.25); }
.kg-mk b { padding: .3cqw 1.8cqw; border-radius: 2cqw; color: #fff; font-size: calc(max(13px, 1.8cqw) * min(var(--ts), 1.05)); }
.kg-mk span { font-size: calc(max(18px, 3.4cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #2a1a05; overflow-wrap: break-word; }
.kg-mk1 { background: #e6f4ff; border-color: #9fd0f5; } .kg-mk1 b { background: #1f86f0; }
.kg-mk2 { background: #fff0dc; border-color: #f5c48b; } .kg-mk2 b { background: #ee7a0c; }
.kg-mk3 { background: #e6f8ec; border-color: #a6dfbb; } .kg-mk3 b { background: #18a553; }
.kg-audio-ringkas { margin-top: 1.4cqw; }

/* pop-up */
.kg-tutup { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(8,28,58,.55); }
.kg-tutup[hidden] { display: none; }
.kg-pop { position: relative; width: 62cqw; max-height: 52cqw; padding: 1.4cqw 2cqw 1.8cqw; display: flex; flex-direction: column; gap: 1cqw; align-items: stretch; background: linear-gradient(#fffaf0, #fff0cc); border: max(4px,.5cqw) solid #cf9a52; border-radius: 2.6cqw; box-shadow: 0 .6cqw 0 #8a5724, 0 1.4cqw 3cqw rgba(0,0,0,.5); }
.kg-pop-kepala { display: flex; align-items: center; justify-content: center; gap: 1.2cqw; position: relative; min-height: 5cqw; }
.kg-pop-kepala h2 { margin: 0; font-size: calc(max(18px, 3cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #3b2410; }
.kg-pop-ikon { display: grid; place-items: center; width: 5cqw; height: 5cqw; border-radius: 50%; background: #fff; border: max(2px,.25cqw) solid #f0c14a; }
.kg-pop-ikon svg { width: 70%; height: 70%; }
.kg-x { position: absolute; right: -.4cqw; top: -.2cqw; width: max(44px, 4.6cqw); height: max(44px, 4.6cqw); border-radius: 50%; border: max(2px,.25cqw) solid #fff; background: #7b8794; color: #fff; font-size: calc(max(16px, 2.2cqw) * min(var(--ts), 1.05)); font-weight: 900; box-shadow: 0 .25cqw 0 rgba(0,0,0,.3); }
.kg-pp-tab { display: flex; gap: .6cqw; padding: .3cqw; background: #d7dde3; border-radius: 2cqw; }
.kg-pp-t { flex: 1; min-height: max(40px, 4.4cqw); display: flex; align-items: center; justify-content: center; gap: .6cqw; font-size: calc(max(14px, 1.9cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #17407a; background: transparent; border: 0; border-radius: 1.8cqw; }
.kg-pp-t[aria-selected="true"] { color: #fff; background: #1f86f0; box-shadow: 0 .25cqw 0 #155ea8; }
.kg-pp-t:disabled { color: #6b7684; cursor: not-allowed; }
.kg-pp-t:not(:disabled) .kg-kunci { display: none; }
.kg-pp-badan { display: flex; gap: 1.6cqw; align-items: center; }
.kg-pp-badan.lajur { flex-direction: column; }
.kg-pp-media { flex: none; display: flex; justify-content: center; }
.kg-zum { width: 100%; background-repeat: no-repeat; border-radius: 1.4cqw; border: max(4px,.5cqw) solid #ffd23f; box-shadow: 0 0 0 max(2px,.2cqw) #fff, 0 0 1.4cqw rgba(255,210,63,.85); }
.kg-pp-teks { flex: 1 1 auto; display: flex; align-items: center; gap: 1.2cqw; padding: 1.2cqw 1.6cqw; background: #fff; border: max(2px,.25cqw) solid #b9d6f5; border-radius: 2cqw; }
.kg-pp-badan.lajur .kg-pp-teks { width: 100%; }
.kg-pp-teks p { margin: 0; font-size: calc(max(16px, 2.4cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #17407a; line-height: 1.2; }
.kg-pp-kosong { margin: 0; padding: 2cqw; text-align: center; font-size: calc(max(15px, 2.2cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #17407a; background: #fff; border-radius: 2cqw; }
.kg-pp-kosong[hidden] { display: none; }
.kg-btn-hijau { align-self: center; min-width: 20cqw; min-height: max(52px, 6cqw); padding: .5cqw 3cqw; font-size: calc(max(16px, 2.4cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #fff; background: linear-gradient(#34c46d, #0e9a47); border: max(3px,.4cqw) solid #fff; border-radius: 4cqw; box-shadow: 0 .5cqw 0 var(--hijau-gelap), 0 1cqw 1.6cqw rgba(0,0,0,.35); }
.kg-pop-panduan { width: 66cqw; }
.kg-pd-badan { display: flex; align-items: center; gap: 2cqw; }
.kg-pd-langkah { flex: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1cqw; }
.kg-pd-langkah li { display: flex; align-items: center; gap: 1.4cqw; padding: .8cqw 1.6cqw; background: #fff; border: max(2px,.25cqw) solid #b9d6f5; border-radius: 2cqw; }
.kg-pd-no { display: grid; place-items: center; width: 4cqw; height: 4cqw; border-radius: 50%; background: #1f86f0; color: #fff; font-weight: 900; font-size: calc(max(15px, 2.2cqw) * min(var(--ts), 1.05)); }
.kg-pd-langkah svg { width: 4.6cqw; height: 4.6cqw; flex: none; }
.kg-pd-langkah b { font-size: calc(max(16px, 2.6cqw) * min(var(--ts), 1.05)); color: #17407a; }
.kg-pd-guru { flex: none; width: 19cqw; height: auto; filter: drop-shadow(0 .4cqw .5cqw rgba(0,0,0,.3)); }
.kg-pd-bawah { display: flex; align-items: center; justify-content: center; gap: 2cqw; }
@media (prefers-reduced-motion: reduce) { .kg-maklum.tampil .kg-maklum-ikon { animation: none; } }
.kg-tengah[hidden], .kg-ringkas[hidden], .kg-pp-tab[hidden], .kg-pp-badan[hidden] { display: none; }
.kg-maklum { left: 18.5cqw; right: 24cqw; padding: .5cqw 1.4cqw; }
#kg-nota:empty { display: none; } #kg-nota.dalam { position: static; width: auto; align-self: center; margin: 0; }
.kg-audio-ringkas { width: auto; height: auto; min-height: max(48px, 5.6cqw); padding: .4cqw 2.4cqw .4cqw 1.4cqw; display: flex; align-items: center; gap: 1cqw; border-radius: 4cqw; font-size: calc(max(15px, 2cqw) * min(var(--ts), 1.05)); font-weight: 800; }
.kg-audio-ringkas svg { width: max(24px, 3.2cqw); height: max(24px, 3.2cqw); }

/* ============ Sistem maklum balas bersama (OLAH.maklumBalas) ============ */
.mb-timbul { animation: mb-timbul .6s ease-out; }
.mb-goyang { animation: mb-goyang .6s ease-in-out; }
.mb-menyala { animation: mb-menyala 1.1s ease-out; }
@keyframes mb-timbul { 0% { transform: scale(.85); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes mb-goyang { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-.7cqw); } 40% { transform: translateX(.7cqw); } 60% { transform: translateX(-.45cqw); } 80% { transform: translateX(.45cqw); } }
@keyframes mb-menyala { 0% { filter: brightness(.8) drop-shadow(0 0 0 rgba(255,210,63,0)); transform: scale(.9); } 60% { filter: brightness(1.15) drop-shadow(0 0 1.2cqw rgba(255,210,63,.95)); transform: scale(1.08); } 100% { filter: brightness(1) drop-shadow(0 0 .5cqw rgba(255,210,63,.6)); transform: scale(1); } }
.mb-bintang { position: absolute; width: 4cqw; height: 4cqw; z-index: 12; pointer-events: none; opacity: 0; overflow: visible; animation: mb-kilau 1.3s ease-out forwards; filter: drop-shadow(0 .2cqw .3cqw rgba(0,0,0,.3)); }
@keyframes mb-kilau { 0% { opacity: 0; transform: translateY(1cqw) scale(.4) rotate(0); } 30% { opacity: 1; transform: translateY(-1cqw) scale(1.1) rotate(20deg); } 100% { opacity: 0; transform: translateY(-4cqw) scale(.8) rotate(50deg); } }
@media (prefers-reduced-motion: reduce) { .mb-timbul, .mb-goyang, .mb-menyala, .mb-bintang { animation: none; } .mb-bintang { display: none; } }
.kg-maklum.cuba .kg-maklum-ikon::before { content: "✕"; }

/* Pop-up Panduan: tiga kad berwarna (biru, jingga, hijau) */
.kg-pd-langkah li:nth-child(1) { background: #e6f4ff; border-color: #9fd0f5; } .kg-pd-langkah li:nth-child(1) .kg-pd-no { background: #1f86f0; } .kg-pd-langkah li:nth-child(1) b { color: #0d5cb0; }
.kg-pd-langkah li:nth-child(2) { background: #fff0dc; border-color: #f5c48b; } .kg-pd-langkah li:nth-child(2) .kg-pd-no { background: #ee7a0c; } .kg-pd-langkah li:nth-child(2) b { color: #b45309; }
.kg-pd-langkah li:nth-child(3) { background: #e6f8ec; border-color: #a6dfbb; } .kg-pd-langkah li:nth-child(3) .kg-pd-no { background: #18a553; } .kg-pd-langkah li:nth-child(3) b { color: #0e6a34; }
.kg-pd-langkah { gap: 1.2cqw; }
.kg-pd-langkah li { padding: 1cqw 1.8cqw; border-width: max(3px,.35cqw); box-shadow: 0 .3cqw 0 rgba(0,0,0,.12); }
.kg-pd-guru { width: 17cqw; max-height: 26cqw; object-fit: contain; }

/* Skrin ringkasan: Hasil KUTIP: Gambar 1 */
.kg-kutip { display: inline-flex; align-items: center; gap: .3em; padding: 0 .55em .05em .4em; margin: 0 .05em; border-radius: .7em; color: #fff; background: linear-gradient(#3d9cf5, #1565c0); box-shadow: 0 .12em 0 #0d3f80; font-weight: 900; letter-spacing: .02em; text-shadow: 0 .06em 0 rgba(0,0,0,.25); vertical-align: baseline; }
.kg-kutip svg { width: .8em; height: .8em; flex: none; }
.kg-papan-hasil { width: 74cqw; padding-top: .8cqw; }
.kg-papan-hasil .kg-soalan { margin-bottom: .3cqw; font-size: calc(max(18px, 3.2cqw) * min(var(--ts), 1.05)); }
.kg-ringkas-isi { color: #17407a; }
.kg-hias { position: absolute; width: 4.4cqw; height: 4.4cqw; overflow: visible; pointer-events: none; filter: drop-shadow(0 .25cqw .3cqw rgba(0,0,0,.3)); }
.kg-hias-b1 { left: -1.8cqw; top: -1.4cqw; transform: rotate(-14deg); }
.kg-hias-b2 { right: -1.8cqw; bottom: -1.2cqw; transform: rotate(16deg); }
.kg-ringkas { gap: 1.2cqw; }
.kg-kad-maklumat { margin-top: .6cqw; width: 88cqw; gap: 1.8cqw; }
.kg-mk { min-height: 0; gap: .7cqw; padding: 1cqw 1.2cqw 1.2cqw; }
.kg-mk b { display: inline-flex; align-items: center; gap: .6cqw; padding: .3cqw 1.8cqw .3cqw 1.2cqw; }
.kg-mk b svg { width: 2.4cqw; height: 2.4cqw; color: #fff; flex: none; }
.kg-mk-gambar { width: 100%; max-height: 11cqw; border-radius: 1.4cqw; border: max(2px,.25cqw) solid #fff; box-shadow: 0 .25cqw 0 rgba(0,0,0,.18); background-color: #0b2540; }
.kg-mk span { font-size: calc(max(18px, 3cqw) * min(var(--ts), 1.05)); line-height: 1.1; }
.kg-audio-ringkas { margin-top: .4cqw; }

/* Slaid 3: label Nilai murni dibesarkan (lebih besar daripada teks penjelasan, kontras tinggi) */
.pentas-kenali3 .k-maklumat-teks p:not(.k-nilai) { font-size: calc(max(12px, 1.3cqw) * min(var(--ts), 1.08)); line-height: 1.25; }
.pentas-kenali3 .k-maklumat-teks .k-nilai { font-size: calc(max(14px, 1.75cqw) * min(var(--ts), 1.1)); line-height: 1.15; padding: .35cqw 1.4cqw .4cqw .8cqw; gap: .8cqw; color: #0a4d25; background: #c9efd6; border: max(2px,.2cqw) solid #6cc58d; border-radius: 1.8cqw; font-weight: 900; }
.pentas-kenali3 .k-maklumat-teks .k-nilai svg { width: 1.3em; height: 1.3em; }
.kg-alat .btn-papan[hidden], .kg-audio-ringkas[hidden] { display: none; }
.kg-baris { min-height: 44px; }
.kg-pilih { min-height: 40px; }

/* Panduan: guru di kanan, saiz seimbang dengan tiga kad (aset sedia ada; slot assets/guru-panduan.png) */
.kg-pop-panduan { width: 72cqw; }
.kg-pd-badan { align-items: stretch; gap: 1.6cqw; }
.kg-pd-langkah { flex: 1 1 0; min-width: 0; }
.kg-pd-langkah[hidden] { display: none; }
.kg-pd-guru { flex: none; align-self: flex-end; width: 25cqw; height: auto; max-height: 100%; object-fit: contain; object-position: bottom center; margin: 0; }

/* ================= Slaid 1–3 (gaya BERSAMA) — kad pilihan menegak (gambar besar di atas, teks di bawah) =================
   Hanya skrin Slaid 3. Gambar tidak ditindih teks; dua kad sama saiz, nisbah 16:9 tetap. */
.pentas-kenali .k-kolum { left: 29.6cqw; top: 13.4cqw; }
.pentas-kenali .k-soalan { margin-left: 8.8cqw; padding-top: .25cqw; padding-bottom: .25cqw; margin-bottom: -1.3cqw; }
.pentas-kenali .k-panel { padding: 1.9cqw 1.4cqw 1.3cqw; gap: .35cqw; }
.pentas-kenali .k-arahan { min-height: 2.4cqw; font-size: calc(max(15px, 1.9cqw) * min(var(--ts), 1.1)); }
.pentas-kenali .k-pilihan { gap: 1.6cqw; }
.pentas-kenali .k-kad { display: flex; flex-direction: column; align-items: stretch; padding: .6cqw; background: #fff; border: max(3px, .4cqw) solid #fff; border-radius: 2.2cqw; box-shadow: 0 0.35cqw 0 rgba(0,0,0,.18), 0 0.6cqw 1.1cqw rgba(0,0,0,.2); transition: transform .15s; }
.pentas-kenali .k-kad:hover { transform: translateY(-0.2cqw); }
.pentas-kenali .k-kad:hover .k-gambar { transform: none; }
.pentas-kenali .k-gambar { flex: 1 1 0; min-height: 0; height: auto; width: auto; max-width: 100%; aspect-ratio: 16 / 9; align-self: center; border: 0; border-radius: 1.6cqw; box-shadow: none; }
.pentas-kenali .k-gambar img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.pentas-kenali .k-label { position: static; transform: none; left: auto; bottom: auto; flex: none; width: 100%; max-width: 100%; margin-top: .6cqw; box-sizing: border-box; min-height: max(44px, 4.4cqw); justify-content: flex-start; padding: .3cqw 1.4cqw .3cqw .8cqw; border-radius: 1.6cqw; box-shadow: none; font-size: calc(max(14px, 1.9cqw) * min(var(--ts), 1.1)); }
.pentas-kenali .k-chip { left: auto; top: auto; right: 1.6cqw; bottom: 1.9cqw; font-size: calc(max(13px, 1.6cqw) * min(var(--ts), 1.1)); }
.pentas-kenali .k-kad.betul { border-color: #18a553; box-shadow: 0 0 0 max(4px,.5cqw) rgba(24,165,83,.45), 0 0.6cqw 1.1cqw rgba(0,0,0,.2); }
.pentas-kenali .k-kad.cuba { border-color: var(--jingga); box-shadow: 0 0 0 max(4px,.5cqw) rgba(238,122,12,.45), 0 0.6cqw 1.1cqw rgba(0,0,0,.2); }
.pentas-kenali .k-kad.betul .k-gambar, .pentas-kenali .k-kad.cuba .k-gambar { border: 0; box-shadow: none; }
.pentas-kenali .k-kad:focus-visible { outline: 5px solid var(--fokus); outline-offset: 3px; }
.pentas-kenali .k-kad:focus-visible .k-gambar { outline: 0; }
/* Kotak maklumat: lebar, dari bawah-kiri hingga Seterusnya supaya pendek dan kad mendapat ruang */
.pentas-kenali .k-bawah { margin-left: -11.4cqw; padding-left: 0; margin-top: .9cqw; }
.pentas-kenali .k-maklumat { padding: .4cqw 1.2cqw .4cqw .7cqw; }
.pentas-kenali .k-seterusnya { min-height: max(48px, 5.6cqw); }
html[data-teks="besar"] .pentas-kenali .k-kolum { top: 15.6cqw; }
html[data-teks="besar"] .pentas-kenali .k-soalan { margin-bottom: -1.1cqw; }
/* Label sama tinggi pada kedua-dua kad supaya gambar sama saiz */
.pentas-kenali .k-kad { padding: .5cqw .5cqw .5cqw; }
.pentas-kenali .k-label { height: max(44px, 4.2cqw); min-height: 0; margin-top: .45cqw; padding-top: 0; padding-bottom: 0; font-size: calc(max(14px, 1.65cqw) * min(var(--ts), 1.1)); line-height: 1.05; }
.pentas-kenali .k-panel { padding-top: 1.7cqw; padding-bottom: 1cqw; }
html[data-teks="besar"] .pentas-kenali .k-label { height: max(52px, 5.6cqw); font-size: calc(max(14px, 1.6cqw) * min(var(--ts), 1.1)); }
/* Slaid 3 — pembetulan kedua: chip tidak menindih label; maklumat lebih padat; Besar lebih ruang */
.pentas-kenali .k-chip, .pentas-kenali .k-kad.betul .k-chip, .pentas-kenali .k-kad.cuba .k-chip { display: none; }
.pentas-kenali .k-kad.cuba .k-label { border-color: var(--jingga); }
.pentas-kenali .k-maklumat-teks p:not(.k-nilai) { font-size: calc(max(12px, 1.25cqw) * min(var(--ts), 1)); }
.pentas-kenali .k-maklumat-teks .k-nilai { font-size: calc(max(13px, 1.5cqw) * min(var(--ts), 1)); padding-top: .2cqw; padding-bottom: .25cqw; }
.pentas-kenali .k-mentol { width: max(34px, 3.8cqw); height: max(34px, 3.8cqw); }
html[data-teks="besar"] .pentas-kenali .k-kolum { left: 31cqw; top: 13.3cqw; }
html[data-teks="besar"] .pentas-kenali .k-bawah { margin-left: -9.4cqw; }
html[data-teks="besar"] .pentas-kenali .k-seterusnya { min-width: 0; padding-left: 1.4cqw; padding-right: 1.4cqw; }
.pentas-kenali .k-label { font-size: calc(max(14px, 1.55cqw) * min(var(--ts), 1.1)); }
.pentas-kenali .k-tb { white-space: nowrap; }
.pentas-kenali .k-kolum { top: 14cqw; }
html[data-teks="besar"] .pentas-kenali .k-kolum { top: 14cqw; }
html[data-teks="besar"] .pentas-kenali .k-soalan { margin-left: 5.6cqw; }
.pentas-kenali .k-kolum { bottom: .9cqw; }
html[data-teks="besar"] .pentas-kenali .k-bawah { margin-left: -2.6cqw; }
html[data-teks="besar"] .pentas-kenali .k-maklumat-teks p:not(.k-nilai) { font-size: calc(max(12px, 1.2cqw)); line-height: 1.2; }
html[data-teks="besar"] .pentas-kenali .k-maklumat-teks .k-nilai { font-size: calc(max(13px, 1.4cqw)); }
html[data-teks="besar"] .pentas-kenali .k-seterusnya { min-height: max(46px, 5cqw); font-size: calc(max(17px, 2.2cqw)); }
.kg-soalan.panjang { font-size: calc(max(15px, 2.3cqw) * min(var(--ts), 1.08)); }
/* Seragam: tinggi label sama (ruang dua baris) dalam Sederhana & Besar */
.pentas-kenali .k-label { height: max(52px, 5.4cqw); }
html[data-teks="besar"] .pentas-kenali .k-label { height: max(52px, 5.4cqw); }
/* Saiz frame TETAP & sama untuk Slaid 1–3 dan kedua-dua saiz tulisan (tidak bergantung pada tinggi kotak maklumat) */
.pentas-kenali { --k-gambar-l: 25cqw; }
.pentas-kenali .k-pilihan { flex: 0 0 auto; grid-template-columns: repeat(2, max-content); justify-content: center; align-content: start; gap: 1.8cqw; margin-top: .3cqw; }
.pentas-kenali .k-kad { width: calc(var(--k-gambar-l) + 1cqw + 2 * max(3px, .4cqw)); flex: none; }
.pentas-kenali .k-gambar { flex: none; width: var(--k-gambar-l); height: auto; aspect-ratio: 16 / 9; align-self: center; }
/* Baris arahan tinggi tetap supaya ikon maklum balas tidak menganjak kad */
.pentas-kenali .k-arahan { height: 3.4cqw; min-height: 3.4cqw; flex: none; box-sizing: border-box; }
.kg-baris[hidden] { display: none; }

/* ============ Fasa 1: KUTIP — Pusingan 2 (menaip maklumat; semakan jawapan fleksibel) ============
   Menggunakan semula kelas Pusingan 1 (kg-*) untuk kepala, pop-up, butang dan gambar. */
.p2-arahan { position: absolute; left: 34cqw; top: 1.6cqw; width: 22cqw; margin: 0; padding: .5cqw 1.2cqw; text-align: center; font-size: calc(max(13px, 1.8cqw) * min(var(--ts), 1.05)); font-weight: 800; line-height: 1.15; color: #4a2a0a; background: linear-gradient(#fff8e4, #ffeec3); border: max(2px,.3cqw) solid #cf9a52; border-radius: 1.8cqw; box-shadow: 0 .3cqw 0 #8a5724, 0 .7cqw 1.1cqw rgba(0,0,0,.25); }
.p2-isi { position: absolute; left: 1.8cqw; right: 1.8cqw; top: 10.4cqw; bottom: 8.2cqw; z-index: 2; display: flex; gap: 1.4cqw; align-items: center; padding: 1cqw; background: linear-gradient(#fffaf0, #fff0cc); border: max(3px,.45cqw) solid #f0d79a; border-radius: 2.4cqw; box-shadow: 0 .5cqw 0 rgba(0,0,0,.15), 0 1cqw 2cqw rgba(0,0,0,.3); }
.p2-isi[hidden], .p2-tamat[hidden], .p2-bank[hidden] { display: none; }
.p2-gambar { flex: none; width: 43cqw; height: auto; aspect-ratio: 16 / 9; align-self: center; }
.p2-gambar img { object-fit: contain; background: #0b2540; }
.p2-ruang { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; gap: .7cqw; }
.p2-medan { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: .3cqw; padding: .4cqw .9cqw .35cqw; background: #fff; border: max(3px,.35cqw) solid; border-radius: 1.6cqw; box-shadow: 0 .3cqw 0 rgba(0,0,0,.14); }
.p2-m1 { background: #eaf5ff; border-color: #8fc7f3; } .p2-m2 { background: #fff2e0; border-color: #f2b878; } .p2-m3 { background: #e8f8ee; border-color: #9fdbb4; }
.p2-atas { flex: none; display: flex; align-items: center; gap: .9cqw; }
.p2-label { flex: none; display: inline-flex; align-items: center; gap: .5cqw; padding: .2cqw 1.3cqw .25cqw .8cqw; color: #fff; border-radius: 2cqw; font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.08)); font-weight: 900; white-space: nowrap; }
.p2-label svg { width: 1.3em; height: 1.3em; flex: none; }
.p2-m1 .p2-label { background: #1f86f0; } .p2-m2 .p2-label { background: #ee7a0c; } .p2-m3 .p2-label { background: #18a553; }
.p2-soalan { flex: 1 1 auto; min-width: 0; font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.08)); font-weight: 800; color: #2a1a05; line-height: 1.12; }
.p2-audio { flex: none; width: max(34px, 3.4cqw); height: max(34px, 3.4cqw); }
.p2-masuk { flex: none; display: flex; gap: .9cqw; align-items: stretch; }
.p2-input { flex: 1 1 auto; min-width: 0; height: max(44px, 3.9cqw); padding: 0 1.2cqw; font: inherit; font-size: calc(max(16px, 2.1cqw) * min(var(--ts), 1.08)); font-weight: 800; color: #17407a; background: #fff; border: max(3px,.3cqw) solid #b9d6f5; border-radius: 1.2cqw; }
.p2-input::placeholder { color: #8a97a8; font-weight: 700; }
.p2-input:focus { outline: 4px solid var(--fokus); outline-offset: 1px; }
.p2-bantu { flex: none; display: inline-flex; align-items: center; gap: .5cqw; padding: 0 1.2cqw 0 .8cqw; min-height: max(44px, 3.9cqw); font-size: calc(max(12px, 1.4cqw) * min(var(--ts), 1.08)); font-weight: 800; color: #3b1d05; background: #fff7d6; border: max(2px,.25cqw) solid #f0c14a; border-radius: 1.4cqw; box-shadow: 0 .25cqw 0 #d9a82a; white-space: nowrap; }
.p2-bantu svg { width: max(22px, 2.4cqw); height: max(22px, 2.4cqw); flex: none; }
.p2-bantu:hover { background: #ffefb0; }
.p2-bantu.nampak { animation: mb-menyala 1.1s ease-out; }
.p2-fb { flex: none; margin: 0; min-height: calc(1.2cqw * 1.15); font-size: calc(max(11px, 1.2cqw) * min(var(--ts), 1.05)); font-weight: 800; line-height: 1.15; color: #8a4b00; }
.p2-medan.betul { background: #e2f8ea; border-color: #18a553; }
.p2-medan.betul .p2-fb { color: #0e6a34; }
.p2-medan.betul .p2-input { background: #f3fcf6; border-color: #18a553; color: #0e6a34; }
.p2-medan.betul .p2-bantu { visibility: hidden; }
.p2-medan.belum .p2-input { border-color: #e8962b; }
.p2-medan.belum.mb-goyang { animation: none; }
.p2-semak { position: absolute; left: 50%; bottom: 1.3cqw; transform: translateX(-50%); z-index: 6; min-width: 26cqw; min-height: max(52px, 6cqw); padding: .5cqw 3cqw; font-size: calc(max(16px, 2.4cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #fff; background: linear-gradient(#34c46d, #0e9a47); border: max(3px,.4cqw) solid #fff; border-radius: 4cqw; box-shadow: 0 .5cqw 0 #0a6b31, 0 .9cqw 1.4cqw rgba(0,0,0,.3); }
.p2-semak:hover:not(:disabled) { transform: translateX(-50%) translateY(-.2cqw); }
.p2-semak:disabled { cursor: not-allowed; color: #5f6b66; background: linear-gradient(#e4e9e6, #c9d1cc); box-shadow: 0 .5cqw 0 #9aa5a0, 0 .9cqw 1.4cqw rgba(0,0,0,.2); }
.p2-semak[hidden] { display: none; }
#skrin-p2 .btn-kembali { z-index: 6; }
#skrin-p2 .btn-kembali .k-kembali-teks b { font-size: calc(max(15px, 2cqw) * min(var(--ts), 1.05)); }
#p2-nota { z-index: 40; left: 3cqw; top: 11.4cqw; bottom: auto; width: 40cqw; }
#p2-nota:empty { display: none; } #p2-nota.dalam { position: static; width: auto; align-self: center; margin: 0; }
.pentas-p2 button:focus-visible { outline: 4px solid var(--fokus); outline-offset: 2px; }
/* pop-up Bantu Saya */
.p2-pb-tab .kg-pp-t { padding: 0 .6cqw; }
.p2-pb-tab .kg-pp-t:disabled { color: #6b7684; }
.p2-bank { display: flex; flex-direction: column; gap: 1cqw; }
.p2-bank-arah { margin: 0; text-align: center; font-size: calc(max(14px, 1.9cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #17407a; }
.p2-bank-senarai { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8cqw; }
.p2-bank-senarai li { display: flex; align-items: center; gap: .9cqw; }
.p2-kata { flex: 1 1 auto; min-height: max(48px, 5.4cqw); padding: 0 1.6cqw; text-align: left; font-size: calc(max(16px, 2.5cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #17407a; background: #fff; border: max(3px,.3cqw) solid #b9d6f5; border-radius: 1.6cqw; box-shadow: 0 .3cqw 0 rgba(0,0,0,.14); }
.p2-kata:hover { background: #eaf4ff; }
/* halaman tamat */
.p2-tamat { position: absolute; left: 1.8cqw; right: 1.8cqw; top: 9.6cqw; bottom: 8.4cqw; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .9cqw; }
.p2-tamat .kg-papan { width: 66cqw; }
.p2-kad-senarai { list-style: none; margin: 0; padding: 0; width: 96cqw; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2cqw; }
.p2-kad { display: flex; flex-direction: column; gap: .4cqw; padding: .7cqw; background: #fff; border: max(3px,.35cqw) solid #f0d79a; border-radius: 1.8cqw; box-shadow: 0 .4cqw 0 rgba(0,0,0,.14), 0 .8cqw 1.4cqw rgba(0,0,0,.22); }
.p2-kad-no { align-self: center; font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #17407a; }
.p2-kad-gambar { width: 100%; aspect-ratio: 16 / 9; border-radius: 1cqw; background-color: #0b2540; background-repeat: no-repeat; background-size: cover; border: max(2px,.2cqw) solid #fff; }
.p2-kad-jwp { margin: 0; display: flex; flex-direction: column; gap: .3cqw; }
.p2-kad-jwp > div { display: flex; flex-direction: column; padding: .25cqw .7cqw .3cqw; border-radius: 1cqw; }
.p2-kad-jwp .j1 { background: #e6f4ff; } .p2-kad-jwp .j2 { background: #fff0dc; } .p2-kad-jwp .j3 { background: #e6f8ec; }
.p2-kad-jwp dt { font-size: calc(max(10px, 1.1cqw) * min(var(--ts), 1.05)); font-weight: 900; }
.p2-kad-jwp .j1 dt { color: #1565c0; } .p2-kad-jwp .j2 dt { color: #b85a00; } .p2-kad-jwp .j3 dt { color: #0e7a3a; }
.p2-kad-jwp dd { margin: 0; font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #2a1a05; overflow-wrap: anywhere; line-height: 1.1; min-height: 1.1em; }
.p2-tamat-nota { margin: 0; font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #17407a; text-align: center; }
.p2-tamat .kg-audio-ringkas { margin-top: .2cqw; }
/* Pusingan 2: pelarasan akhir */
#p2-seterusnya[hidden], #p2-semak[hidden], #p2-dengar[hidden] { display: none; }

.p2-tamat { bottom: 1cqw; }
#skrin-p2:has(.p2-tamat:not([hidden])) #p2-nota { top: auto; left: 19cqw; bottom: 6cqw; width: 43cqw; }
.p2-tamat .kg-audio-ringkas { margin-top: 0; padding-top: .2cqw; padding-bottom: .2cqw; font-size: calc(max(14px, 1.9cqw) * min(var(--ts), 1.05)); }
.p2-tamat { gap: .4cqw; top: 9.2cqw; }
@container (max-width: 900px) {
  .p2-medan { gap: .15cqw; padding: .3cqw .8cqw .25cqw; }
  .p2-label, .p2-soalan { font-size: calc(max(10px, 1.45cqw) * min(var(--ts), 1.08)); }
  .p2-audio { width: max(28px, 3.4cqw); height: max(28px, 3.4cqw); }
  .p2-input { height: max(34px, 3.9cqw); font-size: calc(max(14px, 2.1cqw) * min(var(--ts), 1.08)); }
  .p2-bantu { min-height: max(34px, 3.9cqw); font-size: calc(max(11px, 1.4cqw) * min(var(--ts), 1.08)); }
  .p2-bantu svg { width: max(18px, 2.4cqw); height: max(18px, 2.4cqw); }
  .p2-fb { font-size: calc(max(10px, 1.2cqw) * min(var(--ts), 1.05)); min-height: 0; }
}
@container (max-width: 900px) { .p2-arahan { left: 39cqw; width: 19cqw; font-size: calc(max(11px, 1.7cqw) * min(var(--ts), 1.05)); } }

/* Pusingan 2 selesai: papan kejayaan kompak + ganjaran Lencana KUTIP */
.p2-tamat { top: 10.4cqw; gap: 1.4cqw; }
.p2-tamat .kg-papan { width: 46cqw; padding: .3cqw 2cqw .4cqw; border-radius: 1.6cqw; }
.p2-tamat .kg-papan .kg-soalan { margin: 0; font-size: calc(max(20px, 2.9cqw) * min(var(--ts), 1.05)); line-height: 1.1; }
.p2-tamat .kg-papan .kg-ringkas-isi { margin: .1cqw 0 0; font-size: calc(max(14px, 1.8cqw) * min(var(--ts), 1.05)); font-weight: 800; line-height: 1.15; }
.p2-tamat .kg-hias { width: 3.4cqw; height: 3.4cqw; }
.p2-ganjaran { position: absolute; right: .4cqw; bottom: 0; display: flex; align-items: center; gap: 1cqw; padding: .5cqw 1.2cqw .5cqw .8cqw; background: linear-gradient(#fff8e4, #ffeec3); border: max(3px,.35cqw) solid #e0a92c; border-radius: 2.2cqw; box-shadow: 0 .3cqw 0 #b27c10, 0 .6cqw 1cqw rgba(0,0,0,.22); z-index: 3; }
.p2-ganjaran[hidden] { display: none; }
.p2-lencana-img { flex: none; width: 6.6cqw; height: 6.6cqw; object-fit: contain; filter: drop-shadow(0 .25cqw .3cqw rgba(0,0,0,.3)); }
.p2-ganjaran-teks { display: flex; flex-direction: column; text-align: left; }
.p2-ganjaran-label { font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #17407a; line-height: 1.1; }
.p2-ganjaran-nama { font-size: calc(max(15px, 2.2cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #7a4a00; line-height: 1.1; }
.p2-ganjaran-audio { flex: none; width: max(34px, 3.4cqw); height: max(34px, 3.4cqw); }
.p2-ganjaran.baharu { animation: p2-lencana-muncul .9s ease-out both; }
@keyframes p2-lencana-muncul { from { opacity: 0; transform: translateY(1.2cqw) scale(.92); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .p2-ganjaran.baharu { animation: none; } }
@container (max-width: 900px) { .p2-lencana-img { width: 7.4cqw; height: 7.4cqw; } .p2-ganjaran { gap: .7cqw; padding: .3cqw .8cqw .3cqw .5cqw; } .p2-ganjaran-audio { width: max(28px, 3.4cqw); height: max(28px, 3.4cqw); } }
.p2-tamat .kg-audio-ringkas { height: max(40px, 4.9cqw); min-height: 0; flex: none; }
.p2-tamat .kg-audio-ringkas { height: max(40px, 4.6cqw); }
@container (max-width: 1100px) {
  .p2-kad-gambar { width: 80%; align-self: center; }
  .p2-tamat .kg-audio-ringkas { height: max(34px, 4.4cqw); font-size: calc(max(12px, 1.7cqw) * min(var(--ts), 1.05)); }
  .p2-lencana-img { width: 6cqw; height: 6cqw; }
  .p2-ganjaran { padding-top: .2cqw; padding-bottom: .2cqw; }
}

/* Pusingan 2 selesai: butang JOM CIPTA! + lencana dipindahkan berhampiran papan kejayaan */
.p2-cipta[hidden] { display: none; }
.p2-cipta { z-index: 6; }
.p2-ganjaran { top: 0; bottom: auto; right: .2cqw; width: 23cqw; gap: .7cqw; padding: .4cqw .8cqw .4cqw .6cqw; border-radius: 1.8cqw; }
.p2-lencana-img { width: 6cqw; height: 6cqw; }
.p2-ganjaran-teks { flex: 1 1 auto; min-width: 0; }
.p2-ganjaran-label { font-size: calc(max(11px, 1.25cqw) * min(var(--ts), 1.05)); }
.p2-ganjaran-nama { font-size: calc(max(14px, 1.8cqw) * min(var(--ts), 1.05)); }
.p2-ganjaran-audio { position: absolute; right: -.8cqw; top: -1cqw; width: max(30px, 3cqw); height: max(30px, 3cqw); }
.p2-ganjaran { padding-right: 2.6cqw; } .p2-ganjaran-audio { right: -1cqw; }
@container (max-width: 900px) {
  .p2-ganjaran { padding: .15cqw 2.4cqw .15cqw .4cqw; }
  .p2-lencana-img { width: 5.2cqw; height: 5.2cqw; }
  .p2-ganjaran-label { font-size: calc(max(10px, 1.2cqw) * min(var(--ts), 1.05)); }
  .p2-ganjaran-nama { font-size: calc(max(12px, 1.7cqw) * min(var(--ts), 1.05)); }
}

/* ===== Halaman tamat KUTIP: ruang selamat bawah + susun atur mengikut ruang sebenar ===== */
#skrin-p2 { --p2-selamat: 2cqw; --p2-baris: max(52px, 6.4cqw); }
#skrin-p2:has(.p2-tamat:not([hidden])) .btn-kembali,
#skrin-p2:has(.p2-tamat:not([hidden])) .p2-cipta { bottom: var(--p2-selamat); }
.p2-tamat { top: 10.2cqw; bottom: calc(var(--p2-selamat) + var(--p2-baris) + 1.4cqw); gap: .9cqw; }
.p2-tamat[hidden] + #p2-tamat-audio { display: none; }
#p2-tamat-audio { position: absolute; left: 50%; bottom: var(--p2-selamat); transform: translateX(-50%); z-index: 6; height: var(--p2-baris); min-height: 0; margin: 0; font-size: calc(max(14px, 1.9cqw) * min(var(--ts), 1.05)); }
.p2-kad-senarai { flex: 1 1 0; min-height: 0; grid-auto-rows: minmax(0, 1fr); }
.p2-kad { min-height: 0; padding: .5cqw .7cqw .6cqw; gap: .25cqw; }
.p2-kad-gambar { flex: 1 1 0; min-height: 0; width: 100%; aspect-ratio: auto; background-position: center; }
.p2-kad-jwp { flex: none; gap: .2cqw; }
.p2-kad-jwp > div { padding: .15cqw .7cqw .2cqw; }
.p2-tamat-nota { flex: none; }
.p2-tamat .kg-papan { flex: none; }
@container (max-width: 1100px) { .p2-kad-gambar { width: 100%; align-self: stretch; } #p2-tamat-audio { height: var(--p2-baris); font-size: calc(max(12px, 1.7cqw) * min(var(--ts), 1.05)); } }
.p2-tamat { gap: 1.2cqw; }

/* ============ Fasa 2: CIPTA — Halaman pembuka SIBUPA ============ */
#skrin-sibupa { --sb-selamat: 2cqw; --sb-baris: max(52px, 6.4cqw); --sb-alas: calc(var(--sb-selamat) + var(--sb-baris) + 1.4cqw);
  --sb-biru: #1f86f0; --sb-jingga: #ee7a0c; --sb-hijau: #18a553; }
#skrin-sibupa[hidden] { display: none; }
.sb-papan { position: absolute; left: 50%; top: 1.4cqw; transform: translateX(-50%); width: 44cqw; z-index: 2; padding: .4cqw 2cqw .5cqw; text-align: center; background: linear-gradient(#fff8e4, #ffeec3); border: max(3px,.4cqw) solid #cf9a52; border-radius: 2cqw; box-shadow: inset 0 0 0 max(2px,.2cqw) #f3dca4, 0 .4cqw 0 #8a5724, 0 .9cqw 1.4cqw rgba(0,0,0,.3); }
.sb-papan-tajuk { margin: 0; font-size: calc(max(17px, 2.7cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #2a1a05; line-height: 1.15; }
.sb-papan-tajuk b { color: #1565c0; }
.sb-papan-sub { margin: .1cqw 0 0; font-size: calc(max(13px, 1.8cqw) * min(var(--ts), 1.05)); font-weight: 700; color: #2a1a05; line-height: 1.15; }
.sb-papan .kg-hias { width: 3.4cqw; height: 3.4cqw; }

.sb-isi { position: absolute; left: 1.4cqw; right: 1.4cqw; top: 11.6cqw; bottom: var(--sb-alas); z-index: 2; display: grid; grid-template-columns: 22cqw 27cqw minmax(0, 1fr); gap: 1.2cqw; align-items: stretch; min-height: 0; }
/* guru + gelembung */
.sb-guru { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; min-width: 0; }
.sb-guru-img { display: block; width: 100%; height: auto; max-height: 62%; object-fit: contain; object-position: left bottom; filter: drop-shadow(0 .4cqw .5cqw rgba(0,0,0,.3)); }
.sb-gelembung { position: relative; margin-bottom: 1.6cqw; padding: .8cqw 1.2cqw 4.8cqw 1.2cqw; background: #fff; border: max(3px,.3cqw) solid #5b3a1e; border-radius: 2cqw; box-shadow: 0 .3cqw 0 rgba(0,0,0,.18); }
.sb-gelembung::after { content: ''; position: absolute; left: 3cqw; bottom: -2cqw; width: 2.4cqw; height: 2.4cqw; background: #fff; border-right: max(3px,.3cqw) solid #5b3a1e; border-bottom: max(3px,.3cqw) solid #5b3a1e; transform: skewX(-20deg) rotate(35deg) translateY(-.9cqw); border-bottom-right-radius: .6cqw; }
.sb-g-teks { margin: 0; font-size: calc(max(14px, 1.9cqw) * min(var(--ts), 1.05)); font-weight: 700; line-height: 1.2; color: #2a1a05; }
.sb-g-teks b { font-weight: 900; }
.sb-g-teks .sb-k0 { color: #1565c0; } .sb-g-teks .sb-k1 { color: #c25d00; } .sb-g-teks .sb-k2 { color: #0e7a3a; }
.sb-audio { position: absolute; right: .8cqw; bottom: .6cqw; width: max(34px, 3.4cqw); height: max(34px, 3.4cqw); }
/* gambar contoh */
.sb-contoh { margin: 0; align-self: center; padding: .8cqw; background: linear-gradient(#fffaf0, #fff0cc); border: max(3px,.4cqw) solid #f0d79a; border-radius: 2cqw; box-shadow: 0 .4cqw 0 rgba(0,0,0,.14), 0 .8cqw 1.4cqw rgba(0,0,0,.22); }
.sb-contoh figcaption { text-align: center; margin: 0 0 .5cqw; font-size: calc(max(14px, 1.9cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #17407a; }
.sb-bingkai { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 1.2cqw; background: #0b2540; border: max(2px,.25cqw) solid #fff; }
.sb-bingkai img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sb-sorot { position: absolute; opacity: 0; border: max(3px,.4cqw) solid #fff; border-radius: 1cqw; box-shadow: 0 0 0 200cqw rgba(8,28,58,.38); transition: left .7s ease, top .7s ease, width .7s ease, height .7s ease, opacity .5s ease; pointer-events: none; }
.sb-sorot.nampak { opacity: 1; }
/* tiga kad formula */
.sb-kanan { display: flex; flex-direction: column; gap: 1cqw; min-width: 0; min-height: 0; }
.sb-kad-baris { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .3cqw; flex: 1 1 auto; min-height: 0; }
.sb-tambah { flex: none; width: 2.2cqw; text-align: center; font-size: calc(max(20px, 3cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #e0a92c; text-shadow: 0 .2cqw 0 #b27c10; }
.sb-kad { flex: 1 1 0; min-width: 0; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3cqw; padding: .6cqw .6cqw .7cqw; border: max(3px,.35cqw) solid; border-radius: 2cqw; box-shadow: 0 .3cqw 0 rgba(0,0,0,.14), 0 .6cqw 1cqw rgba(0,0,0,.18); transition: transform .5s ease, opacity .5s ease, box-shadow .5s ease; }
.sb-si { background: #eaf5ff; border-color: #8fc7f3; --kk: #1f86f0; } .sb-bu { background: #fff2e0; border-color: #f2b878; --kk: #ee7a0c; } .sb-pa { background: #e8f8ee; border-color: #9fdbb4; --kk: #18a553; }
.sb-kod { padding: .1cqw 1.8cqw .2cqw; font-size: calc(max(20px, 3.2cqw) * min(var(--ts), 1.05)); font-weight: 900; line-height: 1.1; color: #fff; background: var(--kk); border-radius: 1cqw; box-shadow: 0 .25cqw 0 rgba(0,0,0,.22); }
.sb-lab { font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.05)); font-weight: 900; color: var(--kk); }
.sb-foto { flex: 1 1 0; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.sb-foto-img { max-width: 100%; max-height: 100%; border-radius: 1cqw; border: max(2px,.2cqw) solid #fff; background-color: #0b2540; box-shadow: 0 .2cqw 0 rgba(0,0,0,.18); }
.sb-jwp { width: 100%; padding: .2cqw .6cqw .25cqw; text-align: center; font-size: calc(max(13px, 1.6cqw) * min(var(--ts), 1.05)); font-weight: 800; line-height: 1.1; color: #2a1a05; background: #fff; border: max(2px,.2cqw) solid color-mix(in srgb, var(--kk) 45%, #fff); border-radius: 1.2cqw; overflow-wrap: anywhere; }
.sb-kad.belum { opacity: .55; }
.sb-kad.belum .sb-jwp { color: #8a97a8; }
.sb-kad.fokus { transform: scale(1.03); border-color: var(--kk); box-shadow: 0 0 0 max(4px,.5cqw) color-mix(in srgb, var(--kk) 30%, transparent), 0 .6cqw 1.2cqw rgba(0,0,0,.25); }
/* panel formula + ayat */
.sb-ayat { flex: none; padding: .6cqw 1.2cqw .8cqw; display: flex; flex-direction: column; gap: .5cqw; background: linear-gradient(#fffaf0, #fff0cc); border: max(3px,.4cqw) solid #f0d79a; border-radius: 2cqw; box-shadow: 0 .4cqw 0 rgba(0,0,0,.14), 0 .8cqw 1.4cqw rgba(0,0,0,.22); }
.sb-ayat-tajuk { margin: 0; text-align: center; font-size: calc(max(13px, 1.7cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #17407a; }
.sb-cip-baris { display: flex; align-items: center; justify-content: center; gap: .6cqw; flex-wrap: wrap; }
.sb-cip-baris b { font-size: calc(max(16px, 2cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #7a4a00; }
.sb-cip { padding: .2cqw 1.4cqw .25cqw; font-size: calc(max(13px, 1.7cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #2a1a05; border-radius: 1.2cqw; border: max(2px,.2cqw) solid; transition: opacity .5s ease, transform .5s ease; }
.sb-cip-si { background: #dff0ff; border-color: #8fc7f3; } .sb-cip-bu { background: #ffe9cc; border-color: #f2b878; } .sb-cip-pa { background: #dff5e6; border-color: #9fdbb4; }
.sb-cip.belum { opacity: .5; }
.sb-ayat-hasil { position: relative; display: flex; align-items: center; justify-content: center; min-height: calc(max(34px, 4.2cqw) * min(var(--ts), 1.1)); padding: .3cqw 4.6cqw .3cqw 1.2cqw; text-align: center; font-size: calc(max(15px, 2.2cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #7b8696; background: rgba(255,255,255,.55); border: max(2px,.25cqw) dashed #b9b2a0; border-radius: 1.4cqw; line-height: 1.15; }
.sb-ayat.siap .sb-ayat-hasil { color: #17407a; background: #fff; border: max(3px,.3cqw) solid #18a553; box-shadow: 0 .25cqw 0 #0e6a34; }
.sb-ayat-hasil .sb-audio { right: .6cqw; bottom: 50%; transform: translateY(50%); width: max(32px, 3.2cqw); height: max(32px, 3.2cqw); }
.sb-ayat-hasil .sb-audio[hidden] { display: none; }
.sb-w { opacity: 0; animation: sb-kata .8s ease forwards; }
.sb-w0 { color: #0d5cb0; animation-delay: .1s; } .sb-w1 { color: #b45309; animation-delay: .9s; } .sb-w2 { color: #0e6a34; animation-delay: 1.7s; } .sb-w3 { color: #17407a; animation-delay: 2.3s; }
@keyframes sb-kata { from { opacity: 0; transform: translateY(.8cqw); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sb-w { animation: none; opacity: 1; } .sb-kad, .sb-cip, .sb-sorot { transition: none; } }
/* bar bawah (dalam aliran grid, bukan kedudukan absolute bagi setiap butang) */
.sb-bawah { position: absolute; left: 1.4cqw; right: 1.4cqw; bottom: var(--sb-selamat); z-index: 3; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.2cqw; }
.sb-btn { position: static; margin: 0; min-height: var(--sb-baris); }
.sb-sebelum svg, .sb-ulang svg { flex: none; width: max(26px, 3.2cqw); height: max(26px, 3.2cqw); color: #c2561a; }
.sb-btn b { font-size: calc(max(15px, 2cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #3b1d05; line-height: 1.1; }
.sb-ulang b { max-width: 11cqw; }
.sb-langkah { justify-self: center; display: flex; flex-direction: column; align-items: center; gap: .2cqw; padding: .4cqw 2.2cqw .5cqw; background: #fff; border: max(2px,.25cqw) solid #b9d6f5; border-radius: 3cqw; box-shadow: 0 .3cqw 0 rgba(0,0,0,.14); }
.sb-langkah-teks { font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #1565c0; }
.sb-bulat { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.sb-bulat li { position: relative; display: grid; place-items: center; width: max(26px, 3.2cqw); height: max(26px, 3.2cqw); margin-right: 2.4cqw; border-radius: 50%; font-size: calc(max(13px, 1.7cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #fff; background: #c3c8cf; }
.sb-bulat li:last-child { margin-right: 0; }
.sb-bulat li::after { content: ''; position: absolute; left: 100%; top: 50%; width: 2.4cqw; height: max(3px,.35cqw); background: #c3c8cf; transform: translateY(-50%); }
.sb-bulat li:last-child::after { display: none; }
.sb-bulat li.semasa { background: #1f6fe0; box-shadow: 0 0 0 max(3px,.4cqw) rgba(31,111,224,.3); }
.sb-bulat li.lepas { background: #5aa3f0; } .sb-bulat li.lepas::after { background: #5aa3f0; }
.sb-kanan-btn { display: flex; align-items: center; gap: 1cqw; }
.sb-btn-biru, .sb-btn-hijau { display: inline-flex; align-items: center; justify-content: center; gap: .8cqw; min-height: var(--sb-baris); padding: .5cqw 2.2cqw .5cqw 2.6cqw; color: #fff; border: max(3px,.4cqw) solid #fff; border-radius: 4cqw; font-size: calc(max(16px, 2.3cqw) * min(var(--ts), 1.05)); font-weight: 900; cursor: pointer; white-space: nowrap; transition: transform .12s ease; }
.sb-btn-biru { background: linear-gradient(#3b97f5, #1564c8); box-shadow: 0 .5cqw 0 #0e478f, 0 .9cqw 1.4cqw rgba(0,0,0,.3); min-width: 15cqw; }
.sb-btn-hijau { background: linear-gradient(#34c46d, #0e9a47); box-shadow: 0 .5cqw 0 #0a6b31, 0 .9cqw 1.4cqw rgba(0,0,0,.3); }
.sb-btn-biru:hover, .sb-btn-hijau:hover { transform: translateY(-.2cqw); }
.sb-btn-biru b, .sb-btn-hijau b { font-weight: 900; color: #fff; font-size: inherit; }
.sb-btn-biru svg, .sb-btn-hijau svg { width: 1.2em; height: 1.2em; flex: none; }
.sb-sebelum[hidden], .sb-ulang[hidden], .sb-btn-biru[hidden], .sb-btn-hijau[hidden] { display: none; }
#sb-nota { z-index: 40; left: 30cqw; top: auto; bottom: calc(var(--sb-alas) + .6cqw); width: 40cqw; }
#sb-nota:empty { display: none; } #sb-nota.dalam { position: static; width: auto; align-self: center; margin: 0; }
.sb-papan { left: 25.5cqw; transform: none; width: 41cqw; padding-left: 1.6cqw; padding-right: 1.6cqw; }
.sb-papan-tajuk { font-size: calc(max(16px, 2.5cqw) * min(var(--ts), 1.05)); }
.sb-kad { position: relative; }
.sb-kad.belum { opacity: 1; }
.sb-kad.belum::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(236,240,244,.62); pointer-events: none; }
.sb-cip-baris { flex-wrap: nowrap; gap: .4cqw; }
.sb-cip { padding: .15cqw 1cqw .2cqw; font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.05)); white-space: nowrap; }
.sb-cip-baris b { font-size: calc(max(14px, 1.8cqw) * min(var(--ts), 1.05)); }
.sb-ayat-hasil { min-height: calc(2.35em + .8cqw); font-size: calc(max(14px, 2cqw) * min(var(--ts), 1.05)); padding-right: 4.4cqw; }
.sb-ulang { padding-right: 1.4cqw; } .sb-ulang b { max-width: 14cqw; }
.sb-ayat-hasil { border-width: max(3px,.3cqw); }
.sb-bawah { gap: .8cqw; }
.sb-bulat li { width: max(24px, 2.8cqw); height: max(24px, 2.8cqw); margin-right: 1.6cqw; }
.sb-bulat li::after { width: 1.6cqw; }
.sb-langkah { padding: .3cqw 1.6cqw .4cqw; }
.sb-btn b { font-size: calc(max(14px, 1.8cqw) * min(var(--ts), 1.05)); }
.sb-ulang b { max-width: 9cqw; }
.sb-btn-biru, .sb-btn-hijau { font-size: calc(max(15px, 2.1cqw) * min(var(--ts), 1.05)); padding: .5cqw 1.8cqw .5cqw 2.1cqw; }
.sb-btn.btn-papan { padding: .5cqw 1.2cqw .5cqw .8cqw; gap: .6cqw; }
.sb-kanan-btn { gap: .7cqw; }
.sb-ayat-hasil { height: calc(2.35em + .8cqw); min-height: 0; box-sizing: border-box; flex: none; }
.sb-ulang { padding-right: 2cqw; } .sb-ulang b { max-width: 10cqw; }

/* ============ Fasa 2: CIPTA — Pusingan 1 (Susun Ayat) ============ */
#skrin-c1 { --c1-selamat: 2cqw; --c1-baris: max(52px, 6.4cqw); --c1-alas: calc(var(--c1-selamat) + var(--c1-baris) + 1.4cqw); }
#skrin-c1[hidden] { display: none; }
.c1-papan { position: absolute; left: 30cqw; top: 1.4cqw; width: 37cqw; z-index: 2; padding: .4cqw 1.6cqw .5cqw; text-align: center; background: linear-gradient(#fff8e4, #ffeec3); border: max(3px,.4cqw) solid #cf9a52; border-radius: 2cqw; box-shadow: inset 0 0 0 max(2px,.2cqw) #f3dca4, 0 .4cqw 0 #8a5724, 0 .9cqw 1.4cqw rgba(0,0,0,.3); }
.c1-papan-tajuk { margin: 0; font-size: calc(max(16px, 2.5cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #2a1a05; line-height: 1.15; }
.c1-papan-tajuk:focus { outline: none; }
.c1-papan-sub { margin: .1cqw 0 0; font-size: calc(max(12px, 1.35cqw) * min(var(--ts), 1.05)); font-weight: 700; color: #17407a; line-height: 1.15; }
.c1-isi { position: absolute; left: 1.4cqw; right: 1.4cqw; top: 11.8cqw; bottom: var(--c1-alas); z-index: 2; display: grid; grid-template-columns: 19cqw 28cqw minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 1cqw 1.2cqw; min-height: 0; }
.c1-isi[hidden], .c1-tamat[hidden] { display: none; }
.c1-guru { grid-column: 1; grid-row: 1 / span 2; position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; min-width: 0; gap: .8cqw; }
.c1-guru-img { display: block; width: 100%; height: auto; max-height: 44%; object-fit: contain; object-position: left bottom; filter: drop-shadow(0 .4cqw .5cqw rgba(0,0,0,.3)); flex: 0 1 auto; min-height: 0; }
.c1-gelembung { position: relative; padding: .7cqw 1cqw 4.4cqw; background: #fff; border: max(3px,.3cqw) solid #5b3a1e; border-radius: 2cqw; box-shadow: 0 .3cqw 0 rgba(0,0,0,.18); flex: none; }
.c1-g-teks { margin: 0; font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.05)); font-weight: 700; line-height: 1.2; color: #2a1a05; }
.c1-g-teks2 { margin-top: .5cqw; }
.c1-audio { position: absolute; right: .6cqw; bottom: .5cqw; width: max(32px, 3.2cqw); height: max(32px, 3.2cqw); }
.c1-bantu { align-self: flex-start; display: inline-flex; align-items: center; gap: .6cqw; padding: 0 1.2cqw 0 .8cqw; min-height: max(44px, 4.4cqw); font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.08)); font-weight: 800; color: #3b1d05; background: #fff7d6; border: max(2px,.25cqw) solid #f0c14a; border-radius: 1.4cqw; box-shadow: 0 .25cqw 0 #d9a82a; white-space: nowrap; flex: none; }
.c1-bantu svg { width: max(22px, 2.4cqw); height: max(22px, 2.4cqw); flex: none; }
.c1-bantu:hover { background: #ffefb0; }
.c1-bantu b { font-weight: 800; }
.c1-gambar { grid-column: 2; grid-row: 1; margin: 0; align-self: center; padding: .7cqw; background: linear-gradient(#fffaf0, #fff0cc); border: max(3px,.4cqw) solid #f0d79a; border-radius: 2cqw; box-shadow: 0 .4cqw 0 rgba(0,0,0,.14), 0 .8cqw 1.4cqw rgba(0,0,0,.22); }
.c1-gambar figcaption { text-align: center; margin: 0 0 .4cqw; font-size: calc(max(14px, 1.9cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #17407a; }
.c1-bingkai { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 1.2cqw; background: #0b2540; border: max(2px,.25cqw) solid #fff; }
.c1-bingkai img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.c1-kanan { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; gap: 1cqw; min-width: 0; min-height: 0; }
.c1-tray, .c1-susun, .c1-ayat { padding: .5cqw 1cqw .7cqw; background: linear-gradient(#fffaf0, #fff0cc); border: max(3px,.4cqw) solid #f0d79a; border-radius: 2cqw; box-shadow: 0 .4cqw 0 rgba(0,0,0,.14), 0 .8cqw 1.4cqw rgba(0,0,0,.22); }
.c1-tray { flex: none; } .c1-susun { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.c1-sub { margin: 0 0 .4cqw; text-align: center; font-size: calc(max(13px, 1.7cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #17407a; line-height: 1.15; }
.c1-kad-baris { list-style: none; margin: 0; padding: 0; display: flex; gap: .8cqw; }
.c1-kad-sel { flex: 1 1 0; min-width: 0; min-height: max(58px, 6.6cqw); border-radius: 1.6cqw; }
.c1-kad-sel:empty { border: max(2px,.25cqw) dashed #d2c39a; background: rgba(255,255,255,.4); }
.c1-kad { position: relative; height: 100%; min-height: inherit; display: flex; align-items: stretch; background: #fff; border: max(3px,.3cqw) solid #e0b66a; border-radius: 1.6cqw; box-shadow: 0 .3cqw 0 rgba(0,0,0,.16); cursor: grab; }
.c1-kad.diseret { opacity: .5; }
.c1-kad-btn { flex: 1; min-width: 0; padding: .4cqw 3.4cqw .4cqw .6cqw; display: flex; align-items: center; justify-content: center; text-align: center; font-size: calc(max(14px, 1.95cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #2a1a05; line-height: 1.1; border-radius: inherit; }
.c1-kad-teks { overflow-wrap: anywhere; }
.c1-kad-audio { position: absolute; right: .4cqw; top: .4cqw; width: max(28px, 2.8cqw); height: max(28px, 2.8cqw); }
.c1-pensel { position: absolute; right: .4cqw; bottom: .4cqw; width: max(28px, 2.8cqw); height: max(28px, 2.8cqw); display: grid; place-items: center; color: #1f6fc7; background: #eaf5ff; border: max(2px,.2cqw) solid #8fc7f3; border-radius: 50%; }
.c1-pensel svg { width: 62%; height: 62%; }
.c1-pensel:hover:not(:disabled) { background: #d6ebff; }
.c1-kad.kunci { cursor: default; } .c1-kad.kunci .c1-pensel { visibility: hidden; }
.c1-slot-baris { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: .3cqw; flex: 1 1 auto; min-height: 0; }
.c1-slot-kotak { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .15cqw; padding: .4cqw .5cqw .5cqw; border: max(3px,.3cqw) solid; border-radius: 1.8cqw; }
.c1-s-si { background: #eaf5ff; border-color: #8fc7f3; --kk: #1f86f0; } .c1-s-bu { background: #fff2e0; border-color: #f2b878; --kk: #ee7a0c; } .c1-s-pa { background: #e8f8ee; border-color: #9fdbb4; --kk: #18a553; }
.c1-kod { padding: .05cqw 1.6cqw .12cqw; font-size: calc(max(16px, 2.4cqw) * min(var(--ts), 1.05)); font-weight: 900; line-height: 1.1; color: #fff; background: var(--kk); border-radius: .9cqw; box-shadow: 0 .2cqw 0 rgba(0,0,0,.22); }
.c1-lab { font-size: calc(max(11px, 1.3cqw) * min(var(--ts), 1.05)); font-weight: 900; color: var(--kk); }
.c1-slot { flex: 1 1 auto; width: 100%; min-height: max(52px, 5.8cqw); display: flex; align-items: stretch; justify-content: center; border: max(2px,.25cqw) dashed var(--kk); border-radius: 1.4cqw; background: rgba(255,255,255,.55); cursor: pointer; }
.c1-slot:not(.terisi) { align-items: center; }
.c1-tambah { font-size: calc(max(20px, 3cqw) * min(var(--ts), 1.05)); font-weight: 900; color: var(--kk); opacity: .7; line-height: 1; }
.c1-slot.terisi { border-style: solid; background: transparent; cursor: default; padding: .2cqw; } .c1-slot.terisi .c1-tambah { display: none; }
.c1-slot.dipilih { box-shadow: 0 0 0 max(4px,.5cqw) color-mix(in srgb, var(--kk) 35%, transparent); }
.c1-slot.atas { background: color-mix(in srgb, var(--kk) 15%, #fff); }
.c1-slot .c1-kad { flex: 1; min-width: 0; min-height: 0; border-color: var(--kk); cursor: grab; }
.c1-slot .c1-kad-audio { display: none; } .c1-slot .c1-kad-btn { padding-right: 3.2cqw; }
.c1-anak { flex: none; width: 2.2cqw; display: grid; place-items: center; align-self: center; }
.c1-anak svg { width: 100%; height: auto; } .c1-anak1 { color: #1f86f0; } .c1-anak2 { color: #ee7a0c; }
.c1-ayat { grid-column: 2 / span 2; grid-row: 2; }
.c1-ayat-atas { display: flex; align-items: baseline; justify-content: space-between; gap: 1cqw; }
.c1-ayat-tajuk { text-align: left; margin-bottom: .3cqw; }
.c1-fb { margin: 0; font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #8a4b00; text-align: right; line-height: 1.15; }
.c1-fb.betul { color: #0e6a34; }
.c1-ayat-kotak { position: relative; display: flex; align-items: center; justify-content: center; min-height: calc(max(34px, 3.6cqw)); padding: .2cqw 4.4cqw .2cqw 1cqw; background: rgba(255,255,255,.6); border: max(2px,.25cqw) dashed #b9b2a0; border-radius: 1.4cqw; }
.c1-ayat-teks { font-size: calc(max(14px, 2.1cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #7b8696; text-align: center; line-height: 1.15; }
.c1-ayat-kotak.ada { background: #fff; border-style: solid; border-color: #8fa9cc; } .c1-ayat-kotak.ada .c1-ayat-teks { color: #17407a; }
.c1-ayat-kotak.betul { border-color: #18a553; box-shadow: 0 .25cqw 0 #0e6a34; } .c1-ayat-kotak.betul .c1-ayat-teks { color: #0e6a34; }
.c1-audio-ayat { top: 50%; bottom: auto; right: .6cqw; transform: translateY(-50%); } .c1-audio-ayat[hidden] { display: none; }
/* bar bawah */
.c1-bawah { position: absolute; left: 1.4cqw; right: 1.4cqw; bottom: var(--c1-selamat); z-index: 3; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8cqw; }
.c1-btn { position: static; margin: 0; min-height: var(--c1-baris); padding: .5cqw 1.4cqw .5cqw .9cqw; gap: .6cqw; justify-content: center; }
.c1-btn svg { flex: none; width: max(26px, 3.2cqw); height: max(26px, 3.2cqw); color: #c2561a; }
.c1-btn b, .c1-btn-audio-ringkas b { font-size: calc(max(14px, 1.9cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #3b1d05; line-height: 1.1; }
.c1-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.c1-tengah { justify-self: center; display: flex; justify-content: center; }
.c1-tengah [hidden] { display: none; }
.c1-btn-audio-ringkas { display: inline-flex; align-items: center; gap: 1cqw; min-height: var(--c1-baris); padding: .3cqw 2.2cqw .3cqw 1.4cqw; border-radius: 4cqw; }
.c1-btn-audio-ringkas svg { width: max(24px, 3.2cqw); height: max(24px, 3.2cqw); } .c1-btn-audio-ringkas b { color: #fff; }
.c1-kanan-btn { display: flex; gap: .8cqw; }
.c1-btn-semak, .c1-btn-hijau { display: inline-flex; align-items: center; justify-content: center; gap: .8cqw; min-height: var(--c1-baris); min-width: 17cqw; padding: .5cqw 2cqw .5cqw 1.6cqw; color: #fff; border: max(3px,.4cqw) solid #fff; border-radius: 4cqw; font-weight: 900; white-space: nowrap; background: linear-gradient(#34c46d, #0e9a47); box-shadow: 0 .5cqw 0 #0a6b31, 0 .9cqw 1.4cqw rgba(0,0,0,.3); }
.c1-btn-semak b, .c1-btn-hijau b { font-size: calc(max(15px, 2.1cqw) * min(var(--ts), 1.05)); font-weight: 900; color: inherit; }
.c1-btn-semak svg, .c1-btn-hijau svg { width: 1.3em; height: 1.3em; flex: none; }
.c1-btn-semak:disabled { color: #5f6b66; background: linear-gradient(#e4e9e6, #c9d1cc); box-shadow: 0 .5cqw 0 #9aa5a0, 0 .9cqw 1.4cqw rgba(0,0,0,.2); cursor: not-allowed; }
.c1-btn-semak[hidden], .c1-btn-hijau[hidden], .c1-btn[hidden] { display: none; }
.c1-btn-semak:hover:not(:disabled), .c1-btn-hijau:hover { transform: translateY(-.2cqw); }
/* tamat */
.c1-tamat { position: absolute; left: 1.4cqw; right: 1.4cqw; top: 11.8cqw; bottom: var(--c1-alas); z-index: 2; display: flex; flex-direction: column; }
.c1-tamat-papan { display: none; }
.c1-tk-senarai { list-style: none; margin: 0; padding: 0; flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2cqw; }
.c1-tk { min-height: 0; display: flex; flex-direction: column; gap: .4cqw; padding: .6cqw .7cqw .8cqw; background: #fff; border: max(3px,.35cqw) solid #f0d79a; border-radius: 1.8cqw; box-shadow: 0 .4cqw 0 rgba(0,0,0,.14), 0 .8cqw 1.4cqw rgba(0,0,0,.22); }
.c1-tk-no { text-align: center; font-size: calc(max(13px, 1.7cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #17407a; }
.c1-tk-gambar { flex: 1 1 0; min-height: 0; border-radius: 1cqw; border: max(2px,.2cqw) solid #fff; background-color: #0b2540; background-size: cover; background-position: center; }
.c1-tk-ayat { flex: none; margin: 0; padding: .4cqw .6cqw; min-height: 5.4cqw; display: flex; align-items: center; justify-content: center; text-align: center; font-size: calc(max(14px, 1.9cqw) * min(var(--ts), 1.05)); font-weight: 800; line-height: 1.15; color: #0e6a34; background: #e6f8ec; border: max(2px,.2cqw) solid #9fdbb4; border-radius: 1.2cqw; overflow-wrap: anywhere; }
/* pop-up */
.c1-pb-badan { display: flex; flex-direction: column; gap: 1cqw; align-items: center; }
.c1-pb-formula { display: flex; align-items: stretch; justify-content: center; gap: .8cqw; width: 100%; }
.c1-pb-f { margin: 0; flex: 1 1 0; max-width: 17cqw; display: flex; flex-direction: column; gap: .4cqw; padding: .6cqw; border: max(3px,.3cqw) solid; border-radius: 1.6cqw; text-align: center; font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.05)); font-weight: 900; color: var(--kk); }
.c1-pb-f b { display: inline-block; padding: 0 1cqw; margin-right: .4cqw; color: #fff; background: var(--kk); border-radius: .8cqw; }
.c1-pb-foto { display: none; width: 100%; aspect-ratio: 4 / 3; border-radius: 1cqw; border: max(2px,.2cqw) solid #fff; background-color: #0b2540; background-size: cover; }
.c1-pb-formula.dgn-foto .c1-pb-foto { display: block; }
.c1-pb-ank { align-self: center; font-size: calc(max(20px, 3cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #7a4a00; }
.c1-pb-teks { display: flex; align-items: center; gap: 1cqw; }
.c1-pb-teks p { margin: 0; font-size: calc(max(15px, 2.1cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #17407a; }
#c1-pb-t1.aktif, #c1-pb-t2.aktif { color: #fff; background: #1f86f0; box-shadow: 0 .2cqw 0 #155ea8; }
.c1-pop-edit { width: 52cqw; }
.c1-ed-badan { display: flex; align-items: center; gap: 1cqw; }
.c1-ed-input { flex: 1; min-width: 0; height: max(48px, 5cqw); padding: 0 1.4cqw; font: inherit; font-size: calc(max(17px, 2.4cqw) * min(var(--ts), 1.08)); font-weight: 800; color: #17407a; background: #fff; border: max(3px,.3cqw) solid #8fc7f3; border-radius: 1.4cqw; }
.c1-ed-input:focus { outline: 4px solid var(--fokus); outline-offset: 1px; }
.c1-ed-mesej { margin: 0; min-height: 1.2em; text-align: center; font-size: calc(max(13px, 1.7cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #8a4b00; }
.c1-ed-cadangan { align-self: center; padding: .6cqw 1.6cqw; font-size: calc(max(14px, 1.9cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #0e6a34; background: #e8f8ee; border: max(2px,.25cqw) solid #18a553; border-radius: 1.6cqw; } .c1-ed-cadangan[hidden] { display: none; }
.c1-ed-butang { display: flex; justify-content: center; gap: 2cqw; }
.c1-btn-batal { min-width: 14cqw; min-height: max(52px, 6cqw); padding: .5cqw 2.4cqw; font-size: calc(max(16px, 2.4cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #3b1d05; background: var(--krim); border: max(3px,.35cqw) solid var(--kayu); border-radius: 4cqw; box-shadow: 0 .4cqw 0 var(--kayu-gelap); }
#c1-nota { z-index: 40; left: 30cqw; top: auto; bottom: calc(var(--c1-alas) + .6cqw); width: 40cqw; }
#c1-nota:empty { display: none; } #c1-nota.dalam { position: static; width: auto; align-self: center; margin: 0; }
@container (max-width: 900px) {
  .c1-kad-sel { min-height: max(46px, 6.6cqw); } .c1-slot { min-height: max(44px, 5.8cqw); }
  .c1-kad-btn { font-size: calc(max(11px, 1.9cqw) * min(var(--ts), 1.05)); }
  .c1-kad-audio, .c1-pensel { width: max(24px, 2.8cqw); height: max(24px, 2.8cqw); }
  .c1-g-teks { font-size: calc(max(10px, 1.5cqw) * min(var(--ts), 1.05)); } .c1-audio { width: max(28px, 3.2cqw); height: max(28px, 3.2cqw); }
  .c1-bantu { min-height: max(34px, 4.4cqw); font-size: calc(max(11px, 1.5cqw) * min(var(--ts), 1.08)); } .c1-bantu svg { width: max(18px, 2.4cqw); height: max(18px, 2.4cqw); }
  .c1-sub { font-size: calc(max(11px, 1.7cqw) * min(var(--ts), 1.05)); } .c1-kod { font-size: calc(max(13px, 2.4cqw) * min(var(--ts), 1.05)); } .c1-lab { font-size: calc(max(9px, 1.3cqw) * min(var(--ts), 1.05)); }
  .c1-ayat-teks { font-size: calc(max(12px, 2.1cqw) * min(var(--ts), 1.05)); } .c1-fb { font-size: calc(max(10px, 1.5cqw) * min(var(--ts), 1.05)); }
  .c1-papan-sub { font-size: calc(max(9px, 1.35cqw) * min(var(--ts), 1.05)); } .c1-papan-tajuk { font-size: calc(max(14px, 2.5cqw) * min(var(--ts), 1.05)); }
  .c1-btn b, .c1-btn-semak b, .c1-btn-hijau b, .c1-btn-audio-ringkas b { font-size: calc(max(12px, 1.8cqw) * min(var(--ts), 1.05)); }
}
@media (prefers-reduced-motion: reduce) { .c1-kad { transition: none; } }

.c1-papan { left: 35cqw; width: 34cqw; }
.c1-slot-kotak { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .6cqw; row-gap: .3cqw; }
.c1-lab { text-align: left; }
.c1-slot { grid-column: 1 / span 2; min-height: max(46px, 5cqw); }
.c1-kad-sel { min-height: max(54px, 6cqw); }
.c1-slot { height: max(56px, 6.2cqw); min-height: 0; overflow: hidden; align-self: stretch; }
.c1-slot .c1-kad { border-width: max(2px,.2cqw); box-shadow: none; }
.c1-slot .c1-kad-btn { font-size: calc(max(12px, 1.6cqw) * min(var(--ts), 1.05)); padding: .2cqw 3cqw .2cqw .4cqw; line-height: 1.05; }
.c1-slot.terisi { padding: 0; }

/* ===== v46: responsif — tamat (bar bawah) & Tulisan Besar (tiada ketinggian tetap/overflow tersembunyi pada teks) ===== */
.c1-bawah { display: flex; align-items: center; justify-content: space-between; gap: 1.2cqw; }
.c1-bawah > * { flex: 0 0 auto; }
.c1-btn-audio-ringkas { flex: 0 0 auto; width: auto; min-width: max-content; white-space: nowrap; flex-direction: row; flex-wrap: nowrap; }
.c1-btn-audio-ringkas svg { flex: none; }
.c1-btn-audio-ringkas b { white-space: nowrap; }
.c1-btn { white-space: nowrap; flex: 0 0 auto; }
.c1-slot { height: auto; min-height: max(56px, 6.2cqw); overflow: visible; }
.c1-slot.terisi { align-items: stretch; }
.c1-slot .c1-kad { height: auto; min-height: max(48px, 5.4cqw); }
.c1-slot .c1-kad-btn { padding: .3cqw 2.6cqw .3cqw .4cqw; overflow-wrap: anywhere; }
.c1-slot .c1-kad-teks { overflow-wrap: anywhere; }
.c1-kad-sel { min-height: max(54px, 6cqw); height: auto; }
.c1-kanan { overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; }
.c1-susun { flex: 1 0 auto; }
.c1-ayat-teks { overflow-wrap: anywhere; }
.c1-gelembung { overflow-wrap: anywhere; }
.c1-sub { margin-bottom: .2cqw; }
.c1-tray, .c1-susun { padding: .4cqw .9cqw .5cqw; }
.c1-kad-sel { min-height: max(50px, 5.4cqw); }
.c1-slot-kotak { padding: .3cqw .4cqw .4cqw; column-gap: .4cqw; row-gap: .2cqw; }
.c1-lab { white-space: nowrap; font-size: calc(max(10px, 1.15cqw) * min(var(--ts), 1.05)); }
.c1-anak { width: 1.6cqw; }
.c1-slot { min-height: max(48px, 5cqw); }
.c1-slot .c1-kad { min-height: max(44px, 4.8cqw); }
.c1-slot .c1-kad-btn { font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.05)); padding: .2cqw 2.3cqw .2cqw .3cqw; line-height: 1.05; }
.c1-slot .c1-pensel { width: max(24px, 2.3cqw); height: max(24px, 2.3cqw); right: .25cqw; bottom: .25cqw; }
@container (max-width: 1100px) {
  .c1-kad-sel { min-height: max(44px, 5.2cqw); } .c1-slot { min-height: max(40px, 4.6cqw); } .c1-slot .c1-kad { min-height: max(38px, 4.4cqw); }
  .c1-sub { font-size: calc(max(11px, 1.55cqw) * min(var(--ts), 1.05)); margin-bottom: 0; }
  .c1-kod { padding: 0 1.2cqw .05cqw; } .c1-tray, .c1-susun { padding-top: .25cqw; padding-bottom: .35cqw; }
  .c1-kanan { gap: .6cqw; }
}
.c1-anak { flex: 0 0 max(16px, 1.8cqw); min-width: max(16px, 1.8cqw); width: auto; }
.c1-anak { position: relative; z-index: 2; }

/* ===== v48: Fasa 2: CIPTA — Pusingan 2 (Taip Ayat Sendiri) + penutup CIPTA + Lencana Pembina Ayat Kreatif ===== */
#skrin-c2 { --c1-selamat: 2cqw; --c1-baris: max(52px, 6.4cqw); --c1-alas: calc(var(--c1-selamat) + var(--c1-baris) + 1.4cqw); }
#skrin-c2[hidden] { display: none; }
.c2-kanan { grid-row: 1; }
.c2-isian { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.c2-kotak-baris { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8cqw; }
.c2-kotak { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: .4cqw; padding: .5cqw .6cqw .6cqw; border: max(3px,.3cqw) solid; border-radius: 1.8cqw; }
.c2-kotak-atas { display: flex; align-items: center; justify-content: space-between; gap: .4cqw; flex-wrap: wrap; }
.c2-kotak-atas .c1-lab { flex: 1 1 auto; text-align: left; }
.c2-audio-kotak { flex: none; width: max(30px, 3cqw); height: max(30px, 3cqw); background: var(--kk); }
.c2-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.c2-input { flex: 1 1 auto; width: 100%; min-height: max(58px, 6.4cqw); resize: none; padding: .6cqw .9cqw; font: inherit; font-size: calc(max(15px, 2cqw) * min(var(--ts), 1.08)); font-weight: 800; line-height: 1.15; color: #17407a; background: #fff; border: max(3px,.3cqw) solid var(--kk); border-radius: 1.3cqw; overflow-wrap: anywhere; }
.c2-input::placeholder { color: #8a94a3; font-weight: 700; }
.c2-input:focus { outline: 4px solid var(--fokus); outline-offset: 1px; }
.c2-fb-medan { margin: 0; min-height: 0; font-size: calc(max(12px, 1.4cqw) * min(var(--ts), 1.05)); font-weight: 800; line-height: 1.15; color: #8a4b00; overflow-wrap: anywhere; }
.c2-fb-medan:empty { display: none; }
.c2-kotak.betul .c2-input { border-color: #18a553; background: #f1fbf4; }
.c2-kotak.belum .c2-input { border-style: dashed; background: #fffaf0; }
.c2-cad { align-self: flex-start; max-width: 100%; padding: .4cqw 1cqw; font-size: calc(max(13px, 1.5cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #0e6a34; background: #e8f8ee; border: max(2px,.25cqw) solid #18a553; border-radius: 1.3cqw; overflow-wrap: anywhere; text-align: left; }
.c2-cad[hidden] { display: none; }
.c2-auto { margin: .3cqw 0 0; padding: .3cqw 1cqw; font-size: calc(max(11px, 1.3cqw) * min(var(--ts), 1.05)); font-weight: 700; color: #17407a; background: #fff3c4; border-radius: 1.2cqw; }
.c2-tengah { gap: 1.2cqw; align-items: center; }
.c2-bantu { align-self: center; min-height: var(--c1-baris); }
.c2-bantu.nampak { animation: c2-nampak 1.2s ease-in-out 1; }
@keyframes c2-nampak { 0%, 100% { transform: none; } 50% { transform: translateY(-.3cqw); } }
@media (prefers-reduced-motion: reduce) { .c2-bantu.nampak { animation: none; } }
#c2-nota { z-index: 40; left: 30cqw; top: auto; bottom: calc(var(--c1-alas) + .6cqw); width: 40cqw; }
#c2-nota:empty { display: none; } #c2-nota.dalam { position: static; width: auto; align-self: center; margin: 0; }
/* penutup CIPTA + ganjaran (susun atur sepadan Lencana KUTIP: kotak emas dengan imej, teks, butang audio) */
.c2-tamat { gap: 1cqw; }
.c2-ganjaran { position: relative; align-self: flex-end; flex: none; display: flex; align-items: center; gap: 1cqw; margin-right: 1cqw; padding: .4cqw 1.6cqw .4cqw .8cqw; background: linear-gradient(#fff8e4, #ffeec3); border: max(3px,.35cqw) solid #e0a92c; border-radius: 2cqw; box-shadow: 0 .4cqw 0 #b8861a, 0 .8cqw 1.4cqw rgba(0,0,0,.22); }
.c2-ganjaran[hidden] { display: none; }
.c2-lencana-img { flex: none; width: max(48px, 5.6cqw); height: max(48px, 5.6cqw); object-fit: contain; filter: drop-shadow(0 .25cqw .3cqw rgba(0,0,0,.3)); }
.c2-ganjaran-teks { display: flex; flex-direction: column; text-align: left; min-width: 0; }
.c2-ganjaran-label { font-size: calc(max(12px, 1.4cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #17407a; line-height: 1.1; }
.c2-ganjaran-nama { font-size: calc(max(15px, 2cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #7a4a00; line-height: 1.1; }
.c2-ganjaran-audio { flex: none; width: max(34px, 3.2cqw); height: max(34px, 3.2cqw); }
.c2-ganjaran.baharu { animation: c2-lencana-muncul .9s ease-out both; }
@keyframes c2-lencana-muncul { from { opacity: 0; transform: translateY(-1.2cqw) scale(.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .c2-ganjaran.baharu { animation: none; } }
.c2-tamat .c1-tk-senarai { flex: 1 1 0; min-height: 0; }
/* pop-up Bantu Saya */
.c2-pop-bantu { width: min(86cqw, 100%); }
.c2-pb-badan { display: flex; flex-direction: column; align-items: center; gap: .8cqw; }
.c2-pb-badan[hidden], .c2-pb-media[hidden], .c2-pb-tiga[hidden], .c2-bank[hidden] { display: none; }
.c2-pb-media { width: min(26cqw, 100%); }
.c2-pb-tiga { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: .6cqw; }
.c2-pb-baris { display: flex; align-items: center; gap: .9cqw; padding: .4cqw .8cqw; border: max(2px,.25cqw) solid; border-radius: 1.4cqw; }
.c2-pb-foto { flex: none; width: 12cqw; border-radius: 1cqw; border: max(2px,.2cqw) solid #fff; background-color: #0b2540; }
.c2-pb-t { font-size: calc(max(14px, 1.9cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #17407a; line-height: 1.15; overflow-wrap: anywhere; }
.c2-bank-lajur { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9cqw; }
.c2-bank-kol { padding: .5cqw .6cqw; border: max(3px,.3cqw) solid; border-radius: 1.6cqw; display: flex; flex-direction: column; gap: .5cqw; }
.c2-bank-kepala { margin: 0; display: flex; align-items: center; gap: .6cqw; flex-wrap: wrap; }
.c2-bank-kol .p2-kata { font-size: calc(max(14px, 2cqw) * min(var(--ts), 1.05)); padding: 0 1cqw; min-height: max(44px, 4.8cqw); overflow-wrap: anywhere; }
.c2-bank-kol .p2-bank-senarai li { gap: .5cqw; }
.c2-bank-kol .btn-audio { flex: none; width: max(30px, 3cqw); height: max(30px, 3cqw); }
.kg-pp-t[aria-selected="true"] { color: #fff; background: #1f86f0; box-shadow: 0 .2cqw 0 #155ea8; }
@container (max-width: 1100px) {
  .c2-input { min-height: max(44px, 5.2cqw); font-size: calc(max(13px, 1.9cqw) * min(var(--ts), 1.08)); }
  .c2-kotak { gap: .25cqw; padding: .3cqw .5cqw .4cqw; } .c2-audio-kotak { width: max(26px, 3cqw); height: max(26px, 3cqw); }
  .c2-auto { font-size: calc(max(10px, 1.3cqw) * min(var(--ts), 1.05)); padding: .1cqw .8cqw; margin-top: .1cqw; }
}
@container (max-width: 900px) { .c2-ganjaran-label { font-size: calc(max(10px, 1.4cqw) * min(var(--ts), 1.05)); } .c2-ganjaran-nama { font-size: calc(max(12px, 2cqw) * min(var(--ts), 1.05)); } }
.c2-kotak { border-width: max(3px,.3cqw); border-style: solid; }
.c2-kotak-atas { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "kod audio" "lab lab"; align-items: center; row-gap: .2cqw; }
.c2-kotak-atas .c1-kod { grid-area: kod; justify-self: start; }
.c2-kotak-atas .c2-audio-kotak { grid-area: audio; justify-self: end; }
.c2-kotak-atas .c1-lab { grid-area: lab; text-align: left; font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.05)); white-space: normal; }
.c2-input::placeholder { font-size: .85em; }
.c2-kotak.c1-s-si { border-color: #8fc7f3; } .c2-kotak.c1-s-bu { border-color: #f2b878; } .c2-kotak.c1-s-pa { border-color: #9fdbb4; }
.c2-kotak-atas { display: flex; flex-wrap: nowrap; align-items: center; gap: .5cqw; }
.c2-kotak-atas .c1-lab { flex: 1 1 0; min-width: 0; text-align: left; font-size: calc(max(11px, 1.3cqw) * min(var(--ts), 1.05)); line-height: 1.05; white-space: normal; }
.c2-kotak-atas .c1-kod { flex: none; padding: 0 1cqw .05cqw; font-size: calc(max(15px, 2.2cqw) * min(var(--ts), 1.05)); }
.c2-input { min-height: max(52px, 5.4cqw); flex: 0 0 auto; }
.c2-fb-medan { font-size: calc(max(12px, 1.3cqw) * min(var(--ts), 1.05)); }
.c2-kotak-baris { grid-auto-rows: minmax(min-content, 1fr); }
.c2-kanan { overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; }
.c2-isian { flex: 1 0 auto; }
@container (max-width: 1100px) { .c2-input { min-height: max(40px, 4.8cqw); } .c2-fb-medan { font-size: calc(max(10px, 1.25cqw) * min(var(--ts), 1.05)); } .c2-kotak-atas .c1-lab { font-size: calc(max(9px, 1.2cqw) * min(var(--ts), 1.05)); } .c2-kotak-atas .c1-kod { font-size: calc(max(13px, 2.1cqw) * min(var(--ts), 1.05)); } }
.c2-kotak-atas .c1-lab { min-width: min-content; flex: 1 1 auto; }
.c2-kotak-atas { gap: .3cqw; }
.c2-input { overflow: hidden; }
.c2-bank-kol.c1-s-si, .c2-pb-baris.c1-s-si { border-color: #8fc7f3; } .c2-bank-kol.c1-s-bu, .c2-pb-baris.c1-s-bu { border-color: #f2b878; } .c2-bank-kol.c1-s-pa, .c2-pb-baris.c1-s-pa { border-color: #9fdbb4; }
/* popup Bantu Saya padat (muat dalam paparan) */
.c2-pop-bantu { width: min(80cqw, 100%); }
.c2-pb-badan { gap: .5cqw; }
.c2-pb-media { width: min(17cqw, 100%); }
.c2-pb-baris { padding: .25cqw .7cqw; gap: .7cqw; min-height: max(40px, 4.6cqw); }
.c2-pb-baris .c1-kod { flex: none; }
.c2-pb-foto { width: 8.5cqw; }
.c2-pb-t { font-size: calc(max(13px, 1.7cqw) * min(var(--ts), 1.05)); }
.c2-pb-badan .kg-pp-teks { padding: .3cqw 1cqw; } .c2-pb-badan .kg-pp-teks p { font-size: calc(max(14px, 1.8cqw) * min(var(--ts), 1.05)); }
.c2-bank-lajur { gap: .6cqw; }
@container (max-width: 1100px) { .c2-pb-foto { width: 7cqw; } .c2-pb-media { width: min(14cqw, 100%); } .c2-pb-t { font-size: calc(max(11px, 1.6cqw) * min(var(--ts), 1.05)); } .c2-bank-kol .p2-kata { font-size: calc(max(12px, 1.8cqw) * min(var(--ts), 1.05)); min-height: max(36px, 4.2cqw); } }
.c2-pop-bantu { max-height: 95cqh; overflow-y: auto; }
.c2-pb-media { width: min(13cqw, 100%); } .c2-pb-foto { width: 6.5cqw; } .c2-pb-baris { min-height: max(36px, 4cqw); padding: .15cqw .6cqw; }
.c2-pop-bantu { padding-top: .8cqw; padding-bottom: 1cqw; gap: .6cqw; }
.c2-pop-bantu .kg-pop-kepala { min-height: 4cqw; }

/* ===== v49 (Tugasan B): penutup CIPTA — jarak menegak seimbang (aliran flex, tiada ketinggian tetap) ===== */
.c2-tamat { top: 10.6cqw; gap: 1cqw; justify-content: flex-start; }
.c2-ganjaran { align-self: center; margin: 0; }
.c2-tamat .c1-tk-senarai { flex: 1 1 0; min-height: 0; }
.c2-lencana-img { width: max(50px, 6cqw); height: max(50px, 6cqw); }

/* ============ Fasa 3: CERITA — Jom Kenali Formula SIBUPAKA! (v49) ============
   Menggunakan semula kelas .sb-* (SIBUPA); hanya tambahan KA (ungu) dan panel jenis KA di sini. */
#skrin-sk { --sb-selamat: 2cqw; --sb-baris: max(52px, 6.4cqw); --sb-alas: calc(var(--sb-selamat) + var(--sb-baris) + 1.4cqw);
  --sk-ungu: #7b3fc4; }
#skrin-sk[hidden] { display: none; }
#skrin-sk .sk-isi { grid-template-columns: 20cqw 25.5cqw minmax(0, 1fr); }
#skrin-sk .sk-papan { left: 50%; transform: translateX(-50%); width: 41cqw; }
.sk-tengah { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
.sk-tengah > .sb-contoh { width: 100%; }
.sk-tengah > [hidden] { display: none; }
#skrin-sk .sb-g-teks { font-size: calc(max(13px, 1.75cqw) * min(var(--ts), 1.05)); }
#skrin-sk .sb-g-teks .sk-kk { color: #6a2fb0; font-weight: 900; }
/* kad KA ungu */
.sb-ka { background: #f3e9fc; border-color: #c9a7ec; --kk: #7b3fc4; }
.sb-kad.sb-ka.fokus { border-color: var(--kk); }
#skrin-sk .sb-kad-baris { gap: .2cqw; }
#skrin-sk .sb-tambah { width: 1.8cqw; font-size: calc(max(18px, 2.6cqw) * min(var(--ts), 1.05)); }
#skrin-sk .sb-kad { padding: .5cqw .4cqw .6cqw; }
#skrin-sk .sb-kod { padding: .1cqw 1.2cqw .2cqw; font-size: calc(max(18px, 2.8cqw) * min(var(--ts), 1.05)); }
#skrin-sk .sb-lab { font-size: calc(max(11px, 1.2cqw) * min(var(--ts), 1.05)); text-align: center; line-height: 1.1; }
#skrin-sk .sb-jwp { font-size: calc(max(12px, 1.45cqw) * min(var(--ts), 1.05)); padding: .2cqw .3cqw .25cqw; }
.sb-foto { position: relative; }
.sk-tanya { display: grid; place-items: center; width: 70%; max-height: 100%; aspect-ratio: 16 / 10; font-size: calc(max(26px, 4.4cqw) * min(var(--ts), 1.05)); font-weight: 900; color: var(--sk-ungu); background: #fff; border: max(2px,.3cqw) dashed #b98ee2; border-radius: 1cqw; }
.sk-tanya[hidden], .sk-pantai[hidden] { display: none; }
.sk-pantai { height: 100%; width: auto; aspect-ratio: 16 / 10; background-size: cover; background-position: center; background-repeat: no-repeat; }
.sb-kad.sb-ka.fokus { animation: sk-timbul .6s ease both; }
@keyframes sk-timbul { from { transform: scale(.94); } to { transform: scale(1.03); } }
/* panel empat jenis KA */
.sk-jenis { width: 100%; max-height: 100%; display: flex; flex-direction: column; gap: .6cqw; padding: .7cqw .8cqw .8cqw; background: linear-gradient(#f9f1ff, #efe0fb); border: max(3px,.4cqw) solid #c9a7ec; border-radius: 2cqw; box-shadow: 0 .4cqw 0 rgba(0,0,0,.14), 0 .8cqw 1.4cqw rgba(0,0,0,.22); }
.sk-jenis-tajuk { margin: 0; text-align: center; font-size: calc(max(13px, 1.7cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #5a2a96; }
.sk-jenis-senarai { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5cqw; }
.sk-j { display: flex; align-items: center; gap: .7cqw; padding: .4cqw .6cqw; background: #fff; border: max(2px,.2cqw) solid #d9bff2; border-radius: 1.4cqw; }
.sk-j-ikon { flex: none; display: grid; place-items: center; width: max(30px, 3.6cqw); height: max(30px, 3.6cqw); background: var(--sk-ungu); border-radius: 50%; box-shadow: 0 .2cqw 0 rgba(0,0,0,.22); }
.sk-j-ikon svg { width: 62%; height: 62%; }
.sk-j-teks { display: flex; flex-direction: column; min-width: 0; line-height: 1.12; }
.sk-j-teks b { font-size: calc(max(14px, 1.85cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #4a1f82; }
.sk-j-teks span { font-size: calc(max(12px, 1.4cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #2a1a05; }
.sk-j-teks i { font-style: normal; font-size: calc(max(12px, 1.4cqw) * min(var(--ts), 1.05)); font-weight: 700; color: #6a2fb0; overflow-wrap: anywhere; }
.sk-jenis-nota { margin: 0; text-align: center; font-size: calc(max(12px, 1.4cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #4a1f82; line-height: 1.15; }
/* panel ayat */
.sk-ayat .sb-ayat-tajuk { position: relative; padding: 0 max(34px, 3.4cqw); }
.sk-audio-formula { position: absolute; right: 0; top: 50%; bottom: auto; transform: translateY(-50%); width: max(30px, 3cqw); height: max(30px, 3cqw); }
.sk-cip-ka { background: #efe0fb; border-color: #c9a7ec; }
#skrin-sk .sb-cip { padding: .15cqw .8cqw .2cqw; }
#skrin-sk .sb-cip-baris { gap: .3cqw; }
.sb-cip.belum { opacity: .5; }
.sk-plus { margin: 0 .5cqw; font-weight: 900; color: #7a4a00; }
.sk-tanya-cip, .sk-ka-cip { display: inline-block; padding: 0 .8cqw .1cqw; border-radius: 1cqw; border: max(2px,.2cqw) solid #c9a7ec; background: #efe0fb; color: #4a1f82; font-weight: 900; }
.sk-tanya-cip { border-style: dashed; }
.sk-ka-cip { animation: sb-kata .8s ease both; }
.sk-w0 { color: #0d5cb0; animation-delay: .1s; } .sk-w1 { color: #b45309; animation-delay: .9s; } .sk-w2 { color: #0e6a34; animation-delay: 1.7s; } .sk-w3 { color: #6a2fb0; animation-delay: 2.5s; } .sk-w4 { color: #17407a; animation-delay: 3.1s; }
#skrin-sk .sb-ayat-hasil { color: #17407a; background: #fff; border-style: solid; border-color: #8fc7f3; }
#skrin-sk .sb-ayat.siap .sb-ayat-hasil { border-color: #18a553; }
#sk-nota { z-index: 40; left: 30cqw; top: auto; bottom: calc(var(--sb-alas) + .6cqw); width: 40cqw; }
#sk-nota:empty { display: none; } #sk-nota.dalam { position: static; width: auto; align-self: center; margin: 0; }
@media (prefers-reduced-motion: reduce) { .sb-kad.sb-ka.fokus, .sk-ka-cip { animation: none; } }
.sk-j-teks p { margin: 0; font-size: calc(max(12px, 1.4cqw) * min(var(--ts), 1.05)); line-height: 1.12; }
.sk-j-teks p span, .sk-j-teks p i { display: inline; font-size: inherit; }
.sk-j-teks p span::after { content: " · "; color: #6a2fb0; }
.sk-jenis { gap: .4cqw; padding: .6cqw .8cqw .7cqw; }
.sk-jenis-senarai { gap: .4cqw; }
.sk-j { padding: .3cqw .6cqw; }
#skrin-sk .sb-ayat-hasil { font-size: calc(max(13px, 1.85cqw) * min(var(--ts), 1.05)); }
#skrin-sk .sb-ulang b { max-width: none; width: min-content; }
#skrin-sk .sb-ayat-hasil { height: auto; min-height: calc(2.35em + .8cqw); }
#skrin-sk .sb-ka .sb-lab { font-size: calc(max(10px, 1.1cqw) * min(var(--ts), 1.05)); letter-spacing: -.01em; }
@container (max-width: 900px) {
  #skrin-sk .sk-j-ikon { width: 26px; height: 26px; }
  #skrin-sk .sk-j { padding: 2px 6px; gap: 6px; }
  #skrin-sk .sk-jenis { gap: 2px; padding: 5px 7px 6px; }
  #skrin-sk .sk-jenis-senarai { gap: 3px; }
  #skrin-sk .sk-jenis-tajuk { font-size: calc(12px * min(var(--ts), 1.05)); }
  #skrin-sk .sk-j-teks b { font-size: calc(13px * min(var(--ts), 1.05)); }
  #skrin-sk .sk-j-teks p, #skrin-sk .sk-jenis-nota { font-size: calc(11px * min(var(--ts), 1.05)); }
}

/* ============ Fasa 3: CERITA — Pusingan 1: Kembangkan Ayat, Gambar 1 (v50) ============ */
#skrin-ce { --ce-selamat: 2cqw; --ce-baris: max(52px, 6.4cqw); --ce-guru: 9.6cqw; --ce-ungu: #7b3fc4; }
#skrin-ce[hidden] { display: none; }
.ce-papan { position: absolute; left: 50%; top: 1.2cqw; transform: translateX(-50%); width: 40cqw; z-index: 2; padding: .5cqw 1.4cqw .6cqw; text-align: center; background: linear-gradient(#fff8e4, #ffeec3); border: max(3px,.4cqw) solid #cf9a52; border-radius: 2cqw; box-shadow: inset 0 0 0 max(2px,.2cqw) #f3dca4, 0 .4cqw 0 #8a5724, 0 .9cqw 1.4cqw rgba(0,0,0,.3); }
.ce-papan-tajuk { margin: 0; font-size: calc(max(16px, 2.4cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #2a1a05; line-height: 1.15; }
.ce-papan-sub { margin: .1cqw 0 0; font-size: calc(max(11px, 1.3cqw) * min(var(--ts), 1.05)); font-weight: 700; color: #3b2a10; line-height: 1.15; }
.ce-isi { position: absolute; left: 1.4cqw; right: 1.4cqw; top: 9.2cqw; bottom: calc(var(--ce-selamat) + var(--ce-guru) + .9cqw); z-index: 2; display: grid; grid-template-columns: 41cqw minmax(0, 1fr); gap: 1.2cqw; min-height: 0; }
.ce-kiri, .ce-kanan { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: .7cqw; padding: .8cqw; background: linear-gradient(#fffaf0, #fff0cc); border: max(3px,.4cqw) solid #f0d79a; border-radius: 2cqw; box-shadow: 0 .4cqw 0 rgba(0,0,0,.14), 0 .8cqw 1.4cqw rgba(0,0,0,.22); }
.ce-label { flex: none; align-self: center; margin: 0; padding: .1cqw 2cqw .15cqw; font-size: calc(max(13px, 1.7cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #17407a; background: #fff; border: max(2px,.2cqw) solid #b9d6f5; border-radius: 3cqw; }
.ce-gambar { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; border-radius: 1.4cqw; border: max(2px,.25cqw) solid #fff; background: #0b2540; }
.ce-gambar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.ce-asal { flex: none; display: flex; align-items: center; gap: .9cqw; padding: .4cqw .8cqw; background: #eaf5ff; border: max(2px,.25cqw) solid #b9d6f5; border-radius: 1.6cqw; }
.ce-asal-teks { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.ce-asal-teks span { font-size: calc(max(11px, 1.25cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #17407a; }
.ce-asal-teks b { font-size: calc(max(14px, 2cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #17407a; overflow-wrap: anywhere; }
.ce-audio { position: static; flex: none; width: max(32px, 3.4cqw); height: max(32px, 3.4cqw); }
.ce-kanan { gap: .6cqw; }
.ce-langkah { display: flex; flex-direction: column; gap: .4cqw; min-height: 0; padding: .4cqw .6cqw .5cqw; border-radius: 1.6cqw; }
#ce-l1 { background: #f3e9fc; } #ce-l2 { background: #eaf5ff; } #ce-l3 { background: #e8f8ee; }
.ce-l-kepala { display: flex; align-items: center; gap: .8cqw; }
.ce-l-kepala h3 { flex: 1 1 auto; margin: 0; font-size: calc(max(13px, 1.75cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #2a1a05; line-height: 1.15; }
.ce-no { flex: none; display: grid; place-items: center; width: max(26px, 3cqw); height: max(26px, 3cqw); border-radius: 50%; font-size: calc(max(14px, 1.8cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #fff; background: var(--ce-ungu); box-shadow: 0 .2cqw 0 rgba(0,0,0,.22); }
.ce-jenis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6cqw; }
.ce-jenis-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2cqw; padding: .4cqw .3cqw .5cqw; min-height: max(64px, 8.6cqw); cursor: pointer; font: inherit; color: #2a1a05; border: max(3px,.3cqw) solid; border-radius: 1.6cqw; box-shadow: 0 .25cqw 0 rgba(0,0,0,.14); transition: transform .12s ease; }
.ce-jenis-btn:hover { transform: translateY(-.15cqw); }
.ce-jenis-btn b { font-size: calc(max(13px, 1.75cqw) * min(var(--ts), 1.05)); font-weight: 900; line-height: 1.1; }
.ce-j-ikon { display: block; width: max(26px, 3.2cqw); height: max(26px, 3.2cqw); } .ce-j-ikon svg, .ce-o-ikon svg { display: block; width: 100%; height: 100%; }
.ce-j-sub { padding: .05cqw .8cqw .1cqw; font-size: calc(max(11px, 1.3cqw) * min(var(--ts), 1.05)); font-weight: 800; background: rgba(255,255,255,.75); border-radius: 1cqw; line-height: 1.15; text-align: center; }
.ce-j-dimana { background: #ffe6e6; border-color: #f2a0a0; } .ce-j-bila { background: #e3f1ff; border-color: #8fc7f3; } .ce-j-mengapa { background: #fff2d2; border-color: #f0c14a; } .ce-j-bagaimana { background: #efe3fb; border-color: #c9a7ec; }
.ce-jenis-btn.dipilih { border-color: #17407a; box-shadow: 0 0 0 max(3px,.4cqw) rgba(23,64,122,.28), 0 .25cqw 0 rgba(0,0,0,.14); transform: translateY(-.15cqw); }
.ce-jenis-btn.ada-ka::after { content: '✓'; position: absolute; right: .4cqw; top: .3cqw; display: grid; place-items: center; width: max(18px, 2cqw); height: max(18px, 2cqw); font-size: calc(max(11px, 1.3cqw)); font-weight: 900; color: #fff; background: #17407a; border-radius: 50%; }
.ce-tunggu { margin: 0; padding: .6cqw; text-align: center; font-size: calc(max(13px, 1.7cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #3b5a85; background: rgba(255,255,255,.6); border: max(2px,.2cqw) dashed #9ec2ea; border-radius: 1.4cqw; }
.ce-tunggu[hidden], .ce-pilihan[hidden] { display: none; }
.ce-pilihan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6cqw; }
.ce-opsyen { position: relative; display: flex; align-items: center; gap: .6cqw; padding: .4cqw .8cqw .4cqw .5cqw; min-height: max(48px, 5.6cqw); text-align: left; cursor: pointer; font: inherit; color: #2a1a05; background: #fff; border: max(3px,.3cqw) solid #b9d6f5; border-radius: 1.6cqw; box-shadow: 0 .25cqw 0 rgba(0,0,0,.14); }
.ce-opsyen:hover { background: #f4faff; }
.ce-opsyen b { font-size: calc(max(13px, 1.7cqw) * min(var(--ts), 1.05)); font-weight: 800; line-height: 1.12; overflow-wrap: anywhere; }
.ce-o-ikon { flex: none; width: max(26px, 3.2cqw); height: max(26px, 3.2cqw); }
.ce-opsyen.betul { border-color: #18a553; background: #e8f8ee; box-shadow: 0 0 0 max(3px,.35cqw) rgba(24,165,83,.25), 0 .25cqw 0 #0e6a34; }
.ce-opsyen.cuba { border-color: #f2b878; border-style: dashed; background: #fff8ee; }
.ce-o-tanda { position: absolute; right: .3cqw; top: .2cqw; display: grid; place-items: center; width: max(18px, 2cqw); height: max(18px, 2cqw); font-size: max(11px, 1.3cqw); font-weight: 900; color: #fff; background: #18a553; border-radius: 50%; }
.ce-ayat { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4cqw .5cqw; padding: .5cqw .8cqw; min-height: calc(max(34px, 4.4cqw) * min(var(--ts), 1.1)); background: #fff; border: max(2px,.25cqw) dashed #9fdbb4; border-radius: 1.4cqw; font-size: calc(max(14px, 2.1cqw) * min(var(--ts), 1.05)); font-weight: 800; line-height: 1.15; }
#ce-l3.siap .ce-ayat { border-style: solid; border-color: #18a553; box-shadow: 0 .25cqw 0 #0e6a34; }
.ce-w { padding: .1cqw .8cqw .15cqw; border-radius: 1.1cqw; border: max(2px,.2cqw) solid; }
.ce-w-si { background: #dff0ff; border-color: #8fc7f3; color: #0d5cb0; } .ce-w-bu { background: #ffe9cc; border-color: #f2b878; color: #b45309; } .ce-w-pa { background: #dff5e6; border-color: #9fdbb4; color: #0e6a34; }
.ce-w-ka { background: #efe0fb; border-color: #c9a7ec; color: #5a2a96; animation: sb-kata .8s ease both; }
.ce-w-tanya { background: #f5ecfd; border-color: #c9a7ec; border-style: dashed; color: #7b3fc4; }
.ce-noktah { margin-left: -.3cqw; color: #17407a; }
@media (prefers-reduced-motion: reduce) { .ce-w-ka { animation: none; } .ce-jenis-btn { transition: none; } }
/* bar bawah */
.ce-bawah { position: absolute; left: 1.4cqw; right: 1.4cqw; bottom: var(--ce-selamat); z-index: 3; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: end; gap: 1cqw; }
.ce-btn { position: static; margin: 0; min-height: var(--ce-baris); }
.ce-guru { display: flex; align-items: flex-end; min-width: 0; height: var(--ce-guru); }
.ce-guru-img { flex: none; display: block; height: 100%; width: auto; object-fit: contain; object-position: left bottom; filter: drop-shadow(0 .4cqw .5cqw rgba(0,0,0,.3)); }
.ce-gelembung { position: relative; flex: 1 1 0; min-width: 0; align-self: stretch; margin-left: .6cqw; padding: .5cqw 4.4cqw .5cqw 1.2cqw; display: flex; flex-direction: column; justify-content: center; background: #fff; border: max(3px,.3cqw) solid #5b3a1e; border-radius: 2cqw; box-shadow: 0 .3cqw 0 rgba(0,0,0,.18); }
.ce-g-tajuk { font-size: calc(max(13px, 1.7cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #c2561a; line-height: 1.1; }
.ce-g-teks { margin: .1cqw 0 0; font-size: calc(max(12px, 1.4cqw) * min(var(--ts), 1.05)); font-weight: 700; color: #2a1a05; line-height: 1.18; }
.ce-g-audio { position: absolute; right: .7cqw; top: 50%; transform: translateY(-50%); }
.ce-bantu { align-self: end; min-height: var(--ce-baris); }
.ce-seterusnya { align-self: end; min-width: 0; }
.ce-seterusnya:disabled { color: #5f6b66; background: linear-gradient(#e4e9e6, #c9d1cc); box-shadow: 0 .5cqw 0 #9aa5a0, 0 .9cqw 1.4cqw rgba(0,0,0,.2); cursor: not-allowed; transform: none; }
#ce-nota { z-index: 40; left: 30cqw; top: auto; bottom: calc(var(--ce-selamat) + var(--ce-guru) + 1cqw); width: 40cqw; }
#ce-nota:empty { display: none; } #ce-nota.dalam { position: static; width: auto; align-self: center; margin: 0; }
/* pop-up Bantu Saya */
.ce-pop-bantu { width: min(60cqw, 94%); max-height: 95cqh; overflow-y: auto; }
.ce-pb-badan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.4cqw; align-items: center; padding: .6cqw 1.4cqw; }
.ce-pb-teks p { margin: 0 0 .8cqw; font-size: calc(max(14px, 1.9cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #2a1a05; line-height: 1.2; }
.ce-pb-maksud { color: #17407a !important; }
.ce-pb-petunjuk { color: #7a4a00 !important; }
.ce-pb-gambar[hidden] { display: none; }
/* v50 pelarasan jimat ruang menegak (Tulisan Besar) */
#skrin-ce { --ce-guru: 9cqw; }
.ce-papan { width: 44cqw; }
.ce-papan-tajuk { font-size: calc(max(15px, 2.2cqw) * min(var(--ts), 1.05)); }
.ce-isi { grid-template-columns: 38cqw minmax(0, 1fr); bottom: calc(var(--ce-selamat) + var(--ce-guru) + .8cqw); }
.ce-kanan { gap: .5cqw; padding: .7cqw; }
.ce-langkah { padding: .35cqw .6cqw .45cqw; gap: .35cqw; }
.ce-l-kepala h3 { font-size: calc(max(12px, 1.6cqw) * min(var(--ts), 1.05)); }
.ce-no { width: max(24px, 2.8cqw); height: max(24px, 2.8cqw); }
.ce-kanan .ce-audio { width: max(30px, 3.1cqw); height: max(30px, 3.1cqw); }
.ce-jenis-btn { min-height: max(58px, 7.4cqw); gap: .15cqw; padding: .3cqw .3cqw .4cqw; }
.ce-j-ikon { width: max(24px, 3cqw); height: max(24px, 3cqw); }
.ce-jenis-btn b { font-size: calc(max(12px, 1.65cqw) * min(var(--ts), 1.05)); }
.ce-j-sub { font-size: calc(max(10px, 1.2cqw) * min(var(--ts), 1.05)); }
.ce-opsyen { min-height: max(44px, 5.2cqw); padding: .3cqw .6cqw .3cqw .4cqw; }
.ce-opsyen b { font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.05)); }
.ce-o-ikon { width: max(22px, 2.6cqw); height: max(22px, 2.6cqw); }
.ce-ayat { font-size: calc(max(13px, 1.9cqw) * min(var(--ts), 1.05)); padding: .4cqw .6cqw; min-height: 0; }
.ce-w { padding: .05cqw .6cqw .1cqw; }
.ce-asal-teks b { font-size: calc(max(13px, 1.85cqw) * min(var(--ts), 1.05)); }
.ce-opsyen.betul { padding-right: 2.6cqw; }
#skrin-ce { --ce-guru: 8.6cqw; }
.ce-langkah { flex-shrink: 0; }
.ce-lembut { animation: ce-lembut 1s ease-out; }
@keyframes ce-lembut { 0% { box-shadow: 0 0 0 0 rgba(255,200,60,0); } 40% { box-shadow: 0 0 0 .7cqw rgba(255,200,60,.55); } 100% { box-shadow: 0 0 0 0 rgba(255,200,60,0); } }
@media (prefers-reduced-motion: reduce) { .ce-lembut { animation: none; } }
/* v50 jimat ruang tambahan */
#skrin-ce { --ce-guru: 8.2cqw; }
.ce-isi { top: 9cqw; }
.ce-jenis-btn { min-height: max(56px, 7cqw); }
.ce-kanan { padding: .5cqw .7cqw; gap: .4cqw; }
.ce-langkah { padding: .3cqw .6cqw .4cqw; gap: .3cqw; }
.ce-jenis-btn { min-height: max(54px, 6.6cqw); }
.ce-ayat { padding: .3cqw .6cqw; }

/* ============ v51: CERITA Pusingan 1 — Gambar 2-4 + rumusan ============ */
#skrin-ce { --c1-baris: max(52px, 6.4cqw); --c1-selamat: 2cqw; }
.ce-gambar img { object-position: center center; }
.ce-isi[hidden], .ce-ringkas[hidden], .ce-p2[hidden] { display: none; }
.ce-tamat { top: 9.6cqw; bottom: calc(var(--ce-selamat) + var(--ce-baris) + 1.4cqw); gap: 1cqw; }
.ce-tamat .c1-tk-senarai { flex: 1 1 0; min-height: 0; }
.ce-ringkas { grid-column: 2; justify-self: center; align-self: end; }
.ce-p2 { grid-column: 4; align-self: end; }
#skrin-ce.tamat .ce-guru, #skrin-ce.tamat .ce-bantu, #skrin-ce.tamat .ce-seterusnya { display: none; }
.ce-sorot-dalam { pointer-events: none; }
.ce-w-ka { animation: ce-muncul .6s ease both; }
@keyframes ce-muncul { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ce-w-ka { animation: none; } }

/* ============ v52: CERITA Pusingan 2 — Perkukuh Ayat (Gambar 1) ============ */
#skrin-cr { --ce-selamat: 2cqw; --ce-baris: max(52px, 6.4cqw); --ce-guru: 8.2cqw; --ce-ungu: #7b3fc4; }
#skrin-cr[hidden] { display: none; }
#skrin-cr .ce-isi { top: 9cqw; grid-template-columns: 38cqw minmax(0, 1fr); bottom: calc(var(--ce-selamat) + var(--ce-guru) + .8cqw); }
#skrin-cr .ce-papan { width: 44cqw; }
#skrin-cr .ce-papan-tajuk { font-size: calc(max(15px, 2.2cqw) * min(var(--ts), 1.05)); }
#skrin-cr .ce-kanan { gap: .5cqw; padding: .6cqw .8cqw; }
.cr-tajuk-baris { flex: none; }
#skrin-cr .ce-l-kepala h3 { font-size: calc(max(14px, 1.9cqw) * min(var(--ts), 1.05)); }
#skrin-cr .ce-kanan .ce-audio { width: max(30px, 3.1cqw); height: max(30px, 3.1cqw); }
.cr-kad-baris { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7cqw; }
.cr-kad { position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: .25cqw; padding: .45cqw .6cqw .5cqw; min-height: max(76px, 9.2cqw); text-align: left; cursor: pointer; font: inherit; color: #2a1a05; border: max(3px,.3cqw) solid; border-radius: 1.6cqw; box-shadow: 0 .25cqw 0 rgba(0,0,0,.14); }
.cr-kad:disabled { cursor: not-allowed; opacity: .6; }
.cr-k-baris { display: flex; align-items: center; gap: .5cqw; }
.cr-k-baris b { font-size: calc(max(13px, 1.65cqw) * min(var(--ts), 1.05)); font-weight: 900; line-height: 1.1; }
.cr-k-ikon { flex: none; width: max(26px, 3cqw); height: max(26px, 3cqw); } .cr-k-ikon svg { display: block; width: 100%; height: 100%; }
.cr-k-desc { flex: 1 1 auto; font-size: calc(max(11px, 1.25cqw) * min(var(--ts), 1.05)); font-weight: 700; line-height: 1.15; }
.cr-k-pilih { align-self: flex-start; padding: .05cqw 1.2cqw .1cqw; font-size: calc(max(12px, 1.35cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #fff; border-radius: 3cqw; line-height: 1.2; }
.cr-k-tambah { background: #ffe3ef; border-color: #ec4f8f; } .cr-k-tambah .cr-k-pilih { background: #d6337a; }
.cr-k-kemaskan { background: #e3f1ff; border-color: #2f7bd9; } .cr-k-kemaskan .cr-k-pilih { background: #1f66c2; }
.cr-k-kekalkan { background: #e3f7ea; border-color: #18a553; } .cr-k-kekalkan .cr-k-pilih { background: #0e7a3c; }
.cr-kad.dipilih { box-shadow: 0 0 0 max(3px,.4cqw) rgba(23,64,122,.32), 0 .25cqw 0 rgba(0,0,0,.14); }
.cr-kad.dipilih .cr-k-pilih { background: #17407a; }
.cr-kerja { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: .4cqw; padding: .5cqw .7cqw; background: #fff; border: max(2px,.25cqw) solid #e2d3a8; border-radius: 1.6cqw; }
.cr-tunggu { margin: auto 0; text-align: center; font-size: calc(max(13px, 1.7cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #3b5a85; }
.cr-tunggu[hidden], .cr-ruang[hidden], #skrin-cr .cr-simpan[hidden] { display: none; }
.cr-ruang { display: flex; flex-direction: column; gap: .3cqw; min-height: 0; }
.cr-label, .cr-pra-tajuk { margin: 0; font-size: calc(max(12px, 1.45cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #17407a; line-height: 1.15; }
.cr-input { width: 100%; box-sizing: border-box; font: inherit; font-size: calc(max(14px, 1.9cqw) * min(var(--ts), 1.05)); font-weight: 700; color: #2a1a05; padding: .4cqw .8cqw; background: #fffdf5; border: max(3px,.3cqw) solid #9ec2ea; border-radius: 1.2cqw; line-height: 1.2; }
.cr-input:focus-visible, .cr-sah input:focus-visible + .cr-sah-kotak { outline: max(3px,.3cqw) solid #17407a; outline-offset: 2px; }
.cr-textarea { resize: none; min-height: 0; height: calc(max(3 * 1.2em, 8.4cqw)); }
.cr-pra { margin: 0; padding: .35cqw .8cqw; font-size: calc(max(13px, 1.8cqw) * min(var(--ts), 1.05)); font-weight: 800; line-height: 1.2; color: #0e6a34; background: #e8f8ee; border: max(2px,.2cqw) dashed #9fdbb4; border-radius: 1.2cqw; overflow-wrap: anywhere; }
.cr-pra.kosong { color: #3b5a85; background: #f3f8ff; border-color: #b9d6f5; }
.cr-ayat-kekal { margin: 0; padding: .6cqw .9cqw; font-size: calc(max(15px, 2.2cqw) * min(var(--ts), 1.05)); font-weight: 900; line-height: 1.2; color: #0e6a34; background: #e8f8ee; border: max(2px,.25cqw) solid #9fdbb4; border-radius: 1.2cqw; overflow-wrap: anywhere; }
.cr-sah { position: relative; display: flex; align-items: center; gap: .8cqw; cursor: pointer; padding: .3cqw .6cqw; border-radius: 1.2cqw; background: #f3f8ff; border: max(2px,.2cqw) solid #b9d6f5; }
.cr-sah input { position: absolute; opacity: 0; width: max(30px, 3.4cqw); height: max(30px, 3.4cqw); left: .6cqw; margin: 0; cursor: pointer; }
.cr-sah-kotak { flex: none; width: max(26px, 3cqw); height: max(26px, 3cqw); box-sizing: border-box; background: #fff; border: max(3px,.3cqw) solid #17407a; border-radius: .8cqw; display: grid; place-items: center; }
.cr-sah input:checked + .cr-sah-kotak { background: #18a553; border-color: #0e6a34; }
.cr-sah input:checked + .cr-sah-kotak::after { content: '✓'; color: #fff; font-weight: 900; font-size: calc(max(16px, 2cqw)); line-height: 1; }
.cr-sah b { font-size: calc(max(13px, 1.8cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #17407a; line-height: 1.15; }
.cr-simpan-baris { margin-top: auto; flex: none; display: flex; align-items: center; gap: .8cqw; min-height: max(44px, 4.8cqw); }
.cr-cad { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .2cqw .6cqw; font-size: calc(max(12px, 1.4cqw) * min(var(--ts), 1.05)); font-weight: 800; line-height: 1.15; color: #2a1a05; }
.cr-cad:empty { display: none; }
.cr-cad.cuba { padding: .3cqw .7cqw; background: #fff6e6; border: max(2px,.2cqw) solid #f2b878; border-radius: 1.2cqw; }
.cr-cad.betul { color: #0e6a34; } .cr-cad.maklum { color: #17407a; }
.cr-petunjuk { color: #7a4a00; } .cr-nota-kecil { color: #5b5b5b; font-weight: 700; } .cr-ayat-akhir { flex-basis: 100%; }
.cr-cadang { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .3cqw .6cqw; }
.cr-mini { font: inherit; font-size: calc(max(11px, 1.25cqw) * min(var(--ts), 1.05)); font-weight: 900; padding: .15cqw 1cqw; min-height: max(30px, 3cqw); color: #fff; background: #1f66c2; border: 0; border-radius: 3cqw; cursor: pointer; box-shadow: 0 .2cqw 0 #0f3f7d; }
.cr-mini-kedua { color: #17407a; background: #fff; border: max(2px,.2cqw) solid #17407a; box-shadow: none; }
#skrin-cr .cr-simpan { flex: none; min-width: 0; padding-left: 1.6cqw; padding-right: 1.6cqw; min-height: max(44px, 4.8cqw); }
#skrin-cr .cr-simpan svg { width: max(20px, 2.2cqw); height: max(20px, 2.2cqw); }
#skrin-cr .cr-simpan:disabled { color: #5f6b66; background: linear-gradient(#e4e9e6, #c9d1cc); box-shadow: 0 .5cqw 0 #9aa5a0; cursor: not-allowed; }
#skrin-cr .ce-seterusnya:disabled { color: #5f6b66; background: linear-gradient(#e4e9e6, #c9d1cc); box-shadow: 0 .5cqw 0 #9aa5a0, 0 .9cqw 1.4cqw rgba(0,0,0,.2); cursor: not-allowed; }
.cr-pd-aksi { margin: .4cqw 1.4cqw 0; padding: .5cqw 1cqw; font-size: calc(max(13px, 1.7cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #17407a; background: #eaf5ff; border-radius: 1.2cqw; line-height: 1.2; }
.cr-pd-aksi[hidden] { display: none; }
.cr-pb-had { font-size: calc(max(12px, 1.4cqw) * min(var(--ts), 1.05)) !important; color: #5b5b5b !important; }
#cr-nota { z-index: 40; left: 30cqw; top: auto; bottom: calc(var(--ce-selamat) + var(--ce-guru) + 1cqw); width: 40cqw; }
#cr-nota:empty { display: none; } #cr-nota.dalam { position: static; width: auto; align-self: center; margin: 0; }
/* v52 jimat ruang menegak */
.cr-kad { min-height: max(66px, 7.8cqw); padding: .35cqw .6cqw .4cqw; gap: .15cqw; }
.cr-input { padding: .2cqw .8cqw; font-size: calc(max(14px, 1.8cqw) * min(var(--ts), 1.05)); }
.cr-pra { padding: .2cqw .8cqw; font-size: calc(max(13px, 1.7cqw) * min(var(--ts), 1.05)); }
.cr-kerja { padding: .4cqw .7cqw; gap: .3cqw; }
.cr-simpan-baris { min-height: max(40px, 4.4cqw); }
#skrin-cr .cr-simpan { min-height: max(40px, 4.4cqw); }

/* ============ v53: CERITA Pusingan 2 — Gambar 2-4, rumusan & Lencana Pencerita Kreatif ============ */
.cr-isi[hidden], #skrin-cr .ce-ringkas[hidden], #skrin-cr .ce-p2[hidden], .cr-tamat[hidden], .cr-ganjaran[hidden] { display: none; }
.cr-tamat { top: 9.6cqw; gap: .8cqw; justify-content: flex-start; }
.cr-tamat .c1-tk-senarai { flex: 1 1 0; min-height: 0; }
.cr-ganjaran { align-self: center; margin: 0; }
.cr-tamat .c1-tk-ayat { font-size: calc(max(12px, 1.6cqw) * min(var(--ts), 1.05)); min-height: 0; padding: .3cqw .5cqw; }
#skrin-cr.tamat .ce-guru, #skrin-cr.tamat .ce-bantu, #skrin-cr.tamat .ce-seterusnya { display: none; }
@media (prefers-reduced-motion: reduce) { .cr-ganjaran.baharu { animation: none; } }

/* ============ v54: Fasa 4: PERENGGAN — Langkah 1: Susun Cerita ============ */
#skrin-pr { --ce-selamat: 2cqw; --ce-baris: max(52px, 6.4cqw); --ce-guru: 8.2cqw; }
#skrin-pr[hidden], .pr-isi[hidden], .pr-kosong[hidden] { display: none; }
#skrin-pr .kg-tajuk { font-size: calc(max(14px, 2cqw) * min(var(--ts), 1.05)); padding: .5cqw 1.4cqw .6cqw; }
#skrin-pr .ce-papan { width: 40cqw; }
#skrin-pr .ce-papan-tajuk { font-size: calc(max(15px, 2.2cqw) * min(var(--ts), 1.05)); }
.pr-langkah { position: absolute; left: 50%; top: 8.7cqw; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: 1cqw; margin: 0; padding: .3cqw 1.4cqw; list-style: none; background: rgba(255,255,255,.88); border: max(2px,.2cqw) solid #b9d6f5; border-radius: 3cqw; box-shadow: 0 .3cqw 0 rgba(0,0,0,.12); }
.pr-lg { display: inline-flex; align-items: center; gap: .5cqw; padding: .1cqw .9cqw .1cqw .2cqw; border-radius: 3cqw; color: #5b6f86; }
.pr-lg b { font-size: calc(max(11px, 1.3cqw) * min(var(--ts), 1.05)); font-weight: 800; white-space: nowrap; }
.pr-lg-no { display: grid; place-items: center; width: max(22px, 2.4cqw); height: max(22px, 2.4cqw); border-radius: 50%; background: #c9d6e4; color: #fff; font-size: calc(max(12px, 1.4cqw)); font-weight: 900; }
.pr-lg.aktif { color: #17407a; background: #e3f1ff; } .pr-lg.aktif .pr-lg-no { background: #1f66c2; }
.pr-isi { position: absolute; left: 1.4cqw; right: 1.4cqw; top: 12.6cqw; bottom: calc(var(--ce-selamat) + var(--ce-guru) + .8cqw); z-index: 2; display: grid; grid-template-rows: minmax(0, 1.9fr) auto minmax(0, 1fr); gap: .5cqw; min-height: 0; }
.pr-bank { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1cqw; padding: .5cqw; min-height: 0; background: rgba(255,250,240,.78); border: max(3px,.3cqw) solid #f0d79a; border-radius: 2cqw; box-shadow: 0 .3cqw 0 rgba(0,0,0,.12); }
.pr-bank.sasaran { border-style: dashed; border-color: #18a553; }
.pr-pos { min-width: 0; min-height: 0; display: flex; border-radius: 1.6cqw; }
.pr-pos.kosong { border: max(2px,.25cqw) dashed #d9c58f; background: rgba(255,255,255,.4); }
.pr-kad { position: relative; flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: .3cqw; padding: .4cqw; background: #fff; border: max(3px,.3cqw) solid #f0d79a; border-radius: 1.6cqw; box-shadow: 0 .3cqw 0 rgba(0,0,0,.14); touch-action: none; user-select: none; -webkit-user-select: none; }
.pr-k-pilih { position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 1.4cqw; cursor: grab; }
.pr-k-pilih:focus-visible { outline: max(4px,.4cqw) solid var(--fokus, #17407a); outline-offset: 2px; }
.pr-k-gambar { flex: 1 1 0; min-height: 0; border-radius: 1cqw; border: max(2px,.2cqw) solid #fff; background-color: #0b2540; background-size: cover; background-position: center; }
.pr-k-ayat { flex: none; margin: 0; padding: .25cqw .5cqw; text-align: center; font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.05)); font-weight: 800; line-height: 1.15; color: #0e6a34; background: #e6f8ec; border: max(2px,.2cqw) solid #9fdbb4; border-radius: 1.1cqw; overflow-wrap: anywhere; }
.pr-k-audio { position: absolute; z-index: 2; left: .9cqw; top: .9cqw; width: max(28px, 2.8cqw); height: max(28px, 2.8cqw); }
.pr-kad.dipilih { border-color: #17407a; box-shadow: 0 0 0 max(3px,.4cqw) rgba(23,64,122,.35), 0 .3cqw 0 rgba(0,0,0,.14); }
.pr-kad.diseret { opacity: .35; }
.pr-hantu { position: absolute; z-index: 60; pointer-events: none; opacity: .93; box-shadow: 0 1cqw 2cqw rgba(0,0,0,.4); margin: 0; }
.pr-label-baris { display: flex; align-items: center; gap: 1.2cqw; min-height: 0; }
.pr-label { margin: 0; padding: .05cqw 1.6cqw .1cqw; font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #17407a; background: #fff; border: max(2px,.2cqw) solid #b9d6f5; border-radius: 3cqw; }
.pr-mesej { margin: 0; padding: .05cqw 1.6cqw .1cqw; font-size: calc(max(12px, 1.6cqw) * min(var(--ts), 1.05)); font-weight: 900; border-radius: 3cqw; border: max(2px,.2cqw) solid; }
.pr-mesej:empty { display: none; }
.pr-mesej.betul { color: #0e6a34; background: #e8f8ee; border-color: #18a553; } .pr-mesej.cuba { color: #7a4a00; background: #fff6e6; border-color: #f2b878; }
.pr-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1cqw; min-height: 0; }
.pr-slot { position: relative; min-width: 0; min-height: 0; display: flex; padding: .4cqw; background: rgba(255,250,240,.95); border: max(3px,.3cqw) dashed #d9b86a; border-radius: 1.8cqw; box-shadow: 0 .3cqw 0 rgba(0,0,0,.1); }
.pr-slot-btn { position: absolute; inset: 0; z-index: 0; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 1.6cqw; cursor: pointer; }
.pr-slot-btn:focus-visible { outline: max(4px,.4cqw) solid var(--fokus, #17407a); outline-offset: 2px; }
.pr-no { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: max(30px, 4cqw); height: max(30px, 4cqw); border-radius: 50%; background: #c9d6e4; color: #fff; font-size: calc(max(16px, 2.4cqw)); font-weight: 900; pointer-events: none; }
.pr-slot.penuh .pr-no { left: 1.9cqw; top: 50%; width: max(26px, 3cqw); height: max(26px, 3cqw); font-size: calc(max(14px, 1.8cqw)); background: #f08a1c; box-shadow: 0 .2cqw 0 rgba(0,0,0,.22); }
.pr-slot.penuh { padding-left: 3.8cqw; border-style: solid; border-color: #9ec2ea; }
.pr-slot-isi { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; min-height: 0; display: flex; pointer-events: none; }
.pr-slot-isi .pr-kad { pointer-events: auto; flex: 1 1 0; display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: .5cqw; padding: .3cqw; box-shadow: none; }
.pr-slot-isi .pr-k-ayat { font-size: calc(max(11px, 1.25cqw) * min(var(--ts), 1.05)); display: flex; align-items: center; justify-content: center; min-width: 0; padding: .2cqw .4cqw; }
.pr-slot-isi .pr-k-audio { width: max(24px, 2.4cqw); height: max(24px, 2.4cqw); left: .6cqw; top: .6cqw; }
.pr-slot.sasaran { border-style: solid; border-color: #18a553; background: #e8f8ee; }
.pr-slot.tanda { border-style: dashed; border-color: #f2b878; background: #fff6e6; }
.pr-slot.betul { border-style: solid; border-color: #18a553; }
.pr-kosong { position: absolute; left: 12cqw; right: 12cqw; top: 18cqw; z-index: 2; padding: 2cqw; text-align: center; background: #fffaf0; border: max(3px,.3cqw) solid #f0d79a; border-radius: 2cqw; box-shadow: 0 .4cqw 0 rgba(0,0,0,.14); }
.pr-kosong-teks { margin: 0; font-size: calc(max(15px, 2.2cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #17407a; line-height: 1.25; }
.pr-bawah { grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
.pr-bawah .c1-btn-semak, .pr-bawah .c1-btn-hijau { min-width: 0; padding: .4cqw 1.6cqw .4cqw 1.2cqw; align-self: end; }
.pr-bawah .c1-btn-semak b, .pr-bawah .c1-btn-hijau b { font-size: calc(max(13px, 1.8cqw) * min(var(--ts), 1.05)); }
.pr-bawah .c1-btn-semak:disabled, .pr-bawah .c1-btn-hijau:disabled { color: #5f6b66; background: linear-gradient(#e4e9e6, #c9d1cc); box-shadow: 0 .5cqw 0 #9aa5a0, 0 .9cqw 1.4cqw rgba(0,0,0,.2); cursor: not-allowed; }
.pr-bawah .c1-bantu:disabled { opacity: .55; cursor: not-allowed; }
.pr-pb-badan { padding: .6cqw 1.6cqw; } .pr-pb-tahap { margin: 0 0 .6cqw; font-size: calc(max(13px, 1.6cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #17407a; }
.pr-pb-badan .ce-pb-petunjuk { margin: 0; font-size: calc(max(15px, 2.1cqw) * min(var(--ts), 1.05)); font-weight: 800; line-height: 1.25; }
#pr-nota { z-index: 40; left: 30cqw; top: auto; bottom: calc(var(--ce-selamat) + var(--ce-guru) + 1cqw); width: 40cqw; }
#pr-nota:empty { display: none; } #pr-nota.dalam { position: static; width: auto; align-self: center; margin: 0; }

/* v54: ayat panjang dalam ruang susunan: kecilkan sedikit dan kekalkan dalam kad */
.pr-slot-isi .pr-kad { min-height: 0; overflow: hidden; grid-template-rows: minmax(0, 1fr); }
.pr-slot-isi .pr-k-gambar { min-height: 0; height: 100%; }
.pr-slot-isi .pr-k-ayat { min-height: 0; overflow: hidden; line-height: 1.1; }
.pr-slot-isi .pr-kad[data-pjg="1"] .pr-k-ayat { font-size: calc(max(10px, 1.05cqw) * min(var(--ts), 1.05)); }
.pr-slot-isi .pr-kad[data-pjg="2"] .pr-k-ayat { font-size: calc(max(9px, .88cqw) * min(var(--ts), 1.05)); }
.pr-bank .pr-kad[data-pjg="2"] .pr-k-ayat { font-size: calc(max(11px, 1.25cqw) * min(var(--ts), 1.05)); }

/* v54: ruang susunan mendapat lebih tinggi apabila kad sudah dialihkan keluar daripada bank */
.pr-isi[data-nb="3"] { grid-template-rows: minmax(0, 1.5fr) auto minmax(0, 1.2fr); }
.pr-isi[data-nb="2"] { grid-template-rows: minmax(0, 1.2fr) auto minmax(0, 1.7fr); }
.pr-isi[data-nb="1"] { grid-template-rows: minmax(0, 1fr) auto minmax(0, 1.9fr); }
.pr-isi[data-nb="0"] { grid-template-rows: minmax(0, .3fr) auto minmax(0, 2.2fr); }
.pr-isi[data-nb="2"] .pr-slot-isi .pr-kad, .pr-isi[data-nb="1"] .pr-slot-isi .pr-kad, .pr-isi[data-nb="0"] .pr-slot-isi .pr-kad { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
.pr-isi[data-nb="2"] .pr-slot-isi .pr-k-ayat, .pr-isi[data-nb="1"] .pr-slot-isi .pr-k-ayat, .pr-isi[data-nb="0"] .pr-slot-isi .pr-k-ayat { font-size: calc(max(11px, 1.35cqw) * min(var(--ts), 1.05)); overflow: visible; }
.pr-isi[data-nb="2"] .pr-slot-isi .pr-kad[data-pjg="2"] .pr-k-ayat, .pr-isi[data-nb="1"] .pr-slot-isi .pr-kad[data-pjg="2"] .pr-k-ayat, .pr-isi[data-nb="0"] .pr-slot-isi .pr-kad[data-pjg="2"] .pr-k-ayat { font-size: calc(max(10px, 1.1cqw) * min(var(--ts), 1.05)); }
.pr-isi[data-nb="0"] .pr-bank { opacity: .55; }

/* ============ v55: CERITA Pusingan 2 — dua pilihan + bimbingan Tambah Keterangan (pendedahan beransur-ansur) ============ */
#skrin-cr .cr-kad-baris { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2cqw; }
#skrin-cr .cr-kad { min-height: max(96px, 12cqw); justify-content: center; gap: .5cqw; padding: .7cqw 1cqw; }
#skrin-cr .cr-k-baris b { font-size: calc(max(15px, 2cqw) * min(var(--ts), 1.05)); }
#skrin-cr .cr-k-ikon { width: max(30px, 3.6cqw); height: max(30px, 3.6cqw); }
#skrin-cr .cr-k-desc { flex: none; font-size: calc(max(13px, 1.6cqw) * min(var(--ts), 1.05)); }
#skrin-cr .cr-k-pilih { font-size: calc(max(13px, 1.5cqw) * min(var(--ts), 1.05)); }
.cr-kad-baris[hidden], .cr-soal-baris[hidden], .cr-kerja[hidden], .cr-balik[hidden], .cr-ct[hidden], .cr-soal-tag[hidden], .cr-tunggu[hidden], .cr-ruang[hidden] { display: none; }
.cr-balik { flex: none; display: inline-flex; align-items: center; gap: .3cqw; min-height: max(40px, 4cqw); padding: 0 1cqw 0 .6cqw; font: inherit; font-weight: 900; font-size: calc(max(13px, 1.5cqw) * min(var(--ts), 1.05)); color: #17407a; background: #fff; border: max(2px,.25cqw) solid #17407a; border-radius: 3cqw; cursor: pointer; box-shadow: 0 .2cqw 0 rgba(0,0,0,.16); }
.cr-balik svg { width: max(16px, 1.8cqw); height: max(16px, 1.8cqw); }
.cr-balik:focus-visible, .cr-soal:focus-visible, .cr-contoh:focus-visible { outline: max(4px,.4cqw) solid var(--fokus, #17407a); outline-offset: 2px; }
#skrin-cr .cr-tajuk-baris h3 { font-size: calc(max(15px, 2.1cqw) * min(var(--ts), 1.05)); }
.cr-soal-baris { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 1cqw; max-height: 26cqw; }
.cr-soal { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2cqw; min-height: max(64px, 7.5cqw); padding: .5cqw .8cqw; font: inherit; color: #2a1a05; background: #eaf5ff; border: max(3px,.3cqw) solid #2f7bd9; border-radius: 1.6cqw; box-shadow: 0 .25cqw 0 rgba(0,0,0,.14); cursor: pointer; }
.cr-soal b { font-size: calc(max(18px, 2.7cqw) * min(var(--ts), 1.05)); font-weight: 900; line-height: 1.1; }
.cr-soal-ket { font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #3b5a85; line-height: 1.1; }
.cr-soal.cadang { background: #fff4d6; border-color: #f2a516; box-shadow: 0 0 0 max(3px,.35cqw) rgba(242,165,22,.35), 0 .25cqw 0 rgba(0,0,0,.14); }
.cr-soal:disabled { cursor: not-allowed; opacity: .55; background: #f1f1f1; border-color: #b5b5b5; }
.cr-soal-tag { position: absolute; top: -1.2cqw; right: .8cqw; padding: .1cqw .9cqw; font-size: calc(max(11px, 1.25cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #fff; background: #d98a00; border-radius: 3cqw; line-height: 1.3; }
.cr-soal:disabled .cr-soal-tag { background: #6b6b6b; }
.cr-contoh-baris { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8cqw; }
.cr-ct { display: flex; align-items: stretch; gap: .3cqw; min-width: 0; }
.cr-contoh { flex: 1 1 0; min-width: 0; min-height: max(56px, 6.6cqw); padding: .3cqw .7cqw; font: inherit; font-size: calc(max(13px, 1.65cqw) * min(var(--ts), 1.05)); font-weight: 900; line-height: 1.15; color: #17407a; text-align: center; background: #eaf5ff; border: max(3px,.3cqw) solid #2f7bd9; border-radius: 1.4cqw; box-shadow: 0 .2cqw 0 rgba(0,0,0,.14); cursor: pointer; overflow-wrap: anywhere; }
.cr-contoh.dipilih, .cr-contoh[aria-pressed="true"] { color: #fff; background: #1f66c2; border-color: #17407a; box-shadow: 0 0 0 max(3px,.35cqw) rgba(23,64,122,.3); }
#skrin-cr .cr-ct-audio { flex: none; align-self: center; width: max(28px, 2.8cqw); height: max(28px, 2.8cqw); }
.cr-pra-baris { display: flex; align-items: center; justify-content: space-between; gap: .8cqw; }
.cr-pra-baris .cr-label { flex: 1 1 auto; }
.cr-pra.kekal { padding: .6cqw .9cqw; font-size: calc(max(15px, 2.2cqw) * min(var(--ts), 1.05)); }
#skrin-cr .cr-kerja { gap: .5cqw; }
#skrin-cr .cr-textarea { height: calc(max(4 * 1.2em, 11cqw)); }

#skrin-cr #cr-s0 { flex: 1 1 0; min-height: 0; grid-auto-rows: minmax(0, 1fr); max-height: 30cqw; }
#skrin-cr .cr-contoh { min-height: max(64px, 8cqw); font-size: calc(max(14px, 1.9cqw) * min(var(--ts), 1.05)); }
#skrin-cr .cr-label { font-size: calc(max(13px, 1.6cqw) * min(var(--ts), 1.05)); }
#skrin-cr .cr-input { font-size: calc(max(15px, 2cqw) * min(var(--ts), 1.05)); padding: .4cqw .8cqw; }
#skrin-cr .cr-pra { font-size: calc(max(14px, 2cqw) * min(var(--ts), 1.05)); padding: .5cqw .9cqw; }
#skrin-cr .cr-pra-tajuk { font-size: calc(max(13px, 1.6cqw) * min(var(--ts), 1.05)); }
#skrin-cr .cr-kerja { justify-content: flex-start; }
#skrin-cr .cr-simpan-baris { margin-top: auto; }

/* v55: padatkan supaya contoh panjang + pratonton dua baris muat (Besar, 1024x768) */
#skrin-cr .cr-kerja { gap: .35cqw; }
.cr-sendiri-baris { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .8cqw; }
.cr-sendiri-baris .cr-label { white-space: nowrap; }
#skrin-cr .cr-contoh { min-height: max(56px, 7cqw); font-size: calc(max(13px, 1.7cqw) * min(var(--ts), 1.05)); }
#skrin-cr .cr-pra { font-size: calc(max(13px, 1.85cqw) * min(var(--ts), 1.05)); padding: .35cqw .8cqw; }
#skrin-cr .cr-input { padding: .25cqw .8cqw; }
#skrin-cr .cr-contoh-baris { gap: .6cqw; }
.cr-kerja.ada-cad #cr-r-pra { display: none; }

/* v56: keadaan setiap gambar bebas; penanda jelas untuk gambar yang sudah disimpan */
.ce-label-baris { flex: none; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5cqw .8cqw; }
.ce-label-baris .ce-label { align-self: auto; }
.ce-status { padding: .1cqw 1.2cqw .15cqw; font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #0e6a34; background: #e8f8ee; border: max(2px,.2cqw) solid #18a553; border-radius: 3cqw; line-height: 1.3; white-space: nowrap; }
.ce-status[hidden], .cr-disimpan[hidden] { display: none; }
.cr-kad.tersimpan .cr-k-pilih { background: #0e6a34; }
.cr-kad.tersimpan { box-shadow: 0 0 0 max(3px,.35cqw) rgba(24,165,83,.35), 0 .25cqw 0 rgba(0,0,0,.14); }
.cr-disimpan { flex: none; display: flex; flex-direction: column; gap: .3cqw; padding: .5cqw .9cqw; background: #e8f8ee; border: max(2px,.25cqw) solid #9fdbb4; border-radius: 1.4cqw; }
.cr-disimpan-kepala { display: flex; align-items: center; justify-content: space-between; gap: .8cqw; }
.cr-disimpan-kepala b, .cr-disimpan-nota { font-size: calc(max(12px, 1.45cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #17407a; line-height: 1.15; }
.cr-disimpan-nota { margin: 0; font-weight: 800; color: #3b5a85; }
.cr-disimpan-teks { margin: 0; font-size: calc(max(14px, 1.9cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #0e6a34; line-height: 1.2; overflow-wrap: anywhere; }
#skrin-cr #cr-s0.ada-simpan { flex: none; }
#skrin-cr #cr-s0.ada-simpan .cr-kad { min-height: max(76px, 9cqw); }

/* ===== v57: Mulakan Semula Aktiviti (CERITA Pusingan 1) ===== */
#ce-pop-panduan .kg-pd-bawah { flex-wrap: wrap; row-gap: 1cqw; }
.ce-btn-reset { min-height: max(44px, 5cqw); padding: .4cqw 2cqw; font-size: calc(max(14px, 1.9cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #7a2b12; background: #fff7ec; border: max(2px,.3cqw) solid #c9742f; border-radius: 3cqw; }
.ce-pop-reset { width: 54cqw; display: flex; flex-direction: column; gap: 2cqw; padding-bottom: 2.4cqw; }
.ce-rs-teks { margin: 0; text-align: center; font-size: calc(max(17px, 2.5cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #3b2410; line-height: 1.3; }
.ce-rs-butang { display: flex; align-items: center; justify-content: center; gap: 2cqw; flex-wrap: wrap; }
#cr-pop-panduan .kg-pd-bawah { flex-wrap: wrap; row-gap: 1cqw; }

/* ===== v59: pilihan sementara + Simpan Jawapan (CERITA Pusingan 1) ===== */
.ce-opsyen.pilih { border-color: #1f6fc7; background: #eaf5ff; box-shadow: 0 0 0 max(3px,.35cqw) rgba(31,111,199,.25), 0 .25cqw 0 #174f8c; }
.ce-w-belum { border-style: dashed; animation: none; }
#ce-l3.tertunda .ce-ayat { border-style: dashed; border-color: #1f6fc7; }
.ce-simpan-baris { display: flex; justify-content: center; margin-top: .5cqw; }
.ce-simpan { display: inline-flex; align-items: center; gap: .8cqw; min-height: max(44px, 5cqw); padding: .3cqw 2.4cqw; font: inherit; font-size: calc(max(15px, 2cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #fff; background: linear-gradient(#34c46d, #0e9a47); border: max(3px,.35cqw) solid #fff; border-radius: 3cqw; box-shadow: 0 .4cqw 0 var(--hijau-gelap), 0 .8cqw 1.2cqw rgba(0,0,0,.3); cursor: pointer; }
.ce-simpan svg { width: 2.4cqw; height: 2.4cqw; min-width: 18px; min-height: 18px; }
.ce-simpan:disabled { background: #c9c3b6; color: #6d6659; box-shadow: none; cursor: not-allowed; }
.ce-tamat ~ .ce-simpan-baris, #skrin-ce.tamat .ce-simpan-baris { display: none; }
.ce-simpan-baris { margin-top: .2cqw; }
.ce-simpan { min-height: max(38px, 4cqw); padding: .1cqw 2cqw; font-size: calc(max(14px, 1.8cqw) * min(var(--ts), 1.05)); border-width: max(2px,.28cqw); box-shadow: 0 .3cqw 0 var(--hijau-gelap); }
.ce-simpan svg { width: 2cqw; height: 2cqw; }
#ce-l3 .ce-l-kepala .ce-simpan { margin-left: auto; margin-right: .8cqw; min-height: max(36px, 3.8cqw); padding: .1cqw 1.6cqw; flex-direction: row; gap: .7cqw; }
#ce-l3 .ce-l-kepala .ce-simpan svg { width: 1.9cqw; height: 1.9cqw; min-width: 16px; min-height: 16px; }
#ce-l3 .ce-l-kepala .ce-simpan { white-space: nowrap; min-height: 0; padding: .3cqw 1.4cqw; line-height: 1.05; font-size: calc(max(13px, 1.6cqw) * min(var(--ts), 1.05)); border-width: max(2px,.22cqw); box-shadow: 0 .25cqw 0 var(--hijau-gelap); align-self: center; }

/* ===== v60: Pusingan 2 digugurkan; lencana pada rumusan Pusingan 1 ===== */
.ce-ganjaran { align-self: center; margin: 0; }
.ce-ganjaran[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .ce-ganjaran.baharu { animation: none; } }

/* ===== v60: PERENGGAN Langkah 2, Langkah 3 dan rumusan ===== */
.pr-bawah { grid-template-columns: auto minmax(0, 1fr) auto auto auto auto; }
.pr-panel[hidden], .pr-ringkas[hidden], .pr-status[hidden], .pr-btn-kecil[hidden], .pr-teks[hidden], .pr-s3-rujuk[hidden], .pr-ganjaran[hidden] { display: none; }
.pr-panel { position: absolute; left: 1.4cqw; right: 1.4cqw; top: 12.6cqw; bottom: calc(var(--ce-selamat) + var(--ce-guru) + .8cqw); z-index: 2; min-height: 0; }
.pr-status { display: inline-flex; align-items: center; padding: .1cqw 1.2cqw; font-size: calc(max(12px, 1.4cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #0e6a34; background: #e8f8ee; border: max(2px,.2cqw) solid #18a553; border-radius: 3cqw; white-space: nowrap; }
/* Langkah 2 */
.pr-l2 { display: grid; grid-template-columns: 36% minmax(0, 1fr); gap: 1.2cqw; }
.pr-s2-kiri { display: flex; flex-direction: column; gap: .6cqw; min-height: 0; padding: .6cqw; background: #fffaf0; border: max(3px,.3cqw) solid #f0d79a; border-radius: 1.6cqw; box-shadow: 0 .3cqw 0 rgba(0,0,0,.12); }
.pr-s2-gambar { flex: 1 1 0; min-height: 0; border-radius: 1cqw; border: max(2px,.2cqw) solid #fff; background-color: #0b2540; background-size: cover; background-position: center; }
.pr-s2-asal { flex: none; display: flex; align-items: center; gap: .8cqw; padding: .4cqw .8cqw .4cqw .5cqw; background: #eaf5ff; border: max(2px,.25cqw) solid #b9d6f5; border-radius: 1.4cqw; }
.pr-s2-asal-teks { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.pr-s2-asal-teks span { font-size: calc(max(11px, 1.2cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #17407a; }
.pr-s2-asal-teks b { font-size: calc(max(13px, 1.7cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #0d4a96; line-height: 1.12; overflow-wrap: anywhere; }
.pr-s2-kanan { display: flex; flex-direction: column; gap: .8cqw; min-height: 0; padding: .8cqw; background: #eaf5ff; border: max(3px,.3cqw) solid #b9d6f5; border-radius: 1.6cqw; box-shadow: 0 .3cqw 0 rgba(0,0,0,.12); }
.pr-s2-kepala, .pr-s3-kepala, .pr-s2r-kepala { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; }
.pr-s2-kepala h3, .pr-s3-kepala h3, .pr-s2r-kepala h3 { margin: 0; font-size: calc(max(15px, 2.1cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #17407a; line-height: 1.1; text-align: left; }
.pr-s2-pilihan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8cqw; }
.pr-s2-baris { position: relative; display: flex; }
.pr-s2-opsyen { position: relative; flex: 1 1 auto; min-width: 0; min-height: max(52px, 6.4cqw); padding: .4cqw 3.4cqw .4cqw .8cqw; display: flex; align-items: center; justify-content: center; text-align: center; font: inherit; color: #2a1a05; background: #fff; border: max(3px,.3cqw) solid #b9d6f5; border-radius: 1.6cqw; box-shadow: 0 .3cqw 0 rgba(0,0,0,.12); cursor: pointer; }
.pr-s2-opsyen b { font-size: calc(max(15px, 2.2cqw) * min(var(--ts), 1.05)); font-weight: 900; line-height: 1.1; overflow-wrap: anywhere; }
.pr-s2-opsyen:hover { background: #f4faff; }
.pr-s2-opsyen:focus-visible { outline: max(4px,.4cqw) solid var(--fokus, #17407a); outline-offset: 2px; }
.pr-s2-opsyen.pilih { border-color: #1f6fc7; background: #eaf5ff; box-shadow: 0 0 0 max(3px,.35cqw) rgba(31,111,199,.25), 0 .25cqw 0 #174f8c; }
.pr-s2-opsyen.disimpan { border-color: #18a553; background: #e8f8ee; box-shadow: 0 0 0 max(3px,.35cqw) rgba(24,165,83,.25), 0 .25cqw 0 #0e6a34; }
.pr-s2-opsyen.cuba { border-color: #f2b878; border-style: dashed; background: #fff8ee; }
.pr-s2-tanda { display: none; position: absolute; right: 3.3cqw; top: .3cqw; width: max(18px, 2cqw); height: max(18px, 2cqw); place-items: center; font-size: max(11px, 1.3cqw); font-weight: 900; color: #fff; background: #18a553; border-radius: 50%; }
.pr-s2-opsyen.disimpan .pr-s2-tanda { display: grid; }
.pr-s2-oaudio { position: absolute; right: .5cqw; top: 50%; transform: translateY(-50%); width: max(28px, 2.8cqw); height: max(28px, 2.8cqw); }
#pr-s2-pra-kotak.disimpan { border-style: solid; border-color: #18a553; }
.pr-s2-label { font-size: calc(max(11px, 1.3cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #17407a; }
#pr-s2-pra { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: calc(max(15px, 2.1cqw) * min(var(--ts), 1.05)); font-weight: 800; line-height: 1.25; color: #0e6a34; text-align: left; overflow: visible; display: block; }
#pr-s2-pra-kotak { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: .3cqw; padding: .5cqw .9cqw; background: #fff; border: max(2px,.25cqw) dashed #9fdbb4; border-radius: 1.4cqw; overflow: auto; }
.pr-penanda { color: #b45309; background: #ffe9cc; border-radius: .8cqw; padding: 0 .5cqw; }
.pr-s2-bawah { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1cqw; }
.pr-s2-titik { display: flex; gap: .8cqw; margin: 0; padding: 0; list-style: none; }
.pr-s2-titik li span { display: grid; place-items: center; width: max(26px, 2.8cqw); height: max(26px, 2.8cqw); border-radius: 50%; background: #c9d6e4; color: #fff; font-size: calc(max(12px, 1.5cqw)); font-weight: 900; }
.pr-s2-titik li.semasa span { background: #1f66c2; outline: max(3px,.3cqw) solid #b9d6f5; }
.pr-s2-titik li.siap span { background: #18a553; }
/* ringkasan Langkah 2 */
.pr-l2r { display: flex; flex-direction: column; gap: .8cqw; padding: 1cqw 1.4cqw; background: #eaf5ff; border: max(3px,.3cqw) solid #b9d6f5; border-radius: 1.6cqw; box-shadow: 0 .3cqw 0 rgba(0,0,0,.12); overflow: auto; }
.pr-s2r-senarai { margin: 0; padding: 0; list-style: none; display: grid; gap: .7cqw; }
.pr-s2r-senarai li { padding: .5cqw 1cqw; background: #fff; border: max(2px,.25cqw) solid #9fdbb4; border-radius: 1.2cqw; font-size: calc(max(14px, 1.9cqw) * min(var(--ts), 1.05)); font-weight: 800; line-height: 1.2; color: #0e6a34; text-align: left; }
/* Langkah 3 */
.pr-l3 { display: flex; flex-direction: column; gap: .8cqw; }
.pr-s3-tab { display: flex; align-items: center; gap: 1cqw; flex-wrap: wrap; }
.pr-tab { min-height: max(40px, 4.6cqw); padding: .2cqw 2cqw; font: inherit; font-size: calc(max(14px, 1.9cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #17407a; background: #fff; border: max(3px,.3cqw) solid #b9d6f5; border-radius: 3cqw; cursor: pointer; }
.pr-tab[aria-pressed="true"] { color: #fff; background: #1f66c2; border-color: #174f8c; }
.pr-tab:focus-visible, .pr-btn-kecil:focus-visible, .pr-btn-simpan:focus-visible, .pr-teks:focus-visible, .pr-baca:focus-visible { outline: max(4px,.4cqw) solid var(--fokus, #17407a); outline-offset: 2px; }
.pr-s3-badan { flex: 1 1 0; min-height: 0; display: flex; gap: 1cqw; }
.pr-s3-utama { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: .6cqw; padding: .8cqw; background: #e8f8ee; border: max(3px,.3cqw) solid #b6e3c5; border-radius: 1.6cqw; box-shadow: 0 .3cqw 0 rgba(0,0,0,.12); }
.pr-baca, .pr-teks { flex: 1 1 0; min-height: 0; margin: 0; padding: .7cqw 1cqw; background: #fff; border: max(2px,.25cqw) solid #9fdbb4; border-radius: 1.4cqw; font: inherit; font-size: calc(max(15px, 2.1cqw) * min(var(--ts), 1.05)); font-weight: 700; line-height: 1.4; color: #17301f; text-align: left; overflow: auto; resize: none; }
.pr-teks { width: 100%; box-sizing: border-box; border-style: dashed; border-color: #1f6fc7; }
.pr-baca.disimpan, .pr-t-baca { border-style: solid; }
.pr-s3-rujuk { flex: 0 0 31%; min-width: 0; overflow: auto; padding: .7cqw 1cqw; background: #fffaf0; border: max(3px,.3cqw) solid #f0d79a; border-radius: 1.6cqw; box-shadow: 0 .3cqw 0 rgba(0,0,0,.12); text-align: left; }
.pr-s3-rujuk b { font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.05)); color: #17407a; }
.pr-s3-rujuk ol { margin: .3cqw 0 0 1.6cqw; padding: 0; font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.05)); font-weight: 700; line-height: 1.25; color: #3b2410; }
.pr-s3-rujuk li { margin-bottom: .4cqw; }
.pr-s3-alat { flex: none; display: flex; align-items: center; justify-content: flex-start; gap: 1cqw; flex-wrap: wrap; }
.pr-btn-kecil { min-height: max(38px, 4.2cqw); padding: .2cqw 1.6cqw; font: inherit; font-size: calc(max(13px, 1.7cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #17407a; background: #fff; border: max(3px,.3cqw) solid #1f6fc7; border-radius: 3cqw; cursor: pointer; }
.pr-btn-simpan { margin-left: auto; display: inline-flex; align-items: center; gap: .7cqw; min-height: max(40px, 4.4cqw); padding: .2cqw 2cqw; font: inherit; font-size: calc(max(14px, 1.9cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #fff; background: linear-gradient(#34c46d, #0e9a47); border: max(3px,.3cqw) solid #fff; border-radius: 3cqw; box-shadow: 0 .3cqw 0 var(--hijau-gelap); cursor: pointer; }
.pr-btn-simpan svg { width: 2cqw; height: 2cqw; min-width: 16px; min-height: 16px; }
.pr-btn-simpan:disabled { background: #c9c3b6; color: #6d6659; box-shadow: none; cursor: not-allowed; }
.pr-s3-hasil { flex: none; margin: 0; min-height: calc(max(18px, 2.4cqw) * min(var(--ts), 1.05)); font-size: calc(max(12px, 1.6cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #17407a; text-align: left; }
.pr-s3-hasil ul { margin: 0; padding-left: 2cqw; } .pr-s3-hasil .ok { color: #0e6a34; } .pr-s3-hasil .cadang { color: #8a4a00; }
/* rumusan */
.pr-tamat { top: 9.6cqw; bottom: calc(var(--ce-selamat) + var(--ce-baris) + 1.4cqw); display: flex; flex-direction: column; gap: 1cqw; }
.pr-ganjaran { align-self: center; margin: 0; }
.pr-t-baca { flex: 1 1 0; min-height: 0; padding: 1cqw 1.6cqw; background: #fffaf0; border: max(4px,.4cqw) solid #f0d79a; border-radius: 2cqw; box-shadow: 0 .4cqw 0 rgba(0,0,0,.14); font-size: calc(max(16px, 2.3cqw) * min(var(--ts), 1.05)); font-weight: 800; line-height: 1.4; color: #17301f; text-align: left; overflow: auto; }
.pr-t-gambar { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1cqw; margin: 0; padding: 0; list-style: none; }
.pr-t-gambar li div { aspect-ratio: 16 / 7; border-radius: 1.2cqw; border: max(3px,.3cqw) solid #fff; background-color: #0b2540; background-size: cover; background-position: center; box-shadow: 0 .3cqw 0 rgba(0,0,0,.2); }
#skrin-pr.tamat .ce-guru, #skrin-pr.tamat .ce-bantu, #skrin-pr.tamat .pr-semak { display: none; }
#skrin-pr.tamat .pr-ringkas { grid-column: 2; justify-self: center; align-self: end; }
#skrin-pr.tamat .pr-seterusnya { grid-column: 6; }
@media (prefers-reduced-motion: reduce) { .pr-ganjaran.baharu { animation: none; } }

/* ===== v60: PENCAPAIAN dan SIJIL ===== */
#skrin-pc, #skrin-sj { --ce-selamat: 2cqw; --ce-baris: max(52px, 6.4cqw); --ce-guru: 8.2cqw; }
.btn-pencapaian svg { width: 2.6cqw; height: 2.6cqw; }
.pc-papan { width: 46cqw; }
.pc-kemajuan { position: absolute; left: 50%; top: 9.6cqw; transform: translateX(-50%); margin: 0; z-index: 2; padding: .2cqw 1.6cqw; background: rgba(255,255,255,.9); border: max(2px,.2cqw) solid #b9d6f5; border-radius: 3cqw; font-weight: 800; color: #17407a; font-size: calc(max(13px, 1.7cqw) * min(var(--ts), 1.05)); }
.pc-kad-senarai { position: absolute; left: 3cqw; right: 3cqw; top: 14.6cqw; bottom: calc(var(--ce-selamat) + var(--ce-baris) + 8.4cqw); z-index: 2; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4cqw; }
.pc-kad { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3cqw; min-height: 0; padding: .8cqw; text-align: center; background: linear-gradient(#fff8e4, #ffeec3); border: max(3px,.35cqw) solid #cf9a52; border-radius: 2cqw; box-shadow: 0 .4cqw 0 rgba(0,0,0,.16); }
.pc-lencana { width: auto; height: 100%; max-height: 11.5cqw; min-height: 0; flex: 1 1 0; object-fit: contain; }
.pc-kad.belum .pc-lencana { filter: grayscale(1); opacity: .35; }
.pc-fasa { font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.05)); color: #7a4a12; letter-spacing: .08em; }
.pc-lencana-nama { font-size: calc(max(14px, 1.9cqw) * min(var(--ts), 1.05)); font-weight: 900; color: #17301f; line-height: 1.15; }
.pc-status { font-size: calc(max(13px, 1.7cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #0e7a3c; }
.pc-kad.belum .pc-status { color: #6b5a3a; }
.pc-btn-perenggan { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--ce-selamat) + var(--ce-baris) + 1.6cqw); z-index: 3; min-height: max(48px, 5.4cqw); padding: .4cqw 3cqw; border: max(3px,.35cqw) solid #1f66c2; border-radius: 3cqw; background: #e3f1ff; color: #17407a; font: inherit; font-weight: 900; font-size: calc(max(15px, 2cqw) * min(var(--ts), 1.05)); cursor: pointer; box-shadow: 0 .4cqw 0 #0f3f86; }
.pc-btn-perenggan[hidden] { display: none; }
.pc-btn-perenggan:focus-visible { outline: max(4px,.4cqw) solid #ffbf00; outline-offset: 2px; }
.pc-bawah { grid-template-columns: auto minmax(0, 1fr) auto; }
.pc-sijil:disabled, .pc-sijil[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.pc-pp-teks { margin: 0; font-size: calc(max(16px, 2.2cqw) * min(var(--ts), 1.05)); font-weight: 800; line-height: 1.5; color: #17301f; max-height: 24cqw; overflow: auto; }
/* SIJIL (skrin) */
.sj-sijil { position: absolute; left: 7cqw; right: 7cqw; top: 9.6cqw; bottom: calc(var(--ce-selamat) + var(--ce-baris) + 1.6cqw); z-index: 2; display: flex; }
.sj-bingkai { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 1.2cqw 3cqw 1.6cqw; text-align: center; background: linear-gradient(#fffdf4 0 84%, #bfe9f5 84% 94%, #f6e3b0 94%); border: max(6px,.7cqw) double #cf9a52; border-radius: 1.6cqw; box-shadow: 0 .5cqw 0 rgba(0,0,0,.2); color: #17301f; overflow: hidden; }
.sj-logo { margin: 0; font-weight: 900; font-size: calc(max(18px, 3cqw) * min(var(--ts), 1.05)); color: #e8590c; letter-spacing: .06em; }
.sj-tajuk-sijil { margin: 0; font-weight: 900; font-size: calc(max(20px, 3.4cqw) * min(var(--ts), 1.05)); color: #17407a; letter-spacing: .08em; }
.sj-ayat, .sj-ayat2 { margin: 0; font-weight: 700; font-size: calc(max(13px, 1.8cqw) * min(var(--ts), 1.05)); line-height: 1.3; max-width: 62cqw; }
.sj-nama { margin: 0; font-weight: 900; font-size: calc(max(22px, 4cqw) * min(var(--ts), 1.05)); color: #b45309; border-bottom: max(3px,.3cqw) solid #cf9a52; padding: 0 3cqw; max-width: 70cqw; overflow-wrap: anywhere; line-height: 1.15; }
.sj-lencana { display: flex; gap: 2cqw; margin: 0; padding: 0; list-style: none; justify-content: center; }
.sj-lencana li { display: flex; flex-direction: column; align-items: center; width: 11cqw; font-weight: 800; font-size: calc(max(10px, 1.2cqw) * min(var(--ts), 1.05)); line-height: 1.1; }
.sj-lencana img { width: 6cqw; height: 6cqw; object-fit: contain; }
.sj-tarikh { margin: 0; font-weight: 800; font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.05)); color: #0b4a63; }
.sj-bawah { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.sj-utama b { font-size: calc(max(13px, 1.8cqw) * min(var(--ts), 1.05)); }
.sj-cetak { align-self: end; }
@page { size: A4 landscape; margin: 8mm; }
@media print {
  html, body { background: #fff !important; width: auto !important; height: auto !important; overflow: visible !important; display: block !important; }
  body > * { display: none !important; }
  body > #skrin-sj { display: block !important; position: static !important; width: 100% !important; height: auto !important; aspect-ratio: auto !important; container-type: normal !important; background: #fff !important; overflow: visible !important; }
  #skrin-sj .kg-latar { position: static !important; }
  #skrin-sj .sj-tiada-cetak, #skrin-sj .kg-tutup, #skrin-sj .p-nota { display: none !important; }
  #skrin-sj .sj-sijil { position: static !important; display: block !important; }
  #skrin-sj .sj-bingkai { min-height: 175mm; padding: 8mm 14mm; justify-content: space-around; border-width: 2mm; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #skrin-sj .sj-logo { font-size: 26pt; } #skrin-sj .sj-tajuk-sijil { font-size: 30pt; }
  #skrin-sj .sj-ayat, #skrin-sj .sj-ayat2 { font-size: 15pt; max-width: 200mm; }
  #skrin-sj .sj-nama { font-size: 32pt; max-width: 240mm; padding: 0 10mm; }
  #skrin-sj .sj-lencana { gap: 8mm; } #skrin-sj .sj-lencana li { width: 40mm; font-size: 10pt; } #skrin-sj .sj-lencana img { width: 22mm; height: 22mm; }
  #skrin-sj .sj-tarikh { font-size: 12pt; }
}
/* v60: pembetulan susun atur PERENGGAN langkah 2-3 */
.pr-s2-baris[hidden] { display: none; }
.pr-s2-pilihan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pr-s3-kepala h3 { flex: 1 1 auto; } .pr-s3-kepala { justify-content: flex-start; } .pr-s3-kepala .btn-audio { flex: none; }
.pr-s3-hasil:empty { display: none; }
.pr-s3-hasil { padding: .4cqw 1.2cqw; background: rgba(255,255,255,.93); border: max(2px,.2cqw) solid #b9d6f5; border-radius: 1.4cqw; }
#skrin-pr[data-lk="3"] .pr-bawah .c1-btn-semak, #skrin-pr[data-lk="3"] .pr-bawah .c1-btn-hijau { padding: .4cqw 1.1cqw .4cqw .8cqw; }
#skrin-pr[data-lk="3"] .pr-bawah .c1-btn-semak b, #skrin-pr[data-lk="3"] .pr-bawah .c1-btn-hijau b { font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.05)); }
#skrin-pr[data-lk="3"] .pr-bawah .c1-bantu b { font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.05)); }
.pr-baca, .pr-teks { overflow: auto; font-size: calc(max(14px, 1.95cqw) * min(var(--ts), 1.05)); }
#skrin-pr.tamat .pr-langkah { display: none; }
.pc-papan { top: 1.2cqw; }

/* ===== v61: PERENGGAN reka bentuk semula (penanda wacana + kad ayat) ===== */
.pb-l1 { display: grid; grid-template-columns: minmax(0, 1fr) 34cqw; gap: 1.2cqw; }
.pb-kiri { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)) auto; gap: .5cqw; min-height: 0; padding: .6cqw; background: rgba(255,255,255,.9); border: max(3px,.3cqw) solid #b9d6f5; border-radius: 1.6cqw; box-shadow: 0 .3cqw 0 rgba(0,0,0,.12); }
.pb-kiri .pr-mesej { justify-self: center; margin: 0; }
.pb-baris { display: grid; grid-template-columns: 2.4cqw 9.2cqw 15.5cqw minmax(0, 1fr); gap: .6cqw; align-items: stretch; min-height: 0; padding: .2cqw; border-radius: 1.2cqw; border: max(2px,.2cqw) solid transparent; }
.pb-baris.tanda { border-color: #f2b878; background: #fff6e6; } .pb-baris.betul { border-color: #18a553; background: #e8f8ee; }
.pb-no { align-self: center; display: grid; place-items: center; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #1f66c2; color: #fff; font-weight: 900; font-size: calc(max(11px, 1.3cqw)); }
.pb-thumb { border-radius: 1cqw; border: max(2px,.2cqw) solid #fff; background-color: #0b2540; background-size: cover; background-position: center; box-shadow: 0 .2cqw 0 rgba(0,0,0,.2); }
.pb-slot { position: relative; display: flex; min-height: 0; border: max(2px,.25cqw) dashed #7fa8d6; border-radius: 1.2cqw; background: #f2f8ff; }
.pb-slot.penuh { border-style: solid; border-color: #b9d6f5; background: #fff; }
.pb-slot.sasaran { border-color: #ee7a0c; background: #fff3e0; box-shadow: 0 0 0 max(3px,.3cqw) #ffd7a3; }
.pb-slot-btn { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; border-radius: inherit; cursor: pointer; z-index: 1; }
.pb-slot-btn:focus-visible { outline: max(4px,.4cqw) solid var(--fokus, #ffbf00); outline-offset: 1px; }
.pb-slot.penuh .pb-slot-btn { pointer-events: none; }
.pb-slot-isi { position: relative; z-index: 2; display: flex; width: 100%; min-height: 0; pointer-events: none; }
.pb-slot-isi .pb-kad { pointer-events: auto; }
.pb-slot-m::before { content: "Penanda"; position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(max(10px, 1.15cqw)); font-weight: 800; color: #8aa3be; z-index: 0; }
.pb-slot-s::before { content: "Ayat"; position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(max(10px, 1.15cqw)); font-weight: 800; color: #8aa3be; z-index: 0; }
.pb-slot.penuh::before { content: none; }
.pb-kanan { display: flex; flex-direction: column; gap: .5cqw; min-height: 0; overflow: auto; padding: .6cqw; background: rgba(255,250,240,.93); border: max(3px,.3cqw) solid #f0d79a; border-radius: 1.6cqw; box-shadow: 0 .3cqw 0 rgba(0,0,0,.12); }
.pb-kanan.sasaran { border-color: #ee7a0c; }
.pb-bank-tajuk { font-size: calc(max(12px, 1.4cqw) * min(var(--ts), 1.05)); color: #7a4a12; text-align: left; }
.pb-bank-m { display: grid; grid-template-columns: 1fr 1fr; gap: .5cqw; }
.pb-bank-s { display: grid; grid-template-columns: 1fr; gap: .5cqw; }
.pb-pos { position: relative; min-height: max(34px, 3.8cqw); border-radius: 1cqw; background: rgba(0,0,0,.05); display: flex; }
.pb-bank-s .pb-pos { min-height: max(40px, 4.8cqw); }
.pb-pos.kosong { background: rgba(0,0,0,.03); border: max(2px,.2cqw) dashed #e3cd9a; }
.pb-kad { position: relative; display: flex; align-items: stretch; width: 100%; min-height: 0; border-radius: 1cqw; background: linear-gradient(#fff, #e9f3ff); border: max(2px,.25cqw) solid #7fa8d6; box-shadow: 0 .25cqw 0 rgba(0,0,0,.18); touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.pb-km { background: linear-gradient(#fff6e6, #ffe3b8); border-color: #e09a3a; }
.pb-kad.dipilih { outline: max(4px,.4cqw) solid #ee7a0c; outline-offset: 1px; box-shadow: 0 0 0 max(6px,.7cqw) #ffd7a3; }
.pb-kad.diseret { opacity: .35; }
.pb-k-pilih { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; padding: .2cqw .8cqw; border: 0; background: transparent; font: inherit; font-weight: 800; color: #17301f; text-align: left; cursor: inherit; border-radius: inherit; }
.pb-km .pb-k-pilih { justify-content: center; text-align: center; color: #8a4a00; }
.pb-k-teks { display: block; font-size: calc(max(12px, 1.45cqw) * min(var(--ts), 1.05)); line-height: 1.2; overflow-wrap: anywhere; }
.pb-km .pb-k-teks { font-size: calc(max(13px, 1.65cqw) * min(var(--ts), 1.05)); }
.pb-k-pilih:focus-visible { outline: max(4px,.4cqw) solid var(--fokus, #ffbf00); outline-offset: 1px; }
.pb-k-audio { flex: none; align-self: center; width: max(30px, 3cqw); height: max(30px, 3cqw); margin-right: .3cqw; }
.pb-k-audio svg { width: 60%; height: 60%; }
.pb-hantu { position: absolute; z-index: 60; margin: 0; pointer-events: none; opacity: .95; transform: rotate(-2deg); box-shadow: 0 .8cqw 1.6cqw rgba(0,0,0,.35); }
.pb-ks[data-pjg="2"] .pb-k-teks { font-size: calc(max(11px, 1.3cqw) * min(var(--ts), 1.05)); }
/* Langkah 2 dan 3 */
.pb-l2 { display: grid; grid-template-columns: 34cqw minmax(0, 1fr); gap: 1.2cqw; }
.pb-l3 { display: grid; grid-template-columns: minmax(0, 1fr) 31cqw; gap: 1.2cqw; }
.pb-rujuk, .pb-semak { display: flex; flex-direction: column; gap: .5cqw; min-height: 0; overflow: auto; padding: .8cqw 1cqw; background: #fffaf0; border: max(3px,.3cqw) solid #f0d79a; border-radius: 1.6cqw; box-shadow: 0 .3cqw 0 rgba(0,0,0,.12); text-align: left; }
.pb-rujuk-kepala { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; }
.pb-rujuk-kepala b, .pb-semak-tajuk { font-size: calc(max(13px, 1.7cqw) * min(var(--ts), 1.05)); color: #17407a; }
.pb-rujuk ol { margin: 0; padding-left: 2cqw; font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.05)); font-weight: 700; line-height: 1.3; color: #3b2410; }
.pb-rujuk li { margin-bottom: .5cqw; }
.pb-tulis { display: flex; flex-direction: column; gap: .6cqw; min-height: 0; padding: .8cqw; background: #e8f8ee; border: max(3px,.3cqw) solid #b6e3c5; border-radius: 1.6cqw; box-shadow: 0 .3cqw 0 rgba(0,0,0,.12); }
.pb-teks { flex: 1 1 0; min-height: 0; resize: none; line-height: 1.4; font-size: calc(max(16px, 2.1cqw) * min(var(--ts), 1.05)); }
.pb-chip-baris { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: .6cqw; }
.pb-chip-label { font-size: calc(max(12px, 1.4cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #17407a; }
.pb-chip { min-height: max(34px, 3.6cqw); padding: .1cqw 1.1cqw; font-size: calc(max(12px, 1.4cqw) * min(var(--ts), 1.05)); }
.pb-semak ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5cqw; }
.pb-semak li { display: flex; align-items: flex-start; gap: .6cqw; padding: .4cqw .8cqw; border-radius: 1cqw; font-size: calc(max(12px, 1.45cqw) * min(var(--ts), 1.05)); font-weight: 800; line-height: 1.25; }
.pb-semak li.ok { background: #e8f8ee; color: #0e6a34; } .pb-semak li.cadang { background: #fff6e6; color: #7a4a00; }
.pb-ik { flex: none; display: grid; place-items: center; width: 1.9cqw; min-width: 18px; height: 1.9cqw; min-height: 18px; border-radius: 50%; background: currentColor; }
.pb-ik { color: inherit; } .pb-semak li.ok .pb-ik { background: #18a553; } .pb-semak li.cadang .pb-ik { background: #e08a1e; }
.pb-ik { font-size: calc(max(11px, 1.2cqw)); color: #fff !important; }
.pb-semak-nota { margin: auto 0 0; font-size: calc(max(11px, 1.3cqw) * min(var(--ts), 1.05)); font-weight: 700; color: #5b6f86; }
.pr-bawah #pr-simpan, .pb-chip-baris .pr-btn-simpan { margin-left: 0; }
.pb-l1 { grid-template-columns: minmax(0, 1fr) 42cqw; }
.pb-baris { grid-template-columns: 2.4cqw 9cqw 13cqw minmax(0, 1fr); }
.pb-bank-m { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pb-bank-m .pb-k-teks { font-size: calc(max(11px, 1.3cqw) * min(var(--ts), 1.05)); }
.pb-bank-m .pb-k-pilih { padding: .2cqw .3cqw; }
.pb-bank-s .pb-pos { min-height: max(38px, 4.4cqw); }
/* v61: rumusan perenggan panjang boleh ditatal (tidak terpotong) */
.pr-t-baca { overflow-y: auto; font-size: calc(max(15px, 2cqw) * min(var(--ts), 1.05)); line-height: 1.35; }

/* v62: peringatan huruf besar/kecil dan enam kriteria semakan */
.pb-ingat { flex: none; display: flex; align-items: center; gap: .8cqw; padding: .4cqw 1cqw; background: #fff8dc; border: max(2px,.2cqw) solid #f0d79a; border-radius: 1.2cqw; text-align: left; }
.pb-ingat p { margin: 0; flex: 1 1 auto; min-width: 0; font-size: calc(max(12px, 1.4cqw) * min(var(--ts), 1.05)); font-weight: 700; line-height: 1.25; color: #5a3a00; }
.pb-ingat-ik { flex: none; font-size: calc(max(16px, 2.2cqw)); line-height: 1; }
.pb-ingat-audio { flex: none; width: max(30px, 3cqw); height: max(30px, 3cqw); }
.pb-ingat-audio svg { width: 60%; height: 60%; }
.pb-l3 { grid-template-columns: minmax(0, 1fr) 33cqw; }
.pb-semak { gap: .4cqw; padding: .6cqw .8cqw; }
.pb-semak ul { gap: .35cqw; }
.pb-semak li { padding: .3cqw .7cqw; font-size: calc(max(12px, 1.35cqw) * min(var(--ts), 1.05)); }

/* ===== v62: PENCAPAIAN SAYA susun atur semula (tiada pertindihan) ===== */
#skrin-pc .kg-tajuk { font-size: calc(max(15px, 2.1cqw) * min(var(--ts), 1.05)); padding: .4cqw 1.6cqw .5cqw; }
#skrin-pc .kg-kepala { height: 8cqw; }
.pc-isi { position: absolute; left: 3cqw; right: 3cqw; top: 8cqw; bottom: calc(var(--ce-selamat) + var(--ce-guru) + 1.2cqw); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1cqw; overflow-y: auto; overflow-x: hidden; padding: .5cqw .5cqw 1cqw; scrollbar-gutter: stable; }
.pc-isi > * { flex: none; }
.pc-isi .pc-papan { position: static; transform: none; width: min(50cqw, 100%); padding: .5cqw 1.6cqw .7cqw; }
.pc-isi .ce-papan-tajuk { font-size: calc(max(15px, 2cqw) * min(var(--ts), 1.05)); }
.pc-nama-murid { margin: .2cqw 0 0; font-weight: 900; line-height: 1.1; color: #b45309; font-size: calc(max(24px, 4.2cqw) * min(var(--ts), 1.05)); overflow-wrap: anywhere; }
.pc-isi .pc-kemajuan { position: static; transform: none; padding: .3cqw 1.8cqw; }
.pc-isi .pc-kad-senarii, .pc-isi .pc-kad-senarai { position: static; width: min(76cqw, 100%); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6cqw; }
.pc-isi .pc-kad { padding: .8cqw .6cqw; gap: .25cqw; }
.pc-isi .pc-lencana { flex: none; width: 8cqw; height: 8cqw; max-height: none; }
.pc-isi .pc-lencana-nama { font-size: calc(max(13px, 1.55cqw) * min(var(--ts), 1.05)); overflow-wrap: break-word; hyphens: auto; }
.pc-isi .pc-status { font-size: calc(max(13px, 1.5cqw) * min(var(--ts), 1.05)); }
.pc-isi .pc-fasa { font-size: calc(max(12px, 1.3cqw) * min(var(--ts), 1.05)); }
.pc-isi .pc-btn-perenggan { position: static; transform: none; min-height: max(44px, 4.4cqw); padding: .3cqw 2.4cqw; font-size: calc(max(14px, 1.7cqw) * min(var(--ts), 1.05)); }
.pc-bawah .pc-sijil { min-height: max(48px, 5.4cqw); padding: .3cqw 1.6cqw .3cqw 2cqw; }
.pc-bawah .pc-sijil b { font-size: calc(max(13px, 1.7cqw) * min(var(--ts), 1.05)); white-space: nowrap; }
.pc-bawah .ce-g-teks { font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.05)); line-height: 1.25; overflow-y: auto; }
.pc-bawah .ce-g-tajuk { font-size: calc(max(12px, 1.5cqw) * min(var(--ts), 1.05)); }
@media (max-width: 760px) { .pc-isi .pc-kad-senarai { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* v62: Sijil - tiga butang tindakan */
.sj-bawah { grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
.sj-bawah .c1-btn-semak, .sj-bawah .c1-btn-hijau { min-height: var(--ce-baris); padding: .3cqw 1.4cqw; white-space: nowrap; }
.sj-bawah .c1-btn-semak b, .sj-bawah .c1-btn-hijau b { font-size: calc(max(13px, 1.55cqw) * min(var(--ts), 1.05)); }
.sj-bawah .ce-g-teks, .sj-bawah .ce-g-tajuk { font-size: calc(max(12px, 1.4cqw) * min(var(--ts), 1.05)); }
@media (max-width: 900px) { .sj-bawah .ce-guru { display: none; } .sj-bawah { grid-template-columns: auto 1fr auto auto auto; } }

.pc-isi .pc-kad { justify-content: flex-start; padding-top: 1cqw; }
.pc-isi { gap: .7cqw; }
.pc-isi .pc-lencana { width: 7cqw; height: 7cqw; }
html[data-teks="besar"] .pc-isi .pc-lencana { width: 5.6cqw; height: 5.6cqw; }
html[data-teks="besar"] .pc-isi .pc-papan { padding: .3cqw 1.6cqw .4cqw; }
html[data-teks="besar"] .pc-nama-murid { font-size: calc(max(22px, 3.6cqw)); }
html[data-teks="besar"] .pc-isi .pc-kad { padding-top: .6cqw; padding-bottom: .5cqw; }

/* ===== v63: MAIN LAGI! ===== */
.pc-aksi { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2cqw; }
.pc-aksi[hidden] { display: none; }
.pc-aksi .pc-btn-perenggan[hidden] { display: none; }
.pc-isi .pc-btn-main { background: linear-gradient(#ffe27a, #ffc83d); border-color: #c98a00; color: #5a3500; box-shadow: 0 .4cqw 0 #8a5d00; }
.kg-alat .sj-main { color: #5a3500; background: linear-gradient(#fff0b3, #ffd45a); }
.kg-alat .sj-main span:first-child { font-size: max(20px, 2.4cqw); line-height: 1; }
.pm-ikon { font-size: max(22px, 3cqw); line-height: 1; }
.pm-teks { text-align: center; }
.pm-bawah { flex-wrap: wrap; row-gap: 1cqw; }
.pm-bawah .ce-btn-reset, .pm-bawah .kg-btn-hijau { min-width: 12cqw; }
.pc-lama-senarai { list-style: none; margin: 0; padding: 0; display: grid; gap: 1cqw; max-height: 24cqw; overflow-y: auto; }
.pc-lama-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 2cqw; min-height: max(48px, 5cqw); padding: .4cqw 2cqw; border: max(3px,.3cqw) solid #cf9a52; border-radius: 2cqw; background: linear-gradient(#fff8e4, #ffeec3); color: #17301f; font: inherit; font-weight: 800; font-size: calc(max(15px, 2cqw) * min(var(--ts), 1.05)); cursor: pointer; }
.pc-lama-btn:focus-visible { outline: max(4px,.4cqw) solid #ffbf00; outline-offset: 2px; }

/* v63: ruang dialog guru pada halaman Sijil */
.sj-bawah { gap: .8cqw; }
.sj-bawah .c1-btn-semak, .sj-bawah .c1-btn-hijau { padding: .3cqw .9cqw; }
.sj-bawah .sj-utama { white-space: normal; max-width: 14cqw; line-height: 1.05; }
.sj-bawah .sj-utama b { font-size: calc(max(12px, 1.4cqw) * min(var(--ts), 1.05)); }
.sj-bawah .ce-g-tajuk { display: none; }
.sj-bawah .ce-gelembung { padding-right: 3.6cqw; }
.sj-sijil { bottom: calc(var(--ce-selamat) + var(--ce-guru) + 1cqw); }

/* v64b: PERENGGAN Langkah 1 - ayat panjang tidak melimpah; ruang kiri boleh ditatal menegak jika masih tidak muat */
.pb-kiri { overflow-y: auto; overflow-x: hidden; }

/* v64b: pop-up "Perenggan Saya" - teks membalut, skrol menegak sahaja, mesej audio di dalam pop-up */
#pc-pop-perenggan .kg-pop { max-width: 94%; max-height: 92%; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; }
#pc-pop-perenggan .pr-pb-badan { min-height: 0; min-width: 0; overflow-x: hidden; }
.pc-pp-teks { overflow-x: hidden; overflow-y: auto; overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.pc-pp-teks * { overflow-wrap: anywhere; white-space: normal; }
#pc-pop-perenggan .kg-pd-bawah { flex-wrap: wrap; row-gap: 1cqw; }
.pc-pp-nota { margin: 0; padding: .4cqw 1.4cqw; max-width: 100%; box-sizing: border-box; text-align: center; font-size: calc(max(13px, 1.5cqw) * min(var(--ts), 1.05)); font-weight: 800; color: #5a2a00; background: #ffe9a8; border: max(2px,.2cqw) solid #e8b84a; border-radius: 2cqw; overflow-wrap: anywhere; }
.pc-pp-nota:empty { display: none; }

/* v64c: tajuk bantuan membaca */
.p-nota strong, .pc-pp-nota strong { color: #a24a00; font-weight: 900; }