/* ============================================================================
   padat.css — MOD PADAT UNTUK TELEFON LANDSKAP (viewport pendek)
   Dimuat SELEPAS style.css, jadi ia menang tanpa perlu !important.
   ============================================================================

   Masalah sebenar yang diperbaiki (diukur pada 900x400 — telefon landskap
   dengan bar alamat pelayar masih kelihatan):

     · --companion-w 30vw = 270px daripada 900px diberi kepada hiasan Cikgu
       Aisyah, jadi kandungan tinggal 610px. Pada desktop 30vw sihat; pada
       telefon ia melahap satu pertiga skrin.
     · --nav-h 74px daripada 400px = 18.5% tinggi hanya untuk satu jalur butang.
     · Titik slaid (.teach-dots) dan butang "Jom Kuiz!" TERKELUAR skrin
       (diukur: dots top=400 pada viewport tinggi 400) — butang yang WAJIB
       ditekan pun tak nampak.
     · Kad mengajar MELOMPAT 274px -> 187px bila "Jom Kuiz!" muncul pada slaid
       akhir, jadi visual tercepit dan huruf terpotong. Itulah dua jalur gelap
       yang kelihatan dalam screenshot telefon.
     · Saiz teks besar diikat pada `vw` sahaja. Pada skrin LEBAR-TAPI-PENDEK,
       16vw = 144px dimuatkan ke dalam kotak 125px, jadi huruf terpotong
       atas-bawah.

   Prinsip: setiap had saiz mesti mengambil kira TINGGI (dvh), bukan lebar
   sahaja. `dvh` (bukan vh) supaya ukuran betul walaupun bar alamat pelayar
   mengecil/membesar semasa scroll.
   ------------------------------------------------------------------------- */

/* ---- 1. Token ruang: kecilkan peneman & jalur nav bila skrin pendek ---- */
@media (max-height:560px){
  :root{
    --companion-w: clamp(120px,17vw,190px);
    /* max(--nav-real-h) — lihat nota pd :root dalam style.css */
    --nav-h: max(clamp(46px,11vh,58px), var(--nav-real-h, 0px));
  }
}
@media (max-height:420px){
  :root{
    --companion-w: clamp(96px,14vw,150px);
    --nav-h: max(44px, var(--nav-real-h, 0px));
  }
}

/* ---- 2. Jalur nav sejagat lebih nipis ---- */
@media (max-height:560px){
  .global-nav{padding:clamp(5px,1.2vh,9px) clamp(8px,1.6vw,16px);}
  .global-nav-btn{padding:6px 14px; min-height:34px; font-size:clamp(12px,1.6vw,15px); border-width:2px;}
  .pearl-counter{min-height:34px; padding:3px 12px 3px 4px; font-size:clamp(13px,1.7vw,16px); border-width:2px;}
  .pearl-icon{width:clamp(20px,2.4vw,26px);}
  .nav-dropdown{min-width:210px; padding:6px;}
  .nav-dropdown button{padding:9px 13px; font-size:13px;}
  /* Tajuk fixed yang berkongsi baris dengan nav (peta level / mengajar / permainan) */
  #classTitle, #teachTitle, #levelTitle{
    top:clamp(5px,1.2vh,9px);
    font-size:clamp(12px,1.7vw,16px); padding:6px 16px; border-width:2px;
    max-width:min(46vw,340px); overflow:hidden; text-overflow:ellipsis;
  }
  .map-title{top:clamp(4px,1vh,8px); height:calc(var(--nav-h) - 12px);}
}

