/* ===== Mutiara Minda — LANDSCAPE-FIRST LAYOUT =====
   Design system ala game kanak-kanak top-tier (rujukan: Math Kids by RV AppStudios):
   font bulat tebal, palet candy terang, butang chunky "tekan" 3D, panel kad krem. */

/* Font sebenar dihoskan LOKAL (offline-safe) — sebelum ini "Baloo 2" dinamakan
   tapi tak pernah dimuatkan, menyebabkan fallback Comic Sans. */
@font-face{
  font-family:"Baloo 2";
  src:url("../assets/fonts/baloo2-var.woff2") format("woff2");
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}

:root{
  /* Palet candy (ala Math Kids): setiap warna ada pasangan gelap utk tepi "tekan" */
  --cyan:#29C5F6;   --cyan-d:#0E8FC7;
  --green:#58C93A;  --green-d:#379623;
  --yellow:#FFC93C; --yellow-d:#E09A00;
  --orange:#FF8A3D; --orange-d:#D96314;
  --purple:#A855F7; --purple-d:#7E22CE;
  --magenta:#F45E9C;--magenta-d:#C93A75;
  --red:#F45B5B;    --red-d:#C93B3B;
  --sky:#8FDFFF; --grass:#8BC34A;
  --cream:#FFF9EC; --panel:#FFFFFF;
  --ink:#3A3456; --ink-soft:#6B6394; --white:#ffffff;
  --panel-border:#7DD3FC;
  --shadow: 0 4px 0 rgba(0,0,0,.14), 0 10px 18px rgba(58,52,86,.18);
  --shadow-soft: 0 6px 16px rgba(58,52,86,.14);
  /* Ruang Cikgu Aisyah (peneman tetap) — SAMA besar di semua skrin, macam skrin Mula2 Start */
  --companion-w: clamp(210px,30vw,430px);
  /* Tinggi nav bar sejagat (Balik + Menu) — skrin kena beri ruang supaya kandungan tak bertindih */
  --nav-h: clamp(64px,10vh,84px);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{height:100%; width:100%; margin:0; padding:0;}
body{
  height:100%; width:100%; margin:0; padding:0;
  font-family:"Baloo 2","Segoe UI Rounded","Segoe UI",system-ui,sans-serif;
  color:var(--ink); background:var(--grass);
  overflow:hidden; user-select:none;
  letter-spacing:.01em;
}
#app{position:fixed; inset:0; width:100vw; height:100vh; height:100dvh; overflow:hidden;}

/* ---- Portrait rotate overlay ---- */
#rotateOverlay{
  display:none; position:fixed; inset:0; z-index:9999;
  background:#0f172a; color:#fff;
  flex-direction:column; align-items:center; justify-content:center; gap:16px;
}
.rotate-icon{font-size:64px;}
.rotate-content p{font-size:20px; font-weight:800; text-align:center;}
@media (orientation:portrait) and (max-width:600px){
  #rotateOverlay{display:flex;}
  #app{display:none;}
}

/* ---- Skrin toggle ---- */
.screen{
  position:absolute; inset:0;
  display:none; flex-direction:column; align-items:center;
  text-align:center; animation:fadeIn .3s ease;
  z-index:0;
}
.screen.active{display:flex; z-index:5;}
@keyframes fadeIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}}

/* ---- Butang bubble — chunky "candy press" ala Math Kids ----
   Resipi: gradien terang atas→bawah + TEPI BAWAH gelap tebal (kesan tekan 3D)
   + outline putih tebal + kilauan atas. Tekan = turun, tepi bawah mengecil. */
.bubble-btn{
  font-family:inherit; font-weight:800; color:#fff;
  font-size:clamp(16px,2.5vw,24px);
  border:3px solid #fff; border-radius:999px;
  padding:12px 30px; min-height:52px; min-width:52px;
  cursor:pointer; position:relative;
  text-shadow:0 2px 0 rgba(0,0,0,.22);
  --edge:var(--green-d);
  box-shadow:0 6px 0 var(--edge), 0 12px 20px rgba(58,52,86,.22);
  transition:transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
.bubble-btn::before{
  content:""; position:absolute; left:10%; right:10%; top:7%; height:32%;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.05));
  border-radius:999px; pointer-events:none;
}
.bubble-btn:hover{filter:brightness(1.06);}
.bubble-btn:active{
  transform:translateY(5px);
  box-shadow:0 1px 0 var(--edge), 0 4px 8px rgba(58,52,86,.2);
}
.btn-green{background:linear-gradient(180deg,#8BE86A,var(--green)); --edge:var(--green-d);}
.btn-cyan{background:linear-gradient(180deg,#6ADCFF,var(--cyan)); --edge:var(--cyan-d);}
.btn-yellow{background:linear-gradient(180deg,#FFDF70,var(--yellow)); --edge:var(--yellow-d); color:#7a5200; text-shadow:0 1px 0 rgba(255,255,255,.5);}
.btn-purple{background:linear-gradient(180deg,#C99BFB,var(--purple)); --edge:var(--purple-d);}
.btn-orange{background:linear-gradient(180deg,#FFAE6E,var(--orange)); --edge:var(--orange-d);}

.ribbon{
  background:linear-gradient(180deg,#FFDF70,var(--yellow));
  color:#8a5a00; font-weight:800; padding:10px 26px; border-radius:16px;
  border:3px solid #fff;
  box-shadow:0 4px 0 var(--yellow-d), 0 8px 16px rgba(58,52,86,.2);
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}
.ribbon-small{font-size:clamp(14px,2.2vw,20px); padding:8px 22px;}

/* ======== SKRIN SELAMAT DATANG (gerbang muzik + nasihat ibu bapa) ======== */
#screen-welcome{
  padding:20px; overflow:hidden; background:#0f172a; justify-content:center; align-items:center;
}
.welcome-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(circle 2px at 15% 20%, rgba(255,255,255,.7) 40%, transparent 60%),
    radial-gradient(circle 2px at 80% 15%, rgba(255,255,255,.6) 40%, transparent 60%),
    radial-gradient(circle 3px at 35% 70%, rgba(255,255,255,.5) 40%, transparent 60%),
    radial-gradient(circle 2px at 65% 55%, rgba(255,255,255,.65) 40%, transparent 60%),
    radial-gradient(circle 2px at 90% 75%, rgba(255,255,255,.55) 40%, transparent 60%),
    radial-gradient(circle 2px at 8% 85%, rgba(255,255,255,.6) 40%, transparent 60%),
    linear-gradient(160deg,#0f172a 0%,#1e293b 55%,#0f172a 100%);
  animation:twinkle 3.6s ease-in-out infinite;
}
.welcome-content{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:clamp(20px,4vh,36px);
  max-width:min(680px,88vw);
  background:linear-gradient(180deg,rgba(255,252,244,.97),rgba(255,244,220,.95));
  border-radius:28px; border:4px solid #fff;
  padding:clamp(24px,5vh,44px) clamp(26px,5vw,52px);
  box-shadow:0 8px 0 rgba(224,154,0,.3), 0 20px 44px rgba(0,0,0,.4);
  animation:winCardIn .5s cubic-bezier(.34,1.56,.64,1);
}
.welcome-content::before{
  content:"🌙✨"; font-size:clamp(30px,5vw,46px); line-height:1;
}
.welcome-text{
  margin:0; color:var(--ink); text-align:center; font-weight:700;
  font-size:clamp(16px,2.6vw,24px); line-height:1.6;
}
.welcome-btn{font-size:clamp(18px,2.6vw,26px); padding:14px 48px;}
body[data-screen="welcome"] .global-nav,
body[data-screen="welcome"] .audio-unlock-nudge{display:none !important;}

/* ======== SKRIN MENU — CENTERED LOGO ======== */
#screen-menu{padding:0; overflow:hidden;}
.menu-bg{
  position:absolute; inset:0; z-index:0;
  background:url('../assets/bg_menu_premium.png') center/cover no-repeat;
  background-color:#7EC8F2;
  animation:menuBgDrift 24s ease-in-out infinite alternate;
}
@keyframes menuBgDrift{from{transform:scale(1)} to{transform:scale(1.05)}}
.menu-overlay{
  position:absolute; inset:0; z-index:1;
  background:radial-gradient(ellipse at 50% 42%, rgba(0,0,0,0) 45%, rgba(10,30,60,.22) 100%);
}
/* Kelipan bintang halus di udara */
.menu-overlay::before, .menu-overlay::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle 3px at 12% 22%, rgba(255,255,255,.95) 40%, transparent 60%),
    radial-gradient(circle 2px at 78% 16%, rgba(255,255,255,.9) 40%, transparent 60%),
    radial-gradient(circle 2px at 30% 60%, rgba(255,255,220,.8) 40%, transparent 60%),
    radial-gradient(circle 3px at 88% 55%, rgba(255,255,255,.85) 40%, transparent 60%),
    radial-gradient(circle 2px at 55% 12%, rgba(255,255,220,.9) 40%, transparent 60%);
  animation:twinkle 3.2s ease-in-out infinite;
}
.menu-overlay::after{
  background-image:
    radial-gradient(circle 2px at 22% 40%, rgba(255,255,255,.9) 40%, transparent 60%),
    radial-gradient(circle 3px at 65% 30%, rgba(255,255,220,.85) 40%, transparent 60%),
    radial-gradient(circle 2px at 42% 20%, rgba(255,255,255,.8) 40%, transparent 60%),
    radial-gradient(circle 2px at 92% 35%, rgba(255,255,220,.9) 40%, transparent 60%);
  animation-delay:1.6s;
}
@keyframes twinkle{0%,100%{opacity:.15} 50%{opacity:1}}

/* ---- Mutiara terapung (menu sahaja) ----
   "Mutiara" = pearl, jadi motif ni terus terikat dgn nama game. Gelembung naik
   perlahan memberi kedalaman & pergerakan pd skrin yg kalau tidak statik — ini
   skrin PERTAMA yg ibu bapa nampak. Semuanya CSS tulen (0 aset, 0 kos muat turun).
   Tempoh sengaja berbeza (13/17/21s) supaya ia tak pernah berbaris serentak. */
.menu-pearls{position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden;}
.menu-pearls i{
  position:absolute; bottom:-8%;
  width:var(--d); height:var(--d);
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%, #fff 0 12%, rgba(255,255,255,.75) 22%, transparent 55%),
    linear-gradient(150deg, #FFF6FB 0%, #FDE7F1 40%, #DCEBFF 70%, #EFE4FF 100%);
  box-shadow:0 2px 6px rgba(120,90,140,.18), inset 0 -3px 6px rgba(190,160,200,.35);
  opacity:0;
  animation:pearlRise var(--t) linear var(--delay) infinite;
}
@keyframes pearlRise{
  0%   {transform:translateY(0) translateX(0) scale(.9); opacity:0;}
  12%  {opacity:.85;}
  50%  {transform:translateY(-52vh) translateX(var(--drift)) scale(1);}
  88%  {opacity:.7;}
  100% {transform:translateY(-108vh) translateX(0) scale(.92); opacity:0;}
}
@media (prefers-reduced-motion:reduce){ .menu-pearls{display:none;} }

.cikgu-aisyah-video{display:none;}
.menu-center{
  position:relative; z-index:10;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  width:100%; height:100%;
  gap:clamp(6px,1.5vh,16px);
  padding:20px;
}
/* ---- Logo + aura + sparkle ----
   Latar menu sangat sibuk (rak, mainan, pelangi), jadi logo perlu DIPISAHKAN dari
   latar, bukan sekadar diberi kilauan. Tiga lapis kerja bersama:
     1. aura (::before) — cahaya lembut yg menolak kesibukan latar ke belakang
     2. bayang BERLAPIS pd logo — sentuh + ambien + jauh = kedalaman sebenar
     3. sparkle — hiasan halus
   Aura kekal DIAM manakala logo terapung naik-turun di atasnya; itu yg beri rasa
   logo terangkat, kalau aura ikut sekali ia nampak melekat pd latar semula. */
.menu-logo-wrap{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  isolation:isolate;              /* kurung z-index dlm pembalut ni sahaja */
}
.menu-logo-wrap::before{
  content:""; position:absolute; z-index:0;
  left:50%; top:52%; transform:translate(-50%,-50%);
  width:116%; height:145%;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(255,253,244,.92) 0%,
    rgba(255,247,224,.62) 32%,
    rgba(255,235,198,.26) 54%,
    rgba(255,228,190,.08) 68%,
    transparent 76%);
  filter:blur(4px);
  pointer-events:none;
  animation:logoGlow 5.2s ease-in-out infinite;   /* tempoh beza dr logoFloat (4.4s) */
}
@keyframes logoGlow{0%,100%{opacity:.82; transform:translate(-50%,-50%) scale(1)}
                    50%   {opacity:1;   transform:translate(-50%,-50%) scale(1.05)}}

.menu-logo-img{
  position:relative; z-index:1;
  /* Hadkan tinggi melalui LEBAR, bukan max-height. `width` eksplisit + `max-height`
     bergaduh: tinggi dikepit tapi lebar kekal, jadi logo TERPICIT (diukur: nisbah
     fail 2.072 dipapar jadi 2.273 = herot ~10%).
     44vh (bukan 55vh) sebab logo BERKONGSI tinggi skrin dgn 2 butang: pd 1024x480
     55vh membuatkan jumlah kandungan 501px dlm skrin 480px. Belanjawan tinggi:
     logo 44vh + MULA 17vh + TETAPAN 14vh + jurang/padding ~50px. */
  width:min(clamp(400px,75vw,900px), calc(44vh * 1500 / 724));
  height:auto;
  /* Bayang berlapis: rapat+gelap utk "sentuh", sederhana utk ambien, luas+lembut
     utk jarak. Satu bayang tunggal nampak rata; tiga lapis inilah yg buat ia timbul. */
  filter:
    drop-shadow(0 2px 1px rgba(120,80,50,.20))
    drop-shadow(0 8px 14px rgba(120,85,55,.28))
    drop-shadow(0 20px 30px rgba(90,60,40,.22));
  animation:logoIn .7s cubic-bezier(.34,1.56,.64,1), logoFloat 4.4s ease-in-out .7s infinite;
}

/* Sparkle 4-bucu (clip-path, bukan imej). --s saiz, --t tempoh, --delay mula. */
.menu-logo-spark{
  position:absolute; z-index:2;
  width:var(--s); height:var(--s);
  margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);  /* letak ikut PUSAT, bukan bucu */
  background:#fff;
  clip-path:polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
  filter:drop-shadow(0 0 5px rgba(255,236,170,.95));
  opacity:0; pointer-events:none;
  animation:sparkTwinkle var(--t) ease-in-out var(--delay) infinite;
}
@keyframes sparkTwinkle{
  0%,100%{opacity:0;   transform:scale(.35) rotate(0deg);}
  45%    {opacity:.95; transform:scale(1)   rotate(80deg);}
  60%    {opacity:.75; transform:scale(.9)  rotate(100deg);}
}
@media (prefers-reduced-motion:reduce){
  .menu-logo-spark{display:none;}
  .menu-logo-wrap::before{animation:none;}
}
@keyframes logoIn{from{opacity:0;transform:scale(.6) rotate(-5deg)} to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes logoFloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)}}
.menu-buttons{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(8px,1.6vh,18px);
}
/* Satu <button> = satu imej sendiri, jadi hover/tekan hanya kesan butang itu.
   (Dulu satu imej dikongsi 2 butang -> mustahil nak animasi seorang diri.) */
.menu-btn{
  background:none; border:0; padding:0; margin:0;
  cursor:pointer; line-height:0;
  /* Lebar juga dihadkan oleh TINGGI skrin (nisbah butang 2.206). Tanpa min() ni,
     butang bersaiz ikut vw sahaja — pd skrin lebar-tapi-pendek ia jadi besar dan
     menolak kandungan keluar skrin. Sama pola dgn butang "Dengar Soalan". */
  width:min(clamp(180px,22vw,320px), calc(14vh * 2.206));
  -webkit-tap-highlight-color:transparent;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1), filter .16s ease;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.22));
}
.menu-btn img{width:100%; height:auto; display:block; user-select:none; -webkit-user-drag:none;}
.menu-btn:hover{
  transform:scale(1.06) translateY(-2px);
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.28)) drop-shadow(0 0 16px rgba(255,225,150,.8));
}
.menu-btn:active{transform:scale(.96) translateY(2px); filter:drop-shadow(0 3px 6px rgba(0,0,0,.3));}
.menu-btn:focus-visible{outline:4px solid #fff; outline-offset:6px; border-radius:999px;}

/* MULA sedikit lebih besar + berdenyut halus: ia tindakan UTAMA, jadi mata patut
   jatuh ke situ dahulu. TETAPAN sengaja tenang & tidak beranimasi sendiri. */
.menu-btn--mula{
  width:min(clamp(210px,26vw,380px), calc(17vh * 2.230));
  animation:menuBtnIn .5s cubic-bezier(.34,1.56,.64,1) .35s both,
            mulaPulse 2.8s ease-in-out 1.2s infinite;
}
.menu-btn--tetapan{
  animation:menuBtnIn .5s cubic-bezier(.34,1.56,.64,1) .5s both;
}
/* Denyut berhenti masa hover supaya ia tak bergaduh dgn kesan hover */
.menu-btn--mula:hover{animation:menuBtnIn .5s cubic-bezier(.34,1.56,.64,1) .35s both;}
@keyframes menuBtnIn{from{opacity:0; transform:translateY(18px) scale(.86)} to{opacity:1; transform:translateY(0) scale(1)}}
@keyframes mulaPulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.035)}}

