/* ===== Beranda (dirapikan) ===== */
.hello{margin:0 0 14px}
.hero{padding:22px;margin-bottom:26px;border-top:5px solid var(--rc)}
.hero .top2{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.hero .who{display:flex;align-items:center;gap:14px}
.hero .who small{display:block;color:var(--muted);font-weight:600;line-height:1.2}
.hero .who b{font-size:1.35rem;line-height:1.25}
.medal{width:72px;height:72px;flex:none;display:grid;place-items:center;filter:drop-shadow(0 6px 12px color-mix(in srgb,var(--rc) 55%,transparent))}
.hero .xpb{text-align:right}.hero .xpb h1{margin:0 0 6px;line-height:1}.hero .xpb h1 small{font-size:1rem;color:var(--muted);font-weight:700}
.hero .prog{height:12px;margin:18px 0 8px}
.hero .cap{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:.88rem;font-weight:600;flex-wrap:wrap}
.track{--n:6;position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));margin-top:22px}
.track::before,.track::after{content:'';position:absolute;top:21px;left:calc(50% / var(--n));height:4px;border-radius:4px}
.track::before{right:calc(50% / var(--n));background:var(--line)}
.track::after{width:calc((100% - 100% / var(--n)) * var(--p));background:linear-gradient(90deg,var(--lime),var(--rc))}
.stp{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1px;min-width:0}
.stp .dot{width:46px;height:46px;display:grid;place-items:center;margin-bottom:4px}
.stp.lock .dot .ri{filter:grayscale(1) brightness(.75);opacity:.7}
.stp.cur .dot .ri{transform:scale(1.18);filter:drop-shadow(0 0 7px var(--rc))}
.stp.lock{opacity:.55}
.stp b{font-size:.82rem;line-height:1.2;overflow-wrap:anywhere}.stp small{color:var(--muted);font-weight:600;font-size:.72rem}
.sec{display:flex;align-items:baseline;justify-content:space-between;gap:4px 12px;flex-wrap:wrap;margin:4px 0 12px}
.sec h2{margin:0;font-size:1.3rem}.sec span{color:var(--muted);font-size:.9rem}
.modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:28px}
.mode{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:22px 22px 22px 6px;color:#fff}
.mode.dly{background:linear-gradient(135deg,#B45309,#F59E0B)}
.mode.tth{background:linear-gradient(135deg,#3b1d8f,#c2317a);grid-column:1/-1}
.mode.fst{background:linear-gradient(135deg,#0f766e,#22d3ee)}
.mode.srf{background:linear-gradient(135deg,#166534,#65a30d)}
.mode.lsn{background:linear-gradient(135deg,#1e3a8a,#3b82f6)}
.mode.off{grid-column:1/-1}
.tmr{height:10px;border-radius:99px;background:var(--line);overflow:hidden;margin:8px 0 2px}.tmr i{display:block;height:100%;width:100%;background:#22c55e;transform-origin:left;border-radius:99px}.tmr.low i{background:#ef4444}
.tcount{font-weight:800;font-variant-numeric:tabular-nums}.tcount.low{color:#ef4444}
.mode.off{background:var(--soft);color:var(--ink);border:1px solid var(--line)}
.mode .tag{align-self:flex-start;background:rgba(255,255,255,.22);color:inherit;margin:0}.mode.off .tag{background:var(--line)}
.mode h2{margin:4px 0 0;font-size:1.2rem;color:inherit}
.mode p{margin:0;flex:1;font-size:.92rem;opacity:.92}
.mode .ft{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px}
.mode .ft small{font-weight:700;opacity:.95;min-width:0}
.mode .btn{flex:none;background:#fff;color:#7a3a05}.mode.tth .btn{color:#3b1d8f}.mode.off .btn{background:var(--surface);color:var(--ink)}
.mode .ico{position:absolute;right:-4px;top:-14px;font-size:5.5rem;opacity:.16;transform:rotate(12deg);pointer-events:none}
.mode small.badge{background:#fff;color:#8a4205;padding:2px 12px;border-radius:999px;opacity:1}
.jh{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}.jh .tag{margin:0}
.jst{font-weight:700;color:var(--muted);font-size:.88rem}
.lvl{min-height:128px}.lvl b{line-height:1.2}.lvl small{font-size:.76rem;line-height:1.25}
@media(max-width:820px){.modes{grid-template-columns:1fr}}
@media(max-width:700px){.grid.jgrid{grid-template-columns:1fr}}
@media(max-width:420px){.hero{padding:16px}.medal{width:56px;height:56px}.hero .xpb{text-align:left}.stp .dot{width:38px;height:38px}.track::before,.track::after{top:18px}.stp small{font-size:.66rem}}
/* ===== Spin hadiah ===== */
.reel{position:relative;overflow:hidden;border-radius:18px;background:var(--bg);border:1px solid var(--line);margin:14px 0;padding:12px 0}
.strip{display:flex;gap:8px;width:max-content;will-change:transform}
.pz{flex:0 0 96px;height:84px;border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:1.1rem;color:#fff;background:var(--pc);box-shadow:inset 0 -6px 0 rgba(0,0,0,.18)}
.pz.win{animation:winp .6s ease-out infinite alternate;z-index:1}
.ptr{position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 10px 2px var(--accent)}
@keyframes winp{to{transform:scale(1.14);filter:brightness(1.25)}}
/* ===== Efek ===== */
.gold{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#FFE27A,#F2B705);color:#3a2e00;font-weight:800;padding:2px 14px;border-radius:999px}
.shopbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.shopg{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.si{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:22px 22px 22px 6px;background:var(--surface);border:1px solid var(--line);border-top:5px solid var(--tc)}
.si .stage{height:96px;border-radius:16px;display:grid;place-items:center;font-size:2.6rem;background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--tc) 30%,transparent),transparent 70%),var(--bg)}
.si .tg{align-self:flex-start;font-size:.72rem;font-weight:800;padding:1px 10px;border-radius:999px;background:var(--tc);color:#fff}
.si h3{margin:0}.si p{margin:0;color:var(--muted);font-size:.88rem;flex:1}
.si .acts{display:flex;gap:8px}.si .acts .btn{flex:1;padding:10px 6px;font-size:.9rem}
/* ===== Gaya nama (Efek) — dipakai di leaderboard, profil pemain, chip sidebar ===== */
@keyframes nflow{to{background-position:200% 0}}
@keyframes nneon{0%,100%{text-shadow:0 0 4px #7df9ff,0 0 10px #00d4ff}50%{text-shadow:0 0 8px #d6fdff,0 0 20px #00d4ff,0 0 32px #0099ff}}
@keyframes nglitch{0%,84%,100%{transform:translate(0);text-shadow:-1px 0 #ff2d6f,1px 0 #00e5ff}88%{transform:translate(-2px,1px);text-shadow:-3px 0 #ff2d6f,3px 0 #00e5ff}92%{transform:translate(2px,-1px);text-shadow:3px 0 #ff2d6f,-3px 0 #00e5ff}96%{transform:translate(-1px,0);text-shadow:-2px 0 #ff2d6f,2px 0 #00e5ff}}
.nfx{font-weight:800}
.nfx.n_mint{color:#1fb865}
.nfx.n_ocean{color:#2b9bff}
.nfx.n_grape,.nfx.n_sunset,.nfx.n_shimmer,.nfx.n_blaze,.nfx.n_frost,.nfx.n_rainbow{-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;background-size:200% 100%}
.nfx.n_grape{background-image:linear-gradient(90deg,#8e44ff,#ff5fd2,#8e44ff)}
.nfx.n_sunset{background-image:linear-gradient(90deg,#ff8a00,#ff2d6f,#ff8a00)}
.nfx.n_shimmer{background-image:linear-gradient(100deg,#b47a00 0 35%,#ffd34d 46%,#fff0a6 50%,#ffd34d 54%,#b47a00 65% 100%);animation:nflow 2.6s linear infinite;filter:drop-shadow(0 0 1px rgba(110,70,0,.75))}
.nfx.n_neon{color:#c8fbff;background:#06222e;padding:1px 10px;border-radius:999px;animation:nneon 1.6s ease-in-out infinite}
.nfx.n_blaze{background-image:linear-gradient(90deg,#ff3d00,#ffb300,#ff3d00);animation:nflow 1.6s linear infinite;filter:drop-shadow(0 0 3px rgba(255,100,0,.65))}
.nfx.n_frost{background-image:linear-gradient(90deg,#1565c0,#4db3ff,#1565c0);animation:nflow 3s linear infinite;filter:drop-shadow(0 0 3px rgba(70,170,255,.75))}
.nfx.n_glitch{display:inline-block;animation:nglitch 2.4s steps(1,end) infinite}
.nfx.n_rainbow{background-image:linear-gradient(90deg,#ff3b3b,#ff9d00,#e8d000,#2ee66b,#2bb3ff,#8a4bff,#ff3bd1,#ff3b3b);animation:nflow 3.2s linear infinite}
.lite .nfx{animation:none!important}
.si .stage.nm{font-size:1.5rem;padding:0 10px;text-align:center;overflow:hidden;overflow-wrap:anywhere}.si .stage.nm b{line-height:1.3}
.shopnote{margin:0 0 12px}
.si.eq{box-shadow:inset 0 0 0 2px var(--accent)}
.si.hi{animation:shim 2.4s ease-in-out infinite}
.si .stage{perspective:420px}.si .stage span{display:inline-block;animation:flip3 5s linear infinite;filter:drop-shadow(0 8px 10px rgba(0,0,0,.35))}
@keyframes flip3{to{transform:rotateY(360deg)}}
.lite .si .stage span{animation:none}
@keyframes shim{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 22px -4px var(--tc)}}
/* lapor soal */
.rptw{text-align:right;margin:-2px 0 6px}
.rpt{font:inherit;font-size:.78rem;font-weight:600;color:var(--muted,#7a8a80);background:transparent;border:1px solid var(--line);border-radius:999px;padding:2px 10px;cursor:pointer}
.rpt:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.rpt:disabled{opacity:.6;cursor:default}
.rkinds label{display:flex;gap:10px;align-items:center;margin:6px 0;cursor:pointer}.rkinds input{width:auto;margin:0}
.bablist{margin:6px 0 0;font-size:.8rem}.bablist summary{cursor:pointer;font-weight:600;color:var(--accent);list-style:none}.bablist summary::-webkit-details-marker{display:none}.babchips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}.babchips span{background:var(--soft);border-radius:999px;padding:1px 10px;font-size:.76rem}.babchips b{opacity:.75;margin-left:2px}
/* foto pribadi */
.av.ph{background:var(--soft)!important;overflow:hidden}.av.ph img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.phrow{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.phrow .acts{display:flex;gap:8px;flex-wrap:wrap}
/* pencapaian & lencana */
.achg{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-bottom:22px}
.achc{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:18px 18px 18px 6px;background:var(--surface);border:1px solid var(--line);border-top:5px solid var(--tc)}
.achc.lock{opacity:.6}.achc.lock .ai{filter:grayscale(1)}
.achc .ai{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:1.7rem;background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--tc) 30%,transparent),transparent 70%),var(--bg)}
.achc .ab{flex:1;min-width:0}.achc .ab p{margin:2px 0 8px;font-size:.85rem}.achc .at{display:flex;gap:6px;align-items:center}.achc small{font-size:.78rem}
.achc .bar{height:6px;margin:0 0 4px}.achc .bar i{background:var(--tc)}
.achc .ar{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.achc .tg{font-size:.68rem;font-weight:800;padding:1px 9px;border-radius:999px;color:#fff}
.achc .gold{font-size:.8rem;padding:1px 10px}
.bdg{display:inline-flex;gap:2px;flex:none;margin-left:2px}
.bdg i{font-style:normal;font-size:.95rem;line-height:1;padding:2px 3px;border-radius:8px;background:color-mix(in srgb,var(--tc) 18%,transparent)}
.bdgs{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.bc{font-size:.8rem;font-weight:700;padding:2px 10px;border-radius:999px;border:1px solid var(--tc);background:color-mix(in srgb,var(--tc) 14%,transparent)}
.bpk{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.bp{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px 8px;border-radius:14px;border:1px solid var(--line);background:var(--bg);text-align:center}
.bp span{font-size:1.7rem}.bp b{font-size:.78rem;line-height:1.2}.bp small{color:var(--tc);font-weight:800;font-size:.66rem}
.bp:hover{border-color:var(--tc)}
.bp.on{border-color:var(--tc);box-shadow:inset 0 0 0 2px var(--tc);background:color-mix(in srgb,var(--tc) 12%,var(--bg))}
.bp.on::after{content:'📌';position:absolute;top:-8px;right:4px;font-size:.9rem}

/* ===== Perapian tampilan (mobile): grid efek padat, daftar lencana bisa digulir ===== */
.bpk{max-height:300px;overflow-y:auto;padding:4px}
@media(max-width:560px){.fxg{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.fxi{padding:16px 4px 10px;font-size:.82rem}.fxi b{font-size:.82rem}.bpk{grid-template-columns:repeat(2,minmax(0,1fr))}}