/* ---- 3. Peneman Cikgu Aisyah: ikat tinggi pada dvh supaya tak melebihi skrin ---- */
@media (max-height:560px){
  /* padding-atas PENUH var(--nav-h) (dulu -6px): buih dialog kini digantung dari
     bucu atas sprite, jadi apa-apa yang menolak sprite ke atas jalur nav akan
     menarik buih masuk sekali. */
  .companion-wrap{padding:var(--nav-h) 4px 4px 6px;}
  .companion-rig{width:min(clamp(96px,14vw,190px), calc(76dvh * 615 / 1145));}
  .companion-bubble{font-size:clamp(11px,1.5vw,14px); padding:6px 10px; max-width:min(200px,25vw);}
  /* Cikgu Aisyah pada skrin "siapa nama kamu" TIDAK terikat pada lajur peneman
     yang sempit — dia berkongsi satu skrin penuh dengan kotak nama sahaja, dan
     had 14vw di atas mengecilkannya kepada 111px pada 799x359 tanpa sebab.
     Di sini tinggi skrin yang jadi had, bukan lebar lajur. */
  .onboard-rig{width:min(clamp(110px,22vw,260px), calc(84dvh * 615 / 1145));}
}

/* ============ 4. SKRIN MENGAJAR — punca utama "sempit & tak kemas" ============ */

/* (a) Butang "Jom Kuiz!" kekalkan RUANGNYA walaupun tersembunyi, supaya saiz kad
       TIDAK melompat antara slaid. Atribut [hidden] biasanya display:none (gaya
       UA lalai) — di sini ditukar kepada visibility supaya ruang tetap dirizab. */
.teach-kuiz[hidden]{
  display:inline-block; visibility:hidden; pointer-events:none; animation:none;
}
/* (b) Kaki skrin (titik + Jom Kuiz) tak boleh dimampat keluar pandangan */
.teach-main{flex:1 1 0; min-height:0;}
.teach-dots{flex:0 0 auto;}
.teach-kuiz{flex:0 0 auto;}
.teach-card{min-height:0;}
/* (c) Kotak visual ialah sempadan sebenar — kandungan tak melimpah keluar kad */
.teach-visual{overflow:hidden;}

/* (d) Had saiz teks/gambar mengajar ikut TINGGI juga, bukan lebar sahaja.
       Inilah yang menghalang huruf besar terpotong pada skrin lebar-tapi-pendek. */
.teach-bigtext{font-size:clamp(48px,min(16vw,30dvh),230px);}
.teach-emoji{font-size:clamp(44px,min(14vw,26dvh),170px);}
.teach-html{font-size:clamp(32px,min(10vw,20dvh),120px);}
.teach-img{max-height:100%; max-width:100%; object-fit:contain;}
.teach-letterimg{min-height:0;}
.teach-letterimg-letters{flex:0 0 auto;}
.teach-letterimg-letters .up{font-size:clamp(38px,min(12vw,22dvh),170px);}
.teach-letterimg-letters .low{font-size:clamp(30px,min(9vw,17dvh),128px);}
.teach-letterimg-photo{flex:1 1 auto; min-height:0; max-height:100%; max-width:78%;}
.az-reference{font-size:clamp(20px,min(6.2vw,9dvh),64px);}