@media (prefers-reduced-motion:reduce){
  .menu-btn--mula, .menu-btn--tetapan{animation:none;}
  .menu-logo-img{animation:none;}
}

/* ======== SKRIN PETA KELAS — SVG ELEMENTS ======== */
#screen-map{
  padding:calc(var(--nav-h) + 6px) 0 12px var(--companion-w); overflow-y:auto; overflow-x:hidden;
  background:url('../assets/bg_outdoor.png') center/cover no-repeat, #87CEEB;
  justify-content:flex-start; align-items:center; gap:clamp(4px,1vh,12px);
}
/* Tajuk "Jom Belajar!" — sebaris dengan nav sejagat.
   Sepatutnya berpusat pada JALUR KANDUNGAN (kawasan kanan peneman) supaya sejajar dgn
   grid kategori; `left:50%` (tengah viewport) buat ia tersasar ~143px ke kiri drpd blok
   tile, sebab #screen-map ada padding-left var(--companion-w).

   TAPI tajuk berkongsi baris dgn nav kanan (mutiara + Menu), jadi pusat jalur tak selalu
   muat: pd 760px lebar, tajuk perlu duduk antara butang Balik (tamat ~122) dan nav kanan
   (mula ~556) — pusat maks ~339 sedangkan pusat jalur 494. Jadi min() di bawah: guna
   pusat jalur bila ada ruang (skrin >=~1100px sejajar sempurna dgn tile), dan anjak ke
   kiri bila tak cukup. 364px = offset nav kanan (~235) + jurang + separuh lebar tajuk
   maksimum (~115 bila --nav-h penuh 84px) — diukur, bukan diagak. */
.map-title{
  position:fixed; top:clamp(6px,1.2vh,12px);
  left:min(calc(var(--companion-w) + (100vw - var(--companion-w)) / 2), calc(100vw - 364px));
  transform:translateX(-50%);
  z-index:16; height:calc(var(--nav-h) - clamp(14px,2.4vh,22px)); width:auto;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.25));
}
.map-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,2vw,26px);
  max-width:min(900px,74vw); width:100%;
  padding:0 2vw;
  align-items:center;
  margin:0 auto;
}
.map-btn{
  width:100%; height:auto; cursor:pointer;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.15));
  transition:transform .15s ease, filter .15s ease;
  animation:tileIn .4s ease-out both;
}
.map-btn:hover{
  transform:scale(1.12);
  filter:drop-shadow(0 8px 20px rgba(255,200,0,.5));
}
.map-btn:active{
  transform:scale(.92);
}
.map-btn.locked{
  filter:grayscale(.35) brightness(.75) saturate(.7) drop-shadow(0 3px 6px rgba(0,0,0,.1));
  cursor:not-allowed;
}
.map-btn.locked:hover{transform:none; filter:grayscale(.35) brightness(.75) saturate(.7);}
/* Lock icon overlay */
.map-btn-wrap{position:relative; display:flex; align-items:center; justify-content:center;}
.map-btn-lock{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:clamp(28px,3.5vw,48px);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));
  pointer-events:none; z-index:1;
}
.map-btn:nth-child(1){animation-delay:.03s} .map-btn:nth-child(2){animation-delay:.06s}
.map-btn:nth-child(3){animation-delay:.09s} .map-btn:nth-child(4){animation-delay:.12s}
.map-btn:nth-child(5){animation-delay:.15s} .map-btn:nth-child(6){animation-delay:.18s}
.map-btn:nth-child(7){animation-delay:.21s} .map-btn:nth-child(8){animation-delay:.24s}
.map-btn:nth-child(9){animation-delay:.27s} .map-btn:nth-child(10){animation-delay:.3s}
.map-btn:nth-child(11){animation-delay:.33s} .map-btn:nth-child(12){animation-delay:.36s}
.map-btn:nth-child(13){animation-delay:.39s} .map-btn:nth-child(14){animation-delay:.42s}
.map-btn:nth-child(15){animation-delay:.45s}
@keyframes tileIn{from{opacity:0;transform:translateY(20px) scale(.85)} to{opacity:1;transform:translateY(0) scale(1)}}


/* ======== SKRIN PETA LEVEL — LANDSCAPE ======== */
#screen-levels{
  padding:var(--nav-h) 20px 12px var(--companion-w); gap:10px; justify-content:center;
  background:url('../assets/bg_classroom_new.png') center/cover no-repeat;
  background-color:#4ec5d4;
}
/* Tudung lembut supaya stesen menonjol atas latar yang meriah */
#screen-levels::before{
  content:""; position:absolute; inset:0;
  background:rgba(255,255,255,.22); pointer-events:none;
}
/* Tajuk kelas — FIXED sebaris dgn nav sejagat (sama corak dgn #teachTitle), supaya
   kedudukan tajuk TAK melompat antara skrin, dan senarai dapat lebih ruang menegak. */
