:root{--bg:#F0FAF4;--side:#E3F5EA;--surface:#fff;--ink:#0F2718;--muted:#4D7260;--line:#C5E4CF;--accent:#1A7A3C;--on:#fff;--soft:#D6F0E0;--lime:#2EAD5C;
--body:"Plus Jakarta Sans","Amiri","Segoe UI",system-ui,sans-serif;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0A1A10;--side:#061209;--surface:#0E2116;--ink:#E8F5EC;--muted:#7AAF8A;--line:#1A3D24;--accent:#3DC26B;--on:#061209;--soft:#113321;--lime:#3DC26B}}
:root[data-theme=dark]{--bg:#0A1A10;--side:#061209;--surface:#0E2116;--ink:#E8F5EC;--muted:#7AAF8A;--line:#1A3D24;--accent:#3DC26B;--on:#061209;--soft:#113321;--lime:#3DC26B}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{height:100%;margin:0}*,*::before,*::after{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:16px/1.6 var(--body);overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input:not([type=checkbox]){font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 16px;width:100%;margin-bottom:10px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1{font-size:clamp(1.6rem,5vw,2.4rem);line-height:1.1;letter-spacing:-.03em;margin:0 0 8px;font-weight:800}h2{font-size:1.15rem;margin:0 0 10px}
.muted{color:var(--muted);margin:0 0 12px}.err{color:#c0392b;min-height:1.4em;margin-bottom:6px;font-size:.92rem}
.app{display:flex;height:100%}
.side{width:260px;flex:none;background:var(--side);border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:8px}
.brand{display:flex;align-items:center;gap:10px;padding:0 8px 14px;font-size:1.4rem;font-weight:800}
.logo{width:36px;height:36px;border-radius:12px 12px 12px 4px;background:var(--accent);color:var(--on);display:grid;place-items:center}
.nav{text-align:left;padding:11px 14px;border-radius:12px;font-weight:600}.nav:hover{background:var(--soft)}.nav.active{background:var(--surface);box-shadow:0 1px 0 var(--line)}
.sp{flex:1}.who{padding:0 14px;color:var(--muted);font-size:.9rem}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:none;align-items:center;gap:12px;padding:12px 16px}
.icon-btn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line)}
.scroll{flex:1;overflow-y:auto;padding:28px 20px 40px}.wrap{max-width:760px;margin:0 auto}
.card{background:var(--surface);border:1px solid var(--line);border-radius:22px 22px 22px 6px;padding:20px;margin-bottom:14px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.grid .card{margin:0}
.tag{display:inline-block;background:var(--lime);color:var(--on);font-size:.8rem;font-weight:700;padding:2px 12px;border-radius:999px;margin-bottom:10px}
.btn{background:var(--accent);color:var(--on);font-weight:700;padding:12px 20px;border-radius:14px}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}.btn:hover:not(:disabled){filter:brightness(1.06)}.btn:disabled{opacity:.4;cursor:not-allowed}
.btn small{display:block;font-weight:500;opacity:.7;font-size:.75rem}
.lv{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.lv .btn{padding:10px 4px;text-align:center}
.row{display:flex;gap:10px;justify-content:space-between;margin-top:14px;flex-wrap:wrap}
.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}.tabs button{padding:8px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:600}
.dch{margin-bottom:28px}
.dhd{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 2px 10px}.dhd b{font-size:.95em}
.dnav{display:flex;gap:6px}.dar{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:transparent;font-size:1.2em;line-height:1;color:inherit}
.dtrack{display:flex;border-radius:22px 22px 22px 6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}.dtrack::-webkit-scrollbar{display:none}
.dsl{flex:0 0 100%;scroll-snap-align:start;box-sizing:border-box;display:flex;align-items:center;gap:14px;padding:22px 20px;color:#fff;min-height:110px;position:relative;overflow:hidden}
.dsl[data-k=dly]{background:linear-gradient(135deg,#B45309,#F59E0B)}.dsl[data-k=fast]{background:linear-gradient(135deg,#0f766e,#22d3ee)}.dsl[data-k=sorof]{background:linear-gradient(135deg,#166534,#65a30d)}.dsl[data-k=oral]{background:linear-gradient(135deg,#1e3a8a,#3b82f6)}
.dsl p{opacity:.92}.dsl .muted{color:inherit}.dsl .btn{background:#fff;color:#7a3a05}.dsl .btn:disabled{opacity:.6}
.dsl .dic{font-size:2.4em;flex:0 0 auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}.dsl .dtx{flex:1;min-width:0}.dsl h3{margin:0;font-size:1.1em}.dsl p{margin:2px 0 6px}.dsl small{font-weight:600}
.dsl.spin small{background:#fff;color:#8a4205;padding:2px 10px;border-radius:999px}.dsl.lost small,.dsl.off small{opacity:.75}.dsl .btn{flex:0 0 auto}
.ddots{display:flex;justify-content:center;gap:6px;margin-top:10px}.ddots i{width:7px;height:7px;border-radius:50%;background:var(--line);cursor:pointer;transition:all .2s}.ddots i.on{background:var(--accent);width:18px;border-radius:99px}
@media(max-width:480px){.dsl{gap:10px}.dsl .dic{font-size:1.8em}}
.tabs.sub button{padding:5px 12px;font-size:.88em;background:transparent}
.tabs button.on{background:var(--accent);color:var(--on);border-color:transparent}
.auth{max-width:400px;margin:8vh auto 0}.auth .btn{width:100%}
.bar{height:8px;background:var(--soft);border-radius:9px;overflow:hidden;margin-bottom:14px}.bar i{display:block;height:100%;background:var(--accent);transition:width .2s}
.opt{display:flex;gap:12px;width:100%;text-align:left;padding:13px 16px;margin-bottom:8px;border-radius:16px;border:1px solid var(--line);background:var(--bg)}
.opt:hover{border-color:var(--accent)}.opt.sel{background:var(--soft);border-color:var(--accent)}.opt b{color:var(--accent)}
.chk{display:flex;gap:8px;align-items:center;margin:12px 0;font-size:.92rem}
.lrow{display:grid;grid-template-columns:44px 1fr auto auto;gap:12px;align-items:center;padding:10px 6px;border-bottom:1px solid var(--line)}.lrow:last-child{border:0}
.lrow.me{background:var(--soft);border-radius:12px}.rk{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--bg);font-weight:800}
.r1{background:#F5C518;color:#3a2e00}.r2{background:#C9D1D9;color:#222}.r3{background:#D08B4F;color:#2b1500}
.bnav{display:none}
@media(max-width:820px){.top{display:flex;justify-content:center;padding:8px 16px}.side{display:none}.grid{grid-template-columns:1fr}
.scroll{padding:14px 14px calc(78px + env(safe-area-inset-bottom))}
.bnav{display:flex;position:fixed;z-index:30;left:0;right:0;bottom:0;background:var(--side);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.bn{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:12px;font-size:.68rem;font-weight:700;color:var(--muted)}
.bn span{font-size:1.25rem;line-height:1}.bn.active{color:var(--ink);background:var(--surface);box-shadow:0 1px 0 var(--line)}
.bn.dot::after{content:'';position:absolute;top:4px;right:calc(50% - 20px);width:9px;height:9px;border-radius:50%;background:#ef4444;border:2px solid var(--side)}}
.anon .side,.anon .top,.anon .bnav{display:none}
.ptabs{position:sticky;top:-14px;z-index:5;background:var(--bg);padding:8px 0;margin:0 0 6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.ptabs::-webkit-scrollbar{display:none}.ptabs button{flex:none;padding:8px 12px;white-space:nowrap;font-size:.9rem}@media(max-width:560px){.ptabs{gap:4px}.ptabs button{padding:8px 9px;font-size:.82rem}}
.fold{padding:0}.fold>summary{display:flex;flex-direction:column;gap:2px;padding:16px 20px;cursor:pointer;list-style:none}.fold>summary::-webkit-details-marker{display:none}.fold>summary h2{margin:0}.fold>summary .muted{margin:0;font-size:.85rem}.fold>summary::after{content:'▾';position:absolute;right:20px;top:16px;color:var(--muted)}.fold{position:relative}.fold[open]>summary::after{content:'▴'}.fold>.avs{padding:0 20px 20px}
.slist{display:flex;flex-direction:column;gap:8px}.srow{display:grid;grid-template-columns:34px 1fr;column-gap:10px;align-items:center;text-align:left;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--bg)}.srow span{grid-row:span 2;font-size:1.4rem;text-align:center}.srow small{color:var(--muted)}.srow:hover{border-color:var(--accent)}.srow.out b{color:#c0392b}
.chips{display:flex;gap:8px;flex-wrap:wrap}.pchip{padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg);font-weight:700;font-size:.9rem;opacity:.6}.pchip.on{opacity:1;border-color:var(--c);background:color-mix(in srgb,var(--c) 18%,var(--bg))}
.agrp{margin-bottom:12px}.agrp>summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none;padding:10px 4px}.agrp>summary::-webkit-details-marker{display:none}.agrp>summary h2{margin:0}.agrp>summary span{color:var(--muted);font-weight:700}.agrp>summary::after{content:'▾';margin-left:10px;color:var(--muted)}.agrp[open]>summary::after{content:'▴'}

/* ===== Animasi & level ===== */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
@keyframes glow{from{box-shadow:0 0 0 0 rgba(31,157,85,.7)}to{box-shadow:0 0 0 20px rgba(31,157,85,0)}}
@keyframes fly{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
@keyframes blink{50%{opacity:0}}
#view>*:not(.grid),.grid>.card,.lrow{animation:rise .5s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*70ms)}
.btn,.opt,.nav,.tabs button,.lvl{transition:transform .15s,box-shadow .2s,filter .2s,background .2s,border-color .2s}
.btn:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 10px 22px -10px rgba(20,100,50,.55)}
.btn:active:not(:disabled),.opt:active:not(:disabled),.lvl:active,.nav:active,.tabs button:active{transform:scale(.95)}
.tabs button:hover{transform:translateY(-2px)}
.opt{animation:rise .4s backwards;animation-delay:calc(var(--i,0)*90ms + 300ms)}
.opt:hover:not(:disabled){transform:translateX(6px)}.opt:disabled{cursor:default}
.opt.ok{background:#1f9d55;border-color:#1f9d55;color:#fff;animation:pop .35s,glow .8s}
.opt.no{background:#d64545;border-color:#d64545;color:#fff;animation:shake .45s}
.opt.ok b,.opt.no b{color:#fff}
h2.cur::after{content:'▌';color:var(--accent);animation:blink .8s infinite}
.meta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}.meta .muted{margin:0}
.chip{display:inline-block;background:var(--soft);padding:2px 14px;border-radius:999px;font-weight:700}.chip.pop{animation:pop .45s}
.fb{margin-top:12px;padding:12px 16px;border-radius:14px;font-weight:700;animation:pop .35s}
.fb.ok{background:rgba(31,157,85,.15);color:#1f9d55}.fb.no{background:rgba(214,69,69,.15);color:#d64545}
.pt{position:fixed;width:10px;height:10px;border-radius:3px;pointer-events:none;z-index:99;animation:fly .95s ease-out forwards}
.prog{height:10px;background:var(--soft);border-radius:9px;overflow:hidden}.prog i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--lime),var(--accent));border-radius:9px;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.lvls{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lvl{position:relative;overflow:hidden;text-align:left;color:#fff;padding:14px 12px 12px;border-radius:18px;display:flex;flex-direction:column;gap:2px;min-height:136px}
.lvl.e{background:linear-gradient(135deg,#2EAD5C,#1A7A3C)}.lvl.m{background:linear-gradient(135deg,#F5A623,#E67E22)}.lvl.h{background:linear-gradient(135deg,#EF5B5B,#B3245B)}
.lvl:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 14px 26px -12px rgba(0,0,0,.45)}
.lvl .ic{font-size:1.7rem;line-height:1;transition:transform .3s}.lvl:hover .ic{transform:scale(1.3) rotate(-10deg)}
.lvl small{opacity:.9}.lvl .xp{margin-top:auto;align-self:flex-start;background:rgba(255,255,255,.24);padding:1px 10px;border-radius:999px;font-weight:800;font-size:.78rem}
.lvl .pb{display:block;height:5px;background:rgba(255,255,255,.3);border-radius:9px;margin-top:8px;overflow:hidden}.lvl .pb u{display:block;height:100%;background:#fff;border-radius:9px}
.lvl .done{position:absolute;top:10px;right:10px}
.lvl::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);transform:translateX(-130%)}
.lvl:hover::after{transform:translateX(130%);transition:transform .7s}
.res{text-align:center}.res .row{justify-content:center}.big{font-size:3.6rem;line-height:1.2;animation:pop .6s}
.rk.r1,.rk.r2,.rk.r3{background:none;font-size:1.5rem}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* ===== Perbaikan: hover tidak menggeser elemen (mencegah goyang di tepi tombol) ===== */
.btn:hover:not(:disabled),.tabs button:hover,.opt:hover:not(:disabled){transform:none}
.btn:hover:not(:disabled){filter:brightness(1.08);box-shadow:0 8px 20px -10px rgba(20,100,50,.6)}
.tabs button:hover{border-color:var(--accent)}
.opt:hover:not(:disabled){box-shadow:inset 4px 0 0 var(--accent)}
.lvl:hover{transform:scale(1.03)}
.btn:active:not(:disabled),.opt:active:not(:disabled),.lvl:active,.nav:active,.tabs button:active{transform:scale(.97)}
.auth,.auth *{animation:none!important}