@font-face{font-family:"Poppins KS";src:url("../assets/fonts/Poppins-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Poppins KS";src:url("../assets/fonts/Poppins-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
:root{--krem:#FFF3D6;--hijau:#1F5F4A;--bata:#B5442E;--biru:#2F6FD0;--emas:#F4B73F;--langit:#BFE3F2;--tinta:#3A2A1F;--putih:#FFFDF7;--garis:5px;--r:22px;--f:"Poppins KS","Poppins","Trebuchet MS","Segoe UI",sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#173f33;overflow:hidden;font-family:var(--f);font-weight:500;color:var(--tinta);-webkit-user-select:none;user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent}
#stage{position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:0 0;overflow:hidden;background:var(--langit)}
.scene{position:absolute;inset:0;opacity:0;transition:opacity .3s ease;overflow:hidden}
.scene.in{opacity:1}
svg{display:block}
img.bg{position:absolute;inset:0;width:1280px;height:720px;object-fit:cover}
.kenburns{animation:kb 18s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.035) translate(-6px,-4px)}}
/* tombol */
.btn{position:absolute;display:flex;align-items:center;justify-content:center;gap:10px;min-height:64px;padding:0 26px;border-radius:var(--r);border:var(--garis) solid var(--tinta);font:700 26px/1 var(--f);color:var(--putih);background:var(--bata);box-shadow:0 8px 0 var(--tinta);cursor:pointer;transition:transform .08s ease,box-shadow .08s ease;white-space:nowrap}
.btn:active:not(:disabled){transform:translateY(4px) scale(.95);box-shadow:0 3px 0 var(--tinta)}
.btn:focus-visible{outline:5px solid #fff;outline-offset:3px;box-shadow:0 8px 0 var(--tinta),0 0 0 9px var(--biru)}
.btn.g{background:var(--hijau)}.btn.k{background:var(--krem);color:var(--tinta)}.btn.b{background:var(--biru)}.btn.e{background:var(--emas);color:var(--tinta)}
.btn.round{width:64px;min-width:64px;padding:0;border-radius:50%;font-size:40px}
.btn.big{min-height:76px;font-size:30px}
.btn:disabled{background:#cdbf9f;color:#8a7c64;border-color:#7a6a58;box-shadow:0 4px 0 #7a6a58;cursor:default}
.panel{position:absolute;background:var(--putih);border:var(--garis) solid var(--tinta);border-radius:28px;box-shadow:0 8px 0 rgba(58,42,31,.35)}
.reduce *{animation:none!important}
/* ---- judul ---- */
.title .tagline{position:absolute;left:408px;top:292px;width:440px;height:52px;display:flex;align-items:center;justify-content:center;background:var(--hijau);color:var(--putih);border:var(--garis) solid var(--tinta);border-radius:26px;font:700 26px/1 var(--f);letter-spacing:.5px;box-shadow:0 6px 0 rgba(58,42,31,.45)}
.corner{position:absolute;right:20px;top:14px;display:flex;gap:12px;z-index:6}.corner .btn{position:static;width:64px;min-width:64px;height:64px;padding:0}
.strip{left:36px;top:586px;width:1208px;height:112px;background:rgba(255,243,214,.94);display:flex;align-items:center;justify-content:space-between;padding:0 22px;gap:14px}
.strip .btn{position:static}
.strip .santai{width:270px}.strip .mulai{width:300px;min-height:80px;font-size:38px}
.trio{display:flex;gap:12px}.trio .btn{width:168px;padding:0;font-size:21px}
/* ---- pilih level ---- */
.select .ribbon{position:absolute;left:380px;top:26px;width:520px;height:84px;display:flex;align-items:center;justify-content:center;background:var(--bata);color:var(--putih);border:var(--garis) solid var(--tinta);border-radius:20px;font:700 44px/1 var(--f);box-shadow:0 8px 0 rgba(58,42,31,.4)}
.select .modebtn{right:100px;top:122px;left:auto;width:300px;font-size:24px}
.select .gear{top:14px}
.cards{position:absolute;left:60px;top:196px;width:1160px;display:flex;gap:26px}
.cards .card{position:static;flex:1;height:410px;flex-direction:column;justify-content:flex-start;padding:18px 14px;background:var(--putih);color:var(--tinta);gap:8px}
.card .cn{font-size:26px}.card .clock{width:190px;height:190px}.card .cname{font-size:25px;text-align:center;white-space:normal;line-height:1.15;min-height:58px;display:flex;align-items:center}
.card .stars{display:flex;gap:4px}.card .soon{font-size:22px;color:#7a6a58}
.card.locked{background:#e9ddc3}.card.locked .clock{filter:grayscale(1);opacity:.55}
.select .backbtn{left:60px;top:626px;width:220px}
/* ---- jam ---- */
.clock svg{width:100%;height:100%;overflow:visible}
.clock.interactive svg{cursor:pointer;touch-action:none}
.clock.locked{opacity:.92}
.hand-hour,.hand-min{transition:none}
.flash{animation:flash .4s ease-in-out 4}
@keyframes flash{50%{opacity:.25}}

.grow-hour .hand-hour path{stroke-width:8;fill:#E0553C}
.num.hint{fill:#B5442E;font-size:38px;paint-order:stroke;stroke:#F4B73F;stroke-width:8px}
/* ---- main ---- */
.play .tint{position:absolute;inset:0;background:linear-gradient(#ff9d52,#ffcf8a);mix-blend-mode:soft-light;opacity:0;pointer-events:none}
.stclock{position:absolute;left:577px;top:117px;width:126px;height:126px;border-radius:50%;overflow:hidden}
.stclock.glow{box-shadow:0 0 0 8px var(--emas),0 0 26px 10px #ffd470;animation:glow .6s ease-in-out infinite alternate}
@keyframes glow{to{box-shadow:0 0 0 12px var(--bata),0 0 30px 12px #ffd470}}
.birds i{position:absolute;left:-60px;top:90px;width:34px;height:14px;background:radial-gradient(ellipse at 30% 100%,#3A2A1F 55%,transparent 56%),radial-gradient(ellipse at 70% 100%,#3A2A1F 55%,transparent 56%);animation:fly 26s linear infinite}
.birds i:nth-child(2){top:140px;animation-delay:-11s;animation-duration:32s;transform:scale(.8)}
@keyframes fly{from{transform:translate(0,0)}50%{transform:translate(700px,-22px)}to{transform:translate(1400px,10px)}}
.pill{display:flex;align-items:center;height:60px;padding:0 20px;font:700 22px/1 var(--f);gap:12px;border-radius:30px}
.pill.coin{min-width:130px}
.dots{display:flex;gap:6px}.dots i{width:14px;height:14px;border-radius:50%;background:#d9cdb2;border:3px solid var(--tinta)}.dots i.done{background:var(--hijau)}.dots i.now{background:var(--emas)}
.coinicon{display:inline-block;width:26px;height:26px;border-radius:50%;background:var(--emas);border:4px solid var(--tinta)}
.coin b{font-size:24px}
.radio{left:34px;top:92px;width:500px;height:222px;background:var(--krem);padding:12px 18px}
.rhead{display:flex;align-items:center;gap:12px;font:700 20px/1 var(--f);height:32px}
.lamp{width:22px;height:22px;border-radius:50%;background:#7b3a2c;border:4px solid var(--tinta)}.lamp.on{background:#ff4b36;animation:blink .5s steps(2) infinite}
@keyframes blink{50%{background:#7b3a2c}}
.caption{font-size:24px;line-height:1.3;height:64px;margin:6px 0 4px;overflow:hidden}
.caption mark{background:var(--emas);border-radius:8px;padding:0 6px;color:var(--tinta)}
.caption.hl mark{animation:pulse .5s ease-in-out infinite alternate}
@keyframes pulse{to{background:#ffd470;box-shadow:0 0 0 5px #ffd470}}
.rbtn{display:flex;gap:12px}.rbtn .btn{position:static;min-height:64px;padding:0 18px;font-size:21px;box-shadow:0 6px 0 var(--tinta)}
.board{position:absolute;left:896px;top:92px;width:348px;height:196px;background:#17352b;border:var(--garis) solid #F4B73F;border-radius:18px;box-shadow:0 0 0 5px var(--tinta),0 8px 0 5px rgba(0,0,0,.3);padding:10px 14px}
.bhead{font:700 20px/1 var(--f);color:#F4B73F;letter-spacing:2px;margin-bottom:8px}
.row{display:flex;align-items:center;gap:10px;height:44px;margin-bottom:6px;background:#254b3d;border-radius:10px;padding:0 10px;color:#9fb5a9;font:700 24px/1 "Courier New",monospace;animation:rowin .35s ease-out}
.row.set{color:#F4B73F}
@keyframes rowin{from{transform:translateX(30px);opacity:0}}
.row .sw{width:24px;height:24px;border-radius:6px;border:3px solid #0d1f19}.row .dn{flex:1}
.tm b{display:inline-block;transition:transform .14s}.tm b.flip{transform:rotateX(90deg)}
.setpanel{left:896px;top:300px;width:348px;height:410px;background:var(--krem);padding:6px 14px 10px}
.setclock{width:192px;height:192px;margin:0 auto}
.chips{display:flex;justify-content:center;gap:8px;margin-top:2px}
.chip{font:700 20px/1 var(--f);padding:5px 14px;border-radius:14px;color:#fff;border:3px solid var(--tinta)}.chip.hj{background:var(--bata)}.chip.mn{background:var(--biru)}
.ctl{display:flex;align-items:center;justify-content:space-between;margin:6px 4px 4px;height:64px}.ctl .btn{position:static;width:64px;height:64px;min-height:64px;font-size:40px}
.readout{font:700 40px/1 var(--f);min-width:120px;text-align:center}
.setpanel .big{position:static;width:100%;min-height:68px;margin-top:6px}
.setpanel.shake{animation:shake .45s ease}
@keyframes shake{20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(5px)}}
.whistle{left:34px;top:598px;width:262px;min-height:92px}
.fast{left:540px;top:258px;width:200px;font-size:22px}
.trainwrap{position:absolute;left:0;top:380px;width:520px;height:170px;transform:translateX(-640px);pointer-events:none}
.steamlayer,.paxlayer,.fxlayer{position:absolute;inset:0;pointer-events:none}
.puff{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;background:#fff;border:4px solid #e6e0d0;opacity:0}
.runner{position:absolute;left:0;top:0}
.runner .person{animation:bob .25s ease-in-out infinite alternate}@keyframes bob{to{transform:translateY(-6px)}}
.spark{position:absolute;left:0;top:0}
.decor img{position:absolute}.dbunting{left:700px;top:262px;width:190px}.dpot{left:812px;top:612px;width:60px}.dlantern{left:520px;top:340px;width:44px;display:none}
.pop{animation:popin .5s cubic-bezier(.2,1.6,.4,1)}@keyframes popin{from{transform:scale(0)}}
.bu{position:absolute;left:730px;top:500px;width:150px;height:230px;transform-origin:50% 100%;animation:breathe 3s ease-in-out infinite}
@keyframes breathe{50%{transform:scaleY(1.025)}}
.buwati .blink{animation:blink2 4.5s infinite}@keyframes blink2{0%,94%,100%{opacity:0}96%{opacity:1}}
.buwati .m-mikir,.buwati .b-mikir,.buwati .m-sorak{display:none}
.buwati.e-mikir .m-senang,.buwati.e-sorak .m-senang{display:none}.buwati.e-mikir .m-mikir,.buwati.e-mikir .b-mikir{display:inline}.buwati.e-sorak .m-sorak{display:inline}
.buwati.e-sorak{animation:hop .5s ease-in-out 2}@keyframes hop{50%{transform:translateY(-14px)}}
.buwati .armR{transform-origin:114px 104px}.bu.whistling .armR{animation:whistle .25s ease-in-out 3}@keyframes whistle{50%{transform:rotate(-14deg)}}
.bubble{left:316px;top:590px;width:408px;height:112px;padding:12px 18px;display:flex;align-items:center;font-size:24px;line-height:1.25;background:var(--putih);border-radius:26px}
.bubble::after{content:"";position:absolute;right:-22px;top:46px;width:30px;height:30px;background:var(--putih);border-right:var(--garis) solid var(--tinta);border-top:var(--garis) solid var(--tinta);transform:rotate(45deg)}
.bubble.pop{animation:popin .35s cubic-bezier(.2,1.6,.4,1)}
.handptr{position:absolute;left:0;top:0;opacity:0;pointer-events:none;transition:left .35s ease,top .35s ease,opacity .2s;z-index:9}
.handptr.on{opacity:1}.handptr svg{transform:rotate(-20deg);animation:tap .8s ease-in-out infinite alternate;transform-origin:50% 0}@keyframes tap{to{transform:rotate(-20deg) translateY(-14px)}}
/* ---- hasil ---- */
.result .rl{left:46px;top:40px;width:480px;height:640px;padding:20px 26px;text-align:center;background:var(--krem)}
.result h2{font:700 38px/1.1 var(--f);color:var(--hijau);margin-bottom:12px}
.bigstars{display:flex;flex-direction:column;gap:6px;align-items:flex-start;margin:6px 0 10px 18px}
.bs{display:flex;align-items:center;gap:14px;font-size:22px;text-align:left}.bs small{font:700 22px/1.15 var(--f);max-width:300px}.bs.pop{animation:popin .6s cubic-bezier(.2,1.6,.4,1)}
.coinrow{display:flex;align-items:center;justify-content:center;gap:10px;font:700 34px/1 var(--f);margin-top:14px}
.rr{position:absolute;left:560px;top:40px;width:680px}
.know{position:static;padding:16px 24px;height:auto;margin-bottom:18px;font-size:24px}
.know b{font-size:24px;color:var(--bata)}.skills{margin:6px 0 10px 24px;font-size:24px;line-height:1.3}.kt{display:block;margin-bottom:6px}
.kartu{display:flex;gap:14px;flex-wrap:wrap}.kcard{display:flex;flex-direction:column;align-items:center;font-size:20px}.kcard img{height:100px;width:auto}.kcard .mini{width:150px;height:49px}.kcard .mini svg{width:150px;height:auto}.kcard small{font:700 20px/1 var(--f)}
.teacher{position:static;padding:14px 22px;background:#fff8e6}.teacher h3{font:700 24px/1.1 var(--f);color:var(--hijau);margin-bottom:6px}.teacher p{font-size:20px;line-height:1.35;margin-bottom:6px}.teacher .small{font-size:20px;color:#6b5a48}
.rbtns{position:absolute;left:580px;top:616px;width:660px;display:flex;gap:20px}.rbtns .btn{position:static;flex:1;min-height:72px}
/* ---- modal ---- */
.modal{position:absolute;inset:0;background:rgba(23,63,51,.62);opacity:0;transition:opacity .2s;z-index:50}.modal.in{opacity:1}
.mpanel{left:130px;top:34px;width:1020px;height:652px;background:var(--krem);padding:22px 36px;display:flex;flex-direction:column}
.mpanel h2{font:700 44px/1.1 var(--f);color:var(--hijau);margin-bottom:10px}
.mbody{flex:1;overflow:hidden;font-size:24px;line-height:1.35}
.blk{margin-bottom:12px}.blk b{display:block;font:700 24px/1.2 var(--f);color:var(--bata);margin-bottom:2px}.blk p,.blk li{font-size:24px}.blk ol,.blk ul{margin-left:28px}
.two{display:flex;gap:40px}.two .blk{flex:1}
.cite{margin-top:8px;font-size:22px}
.mfoot{margin-top:auto;display:flex;justify-content:center;padding-top:8px;height:92px}.mfoot .btn{position:static;width:230px}
.mpanel.ref .blk p,.mpanel.ref .blk li{font-size:21px;line-height:1.26}.mpanel.ref .blk{margin-bottom:8px}.mpanel.ref .cite{margin-top:4px;font-size:21px}
.mpanel.info .blk li{font-size:23px;line-height:1.28}
.navL,.navR{top:316px;width:84px;height:84px;z-index:51}.navL{left:30px}.navR{right:30px}
.devbody{display:flex;gap:34px;animation:none;margin-top:10px}.devbody.slideR{animation:sr .3s ease-out}.devbody.slideL{animation:sl .3s ease-out}
@keyframes sr{from{transform:translateX(60px);opacity:0}}@keyframes sl{from{transform:translateX(-60px);opacity:0}}
.foto{width:220px;height:220px;border-radius:50%;border:6px solid var(--tinta);object-fit:cover;box-shadow:0 8px 0 rgba(58,42,31,.3);flex:none}
.devinfo{font-size:23px;line-height:1.35}.devinfo .nama{font:700 38px/1.15 var(--f)}.devinfo .inst{font-weight:700}.devinfo .blk{margin-top:10px}.devinfo li{font-size:22px;line-height:1.28}
.indrow{text-align:right;font:700 22px/1 var(--f);margin-top:-54px;margin-bottom:30px}
.mpanel.set{left:300px;width:680px;height:520px;top:100px}.setrows{display:flex;flex-direction:column;gap:14px}.setrow{display:flex;align-items:center;justify-content:space-between;font-size:26px}
.setrow .btn{position:static;width:150px;min-height:64px;font-size:22px}
/* ---- putar perangkat ---- */
#rotate{position:fixed;inset:0;background:#1F5F4A;color:#FFF3D6;display:none;align-items:center;justify-content:center;text-align:center;z-index:99;font:700 26px/1.3 var(--f)}#rotate.on{display:flex}.rbox{display:flex;flex-direction:column;align-items:center;gap:18px;padding:30px}
/* ===== Fase 2 ===== */
.topbar{position:absolute;left:20px;top:14px;display:flex;gap:12px;align-items:flex-start;z-index:5}
.topbar .pill,.topbar .btn{position:static}.topbar .pill.lvl,.topbar .pill.coin{position:static}
.topbar .kamusbtn{min-height:60px;height:60px;padding:0 22px;font-size:21px;box-shadow:0 6px 0 var(--tinta)}
.dotpill{padding:0 16px}.dots i.qd{border-radius:4px}
.pill.lvl{font-size:21px}
.board{top:88px;height:206px;padding:8px 14px}
.setpanel{top:302px;height:410px}
.row{height:38px;margin-bottom:4px;font-size:21px}.row .dy{font-size:18px;color:#F4B73F;opacity:.9}
.lv-days .board{height:206px}.lv-days .row{height:36px}
.board.glow,.row.hlq{animation:glowrow .6s ease-in-out infinite alternate}
@keyframes glowrow{to{box-shadow:0 0 0 5px #ffd470}}
.row.hlq{background:#7a5b1a;color:#ffe9a8}
.tabs{display:flex;gap:2px}.tabs .tab{position:static;width:42px;min-width:42px;min-height:50px;height:50px;padding:0;font-size:20px;border-radius:12px;border-width:4px;box-shadow:0 4px 0 var(--tinta);background:var(--krem);color:var(--tinta)}
.tabs .tab.on{background:var(--emas);transform:translateY(3px);box-shadow:0 1px 0 var(--tinta)}.tabs .tab.hint{animation:glowrow .5s ease-in-out infinite alternate;background:#ffd470}
.tabs .tab:disabled{opacity:.7}
.tabinfo{font:700 20px/1 var(--f);color:#F4B73F;height:26px;margin:6px 0 2px}
.setpanel.twoh .setclock{width:170px;height:170px}
.setpanel.twoh .ctl{margin:4px 2px 2px;height:64px}
.rv{font:700 24px/1 var(--f);min-width:130px;text-align:center;padding:8px 10px;border-radius:14px;border:3px solid var(--tinta);color:#fff}.rv.hj{background:var(--bata)}.rv.mn{background:var(--biru)}.rv b{font-size:30px}
.setpanel.twoh .big{min-height:64px;margin-top:4px}
.setpanel.dim{filter:saturate(.6) brightness(.97)}.setpanel.hide{opacity:0;pointer-events:none;transition:opacity .25s}
.dotsload{display:inline-flex;gap:8px;align-items:center;height:32px}.dotsload i{width:12px;height:12px;border-radius:50%;background:var(--tinta);animation:dl 1s infinite}.dotsload i:nth-child(2){animation-delay:.2s}.dotsload i:nth-child(3){animation-delay:.4s}@keyframes dl{50%{transform:translateY(-8px);opacity:.4}}
.caption mark.dmark{background:#bfe3f2}
.bubble.bridge{background:#FFF8E0;border-color:var(--bata)}.bubble.bridge b{color:var(--bata)}.bubble.bridge mark{background:var(--emas);border-radius:8px;padding:0 6px}
.bubble{font-size:23px}
.cards-q{left:170px;top:332px;width:560px;height:236px;padding:8px;display:none;flex-direction:column;gap:8px;background:var(--krem)}
.cards-q.on{display:flex;animation:popin .4s cubic-bezier(.2,1.6,.4,1)}
.cards-q.four{height:288px;top:312px}
.cards-q .cardq{position:static;flex:1;min-height:56px;font-size:21px;padding:0 10px;justify-content:flex-start;background:var(--putih);color:var(--tinta);box-shadow:0 5px 0 var(--tinta)}
.cards-q .cardq.good{background:#bfe8a8;border-color:var(--hijau)}.cards-q .cardq.bad,.cards-q .cardq.bad:disabled{background:#e9ddc3;color:#9a8a72;text-decoration:line-through;box-shadow:0 2px 0 #7a6a58}
.cards-q.shake{animation:shake .45s ease}
.paxq{position:absolute;left:0;top:500px;width:110px;height:187px;transform:translateX(-160px);pointer-events:none}
.paxq .person{filter:drop-shadow(0 6px 0 rgba(58,42,31,.25))}
.kamus .kgrid{display:flex;gap:14px;margin:6px 0 8px}.kc{flex:1;background:var(--putih);border:4px solid var(--tinta);border-radius:20px;padding:8px;display:flex;flex-direction:column;align-items:center;font-size:20px;line-height:1.2;text-align:center}
.kc .clock{width:120px;height:120px}.kc b{font-size:21px;color:var(--bata)}.kc .id{color:#6b5a48;font-size:20px}
.kdays{display:flex;gap:8px}.kd{flex:1;background:var(--putih);border:4px solid var(--tinta);border-radius:16px;padding:6px 2px;text-align:center;display:flex;flex-direction:column;font-size:20px;line-height:1.2}.kd b{font-size:26px;color:var(--hijau)}.kd.tt{background:#fff0b8}.kd span{font-size:20px}.kd .id{color:#6b5a48}
.mpanel.kamus .cite{margin-top:8px}.mpanel.kamus .blk{margin-bottom:2px}
.skills .todo{color:var(--bata);list-style:none;margin-left:-20px;font-weight:700}
.result .rr .know{padding:14px 24px}
@media (max-height:0){}
.bubble.bridge::after{background:#FFF8E0;border-color:var(--bata)}
.mpanel.kamus{padding-top:16px}.mpanel.kamus h2{font-size:38px;margin-bottom:4px}
.kc .clock{width:92px;height:92px}.kc{padding:6px 4px}.kd{padding:4px 0}.kd span{font-size:19px;letter-spacing:-.3px}
.mpanel.kamus .mfoot{height:84px}.mpanel.kamus .cite{margin-top:6px;font-size:20px}
.select .kamusbtn2{left:60px;top:122px;width:200px;font-size:24px}
/* ===== Fase 3 ===== */
.ambient{position:absolute;inset:0;pointer-events:none}
.walker{position:absolute;left:0;top:0;opacity:.95}.vendor{position:absolute;left:300px;top:392px}
.vendor .person,.walker .person{filter:drop-shadow(0 4px 0 rgba(58,42,31,.18))}
.cards .card .clock{width:150px;height:150px}.cards{gap:18px}.card .cname{font-size:23px}
.select .certbtn{right:60px;top:626px;width:240px}
.cert .certcv{position:absolute;left:0;top:0;width:1280px;height:720px}
.certbar{left:90px;top:624px;width:1100px;height:86px;display:flex;align-items:center;gap:14px;padding:0 16px;background:rgba(255,243,214,.96)}
.certbar .btn{position:static}.certbar .btn.g{width:250px;font-size:24px;padding:0}.certbar .btn.b{width:130px}.certbar .btn.e{width:170px}
.nameinput{flex:1;min-width:0;height:64px;border:var(--garis) solid var(--tinta);border-radius:18px;padding:0 18px;font:700 24px var(--f);color:var(--tinta);background:var(--putih);-webkit-user-select:text;user-select:text;touch-action:auto}
.nameinput::placeholder{font:500 17px var(--f);color:#8a7c64}.nameinput:focus{outline:4px solid var(--biru)}
.certnote{position:absolute;left:90px;top:596px;background:var(--putih);border-radius:12px;width:1100px;text-align:center;font:700 20px var(--f);color:#B5442E}
/* polesan ukuran teks isi >= 24 px */
.bubble{font-size:24px}.cards-q .cardq{font-size:24px}.row .dy{font-size:20px}
.mpanel.info .blk li{font-size:24px}.mpanel.ref .mbody{overflow-y:auto;touch-action:pan-y}.mpanel.ref .blk p,.mpanel.ref .blk li,.mpanel.ref .cite{font-size:24px;line-height:1.3}
.mpanel.ref .mbody::-webkit-scrollbar{width:12px}.mpanel.ref .mbody::-webkit-scrollbar-thumb{background:var(--bata);border-radius:8px}
.teacher p,.teacher .small{font-size:21px}
#printimg{display:none}
@media print{@page{size:landscape;margin:0}body>*:not(#printimg){display:none!important}#printimg{display:block!important;width:100vw;height:auto}html,body{overflow:visible;background:#fff}}

/* hasil: tata letak dua panel + tombol */
.result .rr{top:26px;width:680px}
.result .rr .know{padding:10px 22px 8px;margin-bottom:12px;font-size:22px}.know b{font-size:22px}
.skills{margin:2px 0 6px 24px;font-size:22px;line-height:1.25}.kt{margin-bottom:2px}
.kartu{gap:8px}.kcard img{height:64px}.kcard .mini{width:96px;height:32px}.kcard .mini svg{width:96px}.kcard small{font:700 20px/1 var(--f)}
.teacher{padding:10px 20px}.teacher h3{font-size:22px;margin-bottom:2px}.teacher p{font-size:20px;line-height:1.28;margin-bottom:4px}.teacher .small{font-size:20px}
.rbtns{top:628px;left:560px;width:700px;gap:14px}.rbtns .btn{min-height:64px;padding:0 10px;font-size:22px}

/* ===== permintaan revisi ===== */
.card .soon{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:21px;color:#6b5a48;text-align:center;line-height:1.2}
.card.locked .cname{color:#7a6a58}
.tahun{margin-top:10px;display:inline-block;font:700 20px/1 var(--f);color:#6b5a48;background:#fff;border:3px solid var(--tinta);border-radius:14px;padding:8px 14px}
.rbody{display:flex;flex-direction:column;gap:10px;overflow-y:auto;touch-action:pan-y}
.rcard{background:var(--putih);border:4px solid var(--tinta);border-radius:20px;padding:10px 18px}.rcard.ai{border-color:var(--hijau)}
.rhd{font:700 22px/1.2 var(--f);color:var(--bata);margin-bottom:4px}.rcard.ai .rhd{color:var(--hijau)}
.rit{display:flex;gap:12px;align-items:flex-start;margin:4px 0}.rit p,.rcard .rp{font-size:21px;line-height:1.3;margin:0}.rit p b{color:var(--tinta)}
.rn{flex:none;width:30px;height:30px;border-radius:50%;background:var(--emas);border:3px solid var(--tinta);font:700 18px/24px var(--f);text-align:center;margin-top:1px}
.chips2{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}.ch{font-size:20px;background:#e6f2e8;border:3px solid var(--hijau);border-radius:14px;padding:4px 12px}.ch b{margin-right:6px;color:var(--hijau)}
.mpanel.ref .mbody::-webkit-scrollbar{width:12px}
/* layar muat */
.muat{background:linear-gradient(#8ED0EA,#FFE8B8);display:flex;flex-direction:column;align-items:center;justify-content:center}
.mtitle{font:700 76px/1 var(--f);color:var(--putih);text-shadow:0 5px 0 var(--tinta),3px 3px 0 var(--tinta),-3px 3px 0 var(--tinta),3px -3px 0 var(--tinta),-3px -3px 0 var(--tinta);margin-bottom:6px}
.mtag{font:700 28px/1 var(--f);color:var(--hijau);margin-bottom:60px}
.mtrack{position:relative;width:640px;height:26px;border:var(--garis) solid var(--tinta);border-radius:18px;background:var(--putih);margin-bottom:26px}
.mtrack .fill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--emas);border-radius:12px}
.mtrain{position:absolute;top:-50px;left:0;margin-left:-20px}
.mt{font:700 24px/1 var(--f);color:var(--tinta)}

.rcols{display:flex;gap:12px;align-items:stretch}.rcols .rcard{flex:1;min-width:0}
.rbody{gap:12px}.rit p,.rcard .rp{font-size:20px;line-height:1.28}.rcard{padding:8px 16px}.ch{font-size:20px;padding:3px 10px}
.rcard.wide .rit{margin:2px 0}.rhd{font-size:22px}
.mpanel.ref{padding-top:16px}.mpanel.ref h2{font-size:38px;margin-bottom:6px}.mpanel.ref .mfoot{height:84px}

.mpanel.ref{left:50px;width:1180px}
.rcols{flex:1;min-height:0}.rcols>.rcard{flex:1.05}.rcol{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}.rcol .rcard{flex:none}.rcol .rcard.wide{flex:1}
.mpanel.ref .chips2{gap:6px}.mpanel.ref .ch{font-size:20px}

.rcols>.rcard{flex:.78}.rcol.L{flex:1.22}.rcol.L .rcard{flex:none}.rcol.L .rcard.wide{flex:none}
.rcols>.rcard.ai{align-self:flex-start}
.mpanel.ref{top:16px;height:688px}.mpanel.ref .rit p,.mpanel.ref .rcard .rp{line-height:1.24}.mpanel.ref .rcard{padding:6px 16px}.mpanel.ref .mfoot{height:80px}
/* perbaikan hasil smoke */
.kd span,.kd .id,.kc .id{font-size:20px}
.lv-days .board{left:868px;width:376px}.tabs .tab{width:46px;min-width:46px}
.rbtns{top:640px}

/* ===== polesan v2: kunci level, sertifikat, hasil ===== */
.cards{left:60px;width:1160px;justify-content:center;gap:18px}
.cards .card{position:relative;flex:none;width:214px;padding:18px 10px}
.card.locked{background:#e9ddc3;box-shadow:0 5px 0 #7a6a58;border-color:#7a6a58;cursor:not-allowed}
.card.locked .cn{color:#7a6a58}
.card.next{box-shadow:0 8px 0 var(--tinta),0 0 0 6px var(--emas);animation:nextglow 1.1s ease-in-out infinite alternate}
@keyframes nextglow{to{box-shadow:0 8px 0 var(--tinta),0 0 0 10px #ffd470}}
.card.needed{animation:glowrow .35s ease-in-out 6 alternate}
.card.shake{animation:shake .45s ease}
.badge{position:absolute;top:10px;right:10px;display:flex;align-items:center;justify-content:center;border:4px solid var(--tinta);pointer-events:none}
.badge.ok{width:42px;height:42px;border-radius:50%;background:var(--hijau)}
.badge.go{position:static;margin-top:auto;height:46px;padding:0 22px;border-radius:23px;background:var(--emas);font:700 24px/1 var(--f);color:var(--tinta);box-shadow:0 4px 0 var(--tinta);animation:bob .6s ease-in-out infinite alternate}
.unlockfx{position:absolute;left:50%;top:150px;margin-left:-48px;pointer-events:none;animation:unlock 1.5s ease-in forwards}
.unlockfx .shackle{transform-origin:9px -6px;animation:shackle .5s .35s ease-out forwards}
@keyframes unlock{0%{transform:scale(.6);opacity:0}15%{transform:scale(1.1);opacity:1}25%{transform:rotate(-8deg)}35%{transform:rotate(8deg)}45%{transform:rotate(0)}70%{transform:translateY(-10px);opacity:1}100%{transform:translateY(-120px) scale(.7);opacity:0}}
@keyframes shackle{to{transform:translateY(-6px) rotate(-30deg)}}
.reduce .unlockfx{display:none}
.lvtoast{left:300px;top:122px;width:560px;min-height:64px;padding:8px 18px;display:flex;align-items:center;justify-content:center;text-align:center;font:700 22px/1.2 var(--f);opacity:0;pointer-events:none;transition:opacity .2s;z-index:4}
.lvtoast.on{opacity:1;animation:popin .35s cubic-bezier(.2,1.6,.4,1)}
.lvtoast.warn{background:#FFF8E0;border-color:var(--bata);color:var(--bata)}.lvtoast.good{background:#e6f2e8;border-color:var(--hijau);color:var(--hijau)}
.cert{background:#1F5F4A}
.cert .certcv{left:112px;top:8px;width:1056px;height:594px;border-radius:14px;box-shadow:0 8px 0 rgba(0,0,0,.3)}
.certpriv{position:absolute;left:0;top:606px;width:1280px;text-align:center;font:500 20px/1 var(--f);color:#FFF3D6}
.certbar{top:634px;height:80px;padding:0 12px}
.nameinput::placeholder{font:500 22px var(--f)}
.certnote{top:560px;left:240px;width:800px;padding:6px 10px}.certnote:empty{display:none}
.result .rl{display:flex;flex-direction:column;align-items:center}
.result .rl h2{margin-bottom:2px}
.rsub{font:700 21px/1.2 var(--f);color:#6b5a48;margin-bottom:4px}
.result .bigstars{align-self:flex-start;margin:4px 0 4px 18px}
.result .coinrow{margin-top:4px}
.rbu{margin-top:auto;width:100%;display:flex;align-items:flex-end;gap:8px;height:150px}
.rbuw{flex:none;width:96px;height:150px;transform-origin:50% 100%;animation:breathe 3s ease-in-out infinite}.rbuw svg{width:96px;height:148px}
.rbubble{position:relative;flex:1;margin-bottom:56px;background:var(--putih);border:4px solid var(--tinta);border-radius:22px;padding:10px 16px;font:700 22px/1.25 var(--f);color:var(--hijau);text-align:left}
.rbubble::before{content:"";position:absolute;left:-15px;bottom:18px;width:22px;height:22px;background:var(--putih);border-left:4px solid var(--tinta);border-bottom:4px solid var(--tinta);transform:rotate(45deg)}
.buwati-img{display:flex;align-items:flex-end;justify-content:center}.buimg{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 6px 0 rgba(58,42,31,.2))}
.trainwrap img.train{display:block}.pimg{display:block}
.devinfo .igrow{display:flex;align-items:center;gap:10px;margin-top:2px}.devinfo .igicon{width:30px;height:30px;border-radius:8px;flex:none;box-shadow:0 2px 0 rgba(58,42,31,.25)}
.bu.buwati-img{top:476px;height:238px}