#classTitle{
  position:fixed; top:clamp(10px,1.8vh,18px);
  left:50%; transform:translateX(-50%);
  z-index:16; margin:0;
  font-size:clamp(15px,2.2vw,21px); padding:9px 24px;
  white-space:nowrap;
}
.level-list{
  position:relative; z-index:2;
  display:flex; flex-wrap:wrap; justify-content:center; align-content:flex-start; align-items:flex-start;
  gap:clamp(10px,1.8vw,22px); width:100%;
  /* Kategori kini ada 6-25 kelas — benarkan scroll menegak dalam senarai.
     Tajuk kini fixed di baris nav, jadi rizab menegak lebih kecil = lebih stesen nampak. */
  max-height:calc(100vh - var(--nav-h) - clamp(30px,6vh,52px));
  overflow-y:auto; overscroll-behavior:contain;
  padding:6px 4px 18px;
}
.level-list::-webkit-scrollbar{width:10px;}
.level-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.7); border-radius:999px;}
.level-list::-webkit-scrollbar-track{background:rgba(0,0,0,.08); border-radius:999px;}
/* Fade tepi bawah bila masih ada kandungan tersembunyi (kelas .fade-bottom oleh map.js) */
.level-list.fade-bottom{
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 48px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 48px),transparent);
}
/* Anak panah melantun "lagi di bawah" — hilang bila scroll habis */
.level-scroll-hint{
  position:absolute; bottom:clamp(6px,1.4vh,14px);
  left:calc(var(--companion-w) + (100% - var(--companion-w)) / 2); transform:translateX(-50%);
  z-index:3; width:46px; height:46px; border-radius:50%;
  border:3px solid #fff; cursor:pointer; font-family:inherit;
  background:linear-gradient(180deg,#6ADCFF,var(--cyan));
  color:#fff; font-size:24px; font-weight:900; line-height:1;
  box-shadow:0 4px 0 var(--cyan-d), 0 8px 14px rgba(58,52,86,.22);
  animation:hintBounce 1.6s ease-in-out infinite;
}
.level-scroll-hint[hidden]{display:none;}
@keyframes hintBounce{0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(6px)}}
/* Pembahagi Unit — pecahkan 25 kelas kpd bab (data: cls.units dlm cat01) */
.unit-divider{
  flex:0 0 100%; width:100%;
  display:flex; align-items:center; gap:12px;
  color:#fff; font-weight:900; font-size:clamp(13px,1.9vw,17px);
  text-shadow:0 1px 3px rgba(0,0,0,.4);
  padding:8px 6px 0;
}
.unit-divider::before, .unit-divider::after{
  content:""; flex:1; height:3px; border-radius:2px;
  background:rgba(255,255,255,.55);
}
/* Cip kemajuan dlm tajuk kelas — "⭐ 3/25" */
.title-chip{
  display:inline-block; margin-left:8px; padding:2px 12px;
  border-radius:999px; background:rgba(255,255,255,.9);
  font-size:.72em; vertical-align:middle;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.1);
}
@media (prefers-reduced-motion:reduce){ .level-scroll-hint{animation:none;} }
/* Kategori panjang (>5 kelas): stesen dikecilkan supaya lebih muat sekali pandang */
.level-list.many .station{
  width:clamp(92px,12vw,150px); height:clamp(100px,13.5vw,160px);
}
.level-list.many .station .st-icon{font-size:clamp(26px,3.6vw,40px);}
.level-list.many .station .st-name{font-size:clamp(11px,1.4vw,15px);}
.station{
  position:relative; /* utk sinar ::after (glow stesen siap) */
  width:clamp(110px,16vw,200px); height:clamp(120px,18vw,210px);
  border-radius:22px; border:3px solid #fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; cursor:pointer; color:#fff; font-weight:800;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--cls-color,#58C93A) 55%,#fff),
    var(--cls-color,#58C93A));
  box-shadow:0 6px 0 color-mix(in srgb, var(--cls-color,#58C93A) 62%,#000),
    0 12px 20px rgba(58,52,86,.22),
    inset 0 2px 3px rgba(255,255,255,.35);
  transition:transform .1s ease, box-shadow .1s ease;
  animation:tileIn .4s ease-out both;
}
.station:nth-child(1){animation-delay:.05s} .station:nth-child(2){animation-delay:.1s}
.station:nth-child(3){animation-delay:.15s} .station:nth-child(4){animation-delay:.2s}
.station:nth-child(5){animation-delay:.25s}
.station:not(.locked):hover{
  transform:translateY(-6px) scale(1.04);
  box-shadow:0 12px 0 color-mix(in srgb, var(--cls-color,#58C93A) 62%,#000),
    0 20px 30px rgba(58,52,86,.28),
    inset 0 2px 3px rgba(255,255,255,.35);
}
.station:not(.locked):active{
  transform:translateY(4px) scale(.97);
  box-shadow:0 1px 0 color-mix(in srgb, var(--cls-color,#58C93A) 62%,#000),
    0 4px 8px rgba(58,52,86,.18),
    inset 0 2px 3px rgba(255,255,255,.35);
}
.station .st-icon{font-size:clamp(32px,5vw,52px); filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));}
.station .st-name{font-size:clamp(12px,1.8vw,18px); text-shadow:0 1px 3px rgba(0,0,0,.4); text-align:center;}
.station .st-stars{font-size:12px; min-height:14px;}
.station .st-num{
  font-size:clamp(10px,1.2vw,14px); background:rgba(255,255,255,.85); color:var(--cls-color,#22A30f);
  border-radius:999px; padding:2px 14px; font-weight:900;
}
.station.locked{
  background:linear-gradient(180deg,#C4CBD8,#9AA5B8);
  border-color:#fff; cursor:not-allowed;
  box-shadow:0 6px 0 #6E7A90, 0 10px 16px rgba(58,52,86,.16);
}
.station.locked .st-num{color:#7C8699; background:rgba(255,255,255,.6);}
.station.locked.shake{animation:stationShake .4s cubic-bezier(.36,.07,.19,.97);}
@keyframes stationShake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-6px) rotate(-2deg);}
  40%{transform:translateX(5px) rotate(2deg);}
  60%{transform:translateX(-4px) rotate(-1deg);}
  80%{transform:translateX(3px);}
}
.station.done{
  outline:4px solid var(--yellow); outline-offset:3px;
  animation:tileIn .4s ease-out both;
}
/* Sinar berdenyut — dulu meng-animate box-shadow pd .station.done (repaint tiap frame,
   pada SETIAP stesen siap = jerky). Kini box-shadow STATIK pd ::after, cuma OPACITY yg
   di-animate → dikendali GPU (composited), tiada repaint per frame. */
.station.done::after{
  content:""; position:absolute; inset:-3px; border-radius:24px; pointer-events:none;
  box-shadow:0 0 14px 5px rgba(255,201,60,.6);
  opacity:0; animation:stationDoneGlow 2.4s ease-in-out .4s infinite;
}
@keyframes stationDoneGlow{0%,100%{opacity:0} 50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .station.locked.shake, .station.done{animation:tileIn .01s linear both;}
  .station.done::after{animation:none; opacity:.5;}
}

/* ======== SKRIN PERMAINAN — LANDSCAPE ======== */
#screen-game{
  background:url('../assets/bg_classroom_new.png') center/cover no-repeat;
  background-color:#67E8F9;
  padding:var(--nav-h) 20px 16px; gap:8px; justify-content:flex-start;
}
/* Bar atas gameplay — tajuk level kini FIXED tengah baris nav (lihat #levelTitle),
   jadi bar ni tinggal bintang sahaja, dijajar kanan. */
.game-top{
  display:flex; align-items:center; gap:10px; width:100%;
  max-width:min(1180px,94vw); justify-content:flex-end;
}
#levelTitle{
  position:fixed; top:clamp(10px,1.8vh,18px);
  left:50%; transform:translateX(-50%);
  z-index:16; margin:0;
  white-space:nowrap;
}
.stars{font-size:clamp(16px,2.2vw,22px); min-width:60px; text-align:right; letter-spacing:2px;}
.game-layout{
  display:flex; flex:1; min-height:0; width:100%;
  max-width:min(1180px,94vw); gap:14px; align-items:center;
}
.game-left{
  flex:0 0 var(--companion-w); align-self:stretch;
}
.game-center{
  flex:1; min-width:0; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:clamp(10px,1.8vh,18px);
  overflow-y:auto; padding:clamp(14px,2.4vh,26px) clamp(18px,3vw,34px);
  background:linear-gradient(180deg, rgba(255,252,244,.92), rgba(255,247,230,.9));
  border-radius:30px;
  border:4px solid #fff; box-shadow:0 6px 0 rgba(224,154,0,.25), 0 14px 26px rgba(58,52,86,.18);
}
.instruction{
  background:linear-gradient(180deg,#FFFFFF,#F2F8FF);
  border:3px solid #fff; border-radius:18px;
  padding:14px 22px; font-size:clamp(20px,3vw,30px); font-weight:800; color:var(--ink);
  box-shadow:0 4px 0 #C9D8EC, 0 8px 14px rgba(58,52,86,.12);
  width:100%;
}
/* Kotak soalan — panel isi lembut, BUKAN sempadan putus-putus. Garis dashed dlm
   bahasa visual = "placeholder/zon larik", satu-satunya elemen yg tak ikut gaya
   candy game ni. Panel legap + bayang dalam halus selaras dgn kad mengajar. */
.stage{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:12px; min-height:clamp(110px,20vh,180px); width:100%;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,250,238,.8));
  border-radius:20px; padding:16px;
  border:3px solid #fff;
  box-shadow:inset 0 2px 8px rgba(58,52,86,.07), 0 2px 0 rgba(255,255,255,.65);
  flex:1; align-content:center;
}
.group{
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center; align-items:center;
  padding:8px; border-radius:14px; background:rgba(255,255,255,.55); border:2px solid #fff;
}
.op-sign{font-size:clamp(32px,4.6vw,44px); font-weight:900; color:var(--purple-d); padding:0 4px;}

/* Butang "Dengar Soalan" besar — khusus kuiz level.kuizDengar (cth Nama Huruf A-Z),
   isi stage kosong supaya budak boleh tekan ulang dengar soalan suara Cikgu Aisyah. */
.kuiz-dengar-btn{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  border:none; border-radius:26px; cursor:pointer; font-family:inherit;
  background:linear-gradient(180deg,#FFC93C,#FFA53C);
  box-shadow:0 6px 0 #d98518, 0 10px 20px rgba(0,0,0,.18);
  color:#fff; padding:clamp(16px,3vh,32px) clamp(36px,6vw,64px);
  transition:transform .12s ease;
}
.kuiz-dengar-btn:hover{transform:scale(1.05);}
.kuiz-dengar-btn:active{transform:scale(.95) translateY(4px); box-shadow:0 2px 0 #d98518;}
/* Ikon guna min(vw,vh): saiznya menentukan TINGGI butang, jadi ia mesti mengalah pada
   tinggi skrin juga. Dulu `8vw` sahaja — pd skrin lebar-tapi-pendek (cth 1600x670)
   8vw = 128px, jadi butang jadi 168px dlm stage yang cuma ada 102px dan terkeluar
   sempadan. min() menjadikannya betul pd SEMUA saiz, bukan bergantung breakpoint. */
.kuiz-dengar-icon{font-size:clamp(34px,min(8vw,8vh),76px); line-height:1;}
.kuiz-dengar-btn.playing .kuiz-dengar-icon{animation:dengarPulse .6s ease infinite;}
@keyframes dengarPulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.18)}}
.kuiz-dengar-label{font-size:clamp(13px,min(2.4vw,2.6vh),22px); font-weight:900;}

/* Rujukan A-Z penuh — khusus soalan susun abjad (bm-14) supaya budak boleh
   tengok balik urutan huruf semasa jawab. */
.az-reference{
  display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(6px,1.4vw,16px);
  font-size:clamp(36px,6.2vw,64px); font-weight:900; color:#1f2a44;
  letter-spacing:2px; line-height:1.5; max-width:94%;
}
.obj{
  font-size:clamp(40px,6.5vw,60px); cursor:pointer; line-height:1; position:relative;
  transition:transform .12s ease; filter:drop-shadow(0 2px 2px rgba(0,0,0,.2));
}
.obj.counted::after{
  content:attr(data-n); position:absolute; top:-10px; right:-6px;
  font-size:13px; background:var(--magenta); color:#fff; font-weight:800;
  border-radius:999px; padding:0 6px; border:2px solid #fff;
}
.obj.gone{opacity:.25; filter:grayscale(1);}
.obj.pop{animation:pop .3s ease;}
@keyframes pop{0%{transform:scale(1)} 40%{transform:scale(1.3)} 100%{transform:scale(1)}}

.answer-label{font-weight:800; color:var(--ink-soft); font-size:clamp(14px,2vw,19px);}
.numpad{
  display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(8px,1.3vw,16px);
  max-width:560px; width:100%;
}
.num-btn{
  font-family:inherit; font-weight:800; color:#fff; font-size:clamp(22px,3.4vw,34px);
  aspect-ratio:1/1; border:3px solid #fff; border-radius:18px; cursor:pointer;
  background:linear-gradient(180deg,#8BE86A,var(--green));
  box-shadow:0 5px 0 var(--green-d), 0 9px 14px rgba(58,52,86,.18);
  text-shadow:0 2px 0 rgba(0,0,0,.2);
  transition:transform .08s ease, box-shadow .08s ease, filter .12s ease;
  min-width:56px; min-height:56px;
}
.num-btn:hover{filter:brightness(1.06);}
.num-btn:active{transform:translateY(4px); box-shadow:0 1px 0 var(--green-d), 0 3px 6px rgba(58,52,86,.15);}
/* Numpad 11-20 (4 baris): butang lebih pendek supaya keseluruhan muat dalam frame */
.numpad--wide{max-width:600px; gap:clamp(5px,0.9vw,10px);}
.numpad--wide .num-btn{
  aspect-ratio:auto; height:clamp(42px,6.4vh,60px); min-height:42px;
  font-size:clamp(17px,2.4vw,26px);
}
.num-btn.correct{background:linear-gradient(180deg,#FFDF70,var(--yellow)); box-shadow:0 5px 0 var(--yellow-d), 0 9px 14px rgba(58,52,86,.18); animation:bounce .5s ease;}
.num-btn.wrong{animation:shake .4s ease;}
@keyframes bounce{0%,100%{transform:translateY(0)} 30%{transform:translateY(-12px)} 60%{transform:translateY(-4px)}}
@keyframes shake{0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)}}

.feedback{font-size:clamp(20px,3vw,26px); font-weight:800; min-height:24px; color:var(--ink-soft);}
.feedback.good{color:var(--green-d);}
.feedback.bad{color:var(--magenta-d);}
.btn-next{margin-top:2px;}

/* ---- Answer types ---- */
.choice-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; max-width:520px; width:100%;}
/* ---- Butang jawapan: gaya "glossy candy" sepadan menu utama/Cikgu Aisyah ----
   Dulu cuma bayang bawah rata (box-shadow) tanpa kilauan atas, hover/tekan pun
   sekadar brightness+translateY — nampak flat berbanding butang MULA/TETAPAN.
   ::before bawa kilauan atas (macam permukaan gula-gula); tekan guna squash &
   antisipasi (bukan sekadar turun lurus) supaya rasa ada berat & responsif. */
.choice-btn{
  position:relative; overflow:hidden;
  font-family:inherit; font-weight:800; font-size:clamp(18px,2.4vw,26px);
  border:3px solid #fff; border-radius:18px; cursor:pointer;
  background:linear-gradient(180deg,#FFFFFF,#EEF4FF);
  box-shadow:0 4px 0 #C9D8EC, 0 8px 12px rgba(58,52,86,.12);
  padding:12px 10px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  min-height:68px; color:var(--ink);
  transition:transform .1s cubic-bezier(.34,1.56,.64,1), box-shadow .1s ease, filter .12s ease;
}
.choice-btn::before{
  content:""; position:absolute; inset:0; border-radius:15px; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.15) 38%, transparent 55%);
}
.choice-btn:hover{transform:translateY(-2px) scale(1.02); filter:brightness(1.03);
  box-shadow:0 6px 0 #C9D8EC, 0 10px 16px rgba(58,52,86,.16);}
.choice-btn:active{transform:translateY(3px) scale(.98,.94); box-shadow:0 1px 0 #C9D8EC, 0 3px 5px rgba(58,52,86,.1);}
.choice-btn.correct{
  background:linear-gradient(180deg,#8BE86A,var(--green)); color:#fff;
  box-shadow:0 4px 0 var(--green-d), 0 8px 12px rgba(58,52,86,.15);
  text-shadow:0 1px 0 rgba(0,0,0,.18);
  animation:choiceCorrectPop .5s cubic-bezier(.3,0,.4,1);
}
/* Denyut kilauan halus supaya jawapan betul terasa "meraikan", bukan sekadar
   tukar warna statik — tempoh pendek (2x) supaya tak ganggu skrin seterusnya. */
.choice-btn.correct::after{
  content:""; position:absolute; inset:-40%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.9) 0%, transparent 60%);
  animation:choiceCorrectGlow .5s ease-out;
}
@keyframes choiceCorrectPop{
  0%{transform:scale(1)}
  30%{transform:scale(1.08,.92)}
  55%{transform:scale(.97,1.04)}
  100%{transform:scale(1)}
}
@keyframes choiceCorrectGlow{0%{opacity:.9; transform:scale(.3)} 100%{opacity:0; transform:scale(1.4)}}
.choice-btn.wrong{animation:choiceWrongShake .45s cubic-bezier(.36,.07,.19,.97); border-color:var(--magenta);}
@keyframes choiceWrongShake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-7px) rotate(-2deg)}
  30%{transform:translateX(6px) rotate(2deg)}
  45%{transform:translateX(-5px) rotate(-1.5deg)}
  60%{transform:translateX(4px) rotate(1deg)}
  75%{transform:translateX(-2px)}
}
.choice-btn.selected{
  border-color:var(--cyan);
  background:linear-gradient(180deg,#E9FBFF,#CFF3FF);
  box-shadow:0 4px 0 var(--cyan-d), 0 8px 12px rgba(58,52,86,.12);
}
.choice-btn.matched{opacity:.55; cursor:default;}
@media (prefers-reduced-motion:reduce){
  .choice-btn, .choice-btn.correct, .choice-btn.wrong{animation:none;}
  .choice-btn:hover, .choice-btn:active{transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .teach-visual.pop-in, .teach-dot.on, .teach-replay{animation:none;}
  .teach-arrow:hover, .teach-arrow:active, .teach-replay:hover, .teach-replay:active{transform:none;}
}
.choice-icon{font-size:clamp(34px,4.4vw,50px); line-height:1;}
.choice-icon-img{width:clamp(44px,6vw,64px); height:clamp(44px,6vw,64px); object-fit:contain;}
.choice-label{font-size:14px;}
.tf-pair{display:flex; gap:14px; width:100%; max-width:520px;}
.tf-btn{flex:1; font-size:clamp(18px,2.8vw,28px) !important; min-height:72px !important;}
.tf-btn.correct{outline:3px solid var(--yellow);}
.tf-btn.wrong{animation:shake .4s ease; opacity:.7;}
.sort-grid{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:560px; width:100%;}
.sort-grid .choice-btn{min-width:64px; min-height:56px; font-size:clamp(15px,2vw,22px); padding:8px 12px;}
.sort-grid .choice-btn.correct{order:99;}
.match-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:520px; width:100%;}
.match-card{font-size:28px; min-height:60px;}
.match-card.matched{
  background:linear-gradient(180deg,#C9F7B8,#A5EDA0) !important;
  border-color:#7ED957 !important;
  box-shadow:0 4px 0 #58B944, 0 6px 10px rgba(58,52,86,.1) !important;
  color:#2E7D32 !important; opacity:1 !important;
}
.stage.comparison{display:flex; gap:20px; justify-content:center; align-items:center;}
.comp-item{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:linear-gradient(180deg,#FFFFFF,#F4F9FF); border-radius:18px; padding:16px 20px;
  border:3px solid #fff; min-width:96px;
  box-shadow:0 4px 0 #C9D8EC, 0 8px 12px rgba(58,52,86,.1);
}
.comp-icon{font-size:clamp(44px,6vw,64px); line-height:1;}
.comp-label{font-size:16px; font-weight:800; color:var(--ink);}
.stage.pattern-strip{
  display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:nowrap;
}
.pattern-item{
  font-size:clamp(34px,4.8vw,48px); line-height:1; padding:8px;
  background:linear-gradient(180deg,#FFFFFF,#F4F9FF); border-radius:16px; border:3px solid #fff;
  min-width:50px; text-align:center;
  box-shadow:0 3px 0 #C9D8EC;
}
.pattern-blank{
  background:linear-gradient(180deg,#FFDF70,var(--yellow));
  color:#fff; font-weight:900; border-color:#fff;
  box-shadow:0 3px 0 var(--yellow-d);
  animation:pulse 1.2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.06)}}
.stage-visual{font-size:16px; font-weight:700; color:var(--ink); text-align:center; padding:8px;}
/* Gambar dalam stage kuiz — cth soalan '"ayam" bermula dengan bunyi apa?' (bunyiLevel
   sudut gambar). .stage ialah flex row, jadi gambar ini duduk bersebelahan butang
   "Dengar Soalan"; hadkan tinggi supaya kedua-duanya muat tanpa stage jadi terlalu
   tinggi pada skrin pendek. */
/* height (bukan max-height) — RIZAB ruang sebelum imej dimuat. Dgn max-height,
   kotak imej 0px dulu kemudian membesar bila fail sampai → butang jawapan
   melompat ke bawah; sasaran yg bergerak adalah masalah sebenar utk budak 4-6. */
.stage-img{
  height:clamp(100px,22vh,190px); max-width:100%;
  object-fit:contain;
  filter:drop-shadow(0 5px 8px rgba(58,52,86,.18));
}

/* ===== Skrin pendek / frame lebih horizontal — kecilkan elemen supaya tak overflow ===== */
/* Breakpoint dinaikkan 660 -> 760. .stage guna flex:1 (flex-basis:0) — ia ambil BAKI
   ruang, jadi saiznya ditentukan elemen LAIN, bukan kandungannya sendiri. Pada 660-760px
   tinggi, semua elemen lain masih saiz penuh, jadi baki utk stage tinggal ~134px sedangkan
   butang "Dengar Soalan" 150px -> terkeluar sempadan. Diukur pd 1600x670: dgn blok ni
   dipakai, stage 134->226 dan butang 150->101. Jadi julat 660-760 memang patut dapat
   susun atur padat ni. */
@media (max-height:760px){
  .game-center{gap:clamp(5px,1vh,11px); padding:clamp(7px,1.4vh,15px) clamp(16px,3vw,30px);}
  .instruction{padding:8px 18px; font-size:clamp(16px,2.5vw,24px);}
  .stage{min-height:clamp(50px,9vh,100px); padding:8px; gap:8px;}
  .answer-label{font-size:clamp(12px,1.7vw,16px);}
  .obj{font-size:clamp(30px,7vh,50px);}
  /* Butang nombor: buang aspect-ratio tetap, ikat tinggi pada vh supaya mengecil */
  .numpad{max-width:500px; gap:clamp(5px,0.9vw,11px);}
  .num-btn{aspect-ratio:auto; height:clamp(40px,7vh,62px); min-height:40px; font-size:clamp(18px,3.2vh,28px);}
  .choice-btn{min-height:clamp(48px,8vh,64px); padding:8px 10px;}
  .choice-icon{font-size:clamp(26px,5vh,44px);}
  .tf-btn{min-height:clamp(52px,9vh,68px) !important; font-size:clamp(16px,2.5vw,24px) !important;}
  .feedback{font-size:clamp(16px,2.4vw,22px); min-height:18px;}
  .btn-next{font-size:clamp(14px,2vw,20px);}
  /* Butang "Dengar Soalan" — tertinggal dari blok ni dulu, jadi semua benda lain
     mengecil pd skrin pendek tapi butang ni tidak, dan ia terkeluar dari sempadan
     stage. Ikonnya guna 8vw (ikut LEBAR) — pd skrin pendek-tapi-lebar (cth 956x556)
     8vw = 76px walaupun tinggi sempit. Di sini ikat pada vh, macam .obj/.num-btn. */
  .kuiz-dengar-btn{padding:clamp(12px,2.2vh,22px) clamp(26px,4.4vw,48px); gap:5px;}
  .kuiz-dengar-icon{font-size:clamp(34px,6.4vh,58px);}
  .kuiz-dengar-label{font-size:clamp(14px,2.2vh,19px);}
}
@media (max-height:540px){
  .game-center{gap:4px; padding:5px clamp(14px,2.6vw,26px);}
  .instruction{padding:5px 14px; font-size:clamp(15px,2.2vw,20px);}
  .stage{min-height:42px; padding:6px; gap:6px;}
  .answer-label{font-size:clamp(11px,1.5vw,14px);}
  .obj{font-size:clamp(24px,5.4vh,38px);}
  .num-btn{height:clamp(34px,5.8vh,50px); min-height:34px; font-size:clamp(15px,2.6vh,22px);}
  .choice-btn{min-height:clamp(40px,6.4vh,52px);}
  .tf-btn{min-height:clamp(42px,6.8vh,56px) !important;}
  .feedback{font-size:clamp(15px,2.2vw,20px);}
  .kuiz-dengar-btn{padding:clamp(8px,1.6vh,16px) clamp(20px,3.6vw,38px); gap:4px;}
  .kuiz-dengar-icon{font-size:clamp(28px,5.2vh,44px);}
  .kuiz-dengar-label{font-size:clamp(12px,1.9vh,16px);}
}

/* ---- Skrin raikan — LANDSCAPE ---- */
#screen-win{
  background:linear-gradient(180deg,#67E8F9 0%,#34D399 55%,#A7F3D0 100%);
  justify-content:center; align-items:center; padding:var(--nav-h) 20px 20px;
}
.win-bg{
  position:absolute; inset:0; z-index:0;
  background:url('../assets/bg_win.png') center/cover no-repeat;
  filter:saturate(1.08);
}
.win-bg::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.05) 0%, rgba(30,20,60,.22) 100%);
}
.win-card{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:clamp(8px,1.6vh,16px);
  background:linear-gradient(180deg,#FFFDF6,#FFF4DC); border:5px solid #fff;
  border-radius:32px; padding:clamp(18px,3.5vh,36px) clamp(28px,5vw,64px);
  box-shadow:0 8px 0 var(--yellow-d), 0 24px 48px rgba(30,20,60,.35);
  animation:winCardIn .5s cubic-bezier(.34,1.56,.64,1);
  max-width:min(640px,92vw); max-height:92vh; overflow-y:auto;
}
@keyframes winCardIn{from{transform:scale(.6); opacity:0} to{transform:scale(1); opacity:1}}
.confetti{position:absolute; inset:0; pointer-events:none; overflow:hidden;}
.confetti i{position:absolute; top:-20px; width:8px; height:12px; border-radius:2px; animation:fall linear infinite;}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}
.win-stars{
  font-size:clamp(36px,6vw,56px);
  filter:drop-shadow(0 0 12px rgba(255,215,60,.8));
}
.win-star{
  display:inline-block;
  animation:winStarIn .5s cubic-bezier(.34,1.56,.64,1) both, winStarFloat 1.8s ease-in-out .5s infinite;
}
@keyframes winStarIn{0%{opacity:0; transform:scale(0) rotate(-40deg);} 100%{opacity:1; transform:scale(1) rotate(0);}}
@keyframes winStarFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);}}
@media (prefers-reduced-motion:reduce){
  .win-star{animation:winStarIn .01s linear both;}
  .aisyah.bob{animation:none;}
}
/* Watak Cikgu Aisyah bergoyang lembut di skrin raikan — hidupkan avatar statik */
.aisyah.bob{animation:aisyahBob 2.2s ease-in-out infinite;}
@keyframes aisyahBob{0%,100%{transform:translateY(0) rotate(0);} 50%{transform:translateY(-8px) rotate(-3deg);}}
/* Cip "+N 🦪" — nyatakan ganjaran di kad menang sendiri, bukan hanya kaunter atas */
.win-pearls{
  display:flex; align-items:center; gap:7px;
  background:linear-gradient(180deg,#FFFDF6,#FFF3D6);
  border:3px solid #fff; border-radius:999px;
  padding:4px 18px; font-weight:900; color:#8a5a00;
  font-size:clamp(15px,2.2vw,20px);
  box-shadow:0 3px 0 var(--yellow-d), 0 6px 10px rgba(58,52,86,.14);
  animation:winCardIn .45s cubic-bezier(.34,1.56,.64,1) .3s both;
}
.win-pearls[hidden]{display:none;}
.win-pearls .pearl-icon{width:clamp(20px,2.6vw,26px); height:auto;}
.win-sticker{
  display:flex; align-items:center; gap:10px;
  background:#fff8e1; border:3px dashed var(--yellow);
  border-radius:18px; padding:8px 20px;
  font-weight:800; color:#7a5200; font-size:clamp(14px,2vw,18px);
  animation:winCardIn .5s cubic-bezier(.34,1.56,.64,1);
}
.win-sticker[hidden]{display:none;}
.win-sticker img{width:clamp(44px,6vw,64px); height:auto;}
.win-msg{font-size:clamp(16px,2.5vw,22px); font-weight:800; color:#075056; max-width:360px; line-height:1.4;}
.win-actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:center;}
.aisyah{
  display:grid; place-items:center; border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#fff 0 60%,#d7f7ff 100%);
  border:5px solid #fff; box-shadow:var(--shadow); overflow:hidden;
}
.aisyah-emoji{font-size:48px; line-height:1;}
.aisyah-big{width:clamp(100px,15vw,150px); height:clamp(100px,15vw,150px);}
.aisyah-big .aisyah-emoji{font-size:clamp(60px,9vw,90px);}
.aisyah.has-img{background:transparent;}
.aisyah.has-img .aisyah-emoji{display:none;}
.aisyah img{width:100%; height:100%; object-fit:cover;}
.aisyah-mini{display:none;}

/* ---- Split MULA / TETAPAN over the same PNG ---- */
/* (.menu-btn-stack / .menu-btn-half telah dibuang — dulu ia meletakkan 2 kawasan klik
   telus di atas SATU imej dua-butang. Kini setiap butang ada imej sendiri; lihat
   .menu-btn di blok menu di atas.) */

/* ---- Tetapan page ---- */
#screen-settings{
  padding:var(--nav-h) 20px 12px; gap:14px; justify-content:center;
}
#screen-settings::before{ content:none; }
.settings-wrap{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  width:100%; max-width:520px;
}
.settings-panel{
  background:linear-gradient(180deg,#FFFDF6,#FFF4DC);
  border:4px solid #fff;
  border-radius:24px;
  box-shadow:0 6px 0 rgba(224,154,0,.25), 0 14px 26px rgba(58,52,86,.18);
  padding:18px 22px;
  width:100%;
  display:flex; flex-direction:column; gap:16px;
}
.settings-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
}
.settings-label{
  font-weight:800; font-size:clamp(16px,2.2vw,20px); color:var(--ink);
}
.sound-toggle{
  font-family:inherit; font-weight:800; font-size:clamp(14px,2vw,18px);
  border:3px solid #fff; border-radius:999px;
  padding:8px 18px; min-height:46px; cursor:pointer;
  background:linear-gradient(180deg,#8BE86A,var(--green));
  color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.2);
  box-shadow:0 4px 0 var(--green-d), 0 8px 12px rgba(58,52,86,.15);
  display:inline-flex; align-items:center; gap:8px;
}
.sound-toggle[aria-pressed="false"]{
  background:linear-gradient(180deg,#94a3b8,#475569);
}
.slider-row{display:flex; align-items:center; gap:10px; flex:1; min-width:200px;}
.slider-icon{font-size:22px;}
.slider{
  -webkit-appearance:none; appearance:none;
  flex:1; height:10px; border-radius:999px;
  background:linear-gradient(90deg,#7DE9FA,#A855F7);
  outline:none;
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:26px; height:26px; border-radius:50%;
  background:#fff; border:3px solid var(--cyan-d);
  box-shadow:0 2px 4px rgba(0,0,0,.25);
  cursor:pointer;
}
.slider::-moz-range-thumb{
  width:26px; height:26px; border-radius:50%;
  background:#fff; border:3px solid var(--cyan-d);
  box-shadow:0 2px 4px rgba(0,0,0,.25);
  cursor:pointer;
}

/* ======== SKRIN MENGAJAR (Bacalah Anakku: ajar dulu, baru kuiz) ======== */
#screen-teach{
  padding:var(--nav-h) 8px 8px var(--companion-w);
  background:url("../assets/bg_classroom_new.png") center/cover, #67e8f9;
  justify-content:flex-start; align-items:center; gap:clamp(4px,1vh,10px);
}
/* Tajuk kelas sudah dialih keluar dari bar ni (kini fixed pd baris nav — lihat
   #teachTitle di bawah), jadi bar tinggal menempatkan butang Langkau sahaja.
   min-height DIKEKALKAN walaupun Langkau tersembunyi: butang tu cuma muncul pd
   slaid ke-2, dan tanpa rizab tetap ini kad mengajar akan MELOMPAT naik-turun bila
   ia muncul. Cuba height:0 dulu — jadinya Langkau bertindih tepi kad pd skrin
   sempit (diukur 620px: Langkau x506-608 vs kad tamat x519). */
.teach-topbar{
  display:flex; align-items:center; justify-content:flex-end;
  width:100%; position:relative; z-index:2;
  min-height:44px;
}
/* Tajuk kelas — SEBARIS dgn nav sejagat (Balik / Menu), di tengah antara keduanya.
   Dulu ia duduk dlm aliran DI BAWAH nav, jadi ia melanggar label kad ("BESAR/kecil").
   top = padding-atas .global-nav, supaya ia sebaris tepat dgn butang nav. */
#teachTitle{
  position:fixed; top:clamp(10px,1.8vh,18px);
  left:50%; transform:translateX(-50%);
  z-index:16; margin:0;
}
/* Langkau — dipin FIXED pd jarak tetap DI BAWAH jalur nav sejagat (Balik/pearl/Menu),
   supaya tak pernah bertindih butang Menu walau --nav-h cecah nilai lantai. Baris
   .teach-topbar (min-height) kekal sbg rizab ruang supaya kad tak melompat bila butang
   ni muncul pd slaid ke-2. */