@media (max-height:560px){
  #screen-teach{padding:var(--nav-h) 6px 5px var(--companion-w); gap:3px;}
  /* Jalur rizab untuk butang Langkau (ia position:fixed) — cukup sekadar
     memastikan Langkau tidak bertindih bucu atas kad. */
  /* Langkau: pada skrin pendek ia kembali ke ALIRAN dalam .teach-topbar, bukan
     position:fixed. Sebab: fixed meletakkannya atas bucu kanan-atas kad (diukur:
     butang y 47-94 vs kad bermula y 79 — bertindih 15px). Dalam aliran, topbar
     ialah jalur penuh lebar kandungan dengan justify-content:flex-end, jadi
     butang duduk kemas di kanan DAN kad bermula di bawahnya. */
  /* .bubble-btn.teach-skip (bukan .teach-skip sahaja): peraturan .bubble-btn padat
     dalam bahagian 8 di bawah datang KEMUDIAN dengan kekhususan sama, jadi ia akan
     menang. Dua kelas = kekhususan lebih tinggi, jadi nilai di sini kekal. */
  .bubble-btn.teach-skip{
    position:static;
    font-size:clamp(11px,1.5vw,14px); padding:4px 12px; min-height:0;
    border-width:2px; box-shadow:0 3px 0 var(--edge), 0 5px 8px rgba(58,52,86,.18);
  }
  .teach-topbar{min-height:clamp(28px,7dvh,34px);}
  .teach-card{
    max-width:min(620px,74vw);
    border-radius:20px; border-width:3px; padding:6px 10px; gap:4px;
  }
  .teach-arrow{width:clamp(44px,6.4vw,60px); height:clamp(44px,6.4vw,60px); font-size:clamp(19px,2.6vw,26px);}
  .teach-main{gap:clamp(5px,1.2vw,12px);}
  /* line-height 1.25 asal menambah ~25% tinggi kotak emoji tanpa memberi apa-apa
     rupa; pada 780x330 itulah 3px terakhir yang terpotong. */
  .teach-emoji{line-height:1.05;}
  .teach-bigtext{line-height:1.02;}
  .teach-caption-row{padding:4px 9px; gap:6px; border-radius:12px;}
  .teach-caption{font-size:clamp(12px,1.8vw,16px); line-height:1.25;}
  .teach-replay{width:32px; height:32px; font-size:15px;}
  .teach-dots{gap:5px;}
  .teach-dot{width:8px; height:8px; border-width:1px;}
  .bubble-btn.teach-kuiz{font-size:clamp(13px,1.9vw,17px); padding:7px 22px; min-height:34px; margin-bottom:0; border-width:2px;}
  /* Kad pembuka kelas & chooser lawatan ulang */
  .teach-intro-card{padding:10px 18px; gap:6px; border-radius:20px; border-width:3px; max-width:min(520px,74vw);}
  .teach-intro-icon{font-size:clamp(30px,6dvh,48px);}
  .teach-intro-title{font-size:clamp(14px,2vw,20px);}
  .teach-intro-avatar-row{padding:5px 10px; gap:8px; border-radius:12px;}
  .teach-intro-avatar{font-size:clamp(20px,3.4dvh,30px);}
  .teach-intro-text{font-size:clamp(12px,1.8vw,16px); line-height:1.25;}
  .teach-chooser-card{padding:12px 18px; gap:9px; border-radius:20px; border-width:3px;}
  .teach-chooser-title{font-size:clamp(13px,1.9vw,17px);}
  .teach-chooser-btns{gap:12px;}
  .teach-choice{padding:8px 16px; gap:3px; border-radius:14px;}
  .tc-icon{font-size:clamp(22px,4.4dvh,34px);}
  .tc-label{font-size:clamp(11px,1.6vw,14px);}
}

/* ---- 5. SKRIN PETA LEVEL — senarai isi baki ruang, bukan max-height agakan ---- */
.level-list{
  flex:1 1 auto; min-height:0;
  max-height:calc(100dvh - var(--nav-h) - clamp(30px,6vh,52px));
}
@media (max-height:560px){
  #screen-levels{padding:var(--nav-h) 10px 6px var(--companion-w); gap:4px;}
  .level-list{
    max-height:none;              /* flex:1 yang tentukan; elak dua sumber saiz bergaduh */
    gap:clamp(6px,1.2vw,14px); padding:4px 3px 12px;
  }
  .level-list .station,
  .level-list.many .station{
    width:clamp(74px,10vw,120px); height:clamp(78px,11vw,128px);
    border-radius:16px; border-width:2px; gap:1px;
  }
  .level-list .station .st-icon,
  .level-list.many .station .st-icon{font-size:clamp(20px,3vw,32px);}
  .level-list .station .st-name,
  .level-list.many .station .st-name{font-size:clamp(9px,1.2vw,12px); line-height:1.15;}
  .level-list .station .st-num{font-size:clamp(9px,1vw,11px); padding:1px 9px;}
  .level-list .station .st-stars{font-size:9px; min-height:10px;}
  .unit-divider{font-size:clamp(10px,1.5vw,13px); padding:3px 4px 0; gap:8px;}
  .level-scroll-hint{width:34px; height:34px; font-size:18px; border-width:2px; bottom:3px;}
}

