:root{--k-sky-top: #78cdff;--k-sky-bottom: #eaf8ff;--k-grass: #7fdc7a;--k-grass-dark: #4fbf63;--k-sun: #ffd23f;--k-pink: #ff7fb0;--k-grape: #6b47f0;--k-mint: #3fd8a8;--k-orange: #ff9a3c;--k-sky: #4aa8ff;--k-ink: #2b1d5c;--k-muted: #5d5280;--k-cloud: #ffffff;--k-radius: 28px;--k-radius-lg: 40px;--k-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);--k-ease-out: cubic-bezier(.22, 1, .36, 1);--k-font-display: "Baloo 2", "Nunito", system-ui, sans-serif;--k-font-body: "Nunito", system-ui, sans-serif}.k-sky{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--k-sky-top) 0%,var(--k-sky-bottom) 70%,#fff7da 100%);isolation:isolate}.k-sky:before,.k-sky:after{content:"";position:absolute;z-index:-1;width:220px;height:70px;border-radius:999px;background:var(--k-cloud);box-shadow:60px -26px 0 -6px var(--k-cloud),120px -6px 0 -2px var(--k-cloud);opacity:.95;animation:k-drift 60s linear infinite}.k-sky:before{top:12%;left:-300px}.k-sky:after{top:34%;left:-300px;animation-duration:90s;animation-delay:-35s;transform:scale(.75);opacity:.85}.k-hills{position:absolute;left:0;right:0;bottom:0;height:90px;z-index:-1;pointer-events:none}.k-hills:before,.k-hills:after{content:"";position:absolute;bottom:-60px;border-radius:50%}.k-hills:before{left:-10%;width:70%;height:150px;background:var(--k-grass)}.k-hills:after{right:-12%;width:75%;height:130px;background:var(--k-grass-dark)}@keyframes k-drift{to{transform:translate(calc(100vw + 700px))}}.k-btn{--c: var(--k-grape);--cd: #4b32c4;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 30px;border:0;border-radius:999px;cursor:pointer;text-decoration:none;font-family:var(--k-font-display);font-weight:800;font-size:1.25rem;color:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 86%,white) 0%,var(--c) 100%);box-shadow:inset 0 4px #ffffff73,inset 0 -4px #00000014,0 8px 0 var(--cd),0 16px 22px #2b1d5c38;text-shadow:0 2px 0 rgba(0,0,0,.15);transition:transform .18s var(--k-ease-bounce),box-shadow .18s var(--k-ease-out)}.k-btn:focus-visible,.k-card:focus-visible{outline:4px solid #4b32c4;outline-offset:4px}.k-btn:hover{transform:translateY(-3px) scale(1.02)}.k-btn:active{transform:translateY(6px);box-shadow:inset 0 4px #fff6,0 2px 0 var(--cd),0 4px 8px #2b1d5c33}.k-btn--pink{--c: var(--k-pink);--cd: #e0568a;color:var(--k-ink);text-shadow:0 2px 0 rgba(255,255,255,.4)}.k-btn--mint{--c: var(--k-mint);--cd: #1fb088;color:var(--k-ink);text-shadow:0 2px 0 rgba(255,255,255,.4)}.k-btn--sun{--c: var(--k-sun);--cd: #e0a800;color:var(--k-ink);text-shadow:0 2px 0 rgba(255,255,255,.4)}.k-btn--sky{--c: var(--k-sky);--cd: #2a82da;color:var(--k-ink);text-shadow:0 2px 0 rgba(255,255,255,.4)}.k-btn--orange{--c: var(--k-orange);--cd: #e07a1c;color:var(--k-ink);text-shadow:0 2px 0 rgba(255,255,255,.4)}.k-btn--big{min-height:68px;padding:0 40px;font-size:1.5rem}.k-card{background:#fff;border-radius:var(--k-radius-lg);padding:22px;box-shadow:inset 0 5px #ffffffe6,0 10px #2b1d5c1f,0 22px 30px #2b1d5c24;transition:transform .25s var(--k-ease-bounce)}.k-card:hover{transform:translateY(-6px) rotate(-.6deg)}.k-card--band{border-top:14px solid var(--band, var(--k-pink))}.k-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 14px;border-radius:999px;font-family:var(--k-font-display);font-weight:800;background:var(--k-sun);color:var(--k-ink);box-shadow:inset 0 3px #ffffff80,0 4px #e0a800}.k-badge--pink{background:var(--k-pink);color:var(--k-ink);box-shadow:inset 0 3px #fff6,0 4px #e0568a}.k-bubble{position:relative;display:inline-block;max-width:22em;padding:14px 22px;border-radius:28px;background:#fff;font-family:var(--k-font-display);font-weight:700;font-size:1.3rem;color:var(--k-ink);box-shadow:0 8px #2b1d5c1a,0 16px 24px #2b1d5c24;animation:k-pop-in .5s var(--k-ease-bounce) both}.k-bubble:after{content:"";position:absolute;left:34px;bottom:-14px;width:28px;height:28px;background:#fff;transform:rotate(45deg);border-radius:0 0 8px}.k-mascot{display:block;width:100%;height:auto;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 14px 14px rgba(43,29,92,.2))}.k-float{animation:k-float 3.6s ease-in-out infinite}.k-wiggle:hover,.k-wiggle.is-on{animation:k-wiggle .6s ease-in-out}.k-bounce{animation:k-bounce .7s var(--k-ease-bounce)}.k-star{display:inline-block;font-size:2.4rem;filter:drop-shadow(0 3px 0 rgba(224,168,0,.5));animation:k-star-pop .5s var(--k-ease-bounce) both}.k-star:nth-child(2){animation-delay:.12s}.k-star:nth-child(3){animation-delay:.24s}.k-twinkle{animation:k-twinkle 2.2s ease-in-out infinite}@keyframes k-float{0%,to{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1.5deg)}}@keyframes k-wiggle{0%,to{transform:rotate(0)}20%{transform:rotate(-7deg) scale(1.04)}50%{transform:rotate(6deg) scale(1.04)}80%{transform:rotate(-3deg)}}@keyframes k-bounce{0%{transform:scale(1) translateY(0)}30%{transform:scale(1.1,.88) translateY(0)}55%{transform:scale(.92,1.1) translateY(-26px)}to{transform:scale(1) translateY(0)}}@keyframes k-pop-in{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}@keyframes k-star-pop{0%{transform:scale(0) rotate(-90deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}@keyframes k-twinkle{0%,to{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.82)}}.k-confetti{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:1000}@media(prefers-reduced-motion:reduce){.k-sky:before,.k-sky:after,.k-float,.k-twinkle,.k-bounce,.k-wiggle{animation:none!important}.k-btn,.k-card{transition:none}}.levelmap{max-width:560px}.lvgroup{position:relative;width:100%;padding:14px 12px 18px;margin:6px 0;border-radius:36px;background:color-mix(in srgb,var(--gc, #7be0c3) 22%,var(--card, #fff));box-shadow:inset 0 4px #fff9,0 8px #2b1d5c1a}.lvgroup:nth-of-type(4n+1){--gc: #7be0c3}.lvgroup:nth-of-type(4n+2){--gc: #ff8fb8}.lvgroup:nth-of-type(4n+3){--gc: #ffd35c}.lvgroup:nth-of-type(4n+4){--gc: #8fc4ff}.lvgroup h3{display:inline-block;margin:0 0 8px;padding:2px 14px;border-radius:999px;background:var(--gc);color:#2b1d5c;font-size:1rem;box-shadow:0 3px #2b1d5c26}.lvrow{position:relative;display:flex;justify-content:space-between;gap:6px;padding:8px 0}.lvrow--rev{flex-direction:row-reverse}.lvrow:before{content:"";position:absolute;left:8%;right:8%;top:50%;border-top:6px dotted rgba(43,29,92,.22);transform:translateY(-50%)}.lvrow+.lvrow{margin-top:4px}.lvgroup .lv{position:relative;z-index:1;flex:0 0 auto;width:clamp(46px,15vw,64px);height:clamp(46px,15vw,64px);min-height:0;border-radius:50%;padding:0;background:linear-gradient(180deg,#fff,#f3eeff);box-shadow:inset 0 4px #fff,0 5px #2b1d5c33;transition:transform .18s cubic-bezier(.34,1.56,.64,1)}.lvgroup .lv:hover{transform:translateY(-2px) scale(1.06)}.lvgroup .lv:active{transform:translateY(4px);box-shadow:inset 0 4px #fff,0 1px #2b1d5c33}.lvgroup .lv--done{background:linear-gradient(180deg,#ffe98a,#ffd23f);box-shadow:inset 0 4px #ffffffb3,0 5px #e0a800}.lvgroup .lv--locked{background:#e4e0f3;color:#4a3f73}.lvgroup .lv--now{background:linear-gradient(180deg,#ff9fc6,#ff7fb0);color:#2b1d5c;box-shadow:inset 0 4px #ffffff80,0 5px #e0568a;animation:lv-pulse 1.6s ease-in-out infinite}.lvgroup .lv b{font-size:1.15rem}.lvgroup .lv span{position:absolute;bottom:-10px;left:50%;transform:translate(-50%);font-size:.65rem;white-space:nowrap}.lv__pal{position:absolute;left:50%;bottom:78%;width:60px;height:60px;transform:translate(-50%);pointer-events:none;filter:drop-shadow(0 4px 4px rgba(43,29,92,.25));animation:lv-hop 1.4s ease-in-out infinite}@keyframes lv-pulse{50%{transform:scale(1.08)}}@keyframes lv-hop{50%{transform:translate(-50%) translateY(-8px)}}.win__box .mascot{width:130px;height:130px;margin:-10px auto 0;display:block}@media(prefers-reduced-motion:reduce){.lvgroup .lv--now,.lv__pal{animation:none}}:root{--bg: #fff9ee;--ink: #2b1d5c;--muted: #5d5280;--purple: #6b47f0;--pink: #ff8fb8;--mint: #7be0c3;--sun: #ffd35c;--card: #ffffff;--tint: #f1ecff;--shadow: 0 6px 0 rgba(43, 29, 92, .13)}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{background:linear-gradient(180deg,#cfeeff,#fff9ee 38%) fixed;color:var(--ink);font-family:Nunito,system-ui,sans-serif;font-size:1.1rem;line-height:1.35;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;overscroll-behavior:none}h1,h2,.btn,.card strong,.nav-btn,.opt,.tool,.big{font-family:"Baloo 2",Nunito,system-ui,sans-serif;line-height:1.15}h1{font-size:1.4rem;margin:0;flex:1;text-align:center;color:var(--purple)}h2{font-size:clamp(1.4rem,4.5vw,2rem);margin:4px 0}p{margin:0}.lead,.muted{color:var(--muted)}:focus-visible{outline:4px solid #4b32c4;outline-offset:3px;box-shadow:0 0 0 7px #fff}[hidden]{display:none!important}.bar{display:flex;align-items:center;gap:8px;padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top))}.icon-btn{width:52px;height:52px;border:0;border-radius:18px;background:var(--card);box-shadow:var(--shadow);font-size:1.5rem;display:grid;place-items:center;cursor:pointer;text-decoration:none;color:inherit}.icon-btn{box-shadow:inset 0 3px #fff,0 5px #2b1d5c29;transition:transform .18s cubic-bezier(.34,1.56,.64,1)}.icon-btn:hover{transform:translateY(-2px) scale(1.05)}.icon-btn:active{transform:translateY(4px);box-shadow:inset 0 3px #fff,0 1px #2b1d5c29}.center{display:flex;flex-direction:column;align-items:center;text-align:center;padding:8px 16px 24px;gap:10px}.mascot{animation:bob 3s ease-in-out infinite}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.cards{display:grid;gap:14px;width:100%;max-width:900px;margin:8px 0;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}.card{display:flex;flex-direction:column;align-items:center;gap:2px;padding:18px 12px;cursor:pointer;background:var(--card);color:var(--ink);border:0;border-top:12px solid var(--mint);border-radius:36px;box-shadow:inset 0 5px #fff,0 8px #2b1d5c1f,0 18px 24px #2b1d5c1f;font:inherit;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}.card:hover{transform:translateY(-5px) rotate(-.5deg)}.card--pelangi{border-top-color:var(--pink)}.card--bintang{border-top-color:var(--sun)}.card:active{transform:translateY(3px)}.card__emoji{font-size:2.6rem}.card strong{font-size:1.5rem}.card small{color:var(--muted)}.prompt{background:var(--card);border-radius:30px;padding:8px 20px;box-shadow:var(--shadow);max-width:min(94vw,640px)}.prompt small{color:var(--muted);font-weight:700}.btn{min-height:56px;padding:0 30px;border:0;border-radius:999px;font-size:1.25rem;font-weight:800;cursor:pointer;color:#fff;background:linear-gradient(180deg,#8d72ff,#6b47f0);box-shadow:inset 0 4px #ffffff73,0 7px #4b32c4,0 14px 18px #2b1d5c33;text-shadow:0 2px 0 rgba(0,0,0,.15);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;transition:transform .18s cubic-bezier(.34,1.56,.64,1)}.btn:hover{transform:translateY(-2px) scale(1.02)}.btn:active{transform:translateY(6px);box-shadow:inset 0 4px #fff6,0 1px #4b32c4}.btn--ghost{background:#fff;color:var(--ink);border:3px solid var(--purple);box-shadow:0 4px #4b32c459;text-shadow:none}.btn--small{min-height:44px;font-size:1rem;padding:0 18px;margin-top:4px}.dock{display:flex;align-items:center;justify-content:center;gap:14px;padding:0 12px max(16px,env(safe-area-inset-bottom))}.nav-btn{width:72px;height:72px;border:0;border-radius:24px;background:var(--card);box-shadow:var(--shadow);font-size:2rem;cursor:pointer}.nav-btn:active{transform:translateY(4px);box-shadow:none}.toast{min-height:48px;padding:6px 22px;border-radius:999px;background:var(--purple);color:#fff;font-family:"Baloo 2",sans-serif;font-size:1.25rem;font-weight:700;opacity:0;transition:opacity .2s;display:grid;place-items:center}.toast.is-on{opacity:1}.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(100%,520px)}.opt{min-height:68px;border:0;border-radius:26px;background:#fff;color:var(--ink);font-size:1.7rem;font-weight:800;box-shadow:inset 0 4px #fff,0 6px #2b1d5c29,0 12px 16px #2b1d5c1a;cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1)}.opt:hover:not(:disabled){transform:translateY(-2px) scale(1.02)}.opt:active:not(:disabled){transform:translateY(5px);box-shadow:0 1px #2b1d5c29}.opt.is-right{background:var(--mint);color:#0f4a39}.opt.is-wrong{background:#ffb3b8;color:#6b1a22}.shake{animation:shake .4s}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-8px)}40%,80%{transform:translate(8px)}}.win{position:fixed;top:0;right:0;bottom:0;left:0;background:#1c153899;display:grid;place-items:center;padding:16px;z-index:20}.win__box{background:var(--card);border-radius:40px;padding:24px;text-align:center;max-width:420px;box-shadow:inset 0 5px #fff,0 10px #2b1d5c24;animation:pop .45s cubic-bezier(.34,1.56,.64,1)}.win__box img{height:auto}.win__btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:14px}.stars{font-size:2.6rem;letter-spacing:4px;margin:4px 0}@keyframes pop{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.levelmap{max-width:640px;margin:0 auto;gap:14px}.lvgroup{width:100%}.lvgroup h3{margin:6px 0;font-family:"Baloo 2",sans-serif;font-size:1.1rem;color:var(--muted);text-align:left}.lvgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.lv{min-height:64px;border:0;border-radius:16px;background:var(--card);box-shadow:var(--shadow);cursor:pointer;display:grid;place-items:center;padding:6px 2px;color:var(--ink);font:inherit}.lv b{font-family:"Baloo 2",sans-serif;font-size:1.25rem;line-height:1}.lv span{font-size:.8rem;line-height:1}.lv--done{background:#e9fbf4}.lv--locked{background:var(--tint)}.lv:active{transform:translateY(3px);box-shadow:none}.preview-banner{width:100%;background:#fff0c2;color:#6b4b00;border-radius:18px;padding:8px 14px;font-weight:700;text-align:center}.preview-banner a{color:#4b32c4}.playbar{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}body.is-running{overflow:hidden;overscroll-behavior:none;touch-action:none}.game{position:fixed;top:0;right:0;bottom:0;left:0;background:#8fd3ff}.stage{position:absolute;top:0;right:0;bottom:0;left:0}.stage canvas{display:block;width:100%;height:100%}.hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top));pointer-events:none}.hud>*{pointer-events:auto}.hud__btn{width:52px;height:52px;border:0;border-radius:18px;background:#ffffffeb;box-shadow:inset 0 3px #fff,0 5px #2b1d5c2e;font-size:1.5rem;cursor:pointer}.hud__info{background:#ffffffeb;border-radius:999px;padding:8px 18px;font-family:"Baloo 2",sans-serif;font-weight:700;color:#2b1d5c;box-shadow:0 4px #2b1d5c26}.question{position:absolute;left:50%;top:calc(max(10px,env(safe-area-inset-top)) + 70px);transform:translate(-50%);max-width:min(92vw,640px);text-align:center;background:#fff;color:#2b1d5c;border-radius:28px;padding:10px 24px;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:clamp(1.8rem,7vw,3rem);line-height:1.15;letter-spacing:1px;box-shadow:inset 0 4px #fff,0 8px #2b1d5c29,0 16px 24px #2b1d5c2e;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}.question.is-near{transform:translate(-50%) scale(1.07)}.gtoast{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:clamp(2rem,8vw,3.2rem);padding:8px 28px;border-radius:999px;color:#2b1d5c;transition:opacity .2s,transform .25s cubic-bezier(.34,1.56,.64,1)}.gtoast.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}.gtoast.ok{background:#3fd8a8}.gtoast.no{background:#ffd23f}.pad{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:12px;padding-bottom:max(14px,env(safe-area-inset-bottom));pointer-events:none}.pad>*{pointer-events:auto}.pad__mid{display:flex;flex-direction:column;gap:8px}.pad__btn{width:84px;height:84px;border:0;border-radius:28px;background:#ffffffd9;box-shadow:inset 0 4px #fff,0 6px #2b1d5c33;font-size:2.2rem;cursor:pointer;touch-action:manipulation}.pad__btn--s{width:64px;height:52px;border-radius:20px;font-size:1.5rem}.pad__btn:active{transform:translateY(5px);box-shadow:inset 0 4px #fff,0 1px #2b1d5c33}.question{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.q-svg{display:inline-flex;align-items:center;gap:4px}.q-svg svg{display:block}