/* ===== Warna per jilid (mengikuti sampul buku) ===== */
.jc{border-top:5px solid var(--c)}
.jc .tag{background:var(--c);color:var(--fg,#fff)}
.jc .bar i{background:var(--c)}
.lvl{color:var(--fg,#fff)}
.lvl.e{background:linear-gradient(135deg,color-mix(in srgb,var(--c) 65%,#fff),var(--c))}
.lvl.m{background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 78%,var(--d)))}
.lvl.h{color:#fff;background:linear-gradient(135deg,var(--d),color-mix(in srgb,var(--d) 60%,#000))}
.lvl .xp{white-space:nowrap;padding:1px 8px;font-size:.74rem;background:color-mix(in srgb,currentColor 18%,transparent)}
.lvl .pb{background:color-mix(in srgb,currentColor 25%,transparent)}.lvl .pb u{background:currentColor}
.urow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}.urow:last-child{border:0}
.del{padding:8px 16px;color:#c0392b}.nofx .lrow{animation:none}
/* ===== Kredit ===== */
.credit{text-align:center;color:var(--muted);font-size:.8rem;letter-spacing:.02em;line-height:1.4}.credit b{color:var(--accent);font-weight:700}
.scroll{display:flex;flex-direction:column}.wrap{width:100%;flex:1 0 auto}
.scroll>.credit{padding:28px 0 0}.side .credit{text-align:left;padding:8px 14px 0}
@media(min-width:821px){body:not(.anon) .scroll>.credit{display:none}}
/* ===== Logo brand ===== */
.brand{padding:0 4px 14px}.brand img{display:block;width:100%;max-width:210px}
.top-logo{display:block;height:40px;width:auto}
.auth-logo{display:block;width:min(300px,85%);margin:0 auto 12px}
/* ===== Daftar rank ===== */
.ranks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.rnk{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:12px 4px;border-radius:16px;border:1px solid var(--line);background:var(--bg)}
.rnk .dot{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--soft);color:var(--muted);margin-bottom:4px}
.rnk small{color:var(--muted);font-weight:600}
.rnk.done .dot,.rnk.cur .dot{background:var(--accent);color:var(--on)}
.rnk.cur{border-color:var(--accent);background:var(--soft);box-shadow:inset 0 0 0 1px var(--accent)}.rnk.cur .dot{animation:pop .5s}
.rnk.lock{opacity:.6}
@media(max-width:560px){.ranks{grid-template-columns:1fr}.rnk{flex-direction:row;text-align:left;gap:12px;padding:10px 14px}.rnk .dot{margin:0}.rnk small{margin-left:auto}}
/* ===== Rank liga ===== */
.rnk.done .dot,.rnk.cur .dot{background:var(--rc);color:#1a1a1a;font-size:1.25rem}
.rnk.cur{border-color:var(--rc);background:var(--soft);box-shadow:inset 0 0 0 2px var(--rc)}
.rnk.cur b{color:var(--ink)}
/* ===== Endless ===== */
.endless{display:flex;justify-content:space-between;align-items:center;gap:16px;color:#fff;border:0;background:linear-gradient(135deg,#3b1d8f,#c2317a)}
.endless h2{margin:6px 0 4px}.endless p{margin:0 0 6px;opacity:.92}.endless small{opacity:.9;font-weight:700}
.endless .tag{background:rgba(255,255,255,.22);color:#fff}.endless .btn{background:#fff;color:#3b1d8f;flex:none}
.end{border-top:5px solid #c2317a}.end .meta .chip{font-size:1.05rem}.chip.shk{animation:shake .45s}
@media(max-width:560px){.endless{flex-direction:column;align-items:stretch}}
/* ===== Profil, toast, panduan, tahap Tathbiq ===== */
.av{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;font-size:1.1rem;flex:none}.av.lg{width:84px;height:84px;font-size:2.6rem}
#who{display:flex;align-items:center;gap:10px}#who>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.un{display:flex;align-items:center;gap:8px;min-width:0}
.prof{display:flex;align-items:center;gap:18px}.prof h1{margin:0 0 6px}.prof .muted{margin:8px 0 0}
.avs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:12px}.avb{border-radius:50%;padding:3px;border:3px solid transparent;display:grid}.avb .av{width:100%;height:auto;aspect-ratio:1;font-size:1.5rem}.avb.on{border-color:var(--accent)}
.ach{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.ac{display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px 8px;border-radius:16px;border:1px solid var(--line);background:var(--bg);opacity:.5}.ac span{font-size:1.8rem}.ac small{color:var(--muted)}
.ac.on{opacity:1;border-color:var(--c);box-shadow:inset 0 0 0 1px var(--c)}
#toasts{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);right:12px;z-index:60;display:flex;flex-direction:column;gap:8px;max-width:min(360px,calc(100vw - 24px))}
.toast{display:flex;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:14px;padding:12px 14px;box-shadow:0 12px 30px -12px rgba(0,0,0,.4);animation:rise .35s}.toast>span{font-size:1.5rem}
.modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.5);display:grid;place-items:center;padding:16px}
.modal .box{background:var(--surface);border-radius:22px;max-width:560px;width:100%;max-height:86vh;overflow:auto;padding:22px;animation:pop .3s}
.gl{padding-left:20px;margin:0 0 8px}.gl li{margin-bottom:6px}
/* ===== Efek foto profil (naik seiring pencapaian) ===== */
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes aura{0%,100%{box-shadow:0 0 calc(var(--t)*2) 0 var(--c1)}50%{box-shadow:0 0 calc(var(--t)*4.5) calc(var(--t)*.6) var(--c1)}}
@keyframes bob{50%{transform:translateX(-50%) translateY(-3px) rotate(-10deg)}}
.av.md{width:52px;height:52px;font-size:1.6rem}
.avw{--sz:32px;--t:3px;position:relative;display:inline-grid;flex:none;border-radius:50%;isolation:isolate}
.avw.md{--sz:52px;--t:4px}.avw.lg{--sz:84px;--t:5px}
.avw::before{content:'';position:absolute;inset:calc(var(--t)*-1);border-radius:50%;z-index:-1;background:var(--c1)}
.avw.t2::before,.avw.t3::before,.avw.t4::before{background:conic-gradient(var(--c1),var(--c2),var(--c1));animation:spin 4s linear infinite}
.avw.t2,.avw.t3,.avw.t4{animation:aura 2.4s ease-in-out infinite}
.avw.fx4::before{background:conic-gradient(#C5DA2B,#2BA3E6,#A94BC0,#F5A31A,#C5DA2B)}
.avw.t3::before{animation-duration:2.6s}.avw.t3{animation-duration:2s}
.avw.t3::after,.avw.t4::after{content:'';position:absolute;inset:calc(var(--t)*-1);border-radius:50%;z-index:2;pointer-events:none;background:radial-gradient(circle at 50% calc(var(--t)*.5),#fff 0 calc(var(--t)*.5),transparent calc(var(--t)*.65));filter:drop-shadow(0 0 2px #fff);animation:spin 2.4s linear infinite}
.avw.t4::before{background:conic-gradient(#FFF3B0,#F2B705,#B8860B,#F2B705,#FFF3B0);animation-duration:2s}
.avw.t4{animation-duration:1.6s}
.avw.t4::after{background:radial-gradient(circle at 50% calc(var(--t)*.5),#fff 0 calc(var(--t)*.5),transparent calc(var(--t)*.65)),radial-gradient(circle at 50% calc(100% - var(--t)*.5),#fff 0 calc(var(--t)*.5),transparent calc(var(--t)*.65));animation-duration:3s}
.crn{position:absolute;left:50%;top:calc(var(--sz)*-.4);transform:translateX(-50%) rotate(-10deg);font-style:normal;font-size:calc(var(--sz)*.46);line-height:1;z-index:3;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));animation:bob 2s ease-in-out infinite}
.fxg{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.fxi{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:22px 8px 12px;border-radius:16px;border:1px solid var(--line);background:var(--bg);opacity:.5}
.fxi.on{opacity:1}.fxi.cur{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.fxi small{color:var(--muted)}
/* ===== Pilih efek bingkai ===== */
button.fxi{font:inherit;color:inherit;cursor:pointer;width:100%}button.fxi:disabled{cursor:not-allowed}button.fxi:not(:disabled):hover{border-color:var(--accent)}
/* ===== Api untuk peringkat 1 ===== */
@keyframes blaze{0%,100%{box-shadow:0 0 8px 2px #ff6a00,0 0 18px 6px rgba(255,60,0,.55)}50%{box-shadow:0 0 12px 4px #ffb300,0 0 28px 10px rgba(255,80,0,.75)}}
@keyframes flick{0%,100%{transform:scale(1,1) rotate(-5deg)}30%{transform:scale(1.15,1.4) rotate(4deg)}60%{transform:scale(.9,1.1) rotate(-3deg)}}
@keyframes flametxt{to{background-position:200% 0}}
.fire{position:relative;display:inline-grid;flex:none;border-radius:50%;isolation:isolate;animation:blaze 1s ease-in-out infinite}
.fl{position:absolute;font-style:normal;line-height:1;font-size:calc(var(--sz)*.62);z-index:-1;pointer-events:none;transform-origin:50% 90%;filter:drop-shadow(0 0 4px #ff6a00);animation:flick .7s ease-in-out infinite}
.fl.f1{left:-14%;top:-26%;animation-delay:-.2s}.fl.f2{left:50%;top:-44%;margin-left:calc(var(--sz)*-.31);animation-delay:-.45s}.fl.f3{right:-14%;top:-26%;animation-delay:-.1s}
.lrow.top1{background:linear-gradient(90deg,rgba(255,110,0,.24),rgba(255,190,0,.08));border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,120,0,.5)}
.lrow.top1:not(.hasnm) .un>.uname{background:linear-gradient(90deg,#ff3d00,#ffb300,#ff3d00);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;animation:flametxt 2s linear infinite}
/* ===== Nilai quest & kelola soal ===== */
select,textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 16px;width:100%;margin-bottom:10px}textarea{resize:vertical}
.lvl .gr{font-weight:800}
.gtag{display:inline-block;font-weight:800;padding:2px 14px;border-radius:999px;color:#1a1a1a;margin:0 0 10px}
.qrow{align-items:flex-start}.qrow .chk{margin:4px 0 0}.qrow .btn{flex:none;padding:8px 16px}
.qopt{margin:4px 0 0;font-size:.85rem}.qopt b{color:var(--accent)}
.pager{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px}

/* ===== Efek juara 2 (petir) dan juara 3 (percikan aura) ===== */
@keyframes zapglow{0%,100%{box-shadow:0 0 8px 2px #29b6ff,0 0 18px 6px rgba(41,140,255,.5)}8%{box-shadow:0 0 16px 5px #e6fbff,0 0 34px 12px rgba(120,200,255,.9)}14%{box-shadow:0 0 6px 1px #29b6ff,0 0 14px 4px rgba(41,140,255,.4)}55%{box-shadow:0 0 8px 2px #29b6ff,0 0 18px 6px rgba(41,140,255,.5)}60%{box-shadow:0 0 18px 6px #fff,0 0 36px 14px rgba(120,200,255,.95)}66%{box-shadow:0 0 6px 1px #29b6ff,0 0 14px 4px rgba(41,140,255,.4)}}
@keyframes zapflash{0%,100%{opacity:.25;transform:scale(.8) rotate(-10deg)}8%,16%{opacity:1;transform:scale(1.3) rotate(6deg)}12%{opacity:.4}58%,64%{opacity:1;transform:scale(1.2) rotate(-6deg)}61%{opacity:.35}}
@keyframes sparkaura{0%,100%{box-shadow:0 0 8px 2px #c77dff,0 0 18px 6px rgba(199,125,255,.45)}50%{box-shadow:0 0 14px 4px #ffa6e8,0 0 28px 10px rgba(236,110,220,.7)}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(90deg)}}
.zap,.spk{position:relative;display:inline-grid;flex:none;border-radius:50%;isolation:isolate}
.zap{animation:zapglow 1.8s linear infinite}
.zap .fl{filter:drop-shadow(0 0 5px #4cc9ff);animation:zapflash 1.8s linear infinite}
.zap .fl.f1{animation-delay:-.3s}.zap .fl.f2{animation-delay:-1.1s}.zap .fl.f3{animation-delay:-.7s}
.spk{animation:sparkaura 2s ease-in-out infinite}
.spk .fl{z-index:3;font-size:calc(var(--sz)*.42);filter:drop-shadow(0 0 4px #f0a6ff);animation:twinkle 1.6s ease-in-out infinite}
.spk .fl.f1{left:-12%;top:-8%;animation-delay:-.2s}
.spk .fl.f2{left:auto;right:-12%;top:18%;margin-left:0;animation-delay:-.8s}
.spk .fl.f3{right:auto;left:8%;top:auto;bottom:-14%;animation-delay:-1.3s}
.lrow{cursor:pointer}.lrow:hover{filter:brightness(.97)}
.lrow.top2{background:linear-gradient(90deg,rgba(41,150,255,.22),rgba(120,220,255,.07));border-radius:12px;box-shadow:inset 0 0 0 1px rgba(60,170,255,.5)}
.lrow.top3{background:linear-gradient(90deg,rgba(190,100,255,.22),rgba(255,150,230,.07));border-radius:12px;box-shadow:inset 0 0 0 1px rgba(200,110,255,.5)}
.lrow.top2:not(.hasnm) .un>.uname,.lrow.top3:not(.hasnm) .un>.uname{background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;animation:flametxt 2.4s linear infinite}
.lrow.top2:not(.hasnm) .un>.uname{background-image:linear-gradient(90deg,#1e90ff,#9be7ff,#1e90ff)}
.lrow.top3:not(.hasnm) .un>.uname{background-image:linear-gradient(90deg,#a84bff,#ff9ae6,#a84bff)}
.lite .zap,.lite .spk{animation:none!important;box-shadow:0 0 12px 0 var(--gc,#29b6ff)}.lite .spk{--gc:#c77dff}
.lite .zap .fl,.lite .spk .fl{animation:none;opacity:1}
/* ===== Profil pemain (modal dari leaderboard) ===== */
.pl{display:flex;gap:16px;align-items:center;margin-bottom:14px}.pl h2{font-size:1.4rem;margin:0 0 6px}
.pst{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.pst>div{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:10px 6px;text-align:center}.pst b{display:block;font-size:1.15rem}.pst small{color:var(--muted)}
.pbox h3{font-size:1rem;margin:16px 0 8px}
.itg{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.itm{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 4px 8px;border-radius:14px;border:1px solid var(--line);background:var(--bg);opacity:.4;font-size:.8rem;text-align:center;width:100%}
.itm span{font-size:1.7rem}.itm small{color:var(--tc);font-weight:800;font-size:.68rem}
.itm.own{opacity:1;border-color:var(--tc);box-shadow:inset 0 0 0 1px var(--tc)}.itm.eq::after{content:'Dipakai';position:absolute;top:-8px;right:6px;background:var(--tc);color:#fff;border-radius:999px;font-size:.62rem;font-weight:800;padding:1px 7px}
/* ===== Ikon rank (SVG) ===== */
.ri{display:inline-block;flex:none;object-fit:contain;transition:transform .3s,filter .3s}.medal .ri,.stp .dot .ri{width:100%;height:100%}
.tag .ri{width:20px;height:20px;vertical-align:-5px;margin:-4px 5px -4px -7px}
.ac .ri{width:44px;height:44px}.ac:not(.on) .ri{filter:grayscale(1)}
/* ===== Performa ===== */
.lpz,.lpz *,.lpz *::before,.lpz *::after{animation-play-state:paused!important}
.lite .avw.t2,.lite .avw.t3,.lite .avw.t4,.lite .fire{animation:none!important;box-shadow:0 0 calc(var(--t,4px)*3) 0 var(--c1,#ff6a00)}
.lite .fl{animation:none}