/* ============================================================================
   muat.css — SISTEM "SEMUA MESTI MUAT" (Lapis 1 + Lapis 3)
   Dimuat SELEPAS style.css dan padat.css, jadi ia menang tanpa perlu !important.
   ============================================================================

   ---- LAPIS 1: PEMUSATAN SELAMAT (safe centering) ----

   Punca sebenar semua pertindihan yang dilaporkan. Bila satu bekas flex ditulis
   `justify-content:center` DAN kandungannya lebih tinggi daripada bekas, browser
   melimpahkan kandungan ke DUA-DUA hujung — atas dan bawah. Skrol hanya boleh
   capai limpahan BAWAH. Limpahan ATAS kekal di luar jangkauan dan terjulur keluar
   melanggar elemen lain (cth tajuk "Soalan Nombor 1" yang position:fixed).

   Diukur pada #screen-game sebelum pembaikan:
     · 844x390 — kad bermula y=81, tetapi .instruction bermula y=77 (julur 4px)
     · 740x330 — kad bermula y=79, tetapi .instruction bermula y=56 (julur 23px)
                 sedangkan #levelTitle tamat y=52 → tinggal 4px sebelum bertindih.
                 Kandungan 278px dipaksa masuk kotak 247px.

   Penyelesaian: kata kunci `safe`. `justify-content:safe center` bermaksud
   "pusatkan bila muat; bila TAK muat, berkelakuan macam flex-start". Jadi
   limpahan sentiasa jatuh ke arah bawah sahaja — arah yang boleh diskrol.

   Setiap peraturan ditulis DUA baris: nilai lama dahulu, `safe` selepasnya.
   Browser lama yang tak faham `safe` akan abaikan baris kedua dan kekal dengan
   kelakuan asal (tiada regresi); browser moden ambil yang kedua.

   ---- LAPIS 3: BUTANG TINDAKAN TAK BOLEH HILANG ----

   Budak 4-6 tahun tidak scroll secara naluri. Butang "Seterusnya" / "Main Lagi"
   yang berada di bawah garis lipatan = permainan buntu. Jadi butang tindakan
   dikeluarkan daripada kawasan yang boleh skrol dan dipaku di kaki bekasnya.
   ------------------------------------------------------------------------- */


/* =========================================================================
   LAPIS 1 — Pemusatan selamat pada setiap bekas yang boleh melimpah
   ========================================================================= */

/* Skrin penuh-tinggi yang memusatkan kandungan menegak. #app overflow:hidden,
   jadi limpahan atas pada skrin-skrin ni terus HILANG, bukan sekadar bertindih. */
#screen-levels,
#screen-win,
#screen-settings,
#screen-album,
#screen-menu{
  justify-content:center;
  justify-content:safe center;
}

/* Skrin bayaran & akaun (paywall.css) — kedua-duanya `justify-content:center`
   BERSAMA `overflow-y:auto`, iaitu gabungan paling bahaya: pada telefon pendek
   bahagian atas borang terjulur keluar dan tak boleh diskrol balik. */
#screen-paywall,
#screen-akaun{
  justify-content:center;
  justify-content:safe center;
}

/* Kad mengajar & isinya — teks/gambar besar (.teach-bigtext boleh cecah 230px)
   memang direka melimpah pada skrin pendek; pastikan ia melimpah ke bawah. */
.teach-card{
  justify-content:center;
  justify-content:safe center;
}
/* .teach-fit SENGAJA tiada di sini. `safe center` menjajarkan kandungan yang
   melimpah ke ATAS, jadi pusat kandungan tidak lagi sepadan dgn pusat kotak —
   sedangkan muatVisual() mengecilkannya mengelilingi pusat kotak. Hasilnya
   kandungan kekal terjulur ke bawah walaupun sudah dikecilkan. Kandungan .teach-fit
   memang tidak perlu `safe`: muatVisual menjamin ia muat. */
.teach-main,
.teach-visual,
.teach-letterimg{
  align-items:center;
  align-items:safe center;
  justify-content:center;
  justify-content:safe center;
}