.teach-skip{
  position:fixed; top:calc(var(--nav-h) + clamp(8px,2vh,16px));
  right:clamp(8px,2vw,24px); z-index:16;
  font-size:clamp(13px,1.8vw,17px); padding:8px 16px; min-height:40px;
}
.teach-main{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(8px,1.6vw,20px); width:100%; flex:1; min-height:0; z-index:1;
  transition:filter .25s ease;
}
.teach-main.blurred{filter:blur(6px); pointer-events:none;}
.teach-arrow{
  position:relative; overflow:hidden;
  flex:0 0 auto; width:clamp(64px,8vw,92px); height:clamp(64px,8vw,92px);
  border:none; border-radius:50%; cursor:pointer;
  font-size:clamp(26px,3.4vw,38px); color:#fff; font-family:inherit;
  background:linear-gradient(180deg,#5EC9F5,#2E9FDF);
  box-shadow:0 5px 0 #1c7fb8, 0 8px 16px rgba(0,0,0,.25);
  transition:transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .12s ease;
}
.teach-arrow::before{
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.6) 0%, transparent 55%);
}
.teach-arrow:hover{transform:scale(1.1);}
.teach-arrow:active{transform:scale(.92) translateY(3px); box-shadow:0 2px 0 #1c7fb8;}
.teach-arrow:disabled{opacity:.35; cursor:default; transform:none;}
.teach-card{
  position:relative; overflow:hidden;
  flex:1 1 auto; max-width:min(620px,58vw); height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(6px,1.4vh,14px);
  background:linear-gradient(180deg,rgba(255,252,244,.97),rgba(255,247,230,.96));
  border-radius:28px;
  border:4px solid #fff;
  box-shadow:0 6px 0 rgba(224,154,0,.25), 0 14px 28px rgba(58,52,86,.2);
  padding:clamp(10px,2.4vh,22px) clamp(14px,2.4vw,28px);
}
.teach-card::before{
  content:""; position:absolute; inset:0; border-radius:25px; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,.1) 30%, transparent 50%);
}
.teach-visual{
  flex:1; display:flex; align-items:center; justify-content:center; min-height:0; width:100%;
}
.teach-visual.pop-in{ animation:teachVisualIn .38s cubic-bezier(.34,1.56,.64,1); }
@keyframes teachVisualIn{
  0%{opacity:0; transform:scale(.8) translateY(10px);}
  100%{opacity:1; transform:scale(1) translateY(0);}
}
.teach-bigtext{
  font-size:clamp(90px,16vw,230px); font-weight:900; letter-spacing:3px;
  color:#1f2a44; line-height:1.1; text-align:center;
}
.teach-bigtext b{color:#e11d48;}
.teach-emoji{font-size:clamp(72px,14vw,170px); line-height:1.25; text-align:center; word-spacing:8px;}
.teach-html{font-size:clamp(52px,10vw,120px); font-weight:900; color:#1f2a44; text-align:center; line-height:1.3;}
.teach-html b{color:#e11d48;}
.teach-img{max-height:46vh; max-width:100%;}
/* Huruf (besar+kecil) di atas, ilustrasi (Higgsfield) di bawah — cth "Bunyi a macam ayam" */
.teach-letterimg{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(6px,1.6vh,18px); width:100%; height:100%;
}
.teach-letterimg-letters{
  display:flex; align-items:baseline; gap:clamp(8px,1.6vw,18px);
  font-weight:900; line-height:1; color:#1f2a44;
}
.teach-letterimg-letters .up{font-size:clamp(70px,12vw,170px);}
.teach-letterimg-letters .low{font-size:clamp(52px,9vw,128px);}
.teach-letterimg-photo{
  max-height:38vh; max-width:78%;
  object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(58,52,86,.18));
}
/* Tangan comel tuding besar↔kecil (slide intro huruf A) — kedudukan dikawal teach.js
   supaya SEGERAK dengan audio (kekal di huruf sampai bunyi habis, baru beralih). */
.teach-ab-wrap{ position:relative; }
.teach-hand-ab{
  position:absolute; bottom:0; left:30%;
  font-size:clamp(34px,6vw,54px); line-height:1;
  transform:translateX(-50%);
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.3));
  transition:left .45s cubic-bezier(.45,.05,.35,1), transform .18s ease;
  pointer-events:none; opacity:0;
}
.teach-hand-ab.show{ opacity:1; }
.teach-hand-ab.at-besar{ left:30%; }
.teach-hand-ab.at-kecil{ left:70%; }
.teach-hand-ab.tap{ transform:translateX(-50%) translateY(-11px); }
.teach-caption-row{
  display:flex; align-items:center; gap:10px; width:100%;
  background:#F0F9FF; border-radius:16px; padding:8px 14px;
}
.teach-caption{
  flex:1; font-size:clamp(15px,2.3vw,21px); font-weight:800; color:#1f2a44;
  text-align:center; line-height:1.35;
}
.teach-replay{
  position:relative; overflow:visible;
  flex:0 0 auto; width:44px; height:44px; border:none; border-radius:50%;
  font-size:20px; cursor:pointer; background:#FFE9A8;
  box-shadow:0 3px 0 #e3c25e; transition:transform .12s cubic-bezier(.34,1.56,.64,1);
}
.teach-replay:hover{transform:scale(1.08);}
.teach-replay:active{transform:scale(.88);}
/* Gelang berdenyut — dulu meng-animate box-shadow (spread ring = repaint tiap frame,
   sentiasa jalan pd skrin mengajar). Kini gelang ::after yg mengembang via TRANSFORM +
   OPACITY (composited GPU) → licin, tiada repaint. */
