/* app typography */
.v-eyebrow{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;color:var(--muted-d);text-transform:uppercase}
.v-title{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:22px;margin:2px 0 12px}
.v-sub{color:var(--muted-d);font-size:13px;margin-bottom:14px}

/* cards & buttons (dark app) */
.card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-m);padding:14px;margin-bottom:12px}
.btn{font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:14px;border:none;border-radius:var(--r-s);padding:12px 16px;cursor:pointer;transition:transform .18s var(--turn),filter .15s;display:inline-flex;align-items:center;gap:8px;letter-spacing:.02em}
.btn:active{transform:scale(.96)}
.btn-primary{background:var(--kuning);color:var(--ink);width:100%;justify-content:center}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:transparent;color:#EDEFF4;border:1.5px solid var(--line)}
.btn-hijau{background:var(--hijau);color:#fff;width:100%;justify-content:center}
.btn-sm{padding:8px 12px;font-size:12.5px}
.stat-row{display:flex;gap:10px}
.stat{flex:1;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-m);padding:12px}
.stat .num{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:22px}
.stat .lbl{font-size:11px;color:var(--muted-d)}
/* Kartu hasil bersama (js/12-player-ui.js renderFinishCard). Animasi murni CSS:
   Coach dan Live tidak boleh menambah timer JS hanya untuk perayaan. */
.finish-card{display:none;border:1.5px solid var(--hijau);background:var(--hijau-bg);border-radius:var(--r-m);padding:16px;text-align:center;margin:10px 0}
.finish-card.show{display:block}
.finish-hero{font-size:34px;line-height:1}
.finish-card>b{display:block;font-family:'Chakra Petch',sans-serif;font-size:19px;margin-top:4px}
.finish-sub{font-size:12px;color:var(--muted-d);margin-top:3px}
/* flex, bukan grid: kartu ini dipakai dengan 2 tile (Solusi/Live) dan 3 tile (Coach),
   dan .stat sudah punya flex:1 — jadi jumlahnya tidak perlu diberitahukan ke CSS. */
.finish-stats{display:flex;gap:7px;margin-top:12px;text-align:left}
.finish-stats .stat{padding:9px}.finish-stats .num{font-size:17px}
.finish-badge{display:inline-block;margin-top:12px;padding:5px 10px;border-radius:999px;background:var(--hijau);color:#fff;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.4px}
.finish-badge.warn{background:var(--jingga);color:var(--ink)}
.finish-note{font-size:11.5px;color:var(--muted-d);margin-top:8px}
.finish-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}
.finish-actions .btn{justify-content:center}
@media (prefers-reduced-motion:no-preference){.finish-card.show{animation:finish-pop .32s var(--turn) both}}
@keyframes finish-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.mode{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-m);padding:14px;cursor:pointer;transition:transform .18s var(--turn),border-color .15s}
.mode:hover{transform:translateY(-2px);border-color:var(--kuning)}
.mode .dot{width:10px;height:10px;border-radius:3px;margin-bottom:8px}
.mode b{font-family:'Chakra Petch',sans-serif;font-size:13.5px;display:block}
.mode span{font-size:11px;color:var(--muted-d)}

/* move chips */
.mv{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;background:var(--ink-3);border:1px solid var(--line);border-radius:6px;padding:4px 8px;display:inline-block;min-width:34px;text-align:center;transition:all .18s var(--turn)}
.mv.done{opacity:.32}
.mv.now{background:var(--kuning);color:var(--ink);border-color:var(--kuning);transform:rotate(-4deg) scale(1.12)}