/* Kotak soalan kuiz — .stage ialah flex-wrap dgn align-content:center. Bila
   pilihan jawapan banyak (cth 6 gambar), baris pertama terjulur ke atas. */
.stage{
  align-content:center;
  align-content:safe center;
  align-items:center;
  align-items:safe center;
}

/* Susun atur onboarding (Cikgu Aisyah + gelembung) */
.onboard-layout{
  align-items:center;
  align-items:safe center;
  justify-content:center;
  justify-content:safe center;
}


/* =========================================================================
   LAPIS 3a — SKRIN KUIZ: kad dibahagi kepada badan (skrol) + kaki (tetap)
   ========================================================================= */

/* .game-center BUKAN lagi bekas skrol. Ia kini rangka luar sahaja: badan di
   atas mengambil baki ruang, kaki di bawah tak pernah mengecil.
   overflow:hidden supaya bucu bulat kad benar-benar mengerat kandungan. */
.game-center{
  justify-content:flex-start;
  overflow:hidden;
}

/* Badan — inilah satu-satunya kawasan yang boleh diskrol dalam kuiz.
   gap:inherit mewarisi nilai .game-center, jadi SEMUA pelarasan gap sedia ada
   dalam style.css (@max-height:760/540) dan padat.css terus terpakai tanpa
   perlu ditulis semula di sini. */