.teach-replay::after{
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  border:2px solid rgba(255,201,60,.55);
  animation:teachReplayBreathe 2.6s ease-out infinite;
}
@keyframes teachReplayBreathe{
  0%{transform:scale(1); opacity:.6;}
  100%{transform:scale(1.55); opacity:0;}
}
@media (prefers-reduced-motion:reduce){ .teach-replay::after{animation:none; opacity:0;} }
.teach-dots{display:flex; gap:8px; z-index:1; padding-bottom:2px;}
.teach-dot{
  width:12px; height:12px; border-radius:50%;
  background:rgba(255,255,255,.75); border:2px solid rgba(0,0,0,.12);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .2s ease;
}
.teach-dot.on{background:#FFC93C; transform:scale(1.35); animation:teachDotPop .35s cubic-bezier(.34,1.56,.64,1);}
.teach-dot.done{background:#7ED957;}
@keyframes teachDotPop{0%{transform:scale(1)} 55%{transform:scale(1.6)} 100%{transform:scale(1.35)}}
.teach-kuiz{
  font-size:clamp(17px,2.6vw,24px); padding:12px 34px; z-index:1;
  margin-bottom:clamp(2px,1vh,8px);
  animation:teachPulse 1.4s ease infinite;
}
@keyframes teachPulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.06)}}
/* Chooser lawatan ulang */
.teach-chooser{
  position:absolute; inset:0; z-index:10; /* atas companion-wrap (z8) — lihat .teach-intro */
  display:flex; align-items:center; justify-content:center;
  background:rgba(20,40,70,.35);
}
.teach-chooser[hidden]{display:none;}
.teach-chooser-card{
  background:#fff; border-radius:26px; border:4px solid var(--yellow);
  padding:clamp(16px,3vh,28px) clamp(20px,3.4vw,36px);
  box-shadow:0 14px 34px rgba(0,0,0,.3);
  display:flex; flex-direction:column; gap:16px; align-items:center;
  animation:tutorialPopIn .35s cubic-bezier(.34,1.56,.64,1);
}
.teach-chooser-title{margin:0; font-size:clamp(16px,2.4vw,22px); font-weight:900; color:#1f2a44;}
.teach-chooser-btns{display:flex; gap:18px;}
.teach-choice{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  border:none; border-radius:20px; cursor:pointer; font-family:inherit;
  background:linear-gradient(180deg,#5EC9F5,#2E9FDF);
  box-shadow:0 5px 0 #1c7fb8;
  color:#fff; font-weight:900;
  padding:clamp(12px,2.2vh,18px) clamp(18px,2.8vw,30px);
  transition:transform .12s ease;
}
.teach-choice:hover{transform:scale(1.06);}
.teach-choice:active{transform:scale(.94) translateY(3px); box-shadow:0 2px 0 #1c7fb8;}
.teach-choice.tc-green{background:linear-gradient(180deg,#7ED957,#4CAF50); box-shadow:0 5px 0 #35803a;}
.teach-choice.tc-green:active{box-shadow:0 2px 0 #35803a;}
.tc-icon{font-size:clamp(30px,4.6vw,46px); line-height:1;}
.tc-label{font-size:clamp(14px,2vw,18px);}

/* Kad Pembuka Kelas — Cikgu Aisyah "welcome" sebelum slide mengajar bermula */
.teach-intro{
  /* z-index MESTI atas companion-wrap (z8) — kalau tak, sprite Cikgu Aisyah + buih
     cakap dia terpapar MENEMBUSI lapisan gelap intro (nampak berselerak). */
  position:absolute; inset:0; z-index:10;
  display:flex; align-items:center; justify-content:center;
  background:rgba(20,40,70,.4);
  animation:fadeIn .25s ease;
}
.teach-intro[hidden]{display:none;}
.teach-intro-card{
  background:linear-gradient(180deg,#FFFDF5,#FFF6E0);
  border-radius:30px; border:5px solid var(--yellow);
  padding:clamp(20px,3.6vh,34px) clamp(26px,4vw,46px);
  box-shadow:0 16px 38px rgba(0,0,0,.32);
  display:flex; flex-direction:column; align-items:center; gap:clamp(10px,2vh,16px);
  max-width:min(560px,80vw);
  animation:tutorialPopIn .4s cubic-bezier(.34,1.56,.64,1);
}
.teach-intro-icon{
  font-size:clamp(52px,8vw,84px); line-height:1;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.15));
}
.teach-intro-title{
  margin:0; font-size:clamp(20px,3vw,30px); font-weight:900; color:#1f2a44; text-align:center;
}
.teach-intro-avatar-row{
  display:flex; align-items:center; gap:12px; width:100%;
  background:#F0F9FF; border-radius:18px; padding:10px 16px;
}
.teach-intro-avatar{font-size:clamp(30px,4.5vw,42px); line-height:1; flex:0 0 auto;}
.teach-intro-text{
  flex:1; font-size:clamp(15px,2.3vw,20px); font-weight:800; color:#1f2a44;
  text-align:center; line-height:1.35;
}

/* ======== VIDEO MENGAJAR SEPENUH SKRIN (cth lagu ABC) — tutup semua nav sampai video habis ======== */
.teach-video-overlay{
  position:fixed; inset:0; z-index:40;
  display:none; align-items:center; justify-content:center;
  background:#0d1226;
  animation:fadeIn .3s ease;
}
.teach-video-overlay.visible{display:flex;}
.teach-video-overlay[hidden]{display:none;}
#teachVideoPlayer{
  width:100%; height:100%; object-fit:contain;
  background:#0d1226;
}

/* ======== TUTORIAL PERMULAAN ======== */
.tutorial-overlay{
  position:fixed; inset:0; z-index:7; display:none;
}
.tutorial-overlay.visible{display:block; animation:fadeIn .3s ease;}
.tutorial-blocker{position:absolute; inset:0; pointer-events:auto;}
.tutorial-bubble{
  /* Diletak di bawah nav bar + ribbon level supaya tak pernah bertindih dengan mereka */
  position:absolute; top:calc(var(--nav-h) + clamp(56px,9vh,68px)); left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:12px;
  background:#fff; border:4px solid var(--yellow); border-radius:22px;
  padding:12px 20px; box-shadow:var(--shadow); max-width:min(560px,90vw);
  animation:tutorialPopIn .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes tutorialPopIn{from{transform:translateX(-50%) scale(.6); opacity:0} to{transform:translateX(-50%) scale(1); opacity:1}}
/* Kedudukan TENGAH — gelembung melayang atas gambar stage (bukan tutup teks soalan) */
.tutorial-overlay.tut-mid .tutorial-bubble{
  top:52%; transform:translate(-50%,-50%); animation:fadeIn .3s ease;
}
.tutorial-avatar{
  font-size:clamp(34px,4.5vw,48px); line-height:1; flex:0 0 auto;
  background:radial-gradient(circle at 50% 38%,#fff 0 60%,#d7f7ff 100%);
  border-radius:50%; border:3px solid var(--cyan); padding:6px;
}
.tutorial-text{
  margin:0; font-size:clamp(15px,2.2vw,21px); font-weight:800; color:var(--ink);
  text-align:left; line-height:1.35;
}
.tutorial-btn{flex:0 0 auto; font-size:clamp(14px,2vw,18px);}
.tutorial-hand{
  position:absolute; font-size:clamp(40px,5.5vw,56px); line-height:1;
  transition:left .55s cubic-bezier(.45,.05,.35,1), top .55s cubic-bezier(.45,.05,.35,1), opacity .3s ease;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));
  pointer-events:none; z-index:2; transform-origin:30% 10%;
}
.tutorial-hand.pressing{animation:handPress .45s ease;}
@keyframes handPress{0%{transform:scale(1)} 40%{transform:scale(.72) translateY(-6px)} 100%{transform:scale(1)}}

/* ======== NAV BAR SEJAGAT — Balik (kiri) + Menu dropdown (kanan) ========
   Satu elemen dikongsi merentasi SEMUA skrin (di luar #app) supaya kedudukan
   & saiz terjamin sama di setiap page — bukan diulang per-skrin. */
.global-nav{
  position:fixed; top:0; left:0; right:0; z-index:15;
  display:flex; justify-content:space-between; align-items:center;
  padding:clamp(10px,1.8vh,18px) clamp(12px,2vw,24px);
  pointer-events:none;
}
body[data-screen="menu"] .global-nav,
body[data-screen="onboarding"] .global-nav{display:none;}
.global-nav-btn{
  pointer-events:auto;
  font-family:inherit; font-weight:800; color:#fff;
  font-size:clamp(14px,2vw,18px);
  border:3px solid #fff; border-radius:999px;
  padding:10px 22px; min-height:46px;
  cursor:pointer;
  box-shadow:0 4px 0 var(--cyan-d), 0 8px 14px rgba(58,52,86,.18);
  background:linear-gradient(180deg,#6ADCFF,var(--cyan));
  text-shadow:0 2px 0 rgba(0,0,0,.2);
  transition:transform .08s ease, box-shadow .08s ease, filter .12s ease;
}
.global-nav-btn:hover{filter:brightness(1.06);}
.global-nav-btn:active{transform:translateY(3px); box-shadow:0 1px 0 var(--cyan-d), 0 3px 6px rgba(58,52,86,.15);}
.global-nav-right{display:flex; align-items:center; gap:10px;}
.global-nav-menu-wrap{position:relative; pointer-events:auto;}

/* ---- Kaunter Mutiara 🦪 ---- */
.pearl-counter{
  pointer-events:auto;
  display:flex; align-items:center; gap:6px;
  background:linear-gradient(180deg,#FFFDF6,#FFF3D6); border:3px solid #fff;
  border-radius:999px; padding:4px 16px 4px 6px; min-height:46px;
  box-shadow:0 4px 0 var(--yellow-d), 0 8px 14px rgba(58,52,86,.16);
  font-weight:900; font-size:clamp(15px,2vw,19px); color:#8a5a00;
}
.pearl-icon{width:clamp(26px,3.2vw,34px); height:auto;}
.pearl-counter.bump{animation:pearlBump .4s cubic-bezier(.34,1.56,.64,1);}
@keyframes pearlBump{0%{transform:scale(1)} 40%{transform:scale(1.25)} 100%{transform:scale(1)}}
/* Mutiara terbang dari tengah skrin ke kaunter */
.pearl-fly{
  position:fixed; z-index:30; width:34px; height:auto; pointer-events:none;
  transition:left .7s cubic-bezier(.5,-0.2,.6,1), top .7s cubic-bezier(.5,-0.2,.6,1), opacity .7s ease, transform .7s ease;
}
.nav-dropdown{
  position:absolute; top:calc(100% + 10px); right:0;
  background:linear-gradient(180deg,#FFFFFF,#FFF9EC); border-radius:20px; padding:8px;
  box-shadow:0 6px 0 #E3D3B0, 0 14px 26px rgba(58,52,86,.22);
  min-width:250px;
  display:flex; flex-direction:column; gap:2px;
  border:3px solid #fff;
  animation:tutorialPopIn .2s ease-out;
}
.nav-dropdown[hidden]{display:none;}
.nav-dropdown button{
  font-family:inherit; font-weight:800; font-size:clamp(14px,1.8vw,16px); color:var(--ink);
  background:none; border:none; border-radius:14px;
  padding:12px 16px; text-align:left; cursor:pointer;
  transition:background .1s ease, transform .1s ease;
}
.nav-dropdown button:hover, .nav-dropdown button:active{background:#FFEFC4; transform:translateX(3px);}

/* ======== SKRIN ALBUM PELEKAT ======== */
#screen-album{
  padding:var(--nav-h) 20px 12px; gap:10px; justify-content:center;
}
.album-wrap{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:clamp(8px,1.6vh,16px);
  width:100%; max-width:min(900px,92vw);
}
.album-stats{
  display:flex; gap:clamp(8px,1.5vw,18px); flex-wrap:wrap; justify-content:center;
}
.album-stat{
  display:flex; align-items:center; gap:6px;
  background:linear-gradient(180deg,#FFFFFF,#FFF6E0); border:3px solid #fff;
  border-radius:999px; padding:6px 18px;
  font-weight:800; font-size:clamp(13px,1.8vw,17px); color:var(--ink);
  box-shadow:0 4px 0 #E3D3B0, 0 8px 12px rgba(58,52,86,.12);
}
.album-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.6vw,20px); width:100%;
  max-width:min(640px,80vw); margin:0 auto;
}
.album-slot{
  position:relative; aspect-ratio:1/1;
  background:rgba(255,255,255,.92); border:4px solid #fff;
  border-radius:22px; box-shadow:var(--shadow);
  display:grid; place-items:center; overflow:hidden;
  animation:tileIn .4s ease-out both;
}
.album-slot img{width:88%; height:88%; object-fit:contain;}
.album-slot.locked{background:rgba(148,163,184,.5);}
.album-slot.locked img{filter:grayscale(1) brightness(.35) opacity(.55);}
.album-slot.locked::after{
  content:"🔒"; position:absolute; inset:0; display:grid; place-items:center;
  font-size:clamp(22px,3vw,34px); filter:drop-shadow(0 2px 5px rgba(0,0,0,.4));
}
.album-slot.unlocked{border-color:var(--yellow);}
.album-slot .album-slot-name{
  position:absolute; bottom:4px; left:4px; right:4px;
  font-size:clamp(9px,1.1vw,12px); font-weight:800; color:var(--ink);
  background:rgba(255,255,255,.85); border-radius:8px; padding:1px 4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* (Bar sarikata bawah lama telah dibuang — dialog kini keluar sebagai speech
   bubble atas kepala Cikgu Aisyah; lihat blok PENEMAN SPRITE di bawah.) */

/* ---- Notis muzik disekat (autoplay dasar pelayar) ---- */
.audio-unlock-nudge{
  position:fixed; top:clamp(64px,11vh,84px); right:14px; z-index:20;
  font-family:inherit; font-weight:800; font-size:clamp(13px,1.8vw,16px); color:#fff;
  background:linear-gradient(180deg,#FFE873,var(--yellow-d));
  border:none; border-radius:999px; padding:10px 18px;
  box-shadow:0 4px 0 rgba(0,0,0,.18), 0 8px 16px rgba(0,0,0,.25);
  cursor:pointer; animation:nudgeBounce 1.4s ease-in-out infinite;
}
.audio-unlock-nudge:active{transform:scale(.95);}
@keyframes nudgeBounce{0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)}}

/* ---- Brightness overlay (sits above #app, ignores clicks) ---- */
#brightnessOverlay{
  position:fixed; inset:0; z-index:6;
  background:#000; opacity:0; pointer-events:none;
  transition:opacity .15s ease;
}

/* ======== CIKGU AISYAH — PENEMAN SPRITE (spritesheet 7-frame) ======== */
.companion-wrap{
  position:fixed; left:0; top:0; bottom:0; z-index:8;
  display:none; align-items:center; justify-content:center;
  height:100%; width:var(--companion-w);
  padding:var(--nav-h) clamp(4px,1vw,16px) clamp(8px,2vh,24px) clamp(10px,1.8vw,28px);
  pointer-events:none;
}
.companion-wrap.visible{display:flex;}

.companion-inner{
  position:relative;
  display:flex; align-items:flex-end; justify-content:center;
  animation:compBob 3.7s cubic-bezier(.45,0,.55,1) infinite;
  transform-origin:50% 100%;
  will-change:transform;
}
/* ---- Rig 2D: 3 lapisan (badan, lengan-kanan, kepala) berputar/beranimasi
   berterusan via CSS transform — bukan tukar-tukar imej penuh (licin, hidup).

   Empat rentak idle sengaja diberi TEMPOH BERBEZA (3.7s badan / 4.3s kepala /
   4.9s nafas / 5.3s lengan). Tempoh yg sama membuatkan semuanya berulang serentak
   dan nampak macam robot; tempoh berbeza menyebabkan ia hanyut keluar fasa, jadi
   gabungan gerakan hampir tak pernah berulang sama = nampak hidup. ---- */
.companion-rig{
  position:relative;
  /* Hadkan tinggi melalui LEBAR, bukan max-height. Dulu `width` eksplisit + `max-height`
     bergaduh dgn `aspect-ratio`: tinggi terpotong tapi lebar kekal, jadi watak tersepit
     (nisbah jadi .587 sedangkan sepatutnya .537 — semua bahagian rig terhimpit ~9%).
     calc di bawah = lebar maksimum yg masih muat 82vh pada nisbah 615:1145. */
  width:min(clamp(200px,28vw,410px), calc(82vh * 615 / 1145));
  aspect-ratio:615 / 1145;
  height:auto; margin:0 auto;
  pointer-events:auto; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 9px 12px rgba(58,52,86,.24));
  transform-origin:50% 100%;
  animation:rigBreathe 4.9s cubic-bezier(.37,0,.63,1) infinite;
  will-change:transform;
}
/* Maklum balas tekan guna filter, BUKAN transform — transform dipakai animasi nafas. */
.companion-rig:active{filter:drop-shadow(0 5px 8px rgba(58,52,86,.3)) brightness(.94);}
.rig-part{ position:absolute; pointer-events:none; user-select:none; -webkit-user-drag:none; }
.rig-torso{ left:0%;     top:33.62%; width:94.31%; height:66.38%; z-index:1; }
/* Lengan DI BELAKANG torso (z-index:0): torso menutup tepi potongan atas lengan &
   ruang sendi siku pada semua sudut putaran. Pivot = siku (y=603 imej asal). */
.rig-arm  { left:67.64%; top:44.10%; width:30.08%; height:21.05%; z-index:0;
  transform-origin:11.89% 28.22%;
  animation:armIdle 5.3s cubic-bezier(.42,0,.58,1) infinite;
  animation-delay:-.6s; /* secondary motion: lengan tertinggal sedikit di belakang badan */ }
.rig-head { left:8.94%;  top:0%;     width:80.49%; height:41.05%; z-index:3;
  transform-origin:50% 94%; animation:headIdle 4.3s cubic-bezier(.42,0,.58,1) infinite; }

/* Kepala guna 3 titik (bukan 2) supaya ayunan tak simetri — pergerakan semula jadi
   jarang berulang cermin-sama. */
@keyframes headIdle{
  0%,100%{transform:rotate(0deg) translateY(0)}
  32%{transform:rotate(1.5deg) translateY(-2px)}
  68%{transform:rotate(-1deg) translateY(-1px)}
}
@keyframes armIdle{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-3deg)}}
@keyframes compBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
/* Nafas: dada kembang sikit & tinggi berubah halus — nilai sengaja kecil (1.2%). */
@keyframes rigBreathe{0%,100%{transform:scale(1,1)}50%{transform:scale(.994,1.012)}}

/* ---- reaksi lengan (rotate berterusan dari bahu — bukan swap imej) ---- */
.rig-arm.arm-wave{animation:armWave 1.4s cubic-bezier(.36,.07,.19,.97);}
@keyframes armWave{0%{transform:rotate(0deg)}14%{transform:rotate(-58deg)}32%{transform:rotate(-24deg)}50%{transform:rotate(-58deg)}68%{transform:rotate(-20deg)}86%{transform:rotate(-40deg)}100%{transform:rotate(0deg)}}
.rig-arm.arm-jump{animation:armJump 1.5s ease-in-out;}
@keyframes armJump{0%{transform:rotate(0deg)}28%{transform:rotate(-118deg)}55%{transform:rotate(-95deg)}80%{transform:rotate(-108deg)}100%{transform:rotate(0deg)}}
/* HAD SUDUT: lengan berada DI BELAKANG torso (z-index:0). Melebihi ~-120deg lengan
   berayun ke atas-KIRI dan hilang di belakang badan (nampak macam tangan tercabut).
   Sebab tu sorak guna pam berulang pada -116..-88deg, bukan -150deg macam dulu. */
.rig-arm.arm-cheer{animation:armCheer 2s ease-in-out;}
@keyframes armCheer{
  0%{transform:rotate(0deg)}
  18%{transform:rotate(-116deg)}
  38%{transform:rotate(-88deg)}
  58%{transform:rotate(-116deg)}
  78%{transform:rotate(-92deg)}
  100%{transform:rotate(0deg)}
}
.rig-arm.arm-soft{animation:armSoft 1.5s ease-in-out;}
@keyframes armSoft{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-38deg)}}