/* scanner */
.scan-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.scan-choice{background:var(--ink-2);border:1.5px solid var(--line);border-radius:var(--r-m);padding:16px;text-align:left;color:#EDEFF4;cursor:pointer}.scan-choice:hover,.scan-choice.on{border-color:var(--kuning)}.scan-choice b{display:block;font-family:'Chakra Petch',sans-serif;font-size:15px}.scan-choice span{font-size:11.5px;color:var(--muted-d)}
.scan-panel{display:none}.scan-panel.show{display:block}
.scan-editor{display:grid;grid-template-columns:minmax(220px,360px) minmax(0,1fr);gap:18px;align-items:start}
.manual-board{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-m);padding:16px}
.scan-grid{width:100%;max-width:330px;aspect-ratio:1;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:0 auto}
.cell{border:2px solid var(--line);border-radius:11px;background:var(--ink-3);transition:transform .15s,border-color .15s;cursor:pointer;position:relative}.cell:hover{transform:scale(.97);border-color:var(--kuning)}.cell.center{cursor:not-allowed;border-color:rgba(255,255,255,.65)}.cell.active{outline:3px solid var(--kuning);outline-offset:2px}
.color-palette{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.color-pick{border:2px solid transparent;border-radius:10px;padding:9px 6px;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:11px;cursor:pointer}.color-pick.on{outline:3px solid var(--kuning);outline-offset:2px}
.color-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.color-count{font-family:'JetBrains Mono',monospace;font-size:10px;background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px;text-align:center}.color-count.bad{border-color:var(--merah);color:#FF8A80}.color-count.ok{border-color:var(--hijau);color:#9FE8BC}
.scan-guide{font-size:12px;color:#CDD2DD}.scan-guide h3{font-family:'Chakra Petch',sans-serif;font-size:15px;color:#fff;margin-bottom:6px}.scan-guide ol{padding-left:18px;margin:8px 0}.scan-guide li{margin-bottom:5px}.scan-actions{display:flex;gap:8px;margin-top:12px}.scan-actions .btn{flex:1;justify-content:center}
.orientation-card{background:linear-gradient(145deg,#202633,#171a21);border:1px solid var(--line);border-radius:var(--r-m);padding:12px;margin-bottom:10px}.orientation-top{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:center}.cube-stage{height:150px;display:grid;place-items:center;perspective:600px;overflow:hidden;position:relative}.orientation-cube{width:86px;height:86px;position:relative;transform-style:preserve-3d;transform:rotateX(-90deg);transition:transform .72s cubic-bezier(.4,0,.2,1)}.oc-face{position:absolute;inset:0;display:grid;place-items:center;border:3px solid #111318;border-radius:6px;font-family:'Chakra Petch',sans-serif;font-size:24px;font-weight:700;color:#111318;box-shadow:inset 0 0 0 2px rgba(255,255,255,.32);background-image:linear-gradient(90deg,transparent 31%,#111318 32% 35%,transparent 36% 64%,#111318 65% 68%,transparent 69%),linear-gradient(0deg,transparent 31%,#111318 32% 35%,transparent 36% 64%,#111318 65% 68%,transparent 69%)}.oc-f{transform:translateZ(43px);background-color:var(--merah);color:#fff}.oc-b{transform:rotateY(180deg) translateZ(43px);background-color:var(--jingga)}.oc-r{transform:rotateY(90deg) translateZ(43px);background-color:var(--hijau);color:#fff}.oc-l{transform:rotateY(-90deg) translateZ(43px);background-color:var(--biru);color:#fff}.oc-u{transform:rotateX(90deg) translateZ(43px);background-color:var(--kuning)}.oc-d{transform:rotateX(-90deg) translateZ(43px);background-color:#fff}.orientation-step{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--kuning);letter-spacing:.08em;margin-bottom:4px}.orientation-copy b{font-family:'Chakra Petch',sans-serif;color:#fff;font-size:14px;display:block;margin-bottom:4px}.anchor-pose{display:inline-flex;gap:5px;align-items:center;background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:5px 8px;margin-top:7px;font-size:10.5px;color:var(--muted-d);cursor:pointer}.anchor-pose:hover{border-color:var(--kuning);color:#fff}.orientation-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:7px;margin-top:10px;align-items:center}.orientation-nav .btn{justify-content:center}.orientation-index{text-align:center;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted-d)}.edge-guide{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:7px}.edge-hint{font-family:'Rubik',sans-serif;background:var(--ink);border:1px solid var(--line);border-radius:6px;padding:5px 3px;text-align:center;font-size:9px;color:var(--muted-d);cursor:pointer}.edge-hint:hover,.edge-hint:focus-visible{border-color:var(--kuning);color:#fff}.edge-hint i{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:3px;vertical-align:middle}.orientation-motion{position:absolute;left:50%;bottom:5px;transform:translateX(-50%);background:rgba(22,24,29,.88);border:1px solid var(--kuning);border-radius:99px;padding:3px 9px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--kuning);opacity:0;transition:opacity .15s;z-index:3}.orientation-motion.show{opacity:1}
.dialog-ov{position:absolute;inset:0;background:rgba(7,9,12,.74);backdrop-filter:blur(3px);z-index:50;display:none;place-items:center;padding:18px}.dialog-ov.show{display:grid}.dialog-card{width:min(100%,430px);max-height:88%;overflow:auto;background:var(--ink-2);border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:0 20px 60px rgba(0,0,0,.45)}.dialog-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.dialog-head h3{font-family:'Chakra Petch',sans-serif;font-size:17px}.dialog-close{background:var(--ink);color:#fff;border:1px solid var(--line);width:30px;height:30px;border-radius:8px;cursor:pointer}.dialog-copy{font-size:12px;color:var(--muted-d);margin:5px 0 10px}.dialog-cube-stage{height:220px;display:grid;place-items:center;perspective:700px;background:radial-gradient(circle,#2b3140,#151920 70%);border-radius:14px;position:relative;overflow:hidden}.orientation-peek{width:112px;height:112px;position:relative;transform-style:preserve-3d;transition:transform .72s cubic-bezier(.4,0,.2,1)}.dialog-cube-stage .orientation-cube{width:112px;height:112px}.dialog-cube-stage .oc-face{font-size:28px;transition:filter .2s,box-shadow .2s}.dialog-cube-stage .oc-face.focus{filter:brightness(1.18);box-shadow:inset 0 0 0 3px rgba(255,255,255,.8),0 0 0 4px var(--kuning),0 0 24px rgba(255,213,0,.7)}.dialog-cube-stage .oc-f{transform:translateZ(56px)}.dialog-cube-stage .oc-b{transform:rotateY(180deg) translateZ(56px)}.dialog-cube-stage .oc-r{transform:rotateY(90deg) translateZ(56px)}.dialog-cube-stage .oc-l{transform:rotateY(-90deg) translateZ(56px)}.dialog-cube-stage .oc-u{transform:rotateX(90deg) translateZ(56px)}.dialog-cube-stage .oc-d{transform:rotateX(-90deg) translateZ(56px)}.dialog-focus{display:flex;align-items:center;justify-content:center;gap:7px;margin:9px 0;font-size:12px;color:#EDEFF4}.dialog-focus i{width:11px;height:11px;border-radius:3px}.dialog-actions{display:flex;gap:7px}.dialog-actions .btn{flex:1;justify-content:center}
.scan-video-wrap{aspect-ratio:4/3;background:#111318;border-radius:var(--r-m);overflow:hidden;position:relative;margin-bottom:10px}.scan-video-wrap video{width:100%;height:100%;object-fit:cover}.scan-overlay{position:absolute;width:62%;aspect-ratio:1;left:19%;top:50%;transform:translateY(-50%);display:grid;grid-template-columns:repeat(3,1fr);gap:4px;pointer-events:none}.scan-overlay i{border:2px solid rgba(255,213,0,.8);border-radius:6px}
.face-chips{display:flex;gap:6px;justify-content:space-between;margin-bottom:12px}
.fchip{flex:1;text-align:center;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:12px;padding:7px 0;border-radius:8px;background:var(--ink-2);border:1px solid var(--line);color:var(--muted-d);transition:all .2s;cursor:pointer}
.fchip.done{background:var(--hijau-bg);border-color:var(--hijau);color:var(--hijau)}
.fchip.now{background:var(--kuning);border-color:var(--kuning);color:var(--ink)}
.hsv{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted-d);min-height:16px}

/* validation */
.vcheck{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--ink-2);border:1px solid var(--line);margin-bottom:8px;font-size:13px}
.vcheck .st{width:20px;height:20px;border-radius:6px;border:2px solid var(--line);display:grid;place-items:center;font-size:12px;flex:none;transition:all .2s var(--turn)}
.vcheck.ok .st{background:var(--hijau);border-color:var(--hijau);transform:rotate(90deg)}
.vcheck.ok .st::after{content:"✓";color:#fff;transform:rotate(-90deg);font-weight:700}
.vcheck.bad{border-color:var(--merah);color:#FFAAA3}.vcheck.bad .st{background:var(--merah);border-color:var(--merah)}.vcheck.bad .st::after{content:"!";color:#fff;font-weight:700}
.vcheck.wait .st{border-color:var(--muted-d)}
.err-card{background:var(--merah-bg);border:1px solid var(--merah);border-radius:var(--r-m);padding:14px;font-size:13px;display:none;margin-bottom:12px}
.err-card.show{display:block}
.err-card b{color:#FF8A80;font-family:'Chakra Petch',sans-serif}

/* player */
#cube-wrap{background:radial-gradient(120% 100% at 50% 0%,#232833 0%,#14171d 70%);border-radius:var(--r-m);height:250px;margin-bottom:10px;position:relative;overflow:hidden}
/* Tinggi kanvas dikurangi setinggi bilah .face-orbit di bawahnya: resize() di
   js/11-player-core.js membaca clientHeight, jadi kubus otomatis dirender di atas
   bilah itu, bukan tertutup olehnya. */
#cube-canvas{width:100%;height:calc(100% - 28px);display:block;cursor:grab}
#cube-canvas:active{cursor:grabbing}#cube-canvas{touch-action:none;user-select:none;-webkit-user-select:none}
.step-pill{position:absolute;top:10px;left:10px;font-family:'JetBrains Mono',monospace;font-size:11px;background:rgba(22,24,29,.8);border:1px solid var(--line);padding:4px 10px;border-radius:99px;color:var(--muted-d)}
.instr{background:var(--ink-2);border:1px solid var(--line);border-left:4px solid var(--kuning);border-radius:var(--r-m);padding:12px 14px;margin-bottom:10px;min-height:74px}
.instr .big{font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:16px;display:flex;align-items:center;gap:10px}
.instr .big .mv{font-size:16px;background:var(--kuning);color:var(--ink);border-color:var(--kuning)}
.instr .why{font-size:12px;color:var(--muted-d);margin-top:4px}
.mv-strip{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
/* kontrol yang menumpang #cube-wrap, jadi ikut ke Coach/Live/Cheatsheet */
.speed-ctl{position:absolute;top:10px;right:10px;z-index:3}
.speed-ctl button{font-family:'JetBrains Mono',monospace;font-size:11px;background:rgba(22,24,29,.82);border:1px solid var(--line);color:var(--kuning);padding:4px 10px;border-radius:99px;cursor:pointer}
.speed-ctl button:hover{border-color:var(--kuning)}
.face-orbit{position:absolute;left:10px;right:10px;bottom:3px;display:flex;gap:4px;z-index:3}
.face-orbit button{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:10px;background:rgba(22,24,29,.82);border:1px solid var(--line);color:var(--muted-d);padding:4px 0;border-radius:7px;cursor:pointer}
.face-orbit button:hover,.face-orbit button:focus-visible{border-color:var(--kuning);color:#EDEFF4}
.face-orbit i{width:8px;height:8px;border-radius:2px;flex:none}
/* filmstrip langkah */
.film{display:flex;gap:7px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 8px;margin-bottom:10px;scrollbar-width:none}
.film::-webkit-scrollbar{display:none}
.stepcard{flex:none;scroll-snap-align:center;width:56px;background:var(--ink-2);border:1.5px solid var(--line);border-radius:11px;padding:6px 0 5px;text-align:center;cursor:pointer;transition:transform .18s var(--turn),border-color .15s,opacity .15s}
.stepcard.ro{cursor:default}
.stepcard .scn{display:block;font-family:'JetBrains Mono',monospace;font-size:8.5px;color:var(--muted-d);letter-spacing:.08em}
.stepcard .tok{display:block;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:15px;margin:1px 0}
.stepcard .dirg{display:block;font-size:12px;line-height:1;font-weight:700}
.stepcard.done{opacity:.35}
.stepcard.now{border-color:var(--kuning);background:#2b2814;transform:scale(1.08)}
.stepcard.now .scn{color:var(--kuning)}
.stepcard:not(.ro):hover{border-color:var(--kuning)}
.player-ctl{display:flex;gap:8px}
.player-ctl .btn{flex:1;justify-content:center}
.progress{height:6px;background:var(--ink-3);border-radius:99px;margin:10px 0 12px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--hijau);width:0%;transition:width .3s var(--turn)}