.game-scroll{
  flex:1 1 auto; min-height:0; width:100%;
  gap:inherit;                    /* disalurkan ke .game-fit di bawah */
  overflow-y:auto; overflow-x:hidden;
  /* Rizab tepi untuk hiasan yang SENGAJA tergantung di luar kotaknya. Butang
     "dengar" pilihan jawapan duduk pd right:-8px, dan overflow-x:hidden di atas
     mengeratnya — diukur pd 801x363: lencana jawapan ke-4 x743-773 dikerat pd
     x765, jadi budak nampak setengah bulatan. Padding ini beri 10px yang perlu
     tanpa mengalih grid (ia kekal di tengah). */
  padding-inline:10px;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* Kandungan yang diauto-kecilkan oleh js/muat.js (Lapis 2).
   min-height:100% — bila kandungan MUAT, ia meregang mengisi ruang supaya
   .stage (flex:1 0 auto) membesar macam rupa asal; bila TAK muat, tingginya
   ditentukan kandungan dan js/muat.js mengecilkannya secara berkadar.
   transform-origin atas-tengah supaya pengecilan berlabuh pd tepi atas, jadi
   translateY yang memusatkannya boleh dikira terus. */
.game-fit{
  min-height:100%; width:100%;
  display:flex; flex-direction:column;
  align-items:center;
  align-items:safe center;
  justify-content:center;
  justify-content:safe center;
  gap:inherit;
  transform-origin:top center;
}

/* Maklum balas + Seterusnya sebagai POPUP TERAPUNG, bukan kaki tetap.
   Dulu ia jalur tetap setinggi ~81px daripada 180px ruang yang ada pada telefon
   — hampir separuh kad dikorbankan untuk sebuah butang yang hanya muncul
   selepas jawapan betul. Sekarang ia keluar dari aliran sepenuhnya: soalan
   mendapat SELURUH tinggi kad, dan butang timbul di tengah-bawah bila perlu.

   pointer-events:none pada pembalut supaya kawasan kosongnya tidak menghalang
   ketikan pada butang jawapan di bawahnya; anaknya sendiri menerima ketikan
   semula. Tanpa ini, jalur tak nampak itu akan "memakan" ketikan budak. */
.game-center{position:relative;}
.game-actions{
  position:absolute; left:0; right:0;
  bottom:clamp(4px,1.4vh,14px);
  z-index:4; pointer-events:none;
  width:100%;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(1px,0.5vh,5px);
}
.game-actions > *{pointer-events:auto;}

/* Kabus lembut di belakang popup supaya teks & butang kekal jelas walaupun
   gambar jawapan berada tepat di bawahnya. Hanya muncul bersama popup. */
.game-actions:has(.btn-next:not([hidden]))::before{
  content:""; position:absolute; inset:auto 0 -14px 0; height:190%;
  background:linear-gradient(180deg, rgba(255,250,238,0) 0%, rgba(255,250,238,.82) 55%, rgba(255,250,238,.95) 100%);
  pointer-events:none; z-index:-1;
}

/* Timbul — bukan sekadar muncul. Isyarat "kamu betul, teruskan". */
.btn-next:not([hidden]){
  animation:nextPopUp .34s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes nextPopUp{
  0%{opacity:0; transform:translateY(14px) scale(.82);}
  100%{opacity:1; transform:translateY(0) scale(1);}
}
@media (prefers-reduced-motion:reduce){
  .btn-next:not([hidden]){animation:none;}
}

/* Tiada lagi rizab tinggi: popup ini di luar aliran, jadi ia tidak boleh
   menganjakkan apa-apa walaupun tingginya berubah. min-height:0 supaya baris
   kosong benar-benar tiada dan tidak meninggalkan jalur hantu di kaki kad. */
.game-actions .feedback{
  display:flex; align-items:center; justify-content:center;
  min-height:0; line-height:1.15;
  /* Bar ini teks SEMATA — tiada apa nak ditekan. Tanpa baris ini ia mewarisi
     pointer-events:auto daripada `.game-actions > *` dan, kerana kaki ini
     terapung di ATAS petak jawapan, teks maklum balas menelan tap budak pada
     butang di bawahnya. Butang Seterusnya ada peraturannya sendiri, jadi ia
     tidak terjejas. */
  pointer-events:none;
}

/* .stage TIDAK BOLEH DIMAMPAT lebih kecil daripada kandungannya.
   `flex:1 1 0` asal bermaksud "ambil BAKI ruang" — saiznya ditentukan elemen
   lain, bukan isinya sendiri. Digandingkan dengan overflow:visible, gambar
   soalan yang lebih besar daripada baki ruang akan TERPANCUT KELUAR kotak dan
   melukis atas label "Pilih jawapan:" serta butang jawapan di bawahnya.

   Diukur 1596x718 sebelum pembaikan: kotak .stage 198->325 (126px), tetapi
   .stage-visual 209->391 dan .kuiz-dengar-btn 246->354 — kedua-duanya melepasi
   sempadan, sedangkan .answer-label duduk di 332->357. Itulah cawan yang
   bertindih tulisan.

   Ini bertambah teruk selepas kaki tetap (.game-actions) dikenalkan, kerana
   badan boleh-skrol jadi 107px lebih pendek, jadi .stage dimampat lebih kuat.

   `flex:1 0 auto` = BOLEH membesar isi baki ruang pada skrin besar (rupa asal
   dikekalkan), TAPI tidak pernah mengecil bawah tinggi kandungan. Bila tak
   muat, .game-scroll yang menskrol — bukan kandungan yang terpancut keluar. */
.game-fit .stage{
  flex:1 0 auto;
}

/* Rizab ruang untuk butang tersembunyi DIBATALKAN — ia tidak lagi diperlukan.
   Dulu ruangnya dikekalkan supaya kaki tidak membesar ~43px pada saat budak
   menjawab dan menganjakkan soalan. Kini butang itu terapung di luar aliran,
   jadi ia tidak boleh menganjakkan apa-apa; menyembunyikannya sepenuhnya
   memulangkan setiap piksel itu kepada soalan. */
.btn-next[hidden]{display:none;}


/* =========================================================================
   LAPIS 3b — SKRIN RAIKAN: "Main Lagi / Peta" sentiasa nampak
   ========================================================================= */

/* Kad menang tidak lagi menskrol seluruhnya; hanya isi di atas yang menskrol. */
.win-card{
  overflow:hidden;
  justify-content:flex-start;
}
.win-scroll{
  flex:1 1 auto; min-height:0; width:100%;
  display:flex; flex-direction:column;
  align-items:center;
  align-items:safe center;
  justify-content:center;
  justify-content:safe center;
  gap:inherit;
  overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;
}
.win-actions{
  flex:0 0 auto; width:100%;
}
/* padat.css memberi .win-card `overflow-y:auto` pada skrin pendek — batalkan,
   sebab kini .win-scroll yang memegang tugas itu. */
@media (max-height:560px){
  .win-card{overflow-y:hidden;}
}


/* =========================================================================
   SKRIN PENDEK: pilihan jawapan jadi SATU BARIS, bukan grid 2x2
   =========================================================================

   Pada telefon landskap, lebar berlimpah dan tinggi yang berkurangan. Grid 2x2
   membelanjakan sumber yang paling sedikit (tinggi) untuk menjimatkan sumber
   yang paling banyak (lebar) — terbalik.

   Diukur 844x390, kelas "Bunyi Sama!": kandungan 396px dalam ruang 207px,
   iaitu perlukan skala 0.52. Itu menjadikan arahan ~10px — tak terbaca oleh
   budak 4-6 tahun. Jadi js/muat.js berhenti di lantai 0.70 dan soalan TERPAKSA
   diskrol. Mengecilkan lagi bukan jawapannya; membuang satu baris penuh itulah
   jawapannya.

   :has() digunakan supaya ia hanya terpakai bila pilihan 4 atau kurang —
   dengan 5-6 pilihan, satu baris menjadikan setiap butang terlalu sempit.
   Pelayar tanpa :has() mengabaikan blok ini sepenuhnya dan kekal grid 2x2
   (kelakuan asal) — tiada regresi. */
/* Gambar soalan: lantai 100px dalam style.css ialah lantai MUTLAK — ia tidak
   mengalah walaupun skrin cuma 359px tinggi. Diukur 799x359 "Bunyi Sama!":
     instruction 44 + stage 142 + label 18 + jawapan 80 = 296px dalam ruang 180px
   Gambar 100px itu sahaja memaksa .stage jadi 142px, iaitu separuh daripada
   keseluruhan kandungan. Turunkan lantainya supaya auto-kecil ada ruang bekerja
   pada nisbah yang masih terbaca. */
@media (max-height:560px){
  .stage-img{height:clamp(48px,18vh,190px);}
}

@media (max-height:560px){
  .choice-grid:not(:has(> :nth-child(5))){
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:1fr;
    max-width:min(980px,94vw);
  }
}


/* =========================================================================
   LAPIS 3c — SKRIN TETAPAN & ALBUM: tajuk kekal, hanya panel yang menskrol
   ========================================================================= */

/* padat.css memberi max-height kepada .settings-panel/.album-wrap, tetapi
   pengiraannya (100dvh - nav-h - 10px) tidak menolak tinggi RIBBON tajuk di
   atasnya. Diukur 740x330: .settings-wrap 44->383, iaitu 53px melepasi skrin,
   jadi baris terakhir tetapan tak dapat dicapai langsung.
   Ganti anggaran itu dengan pembahagian sebenar: pembalut mengisi baki ruang,
   panel di dalamnya yang menskrol. */
.settings-wrap,
.album-wrap{
  flex:0 1 auto; min-height:0; max-height:100%;
}
.settings-panel,
.album-grid{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overscroll-behavior:contain;
}
@media (max-height:560px){
  /* Batalkan anggaran max-height padat.css — kini flex yang menentukan. */
  .settings-panel,
  .album-wrap{max-height:none;}
}


/* =========================================================================
   LAPIS 3d — SKRIN MENGAJAR: butang "Jom Kuiz!" tak terkeluar tepi bawah
   ========================================================================= */

/* Susun aturnya sudah tepat (diukur 844x390: butang tamat y=385, sempadan y=385).
   Yang terkeluar ialah DENYUTAN-nya: teachPulse membesarkan butang 6% dari
   TENGAH, jadi 3% tumbuh ke bawah melepasi tepi skrin (diukur tamat y=396).
   Tukar titik asalan ke bawah — denyutan kekal, tetapi ia tumbuh ke ATAS sahaja
   dan tepi bawah butang kekal terpaku. */
.teach-kuiz{
  transform-origin:bottom center;
}