/* ---- reaksi seluruh badan (bounce) — digabung dgn reaksi lengan di atas.
   Guna squash & stretch + antisipasi: badan mencangkung sedikit DULU sebelum
   melompat, meregang masa naik, dan mencangkung masa mendarat. Tanpa ni lompatan
   nampak ringan/kaku macam imej digerakkan naik-turun. transform-origin:50% 100%
   pada .companion-inner bermakna skala berlaku dari TAPAK KAKI, bukan tengah. ---- */
.companion-inner.react-jump{animation:compJump .5s cubic-bezier(.3,0,.4,1) 2;}
@keyframes compJump{
  0%{transform:translateY(0) scale(1,1)}
  16%{transform:translateY(-3px) scale(1.05,.94)}   /* antisipasi: cangkung */
  38%{transform:translateY(-26px) scale(.96,1.06)}  /* regang masa naik */
  62%{transform:translateY(0) scale(1.04,.95)}      /* cangkung masa mendarat */
  80%{transform:translateY(-8px) scale(.99,1.02)}
  100%{transform:translateY(0) scale(1,1)}
}
.companion-inner.react-wave{animation:compWaveBody 1.4s cubic-bezier(.42,0,.58,1);}
@keyframes compWaveBody{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(.8deg)}}
.companion-inner.react-soft{animation:compSoft 1.5s cubic-bezier(.42,0,.58,1);}
@keyframes compSoft{
  0%,100%{transform:translateY(0) rotate(0) scale(1,1)}
  50%{transform:translateY(-2px) rotate(-1.8deg) scale(1.01,.99)} /* condong simpati */
}
.companion-inner.react-cheer{animation:compCheer .42s cubic-bezier(.3,0,.4,1) 4;}
@keyframes compCheer{
  0%{transform:translateY(0) scale(1,1)}
  14%{transform:translateY(-2px) scale(1.06,.93)}   /* antisipasi */
  46%{transform:translateY(-24px) scale(.95,1.07)}  /* regang tinggi */
  74%{transform:translateY(-2px) scale(1.05,.94)}   /* cangkung mendarat */
  100%{transform:translateY(0) scale(1,1)}
}

