@font-face{font-family:"Baloo 2";font-style:normal;font-weight:500 700;font-display:swap;src:url(/fonts/baloo2.woff2) format("woff2")}@font-face{font-family:Grandstander;font-style:normal;font-weight:700 800;font-display:swap;src:url(/fonts/grandstander.woff2) format("woff2")}@font-face{font-family:Noto Naskh Arabic;font-style:normal;font-weight:500 700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;src:url(/fonts/notonaskh.woff2) format("woff2")}:root{--teal: #0e8a8d;--teal-deep: #0a6567;--teal-tint: #dff3f2;--gold: #e8a63b;--gold-deep: #b9791f;--gold-tint: #fbebcb;--coral: #ef6f61;--coral-deep: #c24e42;--coral-tint: #fce4e1;--ink: #2b2a33;--ink-mute: #756f7c;--garis: #e6ddc9;--sand: #f6efe1;--card: #fffdf8;--backdrop: #0b4547;--r-lg: 28px;--r-md: 18px;--r-sm: 12px;--f-display: "Grandstander", "Baloo 2", system-ui, sans-serif;--f-body: "Baloo 2", system-ui, sans-serif;--f-arab: "Noto Naskh Arabic", "Geeza Pro", "Damascus", serif}*{box-sizing:border-box}html,body{height:100%;margin:0}body{min-height:100vh;font-family:var(--f-body);color:var(--ink);background:var(--backdrop);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.045) 0 2px,transparent 2px 42px),repeating-linear-gradient(-45deg,rgba(255,255,255,.045) 0 2px,transparent 2px 42px);display:flex;justify-content:center;-webkit-tap-highlight-color:transparent}button{font-family:inherit;cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid var(--teal-deep);outline-offset:2px}.app-shell{width:100%;max-width:430px;min-height:100vh;background:var(--sand);position:relative;overflow-x:hidden}@media(min-width:560px){body{padding:32px 16px;align-items:flex-start}.app-shell{min-height:86vh;border-radius:34px;box-shadow:0 30px 70px #00000059,0 0 0 10px #ffffff0f}}.screen{min-height:100vh;display:flex;flex-direction:column;align-items:center}@media(min-width:560px){.screen{min-height:86vh}}.icon{display:inline-block;position:relative;flex-shrink:0;color:currentColor}.icon--pudar{opacity:.28}.icon--emas{color:var(--gold)}.icon--star{background:currentColor;clip-path:polygon(50% 0%,61.8% 35.3%,97.6% 35.3%,68.9% 57.4%,79.4% 91.8%,50% 70.5%,20.6% 91.8%,31.1% 57.4%,2.4% 35.3%,38.2% 35.3%)}.icon--heart{color:var(--coral)}.icon--heart:before,.icon--heart:after{content:"";position:absolute;top:0;width:50%;height:88%;background:currentColor;border-radius:60% 60% 0 0}.icon--heart:before{left:50%;transform-origin:0 100%;transform:rotate(-45deg)}.icon--heart:after{left:0;transform-origin:100% 100%;transform:rotate(45deg)}.icon--lock{background:currentColor;border-radius:.15em}.icon--lock:before{content:"";position:absolute;left:50%;bottom:100%;transform:translate(-50%);width:62%;height:.5em;border:3px solid currentColor;border-bottom:0;border-radius:999px 999px 0 0}.icon--check:before{content:"";position:absolute;left:8%;top:30%;width:55%;height:30%;border-left:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(-45deg);transform-origin:0 100%}.icon--cross:before,.icon--cross:after,.icon--plus:before,.icon--plus:after{content:"";position:absolute;background:currentColor;border-radius:999px}.icon--cross:before,.icon--cross:after{left:44%;top:4%;width:12%;height:92%}.icon--cross:before{transform:rotate(45deg)}.icon--cross:after{transform:rotate(-45deg)}.icon--plus:before{left:44%;top:4%;width:12%;height:92%}.icon--plus:after{left:4%;top:44%;width:92%;height:12%}.icon--speaker:before,.icon--speaker-off:before{content:"";position:absolute;left:6%;top:32%;width:30%;height:36%;background:currentColor;border-radius:2px}.icon--speaker:after,.icon--speaker-off:after{content:"";position:absolute;left:30%;top:14%;width:0;height:0;border-top:.36em solid transparent;border-bottom:.36em solid transparent;border-right:.36em solid currentColor}.icon--speaker-off{opacity:.75}.icon--chart:before{content:"";position:absolute;left:6%;bottom:8%;width:22%;height:45%;background:currentColor;border-radius:2px;box-shadow:.42em 0 0 currentColor}.icon--chart:after{content:"";position:absolute;left:39%;bottom:8%;width:22%;height:82%;background:currentColor;border-radius:2px}.icon--arrow-left:before{content:"";position:absolute;left:22%;top:28%;width:48%;height:48%;border-left:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg)}.mascot{position:relative;display:inline-block;animation:lantun 1.4s ease-in-out infinite}.mascot__star{width:100%;height:100%;background:linear-gradient(160deg,#ffd873,var(--gold));clip-path:polygon(50% 0%,61.8% 35.3%,97.6% 35.3%,68.9% 57.4%,79.4% 91.8%,50% 70.5%,20.6% 91.8%,31.1% 57.4%,2.4% 35.3%,38.2% 35.3%);filter:drop-shadow(0 6px 0 var(--gold-deep))}.mascot__eye{position:absolute;width:8%;aspect-ratio:1;background:var(--ink);border-radius:50%;top:42%}.mascot__eye--kiri{left:37%}.mascot__eye--kanan{left:57%}.mascot__mulut{position:absolute;top:47%;left:39%;width:22%;height:22%;border:3px solid transparent;border-bottom-color:var(--ink);border-radius:50%}.mascot--sedih .mascot__mulut{top:56%;height:16%;border-bottom-color:transparent;border-top-color:var(--ink)}.mascot--sedih{animation:none}.mascot__pipi{position:absolute;width:11%;aspect-ratio:1;background:var(--coral);opacity:.5;border-radius:50%;top:50%}.mascot__pipi--kiri{left:20%}.mascot__pipi--kanan{left:71%}@keyframes lantun{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.splash-screen{justify-content:center;gap:14px;background:radial-gradient(circle at 50% 30%,#12a4a7,var(--teal) 70%);color:#fff;padding:32px;text-align:center;width:100%}.splash__tajuk{font-family:var(--f-display);font-size:40px;font-weight:800;margin:10px 0 0;text-wrap:balance}.splash__sub{font-size:15px;opacity:.92;margin:0;max-width:26ch}.spinner{margin-top:20px;width:30px;height:30px;border-radius:50%;border:4px solid rgba(255,255,255,.35);border-top-color:#fff;animation:pusing .8s linear infinite}@keyframes pusing{to{transform:rotate(360deg)}}.profile-screen{justify-content:center;gap:16px;padding:32px 26px;width:100%}.profile__tajuk{font-family:var(--f-display);font-size:24px;margin:4px 0 8px;text-align:center;text-wrap:balance}.profile__senarai{width:100%;display:flex;flex-direction:column;gap:10px}.profile__baris{display:flex;align-items:center;gap:8px}.profile__kad{flex:1;display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--card);border:2px solid var(--garis);border-radius:var(--r-md);box-shadow:0 3px #00000012;text-align:left}.profile__avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--f-display);font-weight:800;font-size:19px;flex-shrink:0}.profile__avatar--kecil{width:28px;height:28px;font-size:13px}.profile__maklumat{display:flex;flex-direction:column}.profile__nama{font-weight:700;font-size:16px}.profile__xp{font-size:13px;color:var(--ink-mute);font-variant-numeric:tabular-nums}.profile__padam{width:32px;height:32px;border-radius:50%;border:none;background:transparent;color:var(--ink-mute);display:flex;align-items:center;justify-content:center;flex-shrink:0}.profile__padam:hover{background:var(--coral-tint);color:var(--coral-deep)}.profile__tambah{display:flex;align-items:center;gap:8px;background:transparent;border:2px dashed #c9bd9f;color:var(--ink-mute);border-radius:var(--r-md);padding:13px 18px;font-weight:700;font-size:14px;width:100%;justify-content:center}.profile__had{font-size:13px;color:var(--ink-mute);text-align:center}.profile__borang{width:100%;display:flex;flex-direction:column;gap:12px;align-items:center}.profile__input{width:100%;padding:15px 16px;font-family:var(--f-body);font-size:17px;font-weight:700;border-radius:var(--r-md);border:2px solid var(--garis);background:var(--card);color:var(--ink);text-align:center}.profile__input--salah{border-color:var(--coral);background:var(--coral-tint)}.profile__batal{background:transparent;border:none;color:var(--ink-mute);font-weight:700;font-size:14px}.home-screen{width:100%;padding-bottom:32px}.home-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--teal);color:#fff;border-bottom-left-radius:22px;border-bottom-right-radius:22px}.home-header__profil{display:flex;align-items:center;gap:8px;background:#ffffff29;border:none;color:#fff;padding:5px 12px 5px 5px;border-radius:999px;font-family:var(--f-display);font-weight:700;font-size:14px}.badge-pill{display:flex;align-items:center;gap:6px;background:var(--gold-tint);color:var(--gold-deep);font-weight:700;padding:7px 14px;border-radius:999px;font-size:14px;font-variant-numeric:tabular-nums}.badge-pill .icon--star{color:var(--gold)}.home__tagline{color:var(--ink-mute);font-size:14.5px;margin:12px 0 4px;text-align:center;padding:0 30px;text-wrap:balance}.notis{display:flex;align-items:center;gap:10px;margin:12px 22px 0;padding:11px 14px;background:var(--gold-tint);border:1px solid #e6c988;border-radius:var(--r-sm);font-size:12.5px;line-height:1.45;color:#7a5a12}.notis .icon{color:var(--gold-deep)}.level-map{width:100%;padding:20px 24px 8px;display:flex;flex-direction:column;gap:26px}.level-row{display:flex}.level-row--kiri{justify-content:flex-start}.level-row--kanan{justify-content:flex-end}.level-node{display:flex;flex-direction:column;align-items:center;gap:4px;width:132px}.level-node__bulatan{width:82px;height:82px;border-radius:50%;border:4px solid var(--card);display:flex;align-items:center;justify-content:center;box-shadow:0 6px #00000026;transition:transform .1s ease;padding:0;color:#fff}.level-node__bulatan:active:not(:disabled){transform:translateY(4px);box-shadow:0 2px #00000026}.level-node__bulatan--dibuka{background:var(--teal)}.level-node__bulatan--kunci{background:#cfc6b8;color:#8a8071;cursor:not-allowed}.level-node__bulatan--senyap{background:var(--gold);color:#fff;cursor:not-allowed}.level-node__tajuk{font-family:var(--f-display);font-weight:700;font-size:14px;text-align:center;margin-top:2px}.level-node__huraian{font-size:11.5px;color:var(--ink-mute);text-align:center;line-height:1.35;text-wrap:balance}.level-node__bintang{display:flex;gap:2px;margin-top:2px}.home__ibubapa{display:flex;align-items:center;gap:8px;margin-top:26px;background:transparent;border:2px solid var(--garis);color:var(--ink-mute);border-radius:999px;padding:10px 20px;font-weight:700;font-size:13px}.lesson-screen{width:100%;padding:16px 22px 40px}.lesson-header{width:100%;display:flex;align-items:center;gap:12px}.lesson-header__keluar{width:30px;height:30px;border-radius:50%;border:none;background:transparent;color:var(--ink-mute);display:flex;align-items:center;justify-content:center;flex-shrink:0}.lesson-progress{flex:1;height:12px;background:#e7ddc7;border-radius:8px;overflow:hidden}.lesson-progress__isi{height:100%;background:var(--teal);border-radius:8px;transition:width .3s ease}.lives-indicator{display:flex;gap:4px;flex-shrink:0}.lesson-kira{font-size:12px;color:var(--ink-mute);margin:10px 0 0;font-variant-numeric:tabular-nums}.lesson-body{width:100%;margin-top:18px;display:flex;justify-content:center}.question{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}.question__arahan{font-family:var(--f-display);font-size:19px;font-weight:700;text-align:center;margin:0;text-wrap:balance}.question__arahan--besar{font-size:22px}.question__kira{font-size:12.5px;color:var(--ink-mute);margin:-6px 0 0;font-variant-numeric:tabular-nums}.prompt{display:flex;flex-direction:column;align-items:center;gap:6px}.prompt__kad{width:150px;height:150px;border-radius:var(--r-lg);background:var(--card);border:3px solid var(--teal);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 var(--teal-tint);transition:transform .12s ease;color:var(--teal)}.prompt__kad:active:not(:disabled){transform:scale(.96)}.prompt__kad--audio{background:var(--teal-tint)}.prompt__simbol{font-family:var(--f-arab);font-size:76px;line-height:1.3;color:var(--ink)}.prompt__hint{color:var(--ink-mute);font-size:12px;font-style:italic}.option-list{width:100%;display:flex;flex-direction:column;gap:10px}.option-btn{width:100%;padding:15px;font-family:var(--f-body);font-size:18px;font-weight:700;border-radius:var(--r-md);border:2px solid var(--garis);background:var(--card);color:var(--ink);box-shadow:0 3px #0000000f}.option-btn--arab{font-family:var(--f-arab);font-size:30px;line-height:1.5}.option-btn--betul{border-color:var(--teal);background:var(--teal-tint);color:var(--teal-deep)}.option-btn--salah{border-color:var(--coral);background:var(--coral-tint);color:var(--coral-deep);animation:goyang .4s ease}.huruf-grid{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:14px}.huruf-grid__item{aspect-ratio:1 / .85;border-radius:var(--r-md);border:2px solid var(--garis);background:var(--card);font-family:var(--f-arab);font-size:44px;line-height:1.4;color:var(--ink);box-shadow:0 3px #0000000f}.huruf-grid__item--betul{border-color:var(--teal);background:var(--teal-tint)}.huruf-grid__item--salah{border-color:var(--coral);background:var(--coral-tint);animation:goyang .4s ease}.matching-grid{width:100%;display:flex;gap:14px}.matching-col{flex:1;display:flex;flex-direction:column;gap:10px}.matching-item{height:58px;border-radius:var(--r-sm);border:2px solid var(--garis);background:var(--card);font-family:var(--f-body);font-size:15px;font-weight:700;color:var(--ink);box-shadow:0 3px #0000000f}.matching-item--arab{font-family:var(--f-arab);font-size:28px;line-height:1.4}.matching-item--pilih{border-color:var(--teal);background:var(--teal-tint)}.matching-item--padan{border-color:var(--gold);background:var(--gold-tint);opacity:.75}.matching-item--salah{border-color:var(--coral);background:var(--coral-tint);animation:goyang .4s ease}.dragdrop__sasaran{font-size:15px;color:var(--ink-mute);margin:0}.dragdrop__sasaran strong{font-family:var(--f-display);font-size:19px;color:var(--ink)}.dragdrop__target{width:136px;height:136px;border-radius:var(--r-lg);border:3px dashed #c9bd9f;background:#efe6d2;display:flex;align-items:center;justify-content:center;transition:background .2s ease,border-color .2s ease;color:#b3a687}.dragdrop__target--hover{background:var(--teal-tint);border-color:var(--teal);color:var(--teal)}.dragdrop__target--betul{border-style:solid;border-color:var(--teal);background:var(--teal-tint);color:var(--teal)}.dragdrop__target--salah{border-style:solid;border-color:var(--coral);background:var(--coral-tint);color:var(--coral)}.dragdrop__tiles{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}.dragdrop__tile{width:72px;height:72px;border-radius:var(--r-md);background:var(--card);border:2px solid var(--garis);box-shadow:0 3px #00000012;display:flex;align-items:center;justify-content:center;font-family:var(--f-arab);font-size:32px;line-height:1.4;color:var(--ink);touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab}.dragdrop__tile--seret{z-index:50;box-shadow:0 10px 20px #00000038;transform:scale(1.1);cursor:grabbing}.dragdrop__tile--mati{opacity:.35;pointer-events:none}@keyframes goyang{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.feedback-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0b45476b;display:flex;align-items:center;justify-content:center;z-index:100;padding:24px}.feedback-card{background:var(--card);border-radius:24px;padding:26px 32px;display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:0 14px 34px #00000047;animation:pop .35s cubic-bezier(.34,1.56,.64,1);text-align:center}.feedback-card__bulatan{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center}.feedback-card--betul .feedback-card__bulatan{background:var(--teal-tint);color:var(--teal)}.feedback-card--salah .feedback-card__bulatan{background:var(--coral-tint);color:var(--coral)}.feedback-card__teks{font-family:var(--f-display);font-size:19px;font-weight:700}.feedback-card--betul .feedback-card__teks{color:var(--teal-deep)}.feedback-card--salah .feedback-card__teks{color:var(--coral-deep)}.feedback-card__jawapan{font-size:14px;color:var(--ink-mute)}.feedback-card__jawapan strong{color:var(--ink);font-family:var(--f-arab);font-size:20px}@keyframes pop{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.result-screen{justify-content:center;gap:14px;padding:28px;text-align:center;width:100%}.result-screen--menang{background:radial-gradient(circle at 50% 20%,#12a4a7,var(--teal) 75%);color:#fff}.result-screen--kalah{background:var(--sand);color:var(--ink)}.result__tajuk{font-family:var(--f-display);font-size:23px;margin:6px 0 0;text-wrap:balance}.result__sub{margin:0;font-size:14px;opacity:.85;max-width:28ch;text-wrap:balance}.result__bintang{display:flex;gap:10px}.result__bintang .icon--emas{filter:drop-shadow(0 3px 0 var(--gold-deep))}.result-screen--menang .icon--pudar{opacity:.35;color:#fff}.result__xp{background:var(--card);color:var(--gold-deep);font-weight:700;padding:8px 22px;border-radius:999px;font-size:16px;font-variant-numeric:tabular-nums}.result__butang{display:flex;flex-direction:column;gap:10px;width:100%;align-items:center;margin-top:8px}.parent-screen{width:100%;align-items:stretch;padding:18px 22px 40px;gap:20px}.parent-screen--pintu{align-items:center;justify-content:center;text-align:center;gap:10px;color:var(--ink-mute)}.parent-header{display:flex;align-items:center;gap:10px}.parent__kembali-ikon{width:34px;height:34px;border-radius:50%;border:2px solid var(--garis);background:var(--card);color:var(--ink-mute);display:flex;align-items:center;justify-content:center;flex-shrink:0}.parent__tajuk{font-family:var(--f-display);font-size:20px;margin:0;color:var(--ink)}.parent__pintu-teks{margin:0;font-size:14px}.parent__soalan{font-family:var(--f-display);font-size:30px;font-weight:800;color:var(--ink);margin:0;font-variant-numeric:tabular-nums}.parent__borang{width:100%;max-width:240px;display:flex;flex-direction:column;gap:10px;align-items:center;margin-top:6px}.parent__silap{color:var(--coral-deep);font-size:13px;margin:0;font-weight:700}.parent__kembali{background:transparent;border:none;color:var(--ink-mute);font-weight:700;font-size:14px;margin-top:8px}.parent__stat{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat-kad{background:var(--card);border:2px solid var(--garis);border-radius:var(--r-md);padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:2px}.stat-kad__nilai{font-family:var(--f-display);font-size:24px;font-weight:800;color:var(--teal);font-variant-numeric:tabular-nums}.stat-kad__label{font-size:11px;color:var(--ink-mute);text-align:center;line-height:1.3}.parent__seksyen{display:flex;flex-direction:column;gap:10px}.parent__sub{font-family:var(--f-display);font-size:16px;margin:0}.parent__nota{margin:0;font-size:13px;color:var(--ink-mute);line-height:1.5}.parent__ulang{display:flex;flex-wrap:wrap;gap:8px}.parent__ulang-item{display:flex;align-items:center;gap:7px;background:var(--coral-tint);border:1px solid #f0b5ac;color:var(--coral-deep);border-radius:999px;padding:6px 14px 6px 10px;font-size:13px;font-weight:700}.parent__ulang-simbol{font-family:var(--f-arab);font-size:20px;line-height:1.4}.parent__legend{display:flex;flex-wrap:wrap;gap:10px 14px}.parent__legend-item{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-mute)}.parent__titik{width:10px;height:10px;border-radius:50%;flex-shrink:0}.parent__titik--kuasai{background:var(--teal)}.parent__titik--belajar{background:var(--gold)}.parent__titik--ulang{background:var(--coral)}.parent__titik--belum{background:#d6cbb6}.parent__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.parent__sel{border-radius:var(--r-sm);padding:8px 3px 6px;display:flex;flex-direction:column;align-items:center;gap:1px;border:2px solid transparent;background:var(--card)}.parent__sel-simbol{font-family:var(--f-arab);font-size:24px;line-height:1.35}.parent__sel-nama{font-size:9.5px;color:var(--ink-mute);text-align:center;line-height:1.2}.parent__sel--kuasai{background:var(--teal-tint);border-color:var(--teal)}.parent__sel--belajar{background:var(--gold-tint);border-color:var(--gold)}.parent__sel--ulang{background:var(--coral-tint);border-color:var(--coral)}.parent__sel--belum{background:#efe8d8;border-color:var(--garis)}.parent__level-senarai{display:flex;flex-direction:column;gap:8px}.parent__level{display:flex;align-items:center;justify-content:space-between;background:var(--card);border:2px solid var(--garis);border-radius:var(--r-sm);padding:11px 14px}.parent__level-nama{font-weight:700;font-size:14px}.parent__level-kunci{font-weight:500;font-size:12px;color:var(--ink-mute)}.parent__level-bintang{display:flex;gap:2px}.rounded-button{font-family:var(--f-display);border:none;padding:15px 30px;font-size:17px;font-weight:700;border-radius:var(--r-md);transition:transform .1s ease;background:var(--teal);color:#fff;box-shadow:0 4px 0 var(--teal-deep)}.rounded-button--kedua{background:var(--card);color:var(--teal-deep);box-shadow:0 4px 0 var(--garis)}.rounded-button--penuh{width:100%}.rounded-button:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--teal-deep)}.rounded-button--kedua:active:not(:disabled){box-shadow:0 1px 0 var(--garis)}.rounded-button:disabled{cursor:not-allowed;opacity:.55}@media(prefers-reduced-motion:reduce){.mascot,.feedback-card,.option-btn--salah,.huruf-grid__item--salah,.matching-item--salah{animation:none}.spinner{animation-duration:2s}}