/* ---- 6. SKRIN PETA KELAS — jubin mesti muat 2 baris tanpa scroll ----
   Lebar grid dikepit oleh TINGGI yang ada: grid 4 lajur x 2 baris jubin hampir
   persegi, jadi tinggi grid ≈ lebar / 2 → lebar maksimum ≈ tinggi yang ada x 2.
   (Dulu 1.5 sebab grid 3 lajur.) Tanpa had ini, 2 baris jubin + tajuk melebihi
   400px dan peta jadi skrol — buruk untuk budak 4-6 yang tak scroll naluri. */
.map-grid{
  max-width:min(900px, 74vw, calc((100dvh - var(--nav-h) - 40px) * 2));
}
@media (max-height:560px){
  #screen-map{padding:calc(var(--nav-h) + 2px) 0 6px var(--companion-w); gap:2px;}
  .map-grid{gap:clamp(7px,1.4vw,16px); padding:0 1vw;}
  .map-btn-lock{font-size:clamp(28px,3.7vw,46px);}
  .map-tile-utama .map-btn-lock{font-size:clamp(54px,7vw,88px);}
}

/* ---- 7. SKRIN PERMAINAN ---- */
@media (max-height:560px){
  #screen-game{padding:var(--nav-h) 10px 8px; gap:4px;}
  .game-top{max-width:min(1180px,97vw);}
  .game-layout{max-width:min(1180px,97vw); gap:8px;}
  .game-center{border-radius:20px; border-width:3px;}
  .stars{font-size:clamp(13px,1.7vw,17px); min-width:44px;}
  .answer-label{font-size:clamp(10px,1.4vw,13px);}
  .choice-grid, .numpad, .sort-grid, .match-grid, .tf-pair{max-width:min(560px,66vw);}
}

/* ---- 8. SKRIN LAIN (raikan / tetapan / album / hadiah / laporan) ---- */
@media (max-height:560px){
  /* Kad menang: butang "Main Lagi / Peta" MESTI kelihatan tanpa scroll — budak 4-6
     tak scroll secara naluri. Jadi setiap elemen dalam kad diikat pada dvh. */
  #screen-win{padding:calc(var(--nav-h) - 8px) 12px 8px;}
  .win-card{padding:8px 18px; gap:4px; border-radius:22px; border-width:3px;
            max-height:calc(100dvh - var(--nav-h)); overflow-y:auto;}
  .win-actions{gap:8px;}
  .win-card .bubble-btn{font-size:clamp(13px,1.9vw,18px); padding:6px 16px; min-height:34px;}
  .ribbon-title{font-size:clamp(14px,2vw,19px); padding:4px 16px; border-width:2px;}
  .aisyah-big{width:clamp(48px,11dvh,80px); height:clamp(48px,11dvh,80px); border-width:3px;}
  .aisyah-big .aisyah-emoji{font-size:clamp(28px,7dvh,50px);}
  .win-stars{font-size:clamp(22px,6dvh,40px);}
  .win-msg{font-size:clamp(12px,1.8vw,16px); line-height:1.25; max-width:320px; margin:0;}
  .win-pearls{padding:2px 14px; font-size:clamp(12px,1.7vw,16px); border-width:2px;}
  .win-pearls .pearl-icon{width:clamp(16px,2.2vw,22px);}
  .win-sticker{padding:4px 14px; font-size:clamp(11px,1.6vw,14px); border-radius:12px;}
  .win-sticker img{width:clamp(28px,4.4vw,42px);}
  .win-upsell{padding:6px 14px; font-size:clamp(11px,1.6vw,14px);}
  #screen-settings, #screen-album, #screen-hadiah, #screen-laporan{padding-top:var(--nav-h);}
  .settings-panel, .album-wrap, .hadiah-wrap, .laporan-wrap{
    max-height:calc(100dvh - var(--nav-h) - 10px); overflow-y:auto;
  }
  .bubble-btn{font-size:clamp(13px,1.9vw,20px); padding:8px 22px; min-height:40px;}
  .welcome-content{padding:14px 24px; gap:12px; border-radius:20px;}
  .welcome-text{font-size:clamp(13px,1.9vw,18px); line-height:1.4;}
  .welcome-content::before{font-size:clamp(22px,4dvh,34px);}
}