/* ---- Speech bubble atas kepala Cikgu Aisyah ---- */
.companion-bubble{
  /* Buih diletak SEDIKIT LEBIH RENDAH (58px, dulu 34px) supaya bahagian atasnya tak
     naik masuk jalur nav (butang Balik/Menu) — sprite tinggi, kepala hampir cecah atas
     skrin, jadi buih di atas kepala dulu bertindih Balik. */
  position:absolute; left:50%; bottom:calc(100% - 58px); margin-bottom:0;
  transform:translateX(-50%);
  z-index:2; pointer-events:none;
  width:max-content; max-width:min(300px,40vw);
  background:linear-gradient(180deg,#FFFFFF,#FFF6E8);
  border:4px solid #fff;
  border-radius:22px; padding:9px 15px;
  box-shadow:0 6px 0 rgba(224,154,0,.28), 0 12px 22px rgba(58,52,86,.22);
  text-align:center;
}
.companion-bubble[hidden]{display:none;}
.companion-bubble::after{
  content:""; position:absolute; left:50%; bottom:-15px; transform:translateX(-50%);
  border:11px solid transparent; border-top-color:#fff; border-bottom:0;
}
#companionBubbleText{
  font-weight:800; color:var(--ink);
  font-size:clamp(13px,1.7vw,17px); line-height:1.28;
}
.companion-bubble.pop{animation:bubblePop .28s cubic-bezier(.34,1.56,.64,1);}
@keyframes bubblePop{from{opacity:0; transform:translateX(-50%) translateY(9px) scale(.82)}to{opacity:1; transform:translateX(-50%) translateY(0) scale(1)}}

/* Jangan tunjuk bubble atas skrin Selamat Datang / menu utama */
body[data-screen="welcome"] .companion-bubble,
body[data-screen="menu"] .companion-bubble{display:none !important;}
/* Masa kad intro kelas dipapar, buih Cikgu Aisyah disorok — kad intro sendiri dah tunjuk
   avatar + ayat yang sama, jadi buih cuma jadi teks berganda + bertindih Balik. */
body[data-teach-intro] .companion-bubble{display:none !important;}

