/* Tunas Cerdik: Reka bentuk v4 "Dunia Si Tunas" (App #1 sahaja, <html class="v4">). Rujuk mockup/reka-v4/cadangan.html.
   Dimuat SELEPAS v2.css; semua peraturan berskop .v4 supaya App #2 dan landing tak terjejas.
   Fasa 1 (3 Okt 2026): laman utama, skrin soalan, skrin tamat misi. Skrin lain cuma dapat fon, warna dan butang baharu. */
.v4 {
  --kertas: #FFF7EA; --kertas-2: #F6EBD6; --kertas-3: #EADBC0;
  --dakwat: #1E3A2C; --dakwat-2: #56695D; --dakwat-3: #8C9A90;
  --tunas: #2EBD59; --tunas-gelap: #1E9A47; --tunas-muda: #DDF5E3;
  --langit-muda: #E2F1FE; --kunyit: #FFB627; --kunyit-gelap: #DB8D06; --kunyit-muda: #FFF0CC;
  --oren-lembut: #FF8A3D; --oren-gelap: #D9661A; --oren-muda: #FFEBDC;
  --ink: var(--dakwat); --ink2: var(--dakwat-2); --ink3: var(--dakwat-3); --bg: var(--kertas); --soft: var(--kertas-2); --line: var(--kertas-3);
  --font: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tajuk: "Baloo 2", "Lexend", system-ui, sans-serif;
  --baca: "Andika", "Lexend", system-ui, sans-serif;
}
.v4 body { background: var(--kertas); font-weight: 500; }
.v4 h1, .v4 h2, .v4 h3, .v4 .prompt { font-family: var(--tajuk); font-weight: 800; letter-spacing: -.005em; }
.v4 .card, .v4 .pcard, .v4 .tilebtn, .v4 .hchip { background: #fff; border-color: transparent; box-shadow: 0 3px 0 var(--kertas-3); }

/* ---------- Butang "batu sungai" ---------- */
.v4 .b3 { border-radius: 999px; font-family: var(--tajuk); font-weight: 800; font-size: 19px; letter-spacing: .04em; min-height: 56px; padding: 12px 22px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .28), 0 5px 0 var(--cd), 0 10px 18px -8px var(--cd); }
.v4 .b3:active:not(:disabled) { box-shadow: inset 0 3px 0 rgba(255, 255, 255, .28), 0 1px 0 var(--cd); }
.v4 .b3.yellow, .v4 .b3.kunyit { --c: var(--kunyit); --cd: var(--kunyit-gelap); --t: #4A2E00; }
.v4 .b3.ghost { --c: #fff; --cd: var(--kertas-3); --t: var(--tunas-gelap); border: 0; }
.v4 .b3:disabled, .v4 .b3.off { --c: var(--kertas-2); --cd: var(--kertas-3); --t: var(--dakwat-3); box-shadow: 0 5px 0 var(--cd); }
.v4 .b3.sm { min-height: 40px; font-size: 14px; padding: 8px 14px; }
.v4 .linkb { font-family: var(--tajuk); color: var(--tunas-gelap); }

/* ---------- Bar atas & navigasi bawah ---------- */
.v4 .topbar { background: var(--kertas); border-bottom: 0; }
.v4 .topbar .stat { font-family: var(--tajuk); font-weight: 800; }
.v4 .who { border: 0; border-radius: 999px; padding: 4px 12px 4px 4px; background: #fff; box-shadow: 0 2px 0 rgba(30, 58, 44, .12); font-weight: 700; }
.v4 .who .av { border-radius: 50%; }
.v4 .tabs-nav { background: linear-gradient(rgba(255, 247, 234, 0), var(--kertas) 45%); border-top: 0; padding: 8px 10px max(10px, env(safe-area-inset-bottom)); }
.v4 .tabs-nav .tn { display: flex; justify-content: space-around; width: 100%; background: #fff; border-radius: 24px; padding: 6px; box-shadow: 0 6px 20px -8px rgba(30, 58, 44, .35); }
.v4 .tabs-nav button { width: auto; height: auto; min-width: 70px; border: 0; border-radius: 16px; padding: 5px 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--dakwat-3); }
.v4 .tabs-nav button small { font-size: 11px; font-weight: 600; line-height: 1.2; }
.v4 .tabs-nav button.on { background: var(--tunas-muda); color: var(--tunas-gelap); border: 0; }

/* ---------- Laman utama: adegan taman + helaian ---------- */
.v4 .app.on-scene .topbar { position: absolute; left: 0; right: 0; top: 0; background: transparent; padding: max(12px, env(safe-area-inset-top)) 14px 0; justify-content: flex-start; }
.v4 .app.on-scene .topbar .who { margin-right: auto; }
.v4 .app.on-scene .topbar .stat { background: rgba(255, 255, 255, .92); border-radius: 999px; padding: 5px 11px 5px 8px; box-shadow: 0 2px 0 rgba(30, 58, 44, .12); color: var(--dakwat); font-size: 15px; }
.v4 .app.on-scene .topbar .stat svg { width: 22px; height: 22px; }
.scene-taman { position: relative; margin: 0 -16px; height: clamp(300px, 48dvh, 410px); background: #8FD3FF url(/assets/img/latar/taman.webp) center top / cover no-repeat; overflow: hidden; }
.scene-taman .sc-m { position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); width: 132px; height: 132px; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: end center; z-index: 2; }
.scene-taman .sc-m .illus, .scene-taman .sc-m img { width: 132px; height: 132px; }
.scene-taman .sc-say { position: absolute; left: 50%; bottom: 186px; transform: translateX(-50%); width: min(250px, calc(100% - 40px)); background: #fff; border-radius: 20px; padding: 10px 14px; text-align: center; box-shadow: 0 3px 0 rgba(30, 58, 44, .1); z-index: 2; }
.scene-taman .sc-say::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 16px; height: 16px; margin-left: -8px; background: #fff; transform: rotate(45deg); border-radius: 3px; }
.scene-taman .sc-say b { display: block; font-family: var(--tajuk); font-size: 20px; font-weight: 800; line-height: 1.15; }
.scene-taman .sc-say small { display: block; font-size: 13px; color: var(--dakwat-2); margin-top: 2px; line-height: 1.3; }
.v4-sheet { position: relative; z-index: 3; margin: -30px -16px 0; padding: 10px 16px 6px; background: var(--kertas); border-radius: 30px 30px 0 0; box-shadow: 0 -8px 24px -14px rgba(30, 58, 44, .35); }
.v4-sheet .handle { width: 40px; height: 5px; border-radius: 9px; background: var(--kertas-3); margin: 0 auto 12px; }
.misi-lbl { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dakwat-3); }
.misi-ttl { font-family: var(--tajuk); font-weight: 800; font-size: 25px; line-height: 1.1; margin: 2px 0 12px; }
.langkah { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.lk { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 18px; padding: 8px 12px 8px 8px; }
.lk .lk-ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.lk .lk-ic svg { width: 26px; height: 26px; }
.lk .tx { min-width: 0; flex: 1; }
.lk b { display: block; font-size: 15px; font-weight: 600; line-height: 1.2; }
.lk small { display: block; font-size: 12px; color: var(--dakwat-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk .st { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--kertas-2); }
.lk .st svg { width: 16px; height: 16px; }
.lk.siap { background: var(--tunas-muda); }
.lk.siap .st { background: var(--tunas); color: #fff; }
.misi-rest { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 20px; padding: 14px 16px; margin-bottom: 4px; }
.misi-rest b { display: block; font-family: var(--tajuk); font-size: 19px; font-weight: 800; line-height: 1.15; }
.misi-rest small { display: block; color: var(--dakwat-2); font-size: 14px; }
/* Notis bahasa suara (3 Okt 2026): suara guru hanya dalam bahasa Inggeris buat masa ini */
.suara-nota { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 16px; padding: 10px 6px 10px 12px; margin-top: 12px; box-shadow: 0 3px 0 var(--kertas-3); }
.suara-nota .sn-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #2B9CF2; }
.suara-nota .tx { flex: 1; min-width: 0; }
.suara-nota b { display: block; font-size: 15px; line-height: 1.25; }
.suara-nota small { display: block; color: var(--dakwat-2); font-size: 13px; line-height: 1.35; margin-top: 2px; }
.suara-nota .sn-x { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; color: var(--dakwat-3); border-radius: 12px; cursor: pointer; }
.v4 .hero-btn { min-height: 64px; font-size: 22px; border-radius: 999px; }
.v4 .hchips { margin-top: 14px; }
.v4 .hchip { border: 0; border-radius: 20px; }
.v4 .hchip.ready { background: var(--kunyit-muda); box-shadow: 0 0 0 2px var(--kunyit), 0 3px 0 var(--kunyit-gelap); }
.v4 .season-card { margin-top: 14px !important; }
.v4 .unit-banner { border-radius: 20px; }
.v4 .unit-banner b, .v4 .node-name { font-family: var(--tajuk); }
.laluan-lbl { font-family: var(--tajuk); font-weight: 800; font-size: 20px; margin: 22px 2px 0; }
/* Peta pulau (latar S2): pulau = pentas, biji benih atas pulau. Kad pulau terapung atas laut. */
.peta { margin: 10px -16px 0; padding: 4px 0 26px; background: linear-gradient(#12A6F8, #0794F0 60%, #0A9AF3); overflow: hidden; }
.pulau-kad { position: relative; z-index: 3; display: flex; align-items: center; gap: 12px; margin: 14px 16px 0; background: #fff; border-radius: 20px; padding: 10px 14px 10px 10px; box-shadow: 0 4px 0 rgba(0, 60, 110, .25); }
.pulau-kad .pk-ic { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; flex: none; }
.pulau-kad .pk-tx { flex: 1; min-width: 0; }
.pulau-kad small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dakwat-3); }
.pulau-kad b { display: block; font-family: var(--tajuk); font-weight: 800; font-size: 20px; line-height: 1.1; }
.pk-bar { height: 7px; border-radius: 9px; background: var(--kertas-2); margin-top: 6px; overflow: hidden; }
.pk-bar i { display: block; height: 100%; border-radius: 9px; min-width: 7px; }
.pulau-kad .pk-n { font-family: var(--tajuk); font-weight: 800; font-size: 17px; color: var(--dakwat-2); flex: none; }
.pentas { position: relative; margin-top: -6px; }
.pt-in { position: relative; width: 135%; left: -17.5%; }
.pt-img { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(transparent, #000 8%, #000 92%, transparent); }
.pt-img.cermin { transform: scaleX(-1); }
.pt-garis { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pj { position: absolute; z-index: 2; width: 0; height: 0; display: grid; place-items: center; }
.pj.pj-kini { z-index: 4; }
.pj > .biji-n { position: absolute; left: -27px; top: -24px; }
.biji-n { position: relative; width: 54px; height: 48px; border: 0; padding: 0; background: none; cursor: pointer; flex: none; --c: var(--node-c, var(--tunas)); --cd: var(--node-cd, var(--tunas-gelap)); }
.biji-n .bj { position: absolute; inset: 0; border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%; display: grid; place-items: center; color: #fff; background: var(--c);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .4), 0 5px 0 var(--cd), 0 8px 12px -4px rgba(0, 40, 20, .35); transition: transform .06s, box-shadow .06s; }
.biji-n .bj svg { width: 24px; height: 24px; }
.biji-n:active:not(:disabled) .bj { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .4), 0 1px 0 var(--cd); }
.biji-n.siap .bj { background: linear-gradient(160deg, #FFD15C, #F2A60C); --cd: #C47E00; }
.biji-n.kunci { cursor: default; }
.biji-n.kunci .bj { background: #E4EBE6; --cd: #AEBDB4; }
.biji-n.kini::before { content: ""; position: absolute; inset: -8px; border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%; background: #fff; opacity: .55; animation: bijipulse 1.8s ease-in-out infinite; }
@keyframes bijipulse { 50% { transform: scale(1.14); opacity: .15; } }
.biji-n .pucuk { position: absolute; z-index: 1; top: -15px; left: 50%; width: 28px; height: 21px; margin-left: -14px; }
.biji-n.peti .bj { border-radius: 18px; }
.biji-n.peti .bj svg { width: 34px; height: 34px; }
.biji-n.peti.kunci .bj svg { opacity: .55; filter: grayscale(.6); }
.biji-n.pesta .bj { background: var(--oren-lembut); --cd: var(--oren-gelap); }
.biji-n.pesta::before { content: ""; position: absolute; inset: -8px; border-radius: 24px; background: #fff; opacity: .5; animation: bijipulse 1.8s ease-in-out infinite; }
.pj-lbl { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: #fff; color: var(--dakwat); border-radius: 10px; padding: 2px 10px; font-family: var(--tajuk); font-weight: 800; font-size: 13px; line-height: 1.5; box-shadow: 0 2px 0 rgba(0, 40, 20, .18); }
.pj.lbl-atas .pj-lbl { top: auto; bottom: 34px; } /* baris atas: label di atas biji supaya tak tertindih baris bawah */
.pj-m { position: absolute; left: -32px; top: -86px; width: 64px; pointer-events: none; z-index: 1; } /* boneka v2 bernafas sendiri; transform dipakai untuk lompat antara biji */
.pj-m .illus, .pj-m img { width: 60px; height: 60px; }
@keyframes pjbob { 50% { transform: translateY(-4px); } }
/* kurangkan gerakan: pilihan ibu bapa (fx.js setGerak), bukan tetapan telefon */ html.kurang-gerak .biji-n.kini::before, html.kurang-gerak .biji-n.pesta::before, html.kurang-gerak .pj-m { animation: none; }

/* ---------- Skrin soalan ---------- */
.v4 .lesson { background: var(--kertas); }
.v4 .lesson-top { padding: max(14px, env(safe-area-inset-top)) 16px 6px; }
.v4 .lesson-top .iconb { color: var(--dakwat-3); }
.v4 .pbar { height: 16px; background: var(--kertas-2); overflow: visible; }
.v4 .pbar span { background: linear-gradient(90deg, #45CF6E, var(--tunas)); min-width: 20px; }
.v4 .pbar span::after { left: auto; right: -14px; top: 50%; width: 30px; height: 24px; margin-top: -16px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'%3E%3Cpath d='M15 21V10' stroke='%231E9A47' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M15 11C12 4 6 2 1.5 4 3 10 9 12.5 15 11z' fill='%2345CF6E'/%3E%3Cpath d='M15 9.5C17 3.5 23 1 28.5 2.5 27.5 8.5 21 11 15 9.5z' fill='%232EBD59'/%3E%3C/svg%3E") center / contain no-repeat; }
.v4 .combo-pill { background: var(--oren-lembut); box-shadow: 0 3px 0 var(--oren-gelap); font-family: var(--tajuk); }
.v4 .lesson-top .stat { font-family: var(--tajuk); font-weight: 800; }
.v4 .q-mascot { width: 100px; height: 100px; transition: opacity .2s; }
.v4 .q-mascot .illus, .v4 .q-mascot img { width: 100px; height: 100px; }
.v4 .q-bubble { border: 0; border-radius: 22px; box-shadow: 0 3px 0 rgba(30, 58, 44, .1); padding: 12px 14px; }
.v4 .q-bubble::before { display: none; }
.v4 .q-bubble::after { left: -7px; margin-top: -8px; border: 0; width: 16px; height: 16px; background: #fff; transform: rotate(45deg); border-radius: 3px; }
.v4 .q-bubble b { font-family: var(--tajuk); font-weight: 800; font-size: 21px; }
.v4 .q-spk { border-radius: 14px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), 0 3px 0 var(--blue-d); }
.v4 .q-bubble:active { transform: translateY(2px); }
.v4 .q-bubble.tone-no { background: var(--oren-muda); border: 0; } .v4 .q-bubble.tone-no::after { background: var(--oren-muda); }
.v4 .q-bubble.tone-hint { background: var(--kunyit-muda); border: 0; } .v4 .q-bubble.tone-hint::after { background: var(--kunyit-muda); }
.v4 .big-spk { box-shadow: inset 0 4px 0 rgba(255, 255, 255, .3), 0 8px 0 var(--blue-d); }
.v4 .q-stage .big-word, .v4 .big-word, .v4 .big-glyph:not(.ar), .v4 .seq, .v4 .sum { font-family: var(--baca); font-weight: 700; }
.v4 .q-stage .big-word { border: 0; box-shadow: 0 5px 0 var(--kertas-3); }
/* Jubin jawapan: kad putih, bayang krim; teks bacaan dalam Andika (huruf a & g bentuk sekolah) */
.v4 .opt, .v4 .q .opts .opt { border: 0; background: #fff; box-shadow: 0 5px 0 var(--kertas-3); border-radius: 22px; color: var(--dakwat); font-family: var(--baca); font-weight: 700; }
.v4 .opt:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--kertas-3); }
.v4 .opt.ar-opt span { font-family: var(--ar); }
.v4 .opt.sel { background: var(--langit-muda); box-shadow: 0 0 0 3px var(--blue), 0 5px 0 var(--blue-d); color: var(--blue-d); }
.v4 .opt.right, .v4 .q .opts .opt.right { background: var(--tunas-muda); box-shadow: 0 0 0 3px var(--tunas), 0 5px 0 var(--tunas-gelap); color: var(--tunas-gelap); }
.v4 .opt.wrong, .v4 .q .opts .opt.wrong { background: var(--oren-muda); box-shadow: 0 0 0 3px #FFB98A, 0 5px 0 #F0C3A5; color: var(--oren-gelap); }
.v4 .q .opts .opt.hint { background: var(--kunyit-muda); box-shadow: 0 0 0 3px var(--kunyit), 0 5px 0 var(--kunyit-gelap); }
.v4 .q .slot { font-family: var(--baca); font-weight: 700; border-color: var(--kertas-3); background: var(--kertas-2); }
.v4 .q .slot.full { border-color: transparent; background: var(--langit-muda); box-shadow: 0 0 0 3px var(--blue); }
.v4 .q .slots.right .slot { background: var(--tunas-muda); box-shadow: 0 0 0 3px var(--tunas); color: var(--tunas-gelap); }
.v4 .tile, .v4 .q .tile { border: 0; background: #fff; box-shadow: 0 5px 0 var(--kertas-3); font-family: var(--baca); font-weight: 700; color: var(--dakwat); }
.v4 .q .trace-wrap { border: 0; box-shadow: 0 5px 0 var(--kertas-3); background: #fff; }
.v4 .trace-erase { border: 0; box-shadow: 0 3px 0 var(--kertas-3); }
.v4 .flash, .v4 .q .flash { border: 0; box-shadow: 0 5px 0 var(--kertas-3); }
.v4 .flash .g:not(.ar) { font-family: var(--baca); font-weight: 700; }
.v4 .flash.seen { background: var(--langit-muda); box-shadow: 0 0 0 3px var(--blue-b), 0 5px 0 var(--blue-b); }
.v4 .q .teach-bubble { border: 0; box-shadow: 0 3px 0 var(--kertas-3); background: #fff; }
/* Panel bawah & helaian maklum balas: hijau (betul) / oren lembut (hampir), Si Tunas mengintai dari helaian */
.v4 .lesson-foot { background: var(--kertas); border-top: 0; }
.v4 .lesson-foot.ok { background: var(--tunas-muda); }
.v4 .lesson-foot.no { background: var(--oren-muda); }
.v4 .lesson-foot.no .res { color: var(--oren-gelap); }
.v4 .lesson-foot .res b { font-family: var(--tajuk); font-weight: 800; font-size: 26px; }
.v4 .lesson-foot.float { border-radius: 28px 28px 0 0; padding-top: 20px; padding-bottom: max(26px, env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px -12px rgba(30, 58, 44, .3); overflow: visible; }
.v4 .lesson-foot .foot-m { position: absolute; right: 18px; top: -78px; width: 104px; height: 104px; pointer-events: none; animation: footpeek .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.v4 .lesson-foot .foot-m .illus, .v4 .lesson-foot .foot-m img { width: 104px; height: 104px; }
@keyframes footpeek { from { transform: translateY(40px) scale(.7); opacity: 0; } }
.v4 .lesson:has(.lesson-foot.float) .q-mascot { opacity: .35; }
.v4 .res .badge { box-shadow: 0 2px 0 rgba(30, 58, 44, .08); }

/* ---------- Skrin tamat: adegan petang + "penemuan" ---------- */
.v4 .cel { background: #FFB86B url(/assets/img/latar/petang.webp) center bottom / cover no-repeat; color: #4A2A08; }
.v4 .cel-body { gap: 12px; justify-content: flex-start; padding-top: max(40px, calc(env(safe-area-inset-top) + 24px)); }
.v4 .cel-body h1 { font-family: var(--tajuk); font-weight: 800; font-size: 36px; color: #5A3200 !important; line-height: 1.05; } /* !important: langkah lain guna warna inline yang tak terbaca atas oren */
.v4 .cel-body .muted, .v4 .cel-body p { color: #7A4A12; }
.v4 .cel-hero { margin: 4px 0 -4px; }
.v4 .cel-hero .illus, .v4 .cel-hero img { width: 150px; height: 150px; }
.v4 .cel .lesson-foot { background: transparent; }
.v4 .cel-skip { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.jumpa-lbl { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8A5A1A; margin-top: 6px; }
.dapat { width: 100%; max-width: 400px; display: flex; align-items: center; gap: 12px; text-align: left; background: rgba(255, 255, 255, .9); border-radius: 20px; padding: 10px 14px 10px 10px; transition: opacity .25s, transform .35s cubic-bezier(.34, 1.56, .64, 1); color: var(--dakwat); }
.dapat.hide { opacity: 0; transform: translateY(12px); }
.dapat .ik { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; flex: none; background: var(--kunyit-muda); overflow: hidden; }
.dapat .ik svg { width: 28px; height: 28px; }
.dapat small { display: block; font-size: 12px; color: var(--dakwat-3); font-weight: 600; }
.dapat b { font-size: 17px; font-weight: 700; }
.dapat.pokok { align-items: center; }
.dapat.pokok .ik { background: var(--langit-muda); width: 64px; height: 64px; }
.dapat.pokok .cs-main { gap: 4px; }
.v4 .cel .pick3 .stkpick, .v4 .cel .card { background: rgba(255, 255, 255, .92); }
.v4 .cel .hatched, .v4 .cel .egg-wrap { filter: drop-shadow(0 8px 10px rgba(90, 50, 0, .2)); }

/* ---------- Skrin lain dalam App #1 (rehat, mula misi, pintu): latar krim ---------- */
.v4 .done-body h1 { font-family: var(--tajuk); }
.v4 .toast { font-family: var(--font); }
/* Telefon pendek: butang Mula misi mesti nampak tanpa skrol (satu tekan terus ke soalan) */
@media (max-height: 740px) {
  .scene-taman { height: max(240px, 38dvh); }
  .scene-taman .sc-m, .scene-taman .sc-m .illus, .scene-taman .sc-m img { width: 96px; height: 96px; }
  .scene-taman .sc-m { bottom: 32px; }
  .scene-taman .sc-say { bottom: 130px; padding: 7px 14px; width: auto; max-width: calc(100% - 40px); white-space: nowrap; }
  .scene-taman .sc-say b { font-size: 18px; }
  .scene-taman .sc-say small { display: none; }
  .misi-ttl { font-size: 22px; margin-bottom: 8px; }
  .langkah { gap: 6px; margin-bottom: 12px; }
  .lk { padding: 5px 10px 5px 6px; }
  .lk .lk-ic { width: 36px; height: 36px; border-radius: 12px; }
  .v4 .hero-btn { min-height: 56px; font-size: 20px; }
}
/* kurangkan gerakan: pilihan ibu bapa (fx.js setGerak), bukan tetapan telefon */ html.kurang-gerak.v4 .lesson-foot .foot-m { animation: none; }

/* =====================================================================
   Fasa 2B (3 Okt 2026): Album (pelekat + kawan taman), Taman Ilmu, profil. Rujuk mockup/reka-v4/fasa2b.html.
   ===================================================================== */
/* ---------- Album ---------- */
.v4 .album-ttl { font-size: 28px; margin: 14px 0 10px; }
.segk { display: flex; background: var(--kertas-2); border-radius: 999px; padding: 4px; margin: 0 0 14px; }
.segk button { flex: 1; border: 0; background: none; padding: 8px 4px; border-radius: 999px; font-family: var(--tajuk); font-weight: 800; font-size: 16px; color: var(--dakwat-3); cursor: pointer; }
.segk button.on { background: #fff; color: var(--dakwat); box-shadow: 0 2px 0 rgba(30, 58, 44, .08); }
.segk small { font-family: var(--font); font-weight: 600; font-size: 12px; margin-left: 5px; opacity: .75; }
.esok-kad { background: #fff; border-radius: 20px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; box-shadow: 0 3px 0 var(--kertas-3); margin-bottom: 6px; }
.esok-kad .tx { flex: 1; line-height: 1.25; }
.esok-kad .tx b { display: block; font-family: var(--tajuk); font-weight: 800; font-size: 17px; }
.esok-kad .tiga { display: flex; gap: 2px; }
.esok-kad .stk { width: 50px; }
.hal { position: relative; margin-top: 26px; background: #fff; border-radius: 22px; padding: 24px 10px 10px; box-shadow: 0 3px 0 var(--kertas-3);
  background-image: radial-gradient(#F3E8D2 1.2px, transparent 1.2px); background-size: 13px 13px; }
.hal .pita { position: absolute; top: -12px; left: 14px; padding: 3px 14px 2px; font-family: var(--tajuk); font-weight: 800; font-size: 15px; color: #3B2A10; transform: rotate(-2.5deg); opacity: .94;
  clip-path: polygon(3% 0, 97% 0, 100% 20%, 97% 40%, 100% 60%, 97% 80%, 100% 100%, 3% 100%, 0 80%, 3% 60%, 0 40%, 3% 20%); }
.hal .bil { position: absolute; top: 7px; right: 14px; font-size: 12px; font-weight: 700; color: var(--dakwat-3); }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.v4 .stk { aspect-ratio: 1; border: 0; border-radius: 0; background: none; overflow: visible; display: grid; place-items: center; position: relative; padding: 0; cursor: pointer; }
.v4 .stk .illus { width: 90%; height: 90%; object-fit: contain; }
.v4 .stk.got .illus { transform: rotate(var(--r, 0deg)); filter: drop-shadow(0 2px 2px rgba(80, 50, 0, .2)); transition: transform .15s; }
.v4 .stk.got:active .illus { transform: rotate(0) scale(1.08); }
.v4 .stk.bayang .illus, .v4 .ani.bayang .illus { filter: brightness(0); opacity: .12; }
.v4 .stk.esok::before { content: ""; position: absolute; inset: 4%; border-radius: 50%; border: 2px dashed var(--kunyit); opacity: .8; }
.v4 .baru { position: absolute; top: -3px; right: -4px; z-index: 2; background: var(--kunyit); color: #4A2E00; font-style: normal; font-family: var(--font); font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 1px 6px; border-radius: 99px; box-shadow: 0 2px 0 var(--kunyit-gelap); }
.telur-kad { background: #fff; border-radius: 20px; padding: 10px 14px 12px 10px; display: flex; gap: 10px; align-items: center; box-shadow: 0 3px 0 var(--kertas-3); margin-bottom: 16px; }
.telur-kad .egg { width: 50px; height: 58px; flex: none; }
.telur-kad .egg .crack { display: none; }
.telur-kad .tx { flex: 1; font-size: 13px; line-height: 1.35; color: var(--dakwat-2); }
.telur-kad .tx b { display: block; font-family: var(--tajuk); font-weight: 800; font-size: 17px; color: var(--dakwat); }
.batang { height: 10px; border-radius: 9px; background: var(--kertas-2); margin-top: 7px; overflow: hidden; }
.batang i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, #45CF6E, var(--tunas)); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 6px; }
.ani { display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; background: none; padding: 0; position: relative; cursor: pointer; color: var(--dakwat); }
.ani > span { width: 88px; height: 88px; border-radius: 50%; background: radial-gradient(circle at 50% 72%, #C9EED2 0, #E9F8ED 70%); display: grid; place-items: center; box-shadow: inset 0 -5px 0 rgba(30, 120, 60, .08); }
.ani.bayang > span { background: var(--kertas-2); box-shadow: none; }
.ani .illus { width: 74px; height: 74px; object-fit: contain; }
.ani b { font-size: 14px; line-height: 1.15; text-align: center; }
.ani.bayang b { color: var(--dakwat-3); font-family: var(--tajuk); font-weight: 800; }
.ani .baru { right: 6px; }
/* Paparan besar */
.lihat { position: fixed; inset: 0; z-index: 80; background: radial-gradient(circle at 50% 33%, #4B8A60 0, #24412F 45%, #132219 80%); display: flex; flex-direction: column; align-items: center; padding: max(16px, env(safe-area-inset-top)) 16px 24px; animation: lihatmasuk .25s ease-out; touch-action: pan-y; }
@keyframes lihatmasuk { from { opacity: 0; } }
.lihat .x { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .16); display: grid; place-items: center; color: #fff; cursor: pointer; }
.lihat .besar { position: relative; margin-top: clamp(40px, 9dvh, 96px); width: min(100%, 340px); height: 250px; display: grid; place-items: center; }
.lihat .sinar { position: absolute; width: 270px; height: 270px; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 255, 255, .12) 0 10deg, transparent 10deg 24deg);
  -webkit-mask-image: radial-gradient(#000 25%, transparent 70%); mask-image: radial-gradient(#000 25%, transparent 70%); animation: sinar 24s linear infinite; }
@keyframes sinar { to { transform: rotate(360deg); } }
.lihat .utama { position: relative; animation: lihatpop .4s cubic-bezier(.34, 1.56, .64, 1); }
.lihat .utama .illus { width: 210px; height: 210px; object-fit: contain; transform: rotate(-4deg); filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .35)); }
@keyframes lihatpop { from { transform: scale(.6); opacity: 0; } }
.lihat .ap { position: absolute; top: 50%; margin-top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .16); display: grid; place-items: center; color: #fff; cursor: pointer; }
.lihat .ap.k { left: 0; } .lihat .ap.n { right: 0; }
.lihat .kad { position: relative; margin-top: 22px; width: 100%; max-width: 400px; background: var(--kertas); border-radius: 26px; padding: 18px 16px 16px; text-align: center; }
.lihat .kad h2 { font-size: 32px; font-weight: 800; margin: 4px 0 2px; line-height: 1.1; }
.lihat .kad h2.andika { font-family: var(--baca); font-weight: 700; }
.lihat .kad p { font-size: 15px; color: var(--dakwat-2); margin: 0; }
.lihat .kad .intai { position: absolute; right: 10px; top: -58px; width: 76px; height: 76px; }
.lihat .kira { color: rgba(255, 255, 255, .7); font-size: 13px; font-weight: 600; margin-top: 14px; }
.spk-b { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; border: 0; background: var(--blue); color: #fff; border-radius: 999px; padding: 9px 18px 9px 14px; font-family: var(--tajuk); font-weight: 800; font-size: 17px; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3), 0 4px 0 var(--blue-d); cursor: pointer; }
.spk-b:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3), 0 1px 0 var(--blue-d); }
/* kurangkan gerakan: pilihan ibu bapa (fx.js setGerak), bukan tetapan telefon */ html.kurang-gerak .lihat .sinar, html.kurang-gerak .lihat .utama, html.kurang-gerak .lihat { animation: none; }

/* ---------- Sambutan: telur menetas (5 Okt 2026, app/telur.js, mockup/telur-sijil-v1) ---------- */
.v4 .cel.cel-v2 .cel-body h1.huruf.telur-t { color: #D9850B !important; }
.v4 .cel-chip { display: inline-block; margin-top: -6px; padding: 4px 14px; border-radius: 99px; background: #fff; box-shadow: 0 3px 0 var(--kertas-3); font-family: var(--tajuk); font-weight: 800; font-size: 16px; color: var(--dakwat); transition: opacity .25s, transform .25s; }
.v4 .cel-chip.pudar { opacity: 0; transform: scale(.7); }
.v4 .cel-v2 .telur-s { opacity: 0; transition: opacity .35s .3s, transform .35s .3s; transform: translateY(10px); margin: 0 24px; }
.v4 .cel-v2 .telur-s.on { opacity: 1; transform: none; }
.tl-pentas { position: relative; width: 350px; height: 340px; margin: 0 auto; flex: none; }
.tl-sarang { position: absolute; left: 122px; bottom: 30px; width: 224px; height: 67px; }
.tl-sarang svg { width: 100%; height: 100%; display: block; }
.tl-telur { position: absolute; left: 149px; bottom: 58px; width: 170px; height: 202px; cursor: pointer; outline: none; }
.tl-telur svg { position: absolute; inset: 0; width: 170px; height: 202px; overflow: visible; }
.tl-telur:focus-visible { outline: 3px solid var(--kunyit); outline-offset: 6px; border-radius: 50%; }
.tl-isi { position: absolute; left: -5px; bottom: 6px; width: 180px; height: 180px; display: grid; place-items: center; opacity: 0; filter: drop-shadow(0 6px 8px rgba(80, 50, 0, .2)); }
.tl-isi .illus, .tl-isi svg { width: 180px; height: 180px; object-fit: contain; }
.tl-isi svg { width: 150px; height: 150px; }
.tl-denyut { position: absolute; left: 50%; top: 55%; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%; border: 3px solid rgba(255, 182, 39, .7); animation: tl-denyut 1.6s ease-out infinite; pointer-events: none; }
.tl-denyut.b { animation-delay: .8s; }
@keyframes tl-denyut { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.tl-ketuk { position: absolute; left: 172px; top: 4px; padding: 6px 14px; border-radius: 99px; background: var(--kunyit); color: #4A2E00; font-family: var(--tajuk); font-weight: 800; font-size: 17px; box-shadow: 0 3px 0 var(--kunyit-gelap); white-space: nowrap; pointer-events: none; }
.tl-ketuk::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; width: 12px; height: 12px; background: var(--kunyit); transform: rotate(45deg); border-radius: 2px; }
.tl-tn { position: absolute; left: 2px; bottom: 30px; width: 124px; }
.tl-tn .tunas { width: 124px; }
.tl-kilau { position: absolute; left: 234px; top: 190px; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; background: radial-gradient(circle, #fff 0 25%, rgba(255, 255, 255, 0) 62%); opacity: 0; pointer-events: none; }
.tl-cip { position: absolute; width: 10px; height: 8px; background: #F7E6C4; border: 1.5px solid #E2C690; border-radius: 3px; pointer-events: none; }
.v4 .cel.cel-v2 .cel-body h1.huruf.sijil-t { color: var(--tunas-gelap, #1E8F40) !important; }
.v4 .cel-v2 .sj-nota { margin: 14px 24px 0; color: var(--dakwat-2); font-size: 15px; }
@media (max-width: 360px) { .tl-pentas { transform: scale(.88); transform-origin: 50% 0; margin-bottom: -40px; } }
/* kurangkan gerakan: pilihan ibu bapa (fx.js setGerak), bukan tetapan telefon */ html.kurang-gerak .tl-denyut { animation: none; opacity: .6; }

/* ---------- Album › Lencana (5 Okt 2026, mockup/lencana-v1): galeri lencana Hari Belajar ---------- */
.v4 .segk.tiga button { display: flex; flex-direction: column; align-items: center; font-size: 15px; line-height: 1.05; padding: 6px 4px 5px; }
.v4 .segk.tiga small { margin: 1px 0 0; font-size: 11.5px; }
.lc-nx { position: relative; background: #fff; border-radius: 20px; padding: 12px 84px 14px 12px; display: flex; gap: 12px; align-items: center; box-shadow: 0 3px 0 var(--kertas-3); }
.lc-nx > .lc-b { position: relative; width: 58px; flex: none; }
.lc-nx > .lc-b[data-nxlb]::before { content: ""; position: absolute; inset: -6px -8px -2px; border-radius: 50%; border: 2px dashed var(--kunyit); animation: lc-putar 14s linear infinite; }
.lc-b svg { display: block; width: 100%; height: auto; overflow: visible; }
.lc-nx .tx { flex: 1; line-height: 1.25; font-size: 13px; color: var(--dakwat-2); }
.lc-nx .tx b { display: block; font-family: var(--tajuk); font-weight: 800; font-size: 18px; line-height: 1.15; color: var(--dakwat); margin-top: 1px; }
.lc-nx .lagi { margin-top: 5px; font-weight: 600; }
.lc-nx .lagi b { display: inline; font-size: 14px; color: #2479C9; }
.batang.biru { height: 12px; }
.batang.biru i { width: 0; background: linear-gradient(90deg, #58B8FF, #3A9CF2); }
.lc-tn { position: absolute; right: 2px; bottom: 2px; width: 78px; }
.lc-tn .tunas { width: 78px; }
.lc-hal { padding: 26px 8px 14px; }
.lc-hal .pita { background: #BFE3FF; color: #10345A; }
.lc-hal .grid3 { gap: 16px 4px; }
.lc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; padding: 0; cursor: pointer; color: var(--dakwat); font-family: var(--font); }
.lc > .lc-b { position: relative; width: 92px; }
.lc.got > .lc-b svg { filter: drop-shadow(0 3px 2px rgba(80, 50, 0, .18)); }
.lc:active > .lc-b { transform: scale(.94); }
.lc b { font-family: var(--tajuk); font-weight: 800; font-size: 16px; line-height: 1.1; margin-top: 2px; }
.lc small { font-size: 11.5px; font-weight: 600; color: var(--dakwat-3); }
.lc.seterus small { color: #2479C9; font-weight: 700; }
.lc.kunci b { color: var(--dakwat-3); }
.lc.seterus > .lc-b::before { content: ""; position: absolute; inset: -4px -6px 0; border-radius: 50%; border: 2px dashed var(--kunyit); animation: lc-putar 14s linear infinite; }
.lc .baru { top: -2px; right: -6px; }
.lc-kil { animation: lc-kilat 5.5s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes lc-kilat { 0%, 72% { transform: translateX(-120px) skewX(-20deg); } 92%, 100% { transform: translateX(300px) skewX(-20deg); } }
@keyframes lc-putar { to { transform: rotate(360deg); } }
.lc-nota { text-align: center; color: var(--dakwat-3); font-size: 12.5px; margin: 18px 10px 0; }
.lc-lihat { justify-content: center; }
.lc-lihat .besar { margin-top: -40px; height: 280px; }
.lc-lihat.kunci .sinar { opacity: .35; }
.lc-lihat .lc-utama { width: 200px; animation: none; }
.lc-lihat .lc-utama svg { width: 200px; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .35)); }
.lc-lihat .kad { margin-top: 26px; }
.lc-lihat .kad h2 { font-size: 30px; }
.lc-lihat .kad .batang { max-width: 220px; margin: 10px auto 0; }
.lc-ktn { position: absolute; right: 8px; top: -74px; width: 92px; }
.lc-ktn .tunas { width: 92px; }
/* kurangkan gerakan: pilihan ibu bapa (fx.js setGerak), bukan tetapan telefon */ html.kurang-gerak .lc-kil, html.kurang-gerak .lc-nx > .lc-b::before, html.kurang-gerak .lc.seterus > .lc-b::before { animation: none; } html.kurang-gerak .lc-kil { display: none; }

/* ---------- Pokok Ilmu: ilustrasi 5 peringkat tanpa pasu (3 Okt 2026, site/assets/js/app/tree.js) ---------- */
.v4 .tree { position: relative; display: inline-block; width: var(--w, 200px); max-width: 100%; vertical-align: bottom; }
.v4 .tree img { display: block; width: 100%; height: auto; aspect-ratio: 400 / 515; -webkit-user-drag: none; user-select: none; }
.v4 .tree .drops { position: absolute; left: 20%; width: 60%; height: auto; overflow: visible; pointer-events: none; }
.v4 .tree.ikon { width: var(--w); height: var(--w); }
.v4 .tree.ikon img { height: 100%; aspect-ratio: auto; object-fit: contain; }
.v4 .dapat .ik .tree .drops { width: 60%; height: auto; } /* atasi .dapat .ik svg (28 px) */
.v4 .tree.ikon.watered .drops { animation-name: drip-kecil; }
@keyframes drip-kecil { from { transform: translateY(-4px); opacity: 1; } to { transform: translateY(30px); opacity: 0; } }

/* ---------- Taman Ilmu (latar S1) ---------- */
.scene-ilmu { position: relative; isolation: isolate; margin: 0 -16px; aspect-ratio: 375 / 520; background: #8FD3FF url(/assets/img/latar/taman.webp) center bottom / cover no-repeat; overflow: hidden; }
.scene-ilmu > * { position: absolute; }
.il-say { left: 25%; top: 66%; transform: translate(-50%, -100%); z-index: 100; background: #fff; border-radius: 16px; padding: 6px 12px; max-width: 42%; font-family: var(--tajuk); font-weight: 800; font-size: 14px; line-height: 1.15; text-align: center; box-shadow: 0 3px 0 rgba(30, 58, 44, .1); }
.il-say::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); border-radius: 2px; }
.il-pokok { left: 56%; top: 84%; width: 46%; transform: translate(-50%, -100%); }
.v4 .il-pokok .tree { width: 100%; display: block; }
/* Taman hidup (app/taman.js, mockup/taman-v1): Si Tunas boneka berjalan, belon kata di atas semua lapisan, zarah tekan */
.il-tunas2 { width: 96px; transform: translate(-50%, -100%); border: 0; background: none; padding: 0; cursor: pointer; }
.il-tn-s { position: relative; display: block; width: 96px; transform-origin: 50% 100%; }
.il-tn-s .tunas { width: 96px; }
.il-kata { z-index: 160; translate: -50% -100%; transform-origin: 50% 100%; background: #fff; border-radius: 16px; padding: 6px 12px; white-space: nowrap; font-family: var(--tajuk); font-weight: 800; font-size: 15px; line-height: 1.15; color: var(--dakwat); box-shadow: 0 3px 0 rgba(30, 58, 44, .12); opacity: 0; pointer-events: none; }
.il-kata::after { content: ""; position: absolute; left: var(--ekor, 50%); bottom: -6px; margin-left: -6px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); border-radius: 2px; }
.il-debu { width: 16px; height: 9px; margin: -6px 0 0 -8px; border-radius: 50%; background: rgba(255, 255, 255, .75); pointer-events: none; }
.il-z { z-index: 150; pointer-events: none; display: block; }
.il-z-hati, .il-z-hati svg { width: 22px; height: 22px; display: block; }
.il-z-bintang, .il-z-bintang svg { width: 18px; height: 18px; display: block; }
.il-z-kelopak { width: 10px; height: 8px; border-radius: 60% 40% 60% 40%; background: #FFB3C7; box-shadow: inset -2px -2px 0 rgba(230, 120, 150, .4); }
.il-z-titis { width: 8px; height: 10px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #4FB3FF; box-shadow: inset -1px -2px 0 rgba(30, 110, 200, .35); }
.il-ani .balik { display: block; width: 100%; height: 100%; }
.il-musim { left: 0; right: 0; top: 0; pointer-events: none; z-index: 101; }
.il-slot { width: 15%; aspect-ratio: 1; transform: translate(-50%, -100%); border: 0; background: none; padding: 0; display: grid; place-items: end center; cursor: pointer; color: rgba(70, 50, 20, .5); }
.il-slot:not(.full)::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: -4%; height: 32%; border-radius: 50%; background: rgba(110, 80, 30, .17); }
.il-slot:not(.full) .ic { position: relative; margin-bottom: 1%; }
.il-slot.full .illus { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(40, 60, 20, .25)); }
.il-ani { width: 12%; aspect-ratio: 1; transform: translate(-50%, -100%); border: 0; background: none; padding: 0; cursor: pointer; animation: anibob 2.6s ease-in-out infinite; }
.il-ani .illus { width: 100%; height: 100%; object-fit: contain; }
.il-sheet { margin-top: -30px; }
.il-bar { height: 14px; border-radius: 99px; background: var(--kertas-2); overflow: hidden; }
.il-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #45CF6E, var(--tunas)); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3); }
.il-ket { font-size: 13.5px; color: var(--dakwat-2); margin: 7px 0 0; }
.il-c3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.il-c3 div { background: #fff; border-radius: 16px; padding: 8px 4px; text-align: center; font-size: 12px; color: var(--dakwat-3); font-weight: 600; line-height: 1.2; }
.il-c3 b { display: flex; justify-content: center; align-items: center; gap: 4px; font-family: var(--tajuk); font-weight: 800; font-size: 21px; color: var(--dakwat); }
.v4 .il-kedai { width: 100%; }
.v4 .il-kedai small, .v4 .kd-baki { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font); font-weight: 700; font-size: 14px; letter-spacing: 0; background: rgba(255, 255, 255, .5); padding: 2px 10px; border-radius: 99px; margin-left: 4px; text-transform: none; }
/* Lembaran bawah (kedai, letak hiasan) gaya v4 */
.v4 .sheet { background: var(--kertas); border-radius: 28px 28px 0 0; }
.v4 .sh-ttl { font-family: var(--tajuk); font-weight: 800; font-size: 25px; margin: 0; }
.kd-head { display: flex; align-items: center; gap: 8px; }
.kd-head .sh-ttl { flex: 1; }
.v4 .kd-baki { background: #fff; font-family: var(--tajuk); font-weight: 800; font-size: 17px; padding: 4px 12px 4px 8px; box-shadow: 0 2px 0 rgba(30, 58, 44, .12); }
.kd-tapis { display: flex; gap: 6px; flex-wrap: wrap; }
.kd-tapis button { border: 0; padding: 6px 13px; border-radius: 999px; background: #fff; font-family: var(--font); font-size: 13.5px; font-weight: 600; color: var(--dakwat-2); cursor: pointer; }
.kd-tapis button.on { background: var(--dakwat); color: #fff; }
.kedai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kd-item { background: #fff; border: 0; border-radius: 18px; padding: 8px 6px 9px; text-align: center; box-shadow: 0 3px 0 var(--kertas-3); cursor: pointer; display: flex; flex-direction: column; align-items: center; color: var(--dakwat); }
.kd-item .illus { width: 62px; height: 62px; object-fit: contain; }
.kd-item b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.2; min-height: 30px; margin-top: 2px; }
.kd-item em { font-style: normal; display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; font-family: var(--tajuk); font-weight: 800; font-size: 15px; padding: 1px 10px; border-radius: 99px; }
.kd-item .harga { background: var(--kunyit-muda); color: #7A4E00; }
.kd-item .milik { background: var(--tunas-muda); color: var(--tunas-gelap); font-size: 12.5px; }
.kd-item.own { cursor: default; } .kd-item.own .illus { opacity: .55; }
.kd-item.poor { background: #FBF4E6; box-shadow: none; } .kd-item.poor .illus { filter: grayscale(.5); opacity: .6; }
.kd-item small { display: block; font-size: 11px; color: var(--dakwat-3); margin-top: 3px; }
.kd-kosong { grid-column: 1 / -1; text-align: center; margin: 10px 0; }

/* ---------- Siapa nak belajar? ---------- */
.scene-siapa { position: relative; height: clamp(260px, 42dvh, 360px); background: #8FD3FF url(/assets/img/latar/taman.webp) center 38% / cover no-repeat; }
.scene-siapa .sc-m { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); width: 120px; }
.scene-siapa .sc-m .illus { width: 120px; height: 120px; }
.scene-siapa .sc-say { position: absolute; left: 50%; bottom: 168px; transform: translateX(-50%); background: #fff; border-radius: 20px; padding: 9px 16px; text-align: center; box-shadow: 0 3px 0 rgba(30, 58, 44, .1); width: max-content; max-width: calc(100% - 40px); }
.scene-siapa .sc-say b { font-family: var(--tajuk); font-weight: 800; font-size: 22px; line-height: 1.1; }
.scene-siapa .sc-say::after { content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -8px; width: 16px; height: 16px; background: #fff; transform: rotate(45deg); border-radius: 3px; }
.siapa-sheet { margin: -30px 0 0; flex: 1; padding-bottom: 28px; }
.siapa { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 8px; padding: 4px 0 0; }
.pf { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; padding: 0; cursor: pointer; color: var(--dakwat); }
.v4 .pf .av { border-radius: 50%; box-shadow: 0 0 0 5px #fff, 0 6px 0 5px var(--kertas-3); }
.pf:active .av { transform: translateY(3px); box-shadow: 0 0 0 5px #fff, 0 3px 0 5px var(--kertas-3); }
.pf b { font-family: var(--tajuk); font-weight: 800; font-size: 22px; line-height: 1; margin-top: 4px; }
.pf small { display: flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 600; color: var(--dakwat-3); }
.pf.tambah .bulat { width: 112px; height: 112px; border-radius: 50%; border: 3px dashed var(--kertas-3); color: var(--dakwat-3); display: grid; place-items: center; }
.pf.tambah b { color: var(--dakwat-3); font-size: 18px; }

/* ---------- Tambah anak ---------- */
.cipta { padding-top: max(10px, env(safe-area-inset-top)); }
.v4 .batal { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; padding: 6px 0; font-family: var(--tajuk); font-weight: 800; font-size: 16px; color: var(--tunas-gelap); cursor: pointer; }
.pratonton { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 4px; }
.v4 .pratonton .av { border-radius: 50%; box-shadow: 0 0 0 5px #fff, 0 6px 0 5px var(--kertas-3); }
.v4 .pratonton h1 { font-size: 28px; margin: 14px 0 0; }
.pratonton p { margin: 2px 0 0; font-size: 14px; }
.cipta .lbl { display: block; font-size: 13.5px; font-weight: 600; color: var(--dakwat-2); margin: 16px 2px 7px; }
.v4 .cipta .inp.nama { height: 56px; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 3px 0 var(--kertas-3); text-align: center; font-family: var(--tajuk); font-weight: 800; font-size: 24px; color: var(--dakwat); }
.v4 .cipta .inp.nama:focus { outline: 0; box-shadow: 0 0 0 3px var(--tunas), 0 3px 0 var(--tunas-gelap); }
.umur { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.umur label, .watak label { position: relative; cursor: pointer; }
.umur input, .watak input { position: absolute; opacity: 0; pointer-events: none; }
.umur span { height: 54px; border-radius: 16px; background: #fff; box-shadow: 0 3px 0 var(--kertas-3); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--tajuk); font-weight: 800; font-size: 23px; line-height: .9; }
.umur small { font-family: var(--font); font-size: 10.5px; font-weight: 600; color: var(--dakwat-3); }
.umur input:checked + span { background: var(--tunas-muda); box-shadow: 0 0 0 3px var(--tunas), 0 3px 0 var(--tunas-gelap); color: var(--tunas-gelap); }
.umur input:focus-visible + span, .watak input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.watak { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 6px; margin-bottom: 22px; }
.watak label { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.watak span { border-radius: 50%; display: block; transition: box-shadow .15s; }
.v4 .watak .av { border-radius: 50%; }
.watak small { font-size: 11.5px; font-weight: 600; color: var(--dakwat-2); }
.watak input:checked + span { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--tunas); }
.watak input:checked ~ small { color: var(--tunas-gelap); }

/* =====================================================================
   GERAK-PLAN B1 (4 Okt 2026): Si Tunas boneka + gerakan C. Rujuk mockup/gerak-v4/index.html.
   ===================================================================== */
/* ---------- Boneka dalam slot maskot lama ---------- */
.v4 .q-mascot .tunas { width: 100px; height: auto; }
.scene-taman .sc-m .tunas { width: 132px; height: auto; }
.scene-siapa .sc-m .tunas { width: 120px; height: auto; margin: 0 auto; }
.pj-m .tunas { width: 64px; height: auto; }
.v4 .lesson-foot .foot-m .tunas { width: 104px; height: auto; }
.v4 .cel-hero .tunas { width: 150px; height: auto; }

/* ---------- Laman utama hidup: awan hanyut, debunga, belon & langkah masuk, Mula misi berkilau ---------- */
.scene-taman .awan { position: absolute; left: 0; z-index: 1; height: 22px; background: rgba(255, 255, 255, .85); border-radius: 99px; pointer-events: none; }
.scene-taman .awan::before, .scene-taman .awan::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.scene-taman .awan::before { width: 30px; height: 30px; left: 12px; top: -14px; }
.scene-taman .awan::after { width: 22px; height: 22px; left: 36px; top: -9px; }
.scene-taman .awan.a1 { width: 84px; top: 96px; animation: tn-hanyut 52s linear infinite -12s; }
.scene-taman .awan.a2 { width: 62px; top: 132px; opacity: .7; animation: tn-hanyut 72s linear infinite -44s; }
@keyframes tn-hanyut { from { transform: translateX(-120px); } to { transform: translateX(min(100vw, 600px)); } }
.scene-taman .debunga { position: absolute; z-index: 1; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 230, .9); box-shadow: 0 0 6px rgba(255, 255, 200, .9); opacity: 0; pointer-events: none; animation: tn-apung 7s ease-in-out infinite; }
@keyframes tn-apung { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(24px, -120px); opacity: 0; } }
.scene-taman.buka .sc-say { transform-origin: 50% 100%; animation: tn-belonh .5s cubic-bezier(.34, 1.56, .64, 1) .7s both; }
@keyframes tn-belonh { from { transform: translateX(-50%) scale(.5); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
.langkah.masuk .lk { animation: tn-naik .45s cubic-bezier(.34, 1.56, .64, 1) .4s both; }
.langkah.masuk .lk:nth-child(2) { animation-delay: .49s; } .langkah.masuk .lk:nth-child(3) { animation-delay: .58s; } .langkah.masuk .lk:nth-child(4) { animation-delay: .67s; }
@keyframes tn-naik { from { transform: translateY(30px); opacity: 0; } }
.v4 .hero-btn.kilau { position: relative; overflow: hidden; }
.v4 .hero-btn.kilau::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60px; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: translateX(-80px); animation: tn-kilau 3.2s ease-in-out 1.2s infinite; pointer-events: none; }
@keyframes tn-kilau { 0%, 55% { transform: translateX(-80px); } 85%, 100% { transform: translateX(600px); } }

/* ---------- Skrin soalan ---------- */
.v4 .pbar span { transition: width .7s cubic-bezier(.3, 1.25, .5, 1); }
.v4 .pbar span.tumbuh::after { transform-origin: 30% 90%; animation: tn-daunprog .7s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes tn-daunprog { 0% { transform: scale(.4) rotate(-30deg); } 60% { transform: scale(1.3) rotate(10deg); } 100% { transform: none; } }
.v4 .q .stage-show { animation: tn-gambarmasuk .55s cubic-bezier(.34, 1.56, .64, 1) both; }
.v4 .q .stage-show.gembira { animation: tn-gembira .6s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes tn-gambarmasuk { from { transform: scale(.4) rotate(-8deg); opacity: 0; } }
@keyframes tn-gembira { 30% { transform: translateY(-18px) scale(1.06, .96); } 60% { transform: translateY(0) scale(1.05, .94); } }
.v4 .q .opts .opt.masuk, .v4 .q .tiles .tile.masuk { animation: tn-jubinmasuk .5s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
@keyframes tn-jubinmasuk { from { transform: translateY(30px) scale(.85); opacity: 0; } }
.v4 .q .opts .opt.right { animation: tn-betulpop .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes tn-betulpop { 0% { transform: scale(.92); } 50% { transform: scale(1.08); } 100% { transform: none; } }
.v4 .q .opts .opt.wrong { animation: tn-goncang .45s ease-in-out; }
@keyframes tn-goncang { 20% { transform: translateX(-7px) rotate(-1.5deg); } 40% { transform: translateX(6px) rotate(1deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
/* Antara soalan: jubin lama keluar ke kiri, kandungan lain pudar */
.v4 .q.keluar .opts .opt, .v4 .q.keluar .tiles .tile { animation: tn-jubinkeluar .28s ease-in both; animation-delay: calc(var(--i, 0) * 40ms); }
.v4 .q.keluar .q-stage, .v4 .q.keluar .slots, .v4 .q.keluar .trace-wrap { animation: tn-keluar .28s ease-in both; }
@keyframes tn-jubinkeluar { to { transform: translateX(-40px) scale(.9); opacity: 0; } }
@keyframes tn-keluar { to { transform: translateX(-24px); opacity: 0; } }
/* Helaian maklum balas naik dengan pegas; tanda & pujian masuk selepasnya; turun bila soalan seterusnya */
.v4 .lesson-foot.float { animation: tn-helaian .45s cubic-bezier(.3, 1.3, .5, 1) both; }
.v4 .lesson-foot.float.ok { box-shadow: 0 -8px 24px -12px rgba(30, 58, 44, .3), 0 40px 0 var(--tunas-muda); }
.v4 .lesson-foot.float.no { box-shadow: 0 -8px 24px -12px rgba(30, 58, 44, .3), 0 40px 0 var(--oren-muda); }
@keyframes tn-helaian { from { transform: translate(-50%, 110%); } to { transform: translate(-50%, 0); } }
.v4 .lesson-foot.float .res .badge { animation: tn-tandapop .5s cubic-bezier(.34, 1.56, .64, 1) .12s both; }
@keyframes tn-tandapop { from { transform: scale(0); } }
.v4 .lesson-foot.float .res b { display: inline-block; animation: tn-pujian .5s cubic-bezier(.34, 1.56, .64, 1) .2s both; }
@keyframes tn-pujian { from { transform: translateX(-12px) scale(.8); opacity: 0; } }
.v4 .lesson-foot.float.turun { animation: none; transform: translate(-50%, 110%); transition: transform .25s ease-in; }

/* ---------- Tamat misi: tajuk huruf demi huruf, Pokok Ilmu membesar ---------- */
.v4 .cel-body h1.huruf .kata { display: inline-block; white-space: nowrap; }
.v4 .cel-body h1.huruf .hf { display: inline-block; animation: tn-huruf .5s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i) * 45ms + 250ms); }
@keyframes tn-huruf { from { transform: translateY(24px) scale(.5); opacity: 0; } }
.v4 .cs-tree .tree.tumbuh img { transform-origin: 50% 100%; animation: tn-tumbuh .9s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes tn-tumbuh { from { transform: scale(.55); } }

@media (max-height: 740px) { .scene-taman .sc-m .tunas { width: 96px; } }
/* kurangkan gerakan: pilihan ibu bapa (fx.js setGerak), bukan tetapan telefon */ html.kurang-gerak .scene-taman .awan, html.kurang-gerak .scene-taman .debunga { display: none; } html.kurang-gerak .scene-taman.buka .sc-say, html.kurang-gerak .langkah.masuk .lk, html.kurang-gerak.v4 .hero-btn.kilau::after, html.kurang-gerak.v4 .pbar span.tumbuh::after, html.kurang-gerak.v4 .q .stage-show, html.kurang-gerak.v4 .q .opts .opt.masuk, html.kurang-gerak.v4 .q .tiles .tile.masuk, html.kurang-gerak.v4 .q .opts .opt.right, html.kurang-gerak.v4 .lesson-foot.float, html.kurang-gerak.v4 .lesson-foot.float .res .badge, html.kurang-gerak.v4 .lesson-foot.float .res b, html.kurang-gerak.v4 .cel-body h1.huruf .hf, html.kurang-gerak.v4 .cs-tree .tree.tumbuh img { animation: none; } html.kurang-gerak.v4 .pbar span { transition: none; }

/* =====================================================================
   Reaksi skrin soalan v2 (5 Okt 2026, mockup/reaksi-v1 diluluskan Taufik)
   ===================================================================== */
/* Combo: label "N BERTURUT-TURUT" bawah bar (mulai 2), bar panas jingga (mulai 3) */
.v4 .pbar-w { position: relative; flex: 1; min-width: 0; }
.v4 .pbar-w .pbar { width: 100%; }
.v4 .combo-lbl { position: absolute; left: 0; right: 0; top: 21px; text-align: center; font: 800 12px var(--tajuk); letter-spacing: .08em; color: #D9850B; white-space: nowrap; opacity: 0; pointer-events: none; }
.v4 .combo-lbl.on { opacity: 1; animation: tn-combolbl .4s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes tn-combolbl { from { opacity: 0; transform: translateY(8px) scale(.7); } }
.v4 .pbar.panas span { background: linear-gradient(90deg, #FFB627, #FF8A3D); }
/* Helaian terapung: Si Tunas besar keluar dari helaian (kiri), teks di kanan, tiada ikon tanda */
.v4 .lesson-foot.float .foot-m { left: 14px; right: auto; top: -64px; width: 128px; height: auto; animation: footpeek .5s cubic-bezier(.34, 1.56, .64, 1) .1s both; }
.v4 .lesson-foot.float .foot-m .tunas { width: 128px; }
.v4 .lesson-foot.float .res { padding-left: 132px; min-height: 64px; }
.v4 .lesson-foot.float .res .badge { display: none; }
.v4 .lesson-foot.float .res b { font-size: 30px; line-height: 1.05; }
.v4 .lesson-foot.float .res .sub { display: block; margin-top: 4px; font: 600 15px var(--badan, "Lexend"), system-ui, sans-serif; color: #4f6a57; }
.v4 .lesson-foot.float.no .res .sub { color: #8a6448; }
.v4 .lesson-foot.float.no { pointer-events: none; } /* salah: anak boleh terus tekan jubin lain di bawah helaian */
/* Salah kali kedua: jawapan betul bersinar + garis putus-putus */
.v4 .q .opts .opt.hint { outline: 3px dashed var(--tunas); outline-offset: -9px; }
/* Anak senyap 7 saat: butang dengar berdenyut */
.v4 .q-spk.denyut, .v4 .big-spk.denyut { animation: tn-denyut .6s ease-in-out 3; }
@keyframes tn-denyut { 50% { transform: scale(1.18); } }
/* kurangkan gerakan: pilihan ibu bapa (fx.js setGerak), bukan tetapan telefon */ html.kurang-gerak.v4 .combo-lbl.on, html.kurang-gerak.v4 .lesson-foot.float .foot-m, html.kurang-gerak.v4 .q-spk.denyut, html.kurang-gerak.v4 .big-spk.denyut { animation: none; }

/* =====================================================================
   Sambutan tamat misi v2 (5 Okt 2026, mockup/sambutan-v1 diluluskan Taufik): latar krim bersinar, tiga detik
   ===================================================================== */
.v4 .cel.cel-v2 { position: relative; overflow: hidden; background: var(--kertas, #FFF8EC); color: var(--dakwat); }
.v4 .cel-v2 .cel-sinar { position: absolute; left: 50%; top: 30%; width: 760px; height: 760px; margin: -380px 0 0 -380px; pointer-events: none; }
.v4 .cel-v2 .cel-sinar::before { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: tn-sinar 60s linear infinite;
  background: repeating-conic-gradient(from 0deg, rgba(255, 197, 61, .32) 0deg 10deg, rgba(255, 197, 61, 0) 10deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 0 14%, rgba(0, 0, 0, .55) 30%, transparent 60%); mask: radial-gradient(circle, #000 0 14%, rgba(0, 0, 0, .55) 30%, transparent 60%); }
@keyframes tn-sinar { to { transform: rotate(360deg); } }
.v4 .cel-v2 .cel-body, .v4 .cel-v2 .lesson-foot { position: relative; z-index: 1; }
.v4 .cel-v2 .cel-body { padding-top: max(56px, calc(env(safe-area-inset-top) + 40px)); }
.v4 .cel.cel-v2 .cel-body h1.huruf { color: var(--tunas-gelap, #1E8F40) !important; font-size: 40px; }
.v4 .cel.cel-v2 .cel-body h1.huruf.kecil { font-size: 30px; }
.v4 .cel.cel-v2 .cel-body h1.huruf.hadiah { color: #D9850B !important; }
.v4 .cel-v2 .cel-sub { margin: -8px 0 0; font-weight: 600; font-size: 16px; color: var(--dakwat-3); }
.v4 .cel-v2 .cel-hero { margin: 18px 0 0; }
.v4 .cel-v2 .cel-hero .tunas { width: 200px; }
.v4 .cel-v2 .cel-btn { width: 100%; }
.v4 .cel-v2 .cel-btn.biru { background: var(--langit, #3A9CF2); box-shadow: 0 6px 0 var(--langit-gelap, #2479C9); }
/* Detik 1: kad statistik */
.v4 .cel-v2 .kad3 { display: flex; gap: 10px; margin-top: 10px; justify-content: center; width: 100%; }
.v4 .cel-v2 .kad { width: 108px; border-radius: 18px; background: var(--k); box-shadow: 0 5px 0 var(--kd); padding: 3px; opacity: 0; }
.v4 .cel-v2 .kad.on { opacity: 1; animation: tn-kad .4s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes tn-kad { from { opacity: 0; transform: translateY(30px) scale(.7); } }
.v4 .cel-v2 .kad small { display: block; text-align: center; font: 800 11px var(--tajuk); letter-spacing: .06em; color: #fff; padding: 3px 0 2px; white-space: nowrap; }
.v4 .cel-v2 .kad div { background: #fff; border-radius: 15px; height: 66px; display: flex; align-items: center; justify-content: center; gap: 4px; font: 800 28px var(--tajuk); color: var(--kd); }
.v4 .cel-v2 .kad svg { width: 26px; height: 26px; flex: none; }
.v4 .cel-v2 .kad.k1 { --k: #FFC53D; --kd: #E09A12; }
.v4 .cel-v2 .kad.k2 { --k: #FF8A3D; --kd: #D9682A; }
.v4 .cel-v2 .kad.k3 { --k: #3A9CF2; --kd: #2479C9; }
/* Detik 2: Pokok Ilmu */
.v4 .cel-v2 .cel-taman { position: relative; width: 340px; height: 320px; margin-top: 4px; }
.v4 .cel-v2 .ct-pokok { position: absolute; left: 118px; top: 10px; }
.v4 .cel-v2 .ct-pokok .tree { --w: 210px; }
.v4 .cel-v2 .ct-tn { position: absolute; left: 0; bottom: 18px; width: 118px; }
.v4 .cel-v2 .ct-tn .tunas { width: 118px; }
.v4 .cel-v2 .ct-titis { position: absolute; left: 205px; top: -30px; width: 40px; opacity: 0; }
.v4 .cel-v2 .ct-titis svg { width: 40px; height: 40px; }
.v4 .cel-v2 .ct-kilau { position: absolute; left: 50%; top: 45%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: radial-gradient(circle, #fff 0 30%, rgba(255, 255, 255, 0) 62%); opacity: 0; pointer-events: none; }
.v4 .cel-v2 .cel-meter { width: 300px; max-width: 100%; }
.v4 .cel-v2 .cel-meter .lbl { display: flex; justify-content: space-between; font-weight: 700; font-size: 13px; color: var(--dakwat-3); margin-bottom: 6px; }
.v4 .cel-v2 .cel-meter .gauge { height: 18px; border-radius: 99px; background: #E6EEF6; overflow: hidden; }
.v4 .cel-v2 .cel-meter .gauge span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #58B8FF, #3A9CF2); transition: width .8s cubic-bezier(.3, 1.25, .5, 1); }
/* Detik 3: Hadiah */
.v4 .cel-v2 .cel-album { position: absolute; right: 16px; top: max(16px, env(safe-area-inset-top)); display: flex; align-items: center; gap: 6px; background: #fff; border-radius: 99px; padding: 6px 12px 6px 8px; box-shadow: 0 3px 0 var(--garis, #EFE4CF); font: 800 15px var(--tajuk); color: var(--tunas-gelap, #1E8F40); }
.v4 .cel-v2 .cel-album svg { width: 24px; height: 24px; }
.v4 .cel-v2 .cel-pilih { display: flex; gap: 12px; margin-top: 26px; justify-content: center; }
.v4 .cel-v2 .pkad { width: 104px; height: 128px; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 6px 0 var(--garis, #EFE4CF); display: grid; place-items: center; cursor: pointer; padding: 0; }
.v4 .cel-v2 .pkad .illus, .v4 .cel-v2 .pkad img { width: 84px; height: 84px; pointer-events: none; }
.v4 .cel-v2 .pkad.dipilih { box-shadow: 0 6px 0 #E09A12, inset 0 0 0 4px #FFC53D; }
.v4 .cel-v2 .cel-nama { margin-top: 64px; opacity: 0; transition: opacity .3s; }
.v4 .cel-v2 .cel-nama.on { opacity: 1; animation: tn-kad .4s cubic-bezier(.34, 1.56, .64, 1); }
.v4 .cel-v2 .cel-nama small { display: block; font-weight: 700; font-size: 12px; letter-spacing: .1em; color: #D9850B; }
.v4 .cel-v2 .cel-nama b { font: 800 22px var(--tajuk); }
.v4 .cel-v2 .cel-tn3 { position: absolute; left: 14px; bottom: 6px; width: 112px; }
.v4 .cel-v2 .cel-tn3 .tunas { width: 112px; }
/* kurangkan gerakan: pilihan ibu bapa (fx.js setGerak), bukan tetapan telefon */ html.kurang-gerak.v4 .cel-v2 .cel-sinar::before, html.kurang-gerak.v4 .cel-v2 .kad.on, html.kurang-gerak.v4 .cel-v2 .cel-nama.on { animation: none; }

/* =====================================================================
   Kalendar Siram + Lencana hari belajar (5 Okt 2026, mockup/streak-v1 diluluskan Taufik). Dalam sambutan .cel-v2.
   ===================================================================== */
.v4 .cel-v2 .cel-sinar.biru::before { background: repeating-conic-gradient(from 0deg, rgba(58, 156, 242, .22) 0deg 10deg, rgba(58, 156, 242, 0) 10deg 24deg); }
.v4 .cel-v2 .kal-pentas { position: relative; width: 340px; height: 250px; margin-top: 12px; flex: none; }
.v4 .cel-v2 .kal-titis { position: absolute; left: 112px; top: 0; width: 150px; height: 190px; overflow: visible; }
.v4 .cel-v2 .kal-no { font: 800 86px "Baloo 2", system-ui, sans-serif; fill: #fff; }
.v4 .cel-v2 .kal-tn { position: absolute; left: -6px; bottom: 0; width: 124px; }
.v4 .cel-v2 .kal-tn .tunas { width: 124px; }
.v4 .cel.cel-v2 .cel-body h1.huruf.kal { color: var(--langit-gelap, #2479C9) !important; font-size: 30px; }
.v4 .cel-v2 .kal-minggu { width: 100%; max-width: 350px; background: #fff; border-radius: 22px; box-shadow: 0 5px 0 var(--garis, #EFE4CF); padding: 14px 12px 12px; }
.v4 .cel-v2 .kal-hari { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.v4 .cel-v2 .kal-hari > div { display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; color: var(--dakwat-3); }
.v4 .cel-v2 .kal-hari .kal-lb { padding: 1px 7px; border-radius: 99px; }
.v4 .cel-v2 .kal-hari .kal-kini .kal-lb { background: #3A9CF2; color: #fff; }
.v4 .cel-v2 .kal-hari .kal-slot { position: relative; width: 36px; height: 42px; display: block; }
.v4 .cel-v2 .kal-hari .kal-slot > svg, .v4 .cel-v2 .kal-hari .kal-slot .kal-isi, .v4 .cel-v2 .kal-hari .kal-slot .kal-isi svg { position: absolute; inset: 0; width: 36px; height: 42px; }
.v4 .cel-v2 .kal-hari .kal-slot .kal-isi { opacity: 0; }
.v4 .cel-v2 .kal-hari .kal-slot.penuh .kal-isi { opacity: 1; }
.v4 .cel-v2 .kal-hari .kal-slot .kal-tanda { position: absolute; right: -4px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%; background: #2EBD59; display: grid; place-items: center; opacity: 0; box-shadow: 0 0 0 2px #fff; }
.v4 .cel-v2 .kal-hari .kal-slot.penuh .kal-tanda { opacity: 1; }
.v4 .cel-v2 .kal-hari .kal-slot .kal-tanda svg { width: 12px; height: 12px; }
.v4 .cel-v2 .kal-sasaran { margin-top: 12px; padding-top: 12px; border-top: 2px dashed var(--garis, #EFE4CF); }
.v4 .cel-v2 .kal-sasaran .lbl { display: flex; justify-content: space-between; font-weight: 700; font-size: 13px; color: var(--dakwat-3); margin-bottom: 6px; }
.v4 .cel-v2 .kal-sasaran .lbl b { color: #2479C9; }
.v4 .cel-v2 .kal-sasaran .kal-ruas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.v4 .cel-v2 .kal-sasaran .kal-ruas i { height: 12px; border-radius: 99px; background: #E8EEF4; position: relative; overflow: hidden; }
.v4 .cel-v2 .kal-sasaran .kal-ruas i::after { content: ""; position: absolute; inset: 0; border-radius: 99px; background: linear-gradient(90deg, #58B8FF, #3A9CF2); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); }
.v4 .cel-v2 .kal-sasaran .kal-ruas i.on::after { transform: scaleX(1); }
.v4 .cel-v2 .kal-sasaran.capai .ruas i::after { background: linear-gradient(90deg, #FFC53D, #FF9F3D); }
.kal-terbang { position: fixed; left: 0; top: 0; z-index: 90; width: 30px; height: 36px; pointer-events: none; opacity: 0; }
.kal-terbang svg { width: 30px; height: 36px; }
/* Lencana hari belajar */
.v4 .cel-v2 .lencana { position: relative; width: 230px; height: 276px; margin-top: 20px; flex: none; }
.v4 .cel-v2 .lencana svg { width: 230px; height: 276px; overflow: visible; }
.v4 .cel-v2 .lencana .kilauan { position: absolute; inset: 40px 26px 40px; border-radius: 40px; overflow: hidden; pointer-events: none; }
.v4 .cel-v2 .lencana .kilauan i { position: absolute; top: -20%; left: -60%; width: 40%; height: 140%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); transform: skewX(-18deg); }
.v4 .cel.cel-v2 .cel-body h1.huruf.lencana-t { color: #D9850B !important; }
.v4 .cel-v2 .len-tn { position: absolute; right: 14px; bottom: 24px; width: 112px; }
.v4 .cel-v2 .len-tn .tunas { width: 112px; }
/* kurangkan gerakan: pilihan ibu bapa (fx.js setGerak), bukan tetapan telefon */ html.kurang-gerak.v4 .cel-v2 .kal-sasaran .kal-ruas i::after { transition: none; }

/* ---------- Pesta Pulau v2 (5 Okt 2026, app/pesta.js): langit pesta, belon pecah, dulang bintang, bunga api ---------- */
.pesta2 .lesson-top { gap: 8px; }
/* 6 Okt 2026: gear dalam bar atas → slot mengecil (bukan melimpah) pada telefon kecil */
.ps-dulang { flex: 1; min-width: 0; display: flex; justify-content: center; gap: 3px; }
.ps-slot { flex: 0 1 30px; min-width: 0; aspect-ratio: 1; border-radius: 50%; background: var(--kertas-2); display: grid; place-items: center; box-shadow: inset 0 2px 0 rgba(0, 0, 0, .06); }
.ps-slot svg { width: 66%; height: auto; filter: grayscale(1) opacity(.3); }
.pesta2 .lesson-top .iconb { width: 36px; } .pesta2 .gear-btn { width: 36px; height: 36px; }
.ps-slot.siap { background: #DDF5E3; } .ps-slot.siap svg { filter: grayscale(1) opacity(.55); }
.ps-slot.emas { background: #FFF0CC; box-shadow: 0 0 0 2px var(--kunyit); } .ps-slot.emas svg { filter: none; }
.sky2 { position: relative; height: 340px; margin-top: 8px; border-radius: 22px; overflow: hidden; background: linear-gradient(#BFE4FF, #E8F6FF 70%, #F4FAFF); isolation: isolate; }
.sky2 > * { position: absolute; }
.ps-bendera { left: 0; top: 0; width: 100%; height: 40px; z-index: 4; overflow: visible; }
.ps-bd { transform-box: fill-box; transform-origin: 50% 0; animation: ps-bd 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -0.2s); }
@keyframes ps-bd { 50% { transform: rotate(6deg); } }
.ps-awan { width: 90px; opacity: .9; z-index: 1; animation: ps-awan 26s linear infinite; }
.ps-awan svg { width: 100%; display: block; }
.ps-awan.a1 { top: 46px; left: -100px; } .ps-awan.a2 { top: 110px; left: -100px; width: 64px; animation-duration: 34s; animation-delay: -16s; }
@keyframes ps-awan { to { transform: translateX(560px); } }
.balloon.b2 { width: 86px; height: 120px; bottom: -130px; z-index: 2; }
.balloon.b2::after { display: none; }
.balloon.b2 .b2-g { position: absolute; inset: 0; transform-origin: 50% 100%; animation: ps-ayun 2.6s ease-in-out infinite; animation-delay: var(--dl); }
@keyframes ps-ayun { 50% { transform: translateX(8px) rotate(4deg); } }
.balloon.b2 .bl { inset: 0 0 30px; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .55) 0 12%, transparent 13%), var(--c); }
.balloon.b2 .bl::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top: 7px solid var(--c); filter: brightness(.85); }
.b2-tali { position: absolute; left: 50%; bottom: 0; width: 10px; height: 30px; margin-left: -5px; }
.balloon.b2.popped { animation: rise var(--d) linear var(--dl) infinite; animation-play-state: paused; }
.balloon.b2.popped .b2-g { visibility: hidden; }
.ps-tn { left: 2px; bottom: -4px; width: 92px; z-index: 5; pointer-events: none; }
.ps-tn .tunas { width: 100%; }
.ps-garis { width: 26px; height: 3px; margin-top: -1.5px; border-radius: 3px; background: #FFB627; transform-origin: 0 50%; z-index: 6; pointer-events: none; }
.ps-serpih { width: 12px; height: 10px; border-radius: 40% 60% 30% 70%; z-index: 6; pointer-events: none; }
.ps-buka .ps-panji { left: 50%; top: 70px; margin-left: -130px; width: 260px; z-index: 5; text-align: center; background: var(--oren-lembut); color: #fff; border-radius: 16px; padding: 10px 12px 12px; box-shadow: 0 6px 0 var(--oren-gelap); }
.ps-buka .ps-panji small { display: block; font-family: var(--tajuk); font-weight: 800; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.ps-buka .ps-panji b { display: block; font-family: var(--tajuk); font-weight: 800; font-size: 30px; line-height: 1.05; }
.ps-buka .ps-tn { left: 50%; margin-left: -55px; width: 110px; }
.ps-senja { height: 430px; background: linear-gradient(#3B2A6B, #8A4FA0 45%, #FF9A62 85%, #FFC27A); }
.ps-senja .ps-awan { opacity: .25; }
.ps-tamat { left: 0; right: 0; top: 150px; margin: 0; text-align: center; font-size: 38px; color: #fff !important; text-shadow: 0 4px 0 rgba(60, 20, 80, .45); z-index: 6; }
.ps-sub { left: 0; right: 0; top: 200px; margin: 0; text-align: center; color: #FFE8D2; font-weight: 600; z-index: 6; }
.ps-tn.tengah { left: 50%; margin-left: -65px; width: 130px; bottom: 6px; }
.ps-api { width: 6px; height: 6px; border-radius: 50%; z-index: 3; pointer-events: none; box-shadow: 0 0 6px currentColor; }
/* kurangkan gerakan: pilihan ibu bapa (fx.js setGerak), bukan tetapan telefon */ html.kurang-gerak .ps-bd, html.kurang-gerak .ps-awan, html.kurang-gerak .balloon.b2 .b2-g { animation: none; }
.ps-kaki { display: flex; justify-content: center; align-items: flex-end; height: 112px; }
.ps-tn3 { width: 96px; }
.ps-tn3 .tunas { width: 96px; }
.balloon.b2 .bl .pjg { font-size: 21px; } .balloon.b2 .bl .pjg2 { font-size: 16px; }

/* 6 Okt 2026: soalan "Huruf apa yang hilang?" (gambar + perkataan tanpa huruf pertama) */
.v4 .hilang { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.v4 .hl-kata { font-family: var(--baca); font-weight: 700; font-size: 44px; line-height: 1; color: #1E3A2C; letter-spacing: .02em; display: flex; align-items: center; }
.v4 .hl-kata b { display: inline-grid; place-items: center; min-width: 1.15em; height: 1.2em; margin-right: 4px; border: 3px dashed #F2A93B; border-radius: 14px; color: #E08A12; font-size: .9em; background: #FFF6E3; }
@media (max-height: 700px) { .v4 .hilang .illus { width: 104px !important; height: 104px !important; } .v4 .hl-kata { font-size: 38px; } }

/* 6 Okt 2026: sambutan pada telefon pendek (≤700 px tinggi, cth. 360×640, iPhone SE): butang TERUSKAN dulu terkeluar skrin
   pada detik Kalendar Siram. Pentas besar dikecilkan dengan scale (anak kedudukan mutlak kekal sama). */
@media (max-height: 700px) {
  .v4 .cel-v2 .cel-body { padding-top: max(24px, calc(env(safe-area-inset-top) + 12px)); padding-bottom: 8px; gap: 12px; }
  .v4 .cel-v2 .cel-hero .tunas { width: 150px; }
  .v4 .cel-v2 .kal-pentas { transform: scale(.72); transform-origin: top center; margin-bottom: -70px; margin-top: 0; }
  .v4 .cel-v2 .cel-taman { transform: scale(.74); transform-origin: top center; margin-bottom: -83px; }
  .v4 .cel-v2 .lencana { transform: scale(.74); transform-origin: top center; margin-bottom: -72px; margin-top: 4px; }
  .v4 .cel.cel-v2 .cel-body h1.huruf { font-size: 32px; }
  .v4 .cel.cel-v2 .cel-body h1.huruf.kecil, .v4 .cel.cel-v2 .cel-body h1.huruf.kal { font-size: 26px; }
  .v4 .cel-v2 .kal-minggu { padding: 10px 10px 10px; }
  .v4 .cel-v2 .kal-sasaran { margin-top: 8px; padding-top: 8px; }
  .v4 .cel-v2 .cel-nama { margin-top: 40px; }
}

/* 6 Okt 2026: isi English App #1 — ayat dengan tempat kosong & ayat besar */
.v4 .en-ayat { font-family: var(--baca); font-weight: 700; font-size: 28px; line-height: 1.3; color: #1E3A2C; text-align: center; max-width: 320px; }
.v4 .en-kosong { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.2em; margin: 0 2px; border: 3px dashed #F2A93B; border-radius: 12px; color: #E08A12; background: #FFF6E3; vertical-align: -.1em; }
.v4 .big-word.en-ayat-besar { font-size: 30px; line-height: 1.3; text-align: center; max-width: 330px; display: inline-block; }

/* ---------- G3 Pondok Main (mockup/pondok-arked-v1, app/pondok.js) ----------
   Rumah pokok Taman Ilmu: hub jubin game (gaya Duolingo Math Games + Nibble), helaian mula, pusingan jam pasir, skrin tamat. */
.v4 .hchips { flex-wrap: wrap; }
.v4 .hchip { flex: 1 1 calc(50% - 5px); }
.v4 .pm-hchip { position: relative; }
.v4 .pm-hchip .illus { width: 40px; height: 40px; flex: none; }
.v4 .pm-hchip.baru { background: var(--langit-muda); box-shadow: 0 0 0 2px #2B9CF2, 0 3px 0 #1C7ACB; }
.v4 .pm-pita { position: absolute; top: -9px; right: 10px; background: #2B9CF2; color: #fff; font: 800 10.5px/1 var(--font); letter-spacing: .08em; padding: 4px 8px; border-radius: 99px; box-shadow: 0 2px 0 #1C7ACB; }
/* Taman: papan tanda berayun di rumah pokok (kanan atas latar) + dua butang dalam helaian */
.pm-papan { left: 54%; top: 23%; width: 34%; max-width: 150px; z-index: 95; border: 0; background: none; padding: 0; cursor: pointer; transform-origin: 50% 0; animation: pm-hayun 3.4s ease-in-out infinite; }
.pm-papan svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 4px rgba(60, 30, 0, .3)); }
.pm-papan .pm-kilau { position: absolute; right: -8px; top: 16px; color: #FFD15C; animation: pm-kelip 1.6s ease-in-out infinite; }
.pm-papan:active { transform: scale(.94); }
@keyframes pm-hayun { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes pm-kelip { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } }
.v4 .il-dua { display: flex; gap: 10px; }
.v4 .il-dua .b3 { flex: 1; min-width: 0; font-size: 16px; letter-spacing: .02em; padding: 12px 8px; white-space: nowrap; }
.v4 .il-dua .il-kedai small { padding: 2px 7px; margin-left: 2px; font-size: 13px; }
@media (max-width: 380px) { .v4 .il-dua .b3 { font-size: 14.5px; padding: 12px 6px; } }
/* Hub */
.pm-hub .topbar { display: flex; align-items: center; gap: 8px; }
.pm-ttl { flex: 1; font-family: var(--tajuk); font-weight: 800; font-size: 22px; line-height: 1; }
.pm-wira { position: relative; height: 182px; border-radius: 24px; overflow: hidden; background: #8FD3FF url(/assets/img/latar/taman.webp) 100% 24% / 205% auto no-repeat; box-shadow: 0 4px 0 var(--kertas-3); margin-top: 4px; }
.pm-wira::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(30, 58, 44, .25), rgba(30, 58, 44, 0) 45%); pointer-events: none; }
.pm-wira-tn { position: absolute; left: 4px; bottom: -8px; z-index: 2; animation: pm-bob 2.6s ease-in-out infinite; }
.pm-wira-tn .illus { width: 122px; height: 122px; }
@keyframes pm-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.pm-belon { position: absolute; left: 116px; top: 20px; right: 14px; max-width: 170px; z-index: 2; background: #fff; border-radius: 18px 18px 18px 4px; padding: 9px 14px; font-family: var(--tajuk); font-weight: 800; font-size: 17px; line-height: 1.15; box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.pm-chip { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; background: rgba(255, 255, 255, .95); border-radius: 99px; padding: 6px 12px 6px 9px; font-weight: 700; font-size: 12.5px; color: var(--dakwat); box-shadow: 0 2px 0 rgba(0, 0, 0, .12); }
.pm-rehat { margin-top: 14px; display: flex; gap: 12px; align-items: center; background: #EEF3FF; border-radius: 20px; padding: 12px 14px; box-shadow: 0 3px 0 #D3DDF5; }
.pm-rehat b { display: block; font-family: var(--tajuk); font-weight: 800; font-size: 17px; line-height: 1.15; color: #1E3A6A; }
.pm-rehat small { display: block; font-size: 12.5px; color: #4E5F86; margin-top: 2px; }
.pm-rehat .linkb { margin-top: 6px; padding: 0; font-size: 13px; }
.pm-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 20px 2px 10px; }
.pm-sub b { font-family: var(--tajuk); font-weight: 800; font-size: 19px; } .pm-sub small { font-size: 12px; color: var(--dakwat-3); font-weight: 600; text-align: right; }
.pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 24px; }
.pm-gt { position: relative; border: 0; background: #fff; border-radius: 22px; padding: 8px 8px 11px; text-align: left; box-shadow: 0 4px 0 var(--kertas-3); color: var(--dakwat); cursor: pointer; font: inherit; animation: pm-masuk .5s cubic-bezier(.3, 1.5, .5, 1) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
.pm-gt:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--kertas-3); }
@keyframes pm-masuk { from { opacity: 0; transform: translateY(14px) scale(.94); } }
.pm-art { position: relative; display: grid; place-items: end center; height: 118px; border-radius: 17px; background: var(--bg); overflow: hidden; }
.pm-art::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .55) 1.4px, transparent 1.6px); background-size: 14px 14px; }
.pm-art::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 70%; height: 16px; border-radius: 50%; background: var(--ac); opacity: .22; transform: translateX(-50%); }
.pm-art > * { position: relative; z-index: 1; }
.pm-art .pm-tn { width: auto; height: 104px; }
.pm-art .pm-tn.geser { margin-left: 30px; } .pm-art .pm-tn.kiri-sikit { margin-right: 52px; }
.pm-art .pm-obj { position: absolute; z-index: 2; bottom: 10px; display: flex; gap: 4px; }
.pm-art .pm-obj.kanan { right: 12px; } .pm-art .pm-obj.kiri { left: 12px; } .pm-art .pm-obj.atas { bottom: auto; top: 20px; }
.pm-art .pm-obj.kecil .illus { width: 64px; height: 64px; }
.pm-kad { display: grid; place-items: center; width: 30px; height: 40px; border-radius: 8px; background: #fff; box-shadow: 0 3px 0 #C9B9F5; font: normal 800 22px/1 var(--tajuk); color: #6B4BD1; transform: rotate(var(--r, 0deg)); }
.pm-bakul { position: relative; display: block; width: 92px; margin: 0 40px 4px 0; }
.pm-bakul svg, .pm-beg svg { display: block; width: 100%; height: auto; }
.pm-bakul .b1, .pm-bakul .b2, .pm-beg .b1, .pm-beg .b2 { position: absolute; }
.pm-bakul .b1 { left: 18px; top: -8px; } .pm-bakul .b2 { left: 46px; top: -12px; }
.pm-bakul .illus { width: 34px; height: 34px; }
.pm-beg { width: 70px; } .pm-beg .b1 { left: 10px; top: 4px; } .pm-beg .b2 { left: 32px; top: 0; } .pm-beg .illus { width: 30px; height: 30px; }
.pm-gt > b { display: block; font-family: var(--tajuk); font-weight: 800; font-size: 17px; line-height: 1.1; margin: 9px 4px 3px; }
.pm-meta { display: flex; align-items: center; gap: 4px; margin: 0 4px; font-size: 12.5px; font-weight: 600; color: var(--dakwat-2); }
.pm-meta .u { color: var(--dakwat-3); font-weight: 500; }
.pm-baru { display: inline-flex; align-items: center; background: var(--tunas-muda); color: var(--tunas-gelap); font: 800 11px/1 var(--font); letter-spacing: .08em; padding: 5px 9px; border-radius: 99px; }
.pm-gt.lebar { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(120px, 42%) 1fr; gap: 12px; align-items: center; padding: 8px 12px 8px 8px; }
.pm-gt.lebar .pm-art { height: 126px; }
.pm-gt.lebar b { display: block; font-family: var(--tajuk); font-weight: 800; font-size: 21px; line-height: 1.1; margin: 0 0 4px; }
.pm-tx { display: block; min-width: 0; }
.pm-sebab { display: block; font-size: 12.5px; color: var(--dakwat-2); line-height: 1.35; margin: 0 0 8px; }
.pm-mainb { display: inline-flex; align-items: center; gap: 4px; background: var(--tunas); color: #fff; font: 800 14px/1 var(--tajuk); letter-spacing: .04em; padding: 9px 14px 9px 10px; border-radius: 99px; box-shadow: 0 3px 0 var(--tunas-gelap); }
.pm-mainb svg path { fill: #fff; }
.pm-cadang { position: absolute; top: 8px; left: 8px; z-index: 3; background: #fff; border-radius: 99px; padding: 4px 9px; font: 800 10.5px/1 var(--font); letter-spacing: .06em; color: var(--tunas-gelap); box-shadow: 0 2px 0 rgba(0, 0, 0, .1); }
.pm-gt.rehat .pm-art { filter: saturate(.35) brightness(1.04); }
.pm-gt.rehat > b, .pm-gt.rehat .pm-tx, .pm-gt.rehat .pm-meta { opacity: .6; }
.pm-bulan { position: absolute; top: 14px; right: 14px; z-index: 3; width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 2px 0 rgba(0, 0, 0, .12); }
/* Helaian mula */
.pm-helai { text-align: center; }
.pm-pentas { position: relative; width: 196px; height: 172px; margin: 0 auto; display: grid; place-items: end center; }
.pm-pentas::before { content: ""; position: absolute; left: 50%; top: 10px; width: 160px; height: 160px; border-radius: 50%; background: var(--bg); transform: translateX(-50%); }
.pm-pentas .illus { position: relative; width: 156px; height: 156px; animation: pm-bob 2.6s ease-in-out infinite; }
.pm-helai h2 { font-family: var(--tajuk); font-size: 30px; line-height: 1.05; margin: 8px 0 4px; }
.pm-ar { margin: 0 auto 14px; max-width: 300px; font-size: 15px; line-height: 1.4; color: var(--dakwat-2); }
.pm-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.pm-info > div { background: #fff; border-radius: 16px; padding: 9px 4px 8px; box-shadow: 0 3px 0 var(--kertas-3); }
.pm-info small { display: block; font: 700 10.5px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--dakwat-3); }
.pm-info b { display: flex; align-items: center; justify-content: center; gap: 4px; font-family: var(--tajuk); font-weight: 800; font-size: 18px; line-height: 1.2; margin-top: 3px; white-space: nowrap; }
.pm-info b.rek { color: #A86A00; }
.pm-helai .b3 { width: 100%; }
/* Pusingan: jam pasir kunyit (bukan merah), kiraan unit, bintang, cip rekod */
.pm-pusingan .lesson-top { gap: 10px; }
.pm-jam { position: relative; flex: 1; height: 18px; border-radius: 99px; background: var(--kertas-2); overflow: hidden; box-shadow: inset 0 2px 0 rgba(0, 0, 0, .05); }
.pm-jam i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, #FFCE5C, var(--kunyit)); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .08), inset 0 3px 0 rgba(255, 255, 255, .45); transition: width 1s linear; }
.pm-jam.papan i { background: linear-gradient(90deg, #45CF6E, var(--tunas)); transition: width .4s ease; }
.pm-jam.rendah i { animation: pm-denyut .5s ease-in-out infinite alternate; }
@keyframes pm-denyut { to { filter: brightness(1.15) saturate(1.3); } }
.pm-hud { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 16px 0; min-height: 34px; }
.pm-skor { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--tajuk); font-weight: 800; color: #1C7ACB; }
.pm-skor b { font-size: 26px; line-height: 1; } .pm-skor small { font-size: 14px; color: var(--dakwat-3); }
.pm-hud-kanan { display: inline-flex; align-items: center; gap: 8px; }
.pm-bt { display: inline-flex; align-items: center; gap: 3px; font-family: var(--tajuk); font-weight: 800; font-size: 17px; color: #D9940B; }
.pm-rek { display: inline-flex; align-items: center; gap: 4px; font-family: var(--tajuk); font-weight: 800; font-size: 13.5px; line-height: 1; border-radius: 99px; padding: 6px 10px; color: var(--dakwat-2); background: #fff; box-shadow: 0 2px 0 var(--kertas-3); }
.pm-rek.beat { color: #fff; background: var(--kunyit-gelap); box-shadow: 0 2px 0 #A86A00; }
.pm-rek.beat svg path { fill: #FFF3C4; }
.pm-pusingan .lesson-body { padding-top: 4px; }
.v4 .q-pusingan .q-mascot { width: 76px; height: 76px; }
.v4 .q-pusingan .q-mascot .tunas { width: 76px; }
/* Skrin tamat */
.pm-tamat { min-height: 100dvh; display: flex; flex-direction: column; background: repeating-conic-gradient(from 0deg at 50% 34%, #FFF3DC 0 9deg, var(--kertas) 9deg 18deg); position: relative; }
.pm-tamat::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 34%, transparent 0 30%, var(--kertas) 66%); pointer-events: none; }
.pm-tamat-isi { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 18px 8px; }
.pm-reben { display: inline-flex; align-items: center; gap: 8px; font-family: var(--tajuk); font-weight: 800; font-size: 17px; letter-spacing: .06em; color: #4A2E00; background: var(--kunyit); padding: 10px 20px 8px; border-radius: 99px; box-shadow: 0 4px 0 var(--kunyit-gelap); animation: pm-pop .6s .2s cubic-bezier(.3, 1.6, .5, 1) backwards; }
@keyframes pm-pop { from { transform: scale(.3); opacity: 0; } }
.pm-tamat-tn .illus { width: 190px; height: 190px; animation: pm-lompat 1.2s ease-in-out infinite; }
@keyframes pm-lompat { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-16px); } 60% { transform: translateY(-12px); } }
.pm-tamat h1 { font-family: var(--tajuk); font-size: 34px; line-height: 1.05; margin: 6px 0 4px; color: var(--tunas-gelap); }
.pm-tamat p { margin: 0 0 18px; color: var(--dakwat-2); font-size: 15px; }
.pm-kad3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; width: 100%; max-width: 380px; }
.pm-kad3 > div { border-radius: 18px; background: #fff; box-shadow: 0 3px 0 var(--kertas-3); overflow: hidden; animation: pm-pop .5s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.pm-kad3 > div:nth-child(2) { animation-delay: .12s; } .pm-kad3 > div:nth-child(3) { animation-delay: .24s; }
.pm-kad3 small { display: block; background: var(--c); color: #fff; font: 800 11px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; padding: 7px 4px 6px; }
.pm-kad3 b { display: flex; align-items: center; justify-content: center; gap: 4px; font-family: var(--tajuk); font-weight: 800; font-size: 26px; line-height: 1; padding: 12px 4px 4px; color: var(--dakwat); }
.pm-kad3 em { display: block; font-style: normal; font-size: 11.5px; color: var(--dakwat-3); padding: 0 4px 9px; }
.pm-nota { margin: 12px 0 0 !important; font-size: 13px !important; }
.pm-kaki { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 12px 18px max(24px, env(safe-area-inset-bottom)); background: none; border: 0; }
.pm-kaki .b3 { width: 100%; }
@media (max-height: 700px) {
  .pm-wira { height: 150px; } .pm-wira-tn .illus { width: 100px; height: 100px; }
  .pm-tamat-tn .illus { width: 140px; height: 140px; } .pm-tamat h1 { font-size: 28px; } .pm-tamat p { margin-bottom: 12px; }
  .pm-pentas { height: 140px; } .pm-pentas::before { width: 130px; height: 130px; } .pm-pentas .illus { width: 124px; height: 124px; }
  .pm-helai h2 { font-size: 26px; }
}
html.kurang-gerak .pm-papan, html.kurang-gerak .pm-kilau, html.kurang-gerak .pm-wira-tn, html.kurang-gerak .pm-gt, html.kurang-gerak .pm-pentas .illus,
html.kurang-gerak .pm-tamat-tn .illus, html.kurang-gerak .pm-reben, html.kurang-gerak .pm-kad3 > div, html.kurang-gerak .pm-jam.rendah i { animation: none; }