/* rubik switcher */
.switcher{display:flex;gap:8px;overflow-x:auto;margin:2px 0 14px;padding-bottom:3px;scrollbar-width:none}
.switcher::-webkit-scrollbar{display:none}
.swt{flex:none;font-family:'Chakra Petch',sans-serif;font-weight:600;border:1.5px solid var(--line);border-radius:10px;padding:7px 13px;font-size:13.5px;cursor:pointer;color:#EDEFF4;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:62px;transition:transform .18s var(--turn)}
.swt span{font-size:8px;font-family:'JetBrains Mono',monospace;letter-spacing:.14em;color:var(--muted-d)}
.swt.on{background:var(--kuning);color:var(--ink);border-color:var(--kuning)}
.swt.on span{color:#6b5f00}
.swt.lock{opacity:.5}
.swt.lock:hover{transform:rotate(-2deg);opacity:.75}
/* side-by-side live */
.live-cam{position:relative;background:linear-gradient(150deg,#242936 0%,#151920 65%);border-radius:var(--r-m);aspect-ratio:16/10;display:grid;place-items:center;margin-bottom:10px;overflow:hidden}
.live-cam video{width:100%;height:100%;object-fit:cover;background:#111318}
.live-placeholder{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;color:var(--muted-d);font-size:12px;background:radial-gradient(circle at 50% 40%,#252b38,#151920 70%)}
.live-placeholder[hidden]{display:none}
.live-cam .tag-real{position:absolute;top:8px;left:0;right:0;text-align:center;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.18em;color:var(--muted-d)}
.live-badges{position:absolute;bottom:7px;left:8px;right:8px;display:flex;gap:6px;justify-content:space-between;z-index:2}
.lb{font-family:'JetBrains Mono',monospace;font-size:9.5px;padding:4px 9px;border-radius:99px;background:rgba(22,24,29,.88);border:1px solid var(--hijau);color:#7FE0A5}
.lb.warn{border-color:var(--jingga);color:#FFC27A}
.live-status{font-size:12.5px;background:var(--ink-2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin-bottom:10px;min-height:38px;transition:border-color .2s}
.live-status.det{border-color:var(--hijau);color:#9FE8BC}
/* AR overlay */
.ar-cam{position:relative;background:linear-gradient(160deg,#2a2f3c 0%,#171b23 55%,#12151b 100%);border-radius:var(--r-m);aspect-ratio:4/5;margin-bottom:10px;overflow:hidden}
.ar-cam svg{position:absolute;inset:0;width:100%;height:100%}
.ar-scrim{position:absolute;inset:0;display:grid;place-items:center;background:rgba(18,21,27,.72);backdrop-filter:blur(2px);z-index:5;text-align:center;padding:20px;transition:opacity .3s}
.ar-scrim.hide{opacity:0;pointer-events:none}
.ar-ring{width:74px;height:74px;border:3px dashed var(--kuning);border-radius:18px;margin:0 auto 12px;animation:arscan 2.4s linear infinite}
@keyframes arscan{to{transform:rotate(90deg)}}
.ar-hud{position:absolute;top:8px;left:8px;right:8px;display:flex;justify-content:space-between;gap:6px;z-index:4}
.ar-chip{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;background:rgba(22,24,29,.92);border:1.5px solid var(--kuning);border-radius:12px;padding:8px 14px;font-size:13px;display:flex;align-items:center;gap:9px;z-index:4;white-space:nowrap}
.ar-chip .mv{background:var(--kuning);color:var(--ink);border-color:var(--kuning)}
.prem{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;background:linear-gradient(90deg,#FFD500,#FF8200);color:#3a2c00;border-radius:99px;padding:3px 9px;font-weight:700}
.ar-arrow{stroke:var(--kuning);stroke-width:5;fill:none;stroke-linecap:round;stroke-dasharray:9 11;animation:march 1s linear infinite}
@keyframes march{to{stroke-dashoffset:-40}}
.ar-head{fill:var(--kuning)}
.ar-float{animation:arfloat 2.6s ease-in-out infinite}
@keyframes arfloat{50%{transform:translateY(-4px)}}
.ar-lost{position:absolute;inset:0;display:none;place-items:center;background:rgba(51,34,13,.85);z-index:6;text-align:center;padding:24px;font-size:13px;color:#FFD9A8}
.ar-lost.show{display:grid}
/* koin & header */
.home-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.coin-pill{display:flex;gap:6px;align-items:center;background:var(--ink-2);border:1.5px solid var(--kuning);border-radius:99px;padding:5px 13px;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:13px;cursor:pointer;color:var(--kuning);transition:transform .18s var(--turn)}
.coin-pill:hover{transform:rotate(-2deg)}
.avatar{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--biru),var(--hijau));display:grid;place-items:center;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:14px;color:#fff;cursor:pointer}
/* paket koin */
.packs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:10px 0}
.pack{background:var(--ink-2);border:1.5px solid var(--line);border-radius:var(--r-m);padding:12px 8px;text-align:center;cursor:pointer;transition:all .18s var(--turn);position:relative}
.pack:hover{transform:translateY(-2px);border-color:var(--kuning)}
.pack .c{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:19px;color:var(--kuning)}
.pack .b{font-size:9.5px;color:var(--hijau);font-family:'JetBrains Mono',monospace}
.pack .p{font-size:12px;color:var(--muted-d);margin-top:3px}
.pack.best{border-color:var(--kuning);background:#2b2814}
.pack.best::after{content:"TERLARIS";position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-family:'JetBrains Mono',monospace;font-size:7.5px;letter-spacing:.12em;background:var(--kuning);color:var(--ink);border-radius:4px;padding:1px 6px}
/* midtrans sheet */
.sheet-ov{position:absolute;inset:0;background:rgba(10,12,16,.6);z-index:30;opacity:0;pointer-events:none;transition:opacity .25s}
.sheet-ov.show{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--ink-2);border-radius:22px 22px 0 0;border-top:1px solid var(--line);padding:16px;z-index:31;transform:translateY(102%);transition:transform .3s var(--turn);max-height:78%;overflow-y:auto}
.sheet.show{transform:none}
.sheet .grab{width:38px;height:4px;border-radius:99px;background:var(--line);margin:0 auto 12px}
.mt-brand{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted-d);font-family:'JetBrains Mono',monospace;margin-bottom:10px}
.pm{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1.5px solid var(--line);border-radius:12px;margin-bottom:8px;cursor:pointer;transition:border-color .15s;font-size:13.5px}
.pm:hover{border-color:var(--kuning)}
.pm .ic{width:34px;height:24px;border-radius:6px;display:grid;place-items:center;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:9px;flex:none}
.pm small{color:var(--muted-d);font-size:10.5px;display:block}
.qr-box{width:150px;height:150px;margin:14px auto;background:repeating-conic-gradient(#EDEFF4 0% 25%,#16181D 0% 50%) 0 0/16px 16px;border-radius:12px;border:6px solid #fff}
/* iklan native */
.ad-native{border:1px dashed #4a5060;border-radius:var(--r-m);padding:12px;margin-top:12px;background:var(--ink-2);position:relative}
.ad-tag{position:absolute;top:-7px;left:12px;font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.16em;color:var(--muted-d);background:var(--ink);border:1px solid #4a5060;border-radius:4px;padding:1px 7px}
.ad-native .adt{font-size:13px;font-weight:600;margin-bottom:2px}
.ad-native .ads{font-size:11.5px;color:var(--muted-d)}
.ad-native .cta{font-size:11px;color:var(--biru);margin-top:6px;display:inline-block}
.ad-why{font-size:9.5px;color:var(--muted-d);margin-top:8px;padding-top:7px;border-top:1px solid var(--line)}
.ad-why a{color:var(--kuning);text-decoration:none;cursor:pointer}
/* leaderboard */
.lb-filter{display:flex;gap:6px;margin-bottom:12px}
.lbf{font-family:'Chakra Petch',sans-serif;font-size:12px;padding:6px 13px;border-radius:99px;border:1.5px solid var(--line);color:var(--muted-d);cursor:pointer}
.lbf.on{background:var(--kuning);color:var(--ink);border-color:var(--kuning)}
.lb-row{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;background:var(--ink-2);border:1px solid var(--line);margin-bottom:7px;font-size:13px}
.lb-row .rk{font-family:'Chakra Petch',sans-serif;font-weight:700;width:26px;text-align:center;color:var(--muted-d)}
.lb-row .nm{flex:1}.lb-row .nm small{display:block;font-size:10px;color:var(--muted-d)}
.lb-row .tm{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--kuning)}
.lb-row.top1 .rk{color:var(--kuning)}
.lb-row.me{border-color:var(--hijau);background:var(--hijau-bg);position:sticky;bottom:0}
.lb-row.me .tm{color:var(--hijau)}
/* profil */
.prow{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--ink-2);margin-bottom:8px;font-size:13px;cursor:pointer}
.prow>div{min-width:0;overflow-wrap:break-word}
.prow .ic{width:30px;height:30px;border-radius:8px;background:var(--ink-3);display:grid;place-items:center;flex:none}
.sync-dot{width:8px;height:8px;border-radius:99px;background:var(--hijau);display:inline-block;margin-right:5px}
/* survey chips */
.sq{font-size:12.5px;margin:10px 0 5px;color:#EDEFF4}.sq b{font-family:'Chakra Petch',sans-serif}
.schips{display:flex;flex-wrap:wrap;gap:6px}
.sc{padding:7px 13px;border:1.5px solid var(--line);border-radius:99px;font-size:12.5px;cursor:pointer;color:#EDEFF4;transition:all .15s var(--turn)}
.sc:hover{border-color:var(--kuning)}
.sc.sel{background:var(--kuning);color:var(--ink);border-color:var(--kuning);font-weight:600}
/* gamifikasi: sabuk & xp */
.xp-chip{display:flex;gap:5px;align-items:center;background:var(--ink-2);border:1.5px solid var(--biru);border-radius:99px;padding:5px 11px;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:12px;color:#8FB4F2}
.xpbar{height:7px;background:var(--ink-3);border-radius:99px;overflow:hidden;margin:6px 0 3px}
.xpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--biru),var(--hijau));border-radius:99px;transition:width .4s var(--turn)}
.belt-card{background:var(--ink-2);border:1.5px solid var(--hijau);border-radius:var(--r-m);padding:13px;margin-top:12px;cursor:pointer;transition:transform .18s var(--turn)}
.belt-card:hover{transform:translateY(-2px)}
.belt-strip{width:100%;height:9px;border-radius:99px;display:flex;overflow:hidden;margin:8px 0 6px}
.belt-strip i{flex:1}
.brow{display:flex;gap:11px;padding:11px 12px;border-radius:12px;border:1px solid var(--line);background:var(--ink-2);margin-bottom:8px;align-items:flex-start}
.brow .bdot{width:16px;height:16px;border-radius:5px;flex:none;margin-top:2px;border:1px solid rgba(0,0,0,.4)}
.brow b{font-family:'Chakra Petch',sans-serif;font-size:13px;display:block}
.brow small{font-size:11px;color:var(--muted-d);display:block}
.brow .bst{font-size:9px;font-family:'JetBrains Mono',monospace;margin-left:auto;flex:none;padding:3px 7px;border-radius:5px}
.brow.lulus{opacity:.75}.brow.lulus .bst{background:var(--hijau-bg);color:var(--hijau);border:1px solid var(--hijau)}
.brow.aktif{border-color:var(--kuning)}.brow.aktif .bst{background:#2b2814;color:var(--kuning);border:1px solid var(--kuning)}
.brow.kunci{opacity:.45}.brow.kunci .bst{border:1px solid var(--line);color:var(--muted-d)}
/* misi */
.mrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:10px;padding:10px 12px;border-radius:12px;background:var(--ink-2);border:1px solid var(--line);margin-bottom:7px;font-size:12.5px}
.mrow .mic{font-size:16px}
.mrow>div{overflow-wrap:break-word}
.mrow small{display:block;font-size:10px;color:var(--muted-d)}
.mrow .btn{white-space:nowrap;padding:7px 10px;font-size:11.5px;justify-self:end}
.mrow.done{opacity:.55}
/* lencana & paspor */
.badge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.bdg{aspect-ratio:1;border-radius:12px;background:var(--ink-2);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:19px;text-align:center}
.bdg small{font-size:8px;color:var(--muted-d);line-height:1.2;padding:0 3px}
.bdg.off{opacity:.32;filter:grayscale(1)}
.pass-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.pass{background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:11px;font-size:12px}
.pass b{font-family:'Chakra Petch',sans-serif;display:block;font-size:13.5px}
.pass .pb{width:100%;height:6px;border-radius:99px;background:var(--ink-3);margin-top:7px;overflow:hidden}
.pass .pb i{display:block;height:100%;border-radius:99px}
.pass.off{opacity:.45}
/* popup lencana */
.bmodal-ov{position:absolute;inset:0;background:rgba(10,12,16,.66);z-index:40;display:none;place-items:center;padding:26px}
.bmodal-ov.show{display:grid}
.bmodal{background:var(--ink-2);border:1.5px solid var(--line);border-radius:18px;padding:18px;width:100%;text-align:center;transform:rotate(-1deg)}
.bmodal .bi{font-size:44px;line-height:1}
.bmodal h3{font-family:'Chakra Petch',sans-serif;font-size:17px;margin:6px 0 2px}
.bmodal .bcat{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;color:var(--muted-d)}
.bmodal .bhow{font-size:12.5px;color:#C9CDD6;margin:10px 0;text-align:left;background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.bmodal .bhow b{color:var(--kuning);font-family:'Chakra Petch',sans-serif;font-size:11px;display:block;margin-bottom:3px}
.bprog{height:7px;background:var(--ink-3);border-radius:99px;overflow:hidden;margin:4px 0}
.bprog i{display:block;height:100%;background:var(--kuning);border-radius:99px}
/* ujian sabuk */
.exam-solve{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;background:var(--ink-2);border:1px solid var(--line);margin-bottom:7px;font-size:13px}
.exam-solve .n{font-family:'Chakra Petch',sans-serif;font-weight:700;width:22px;height:22px;border-radius:6px;background:var(--ink-3);display:grid;place-items:center;font-size:11px;flex:none;color:var(--muted-d)}
.exam-solve.ok{border-color:var(--hijau)}.exam-solve.ok .n{background:var(--hijau);color:#fff}
.exam-solve.run{border-color:var(--kuning)}.exam-solve.run .n{background:var(--kuning);color:var(--ink)}
.exam-solve .t{margin-left:auto;font-family:'JetBrains Mono',monospace;font-weight:700}
.exam-res{border:1.5px solid var(--hijau);background:var(--hijau-bg);border-radius:var(--r-m);padding:16px;text-align:center;display:none;margin-top:10px}
/* cheatsheet */
.cheat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:10px 0}
.cmv{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:14px;padding:10px 0;text-align:center;background:var(--ink-2);border:1.5px solid var(--line);border-radius:9px;cursor:pointer;transition:all .15s var(--turn)}
.cmv:hover{border-color:var(--kuning)}
.cmv.playing{background:var(--kuning);color:var(--ink);border-color:var(--kuning);transform:rotate(-4deg)}
.cheat-desc{background:var(--ink-2);border-left:4px solid var(--kuning);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:12.5px;min-height:44px;margin-bottom:8px}
/* tantangan */
.cap-meter{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-m);padding:11px 13px;margin-bottom:12px}
.cap-meter .capbar{height:8px;background:var(--ink-3);border-radius:99px;overflow:hidden;margin:6px 0 4px}
.cap-meter .capbar i{display:block;height:100%;background:linear-gradient(90deg,var(--hijau),var(--kuning));border-radius:99px;transition:width .3s var(--turn)}
.chal{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:9px;padding:11px 12px;border-radius:12px;background:var(--ink-2);border:1px solid var(--line);margin-bottom:8px;font-size:12.5px}
.chal .cic{font-size:17px}
.chal b{font-family:'Chakra Petch',sans-serif;font-size:13px;display:block;overflow-wrap:break-word}
.chal small{font-size:10.5px;color:var(--muted-d);display:block;overflow-wrap:break-word}
.chal .btn{white-space:nowrap;padding:7px 10px;font-size:11.5px;justify-self:end}
.chal.daily{border-color:var(--kuning);background:#241f10}
.chal.lock{opacity:.5}
.chal .req{font-size:9px;font-family:'JetBrains Mono',monospace;border:1px solid var(--line);border-radius:5px;padding:3px 6px;color:var(--muted-d);white-space:nowrap;justify-self:end}

.note{font-size:12.5px;color:var(--muted);background:var(--mist);border-radius:10px;padding:10px 14px;margin-top:14px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}


/* painter 3D: papan input manual yang bertukar dengan grid 2D */
.manual-board.board-3d .scan-grid{display:none}.manual-board.board-grid #paint-wrap{display:none}
.scan-mode-grid{grid-template-columns:repeat(3,1fr)}
#paint-wrap{background:radial-gradient(120% 100% at 50% 0%,#232833 0%,#14171d 70%);border-radius:var(--r-m);height:300px;position:relative;overflow:hidden}
#paint-canvas{width:100%;height:100%;display:block;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
#paint-note{margin:8px 0 2px;line-height:1.5}
.color-pick{display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.2}
.color-pick small{font-family:'JetBrains Mono',monospace;font-size:9px;opacity:.8}
.color-pick.full{opacity:.62;filter:saturate(.7)}
.color-pick.bad{outline:3px solid var(--merah);outline-offset:2px}
/* Di layar sempit css/05-shell.css menaruh panduan lebih dulu; dengan kubus 3D
   yang justru jadi alat utamanya, kubus harus di atas. */
.manual-board.board-3d ~ .scan-guide{order:0}