/* ======== SKRIN MULA2 START (Onboarding) ======== */
#screen-onboarding{padding:0; overflow:hidden;}
.onboard-layout{
  position:relative; z-index:10;
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; gap:2vw;
  padding:20px;
}
.onboard-left{
  flex:0 0 auto; display:flex; align-items:flex-end; justify-content:center;
  height:100%; max-width:38%;
}
#onboardCanvas{
  height:88%; width:auto; max-width:100%;
  object-fit:contain; pointer-events:none;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.25));
}
.onboard-right{
  flex:0 1 460px;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(12px,2.5vh,26px);
}
.onboard-bubble{
  background:linear-gradient(180deg,#ffffff 0%,#e8faf0 100%);
  color:var(--ink); font-weight:800;
  font-size:clamp(15px,2.6vw,22px); line-height:1.5;
  padding:18px 26px; border-radius:24px;
  border:4px solid #86EFAC;
  box-shadow:0 6px 0 rgba(34,197,94,.25), 0 10px 20px rgba(0,0,0,.12);
  text-align:center; max-width:100%;
  animation:speechIn .5s ease-out both;
}
@keyframes speechIn{from{opacity:0;transform:scale(.85)} to{opacity:1;transform:scale(1)}}
.onboard-input{
  width:100%; max-width:400px;
  font-family:inherit; font-weight:700; font-size:clamp(16px,2.4vw,22px);
  text-align:center; color:var(--ink);
  padding:14px 20px; border-radius:999px;
  border:4px solid var(--panel-border);
  background:#fff; box-shadow:var(--shadow);
  outline:none;
}
.onboard-input::placeholder{color:#9aa5b1; font-weight:600;}
.onboard-input:focus{border-color:var(--cyan-d);}
.onboard-btn{
  font-size:clamp(20px,3.2vw,30px) !important;
  padding:14px 44px !important; min-width:180px;
  opacity:.45; pointer-events:none;
  transition:opacity .2s ease;
}
.onboard-btn:not(:disabled){
  opacity:1; pointer-events:auto;
  animation:megaBounce 1.8s ease-in-out infinite;
}

/* ======== SKRIN LAPORAN IBU BAPA ======== */
#screen-laporan{
  padding:calc(var(--nav-h) + 10px) clamp(12px,3vw,32px) 16px;
  overflow-y:auto; justify-content:flex-start; align-items:center;
  background:linear-gradient(160deg,#eef4fb,#dbe7f5);
}
/* Gate ibu bapa */
.laporan-gate{
  position:absolute; inset:0; z-index:5;
  display:flex; align-items:center; justify-content:center;
  background:rgba(30,45,70,.55);
}
.laporan-gate[hidden]{display:none;}
.laporan-gate-card{
  background:#fff; border-radius:24px; padding:clamp(22px,4vh,40px) clamp(26px,4vw,48px);
  box-shadow:0 16px 40px rgba(0,0,0,.3); text-align:center; max-width:min(440px,88vw);
}
.laporan-gate-icon{font-size:clamp(40px,6vw,60px); line-height:1; margin-bottom:6px;}
.laporan-gate-card h2{margin:.2em 0; font-size:clamp(20px,3vw,28px); color:#1f2a44;}
.laporan-gate-card p{margin:.2em 0 1.1em; color:#5a6a82; font-size:clamp(14px,2.2vw,18px);}
.laporan-gate-btn{
  position:relative; overflow:hidden; border:none; cursor:pointer; font-family:inherit;
  width:min(280px,80vw); height:64px; border-radius:16px;
  background:#cbd8e8; color:#1f2a44; font-weight:900; font-size:clamp(15px,2.4vw,20px);
  touch-action:none; user-select:none;
}
.laporan-gate-fill{
  position:absolute; left:0; top:0; bottom:0; width:0;
  background:linear-gradient(90deg,#5EC9F5,#2E9FDF); z-index:0;
}
.laporan-gate-btn.holding .laporan-gate-fill{ width:100%; transition:width 3s linear; }
.laporan-gate-label{position:relative; z-index:1;}
/* Kandungan laporan */
.laporan-wrap{
  position:relative; z-index:1; width:100%; max-width:min(920px,94vw);
  display:flex; flex-direction:column; gap:clamp(10px,1.8vh,18px);
}
.laporan-wrap[hidden]{display:none;}
.laporan-header{
  display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px;
  background:#fff; border-radius:16px; padding:12px 20px; box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.laporan-title{font-size:clamp(18px,2.8vw,26px); font-weight:900; color:#1f2a44;}
.laporan-name{font-size:clamp(13px,2vw,17px); color:#5a6a82; font-weight:700;}
.laporan-cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:clamp(10px,1.6vw,16px);
}
.laporan-card{
  background:#fff; border-radius:16px; padding:14px 18px; box-shadow:0 4px 14px rgba(0,0,0,.08);
  display:flex; flex-direction:column; gap:8px;
}
.laporan-card-ujian{border:2px solid #FFD93D;}
.lc-head{display:flex; align-items:center; gap:8px;}
.lc-icon{font-size:clamp(22px,3vw,28px);}
.lc-nama{font-size:clamp(16px,2.3vw,20px); font-weight:800; color:#1f2a44;}
.lc-bar{height:12px; border-radius:99px; background:#e6edf5; overflow:hidden;}
.lc-bar-fill{height:100%; border-radius:99px; background:linear-gradient(90deg,#7ED957,#4CAF50); transition:width .4s ease;}
.lc-meta{display:flex; justify-content:space-between; font-size:clamp(12px,1.9vw,15px); color:#5a6a82; font-weight:600;}
.lc-meta b{color:#1f2a44;}
.lc-tp{
  align-self:flex-start; font-size:clamp(12px,1.9vw,15px); font-weight:800;
  padding:4px 12px; border-radius:99px;
}
.lc-tp.tp0{background:#eceff3; color:#8a97a8;}
.lc-tp.tp1{background:#fde8e8; color:#d9534f;}
.lc-tp.tp2{background:#fff3d6; color:#c58a00;}
.lc-tp.tp3{background:#e2f6e4; color:#3a9d43;}
.lc-last{font-size:clamp(11px,1.7vw,14px); color:#8a97a8;}
.laporan-strip{
  display:flex; flex-wrap:wrap; gap:clamp(10px,2vw,22px); justify-content:center;
  background:#fff; border-radius:16px; padding:12px 20px; box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.ls-item{display:flex; align-items:center; gap:6px; font-size:clamp(14px,2.2vw,18px); color:#1f2a44; font-weight:700;}
.ls-item .pearl-icon{width:22px; height:22px;}
.laporan-note{
  text-align:center; font-size:clamp(11px,1.7vw,13px); color:#7a879a; margin:2px 0 4px; line-height:1.4;
}

/* ======== SKRIN HADIAH (arked) ======== */
#screen-hadiah{
  padding:calc(var(--nav-h) + 10px) clamp(12px,3vw,32px) 16px; overflow-y:auto;
  justify-content:flex-start; align-items:center;
  background:url('../assets/bg_hadiah.png') center/cover no-repeat, #67E8F9;
}
#screen-hadiah .menu-bg, #screen-hadiah .menu-overlay{display:none;}
.hadiah-wrap{ position:relative; z-index:1; width:100%; max-width:min(960px,94vw); display:flex; flex-direction:column; align-items:center; gap:clamp(10px,2vh,18px); }
.hadiah-cooldown{
  background:#fff5d6; border:2px solid #FFD93D; border-radius:14px; padding:10px 18px;
  font-weight:800; color:#8a6d00; font-size:clamp(13px,2.1vw,17px); text-align:center; max-width:640px;
}
.hadiah-cooldown[hidden]{display:none;}
.hadiah-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,2.2vw,26px); width:100%;
}
.hadiah-card{
  border:none; cursor:pointer; font-family:inherit; background:rgba(255,255,255,.9);
  border-radius:22px; padding:clamp(10px,1.8vh,18px); box-shadow:0 6px 16px rgba(0,0,0,.15);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  transition:transform .12s ease;
}
.hadiah-card:hover{ transform:scale(1.05); }
.hadiah-card:active{ transform:scale(.95); }
.hadiah-card.locked{ filter:grayscale(.5) brightness(.9); cursor:not-allowed; }
.hadiah-card.shake{ animation:shake .4s ease; }
.hg-thumb{ width:100%; aspect-ratio:1/1; border-radius:16px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,#fff,#eef4fb); }
.hg-thumb img{ width:100%; height:100%; object-fit:cover; }
.hg-emoji{ font-size:clamp(46px,8vw,84px); }
.hg-nama{ font-weight:900; color:#1f2a44; font-size:clamp(14px,2.2vw,19px); text-align:center; }
.hg-lock{ display:flex; align-items:center; gap:5px; font-weight:800; color:#5a6a82; font-size:clamp(12px,1.9vw,15px); }
.hg-lock .pearl-icon{ width:18px; height:18px; }
/* Rekod terbaik pd kad game — beri sebab main semula */
.hg-best{
  display:inline-block; font-weight:900; color:#8a5a00;
  background:linear-gradient(180deg,#FFF3D6,#FFE9A8);
  border:2px solid #fff; border-radius:999px; padding:2px 12px;
  font-size:clamp(12px,1.9vw,15px);
  box-shadow:0 2px 0 var(--yellow-d);
}

/* ======== SKRIN MINI-GAME ======== */
#screen-minigame{ padding:0; background:linear-gradient(180deg,#1B1464,#2E2A8F); overflow:hidden; justify-content:flex-start; align-items:stretch; }
.mg-topbar{
  display:flex; align-items:center; gap:12px; padding:8px clamp(10px,2vw,22px); z-index:3;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  border-bottom:2px solid rgba(255,255,255,.15);
}
.mg-quit{
  border:none; cursor:pointer; width:44px; height:44px; border-radius:50%; flex:0 0 auto;
  background:#ff6b6b; color:#fff; font-size:20px; font-weight:900; box-shadow:0 3px 0 #c94a4a;
}
.mg-quit:active{ transform:translateY(2px); box-shadow:0 1px 0 #c94a4a; }
.mg-title{ flex:1; text-align:center; }
.mg-score{ flex:0 0 auto; font-size:clamp(18px,3vw,26px); font-weight:900; color:#fff; min-width:80px; text-align:right; text-shadow:0 2px 4px rgba(0,0,0,.4); }
.mg-countdown{ height:16px; background:rgba(255,255,255,.14); z-index:3; border-radius:0 0 10px 10px; overflow:hidden; margin:0 10px; }
.mg-countdown-fill{
  height:100%; width:100%;
  background:linear-gradient(90deg,#7ED957,#FFD93D 55%,#FF8A3D 80%,#F45B5B);
  border-radius:0 0 8px 8px;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.4);
  transition:width .1s linear;
}
.mg-host{ position:relative; flex:1; min-height:0; width:100%; overflow:hidden; }
.mg-host canvas{ display:block; width:100%; height:100%; }
.mg-result{ position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; background:rgba(10,20,40,.6); }
.mg-result[hidden]{ display:none; }
.mg-result-card{
  background:#fff; border-radius:26px; border:5px solid var(--yellow);
  padding:clamp(20px,4vh,38px) clamp(28px,5vw,52px); text-align:center;
  display:flex; flex-direction:column; gap:12px; align-items:center;
  animation:tutorialPopIn .4s cubic-bezier(.34,1.56,.64,1);
}
.mg-result-title{ font-size:clamp(24px,4vw,36px); font-weight:900; color:#1f2a44; }
.mg-result-score{ font-size:clamp(18px,3vw,26px); font-weight:800; color:#3a9d43; }
.mg-result-best{ font-size:clamp(14px,2.2vw,18px); font-weight:800; color:#5a6a82; }
.mg-result-best[hidden]{ display:none; }
.mg-result-best.rekod-baru{
  color:#8a5a00; font-size:clamp(16px,2.6vw,22px);
  animation:pulse 1s ease-in-out infinite;
}
.mg-result-bonus{ font-size:clamp(16px,2.6vw,22px); font-weight:800; color:#c58a00; }
@media (prefers-reduced-motion:reduce){ .mg-result-best.rekod-baru{animation:none;} }

/* ---- Game: Kad Memori ---- */
.mem-board{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(3,1fr); gap:clamp(6px,1.4vw,14px); padding:clamp(8px,2vh,20px); }
.mem-card{ position:relative; border:none; cursor:pointer; background:none; padding:0; perspective:600px; font-family:inherit; }
.mem-face{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; border-radius:14px; font-size:clamp(28px,6vw,60px); backface-visibility:hidden; transition:transform .3s; }
.mem-back{ background:linear-gradient(160deg,#5EC9F5,#2E9FDF); color:#fff; font-weight:900; }
.mem-front{ background:#fff; transform:rotateY(180deg); box-shadow:inset 0 0 0 3px #ffd93d; padding:8px; }
/* Ilustrasi kad (ganti emoji) — muat dlm kad tanpa memotong */
.mem-front img{ width:100%; height:100%; object-fit:contain; }
.mem-card.flip .mem-back{ transform:rotateY(180deg); }
.mem-card.flip .mem-front{ transform:rotateY(360deg); }
.mem-card.done{ opacity:.55; }

/* ---- Game: Letupkan Belon ---- */
.belon-wrap{ position:absolute; inset:0; overflow:hidden; }
.belon-banner{ position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:2; display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.92); border-radius:14px; padding:6px 18px; font-weight:900; color:#1f2a44; font-size:clamp(15px,2.6vw,22px); white-space:nowrap; }
/* Nombor sasaran besar — dicam sekali pandang tanpa perlu baca ayat */
.belon-target{
  display:inline-flex; align-items:center; justify-content:center;
  width:clamp(34px,5vw,46px); height:clamp(34px,5vw,46px); border-radius:50%;
  background:linear-gradient(180deg,#FFDF70,var(--yellow)); border:3px solid #fff;
  color:#7a5200; font-size:clamp(20px,3.4vw,30px); font-weight:900;
  box-shadow:0 2px 0 var(--yellow-d);
}
.belon{ position:absolute; border:none; cursor:pointer; width:clamp(52px,9vw,78px); height:clamp(64px,11vw,96px); border-radius:50% 50% 48% 48%; background:var(--bc,#ff6b6b); color:#fff; font-weight:900; font-size:clamp(22px,4vw,34px); box-shadow:inset -6px -8px 0 rgba(0,0,0,.12); font-family:inherit; }
.belon::after{ content:""; position:absolute; bottom:-8px; left:50%; width:2px; height:8px; background:rgba(0,0,0,.3); }
.belon.pop{ transform:scale(1.4); opacity:0; transition:.25s; }
.belon.wob{ animation:shake .3s ease; }

/* ---- Game: Tap Si Comel ---- */
.comel-grid{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:clamp(8px,2vw,20px); padding:clamp(10px,2.5vh,26px); }
.comel-hole{ position:relative; border-radius:50%; background:radial-gradient(ellipse at 50% 75%, #6b4a2a 0 60%, #8a6238 100%); overflow:hidden; box-shadow:inset 0 -8px 12px rgba(0,0,0,.35); }
.comel-critter{ position:absolute; left:50%; bottom:-100%; transform:translateX(-50%); border:none; background:none; cursor:pointer; font-size:clamp(34px,7vw,64px); transition:bottom .12s ease; font-family:inherit; padding:0; width:clamp(44px,8vw,76px); height:clamp(44px,8vw,76px); }
/* Ilustrasi haiwan (ganti emoji) */
.comel-critter img{ width:100%; height:100%; object-fit:contain; pointer-events:none; filter:drop-shadow(0 3px 4px rgba(0,0,0,.25)); }
.comel-critter.show{ bottom:8%; }
.comel-critter.bonk{ animation:bonkPop .15s ease; }
@keyframes bonkPop{ 50%{ transform:translateX(-50%) scale(.7); } }