@font-face{font-family:Fredoka;src:url(../assets/fonts/fredoka-latin-600-normal.woff2) format("woff2");font-weight:500 600;font-display:swap}
@font-face{font-family:Fredoka;src:url(../assets/fonts/fredoka-latin-700-normal.woff2) format("woff2");font-weight:700 900;font-display:swap}
@font-face{font-family:Nunito;src:url(../assets/fonts/Nunito-Bold.ttf) format("truetype");font-weight:400 700;font-display:swap}
@font-face{font-family:Nunito;src:url(../assets/fonts/Nunito-Black.ttf) format("truetype");font-weight:800 900;font-display:swap}
*{box-sizing:border-box;margin:0}
html,body{height:100%;background:#2B2A4C;overflow:hidden;font-family:Nunito,"Trebuchet MS",Verdana,sans-serif;font-weight:800;color:#2B2A4C;user-select:none;-webkit-user-select:none;touch-action:none}
#stage{position:absolute;left:50%;top:50%;width:1280px;height:720px;transform-origin:50% 50%;background:#FFF4DC;overflow:hidden;transition:opacity .2s}
#stage.fade{opacity:0}
.bg{position:absolute;left:0;top:0;width:1280px;height:720px}
svg text{font-family:Fredoka,"Trebuchet MS",Verdana,sans-serif;font-weight:900}
.t{paint-order:stroke;stroke:#2B2A4C;stroke-linejoin:round}
button{font-family:Fredoka,"Trebuchet MS",Verdana,sans-serif;font-weight:900;cursor:pointer}
button:focus-visible{outline:6px solid #FFC93C;outline-offset:3px}
.btn{position:absolute;height:84px;border:6px solid #2B2A4C;border-radius:42px;font-size:36px;color:#2B2A4C;background:#FFF4DC;box-shadow:0 6px 0 rgba(43,42,76,.3);transition:transform .08s;display:flex;align-items:center;justify-content:center;gap:14px}
.btn:active{transform:scale(.95)}.btn:disabled{opacity:.45}
.go{background:#3DDBB0}.sun{background:#FFC93C}.pk{background:#FF5C8A;color:#fff}
.ib{position:absolute;width:64px;height:64px;border-radius:50%;border:5px solid #2B2A4C;background:#FFF4DC;display:grid;place-items:center}.ib:active{transform:scale(.95)}
#top{position:absolute;left:0;top:0;width:1280px;height:80px;background:#2B2A4C;color:#FFF4DC;font:900 30px Fredoka,"Trebuchet MS",sans-serif}
#tt{position:absolute;left:110px;top:20px}#stars{position:absolute;left:870px;top:8px}
#instr{position:absolute;left:50px;top:106px;width:780px;height:96px;background:#fff;border:6px solid #2B2A4C;border-radius:32px;padding:0 24px 0 100px;font-size:28px;line-height:36px;display:flex;align-items:center;z-index:3}
#instr .ib{left:14px;top:12px;width:56px;height:56px;background:#FFC93C}
#obj{position:absolute;left:740px;top:130px;width:160px;height:340px;background:none;border:0;border-radius:24px;z-index:2}
#obj.pl{animation:pulse .8s 3}
@keyframes pulse{50%{box-shadow:0 0 0 10px #FFC93C;background:rgba(255,201,60,.25)}}
#rack,#dsc{position:absolute;left:0;width:1280px;background:#2B2A4C;z-index:3}
#rack{top:600px;height:120px}#dsc{top:480px;height:240px}
.stk{position:absolute;top:18px;width:250px;height:84px;border:6px solid #fff;border-radius:24px;font-family:Fredoka,"Trebuchet MS",sans-serif;font-weight:900;display:flex;align-items:center;justify-content:center;transition:transform .15s,opacity .2s;box-shadow:0 6px 0 rgba(0,0,0,.3)}
.stk span{display:inline-block;transform:scaleX(var(--sx))}
.stk.sel{transform:translateY(-12px) scale(1.05);box-shadow:0 0 0 6px #FFC93C}.stk.used{opacity:.4}
.stk.nudge{animation:nud .5s 4}@keyframes nud{50%{transform:translateY(-10px) rotate(-3deg)}}
.ghost{position:absolute;z-index:9;pointer-events:none;transform:rotate(-6deg) scale(1.1)}
#hand{position:absolute;left:0;top:0;width:70px;height:90px;margin:-6px 0 0 -35px;pointer-events:none;z-index:8;animation:pt 2.2s ease-in-out infinite;display:none}
@keyframes pt{0%,10%{transform:translate(var(--x0),var(--y0))}60%,100%{transform:translate(var(--x1),var(--y1))}}
#sl,#pl{position:absolute;left:0;width:1280px;display:flex;justify-content:center;gap:16px}#sl{top:24px}#pl{top:132px}
.card{height:84px;min-width:130px;padding:0 26px;border:6px solid #fff;border-radius:24px;background:#FFC93C;color:#2B2A4C;font-size:38px;box-shadow:0 6px 0 rgba(0,0,0,.3)}
.card:active{transform:scale(.95)}
.slot{background:#FFF4DC;border:6px dashed #FFC93C;min-width:170px;box-shadow:none}.slot.f{border-style:solid;border-color:#fff;background:#FFC93C}.slot.ok{background:#3DDBB0}
.shake{animation:sh .4s}@keyframes sh{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
#ov{position:absolute;inset:0;background:rgba(43,42,76,.8);display:grid;place-items:center;z-index:20}
.box{background:#FFF4DC;border:6px solid #2B2A4C;border-radius:32px;padding:30px 40px;display:flex;flex-direction:column;gap:18px;align-items:center;font-size:34px}
.box .btn{position:static;width:460px}
.ch .eh,.ch .ec,.ch .mh,.ch .mt{display:none}
.ch[data-e=h] .eh,.ch[data-e=c] .ec,.ch[data-e=h] .mh,.ch[data-e=t] .mt{display:inline}
.ch[data-e=h] .en,.ch[data-e=c] .en,.ch[data-e=h] .mn,.ch[data-e=t] .mn{display:none}
.breathe{animation:br 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}@keyframes br{50%{transform:scale(1.02,.97)}}
.en circle{animation:bl 4s infinite;transform-box:fill-box;transform-origin:center}@keyframes bl{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
#res{position:absolute;inset:0;display:flex;gap:40px;padding:36px 50px;z-index:5}
.col{flex:1;display:flex;flex-direction:column;gap:14px}
.card2{background:#fff;border:6px solid #2B2A4C;border-radius:32px;padding:16px 24px;font-size:24px;line-height:32px}
.card2 h3{font:900 30px Fredoka,"Trebuchet MS",sans-serif;margin-bottom:6px}
.pol{background:#fff;border:6px solid #2B2A4C;padding:14px 14px 10px;transform:rotate(-3deg);font:900 28px Fredoka,"Trebuchet MS",sans-serif;text-align:center;width:340px;align-self:center}
.pol div{height:190px;background:#4FB3FF;border-radius:10px;margin-bottom:8px}
#rot{display:none;position:fixed;inset:0;background:#2B2A4C;color:#FFF4DC;font:900 28px Fredoka,"Trebuchet MS",sans-serif;align-items:center;justify-content:center;text-align:center;padding:30px;z-index:99}
@media (orientation:portrait){#rot{display:flex}}
body.red *{animation:none!important;transition:none!important}

svg .o{stroke:#2B2A4C;stroke-width:6;stroke-linejoin:round}
.itm{position:absolute;top:300px;width:220px;height:240px;border:6px solid #2B2A4C;border-radius:32px;background:#fff;display:grid;place-items:center;box-shadow:0 6px 0 rgba(43,42,76,.3)}.itm:active{transform:scale(.95)}
.itm{top:340px}.pol2{position:relative;width:340px;height:314px;align-self:center;transform:rotate(-2deg)}.pol2 .ph{position:absolute;left:8%;top:12%;width:80%;height:56%;background-size:cover;background-position:center}.pol2 img{position:absolute;left:0;top:0;width:100%;height:100%}

.pin{position:absolute;width:88px;height:88px;border-radius:50%;border:6px solid #2B2A4C;background:#FFC93C;font:900 44px Fredoka,"Trebuchet MS",sans-serif;color:#2B2A4C;display:grid;place-items:center;box-shadow:0 6px 0 rgba(43,42,76,.35);z-index:2}.pin:active{transform:scale(.95)}.pin.lk{background:#DADAE2}.pin.cur{animation:bob 1s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-8px)}}
.plab{position:absolute;width:240px;text-align:center;background:#2B2A4C;color:#FFF4DC;border-radius:20px;padding:4px 0;font:900 22px Fredoka,"Trebuchet MS",sans-serif;z-index:2}
.mp{background:#FFF4DC;border:6px solid #2B2A4C;border-radius:32px;padding:20px 30px;display:flex;flex-direction:column;align-items:center;gap:14px}.mp h2{font:900 40px Fredoka,"Trebuchet MS",sans-serif}.mcs{display:flex;gap:14px}
.mc{width:200px;height:290px;border:6px solid #2B2A4C;border-radius:28px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:12px 8px;color:#2B2A4C;box-shadow:0 6px 0 rgba(43,42,76,.3)}.mc:active{transform:scale(.95)}.mc small{font:900 28px Fredoka,"Trebuchet MS",sans-serif}.mc p{font:800 22px/26px Nunito,"Trebuchet MS",sans-serif;text-align:center}.mc span{display:flex;min-height:44px;align-items:center}
.mc.nx{background:#FFC93C;animation:bob 1s ease-in-out infinite}.mc.dn{background:#B8F2E0}.mc.op{background:#fff}.mc.lk{background:#DADAE2}
.toast{position:absolute;left:50%;top:620px;transform:translateX(-50%);background:#2B2A4C;color:#FFF4DC;padding:14px 28px;border-radius:30px;font:900 28px Fredoka,"Trebuchet MS",sans-serif;z-index:30;white-space:nowrap}
.mbox{background:#FFF4DC;border:6px solid #2B2A4C;border-radius:32px;width:1140px;max-height:664px;padding:22px 36px;display:flex;flex-direction:column;gap:8px;font-size:24px;line-height:31px;overflow:auto}
.mbox h2{font:900 40px Fredoka,"Trebuchet MS",sans-serif}.mbox h3{font:900 28px Fredoka,"Trebuchet MS",sans-serif;color:#E0356A;margin-top:4px}.mbox ol,.mbox ul{padding-left:30px}.mbox p{margin-bottom:6px}
.chip{display:inline-block;background:#FFC93C;border:4px solid #2B2A4C;border-radius:24px;padding:2px 16px;margin:0 10px 6px 0;font-size:24px}
.cols{display:flex;gap:34px}.cols>div{flex:1}.dev{display:flex;gap:40px;align-items:flex-end}.dev>div:last-child{flex:1;align-self:center}
.dp{position:relative;width:330px;height:520px;flex:none}.dp .bgc{position:absolute;left:0;right:0;bottom:0;top:110px;border-radius:44px;border:6px solid #2B2A4C;background:linear-gradient(160deg,#8A63FF,#FF5C8A 70%,#FFC93C);box-shadow:0 8px 0 rgba(43,42,76,.3)}
.dp img{position:absolute;left:50%;bottom:6px;height:510px;transform:translateX(-50%);filter:drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff) drop-shadow(0 -4px 0 #fff)}
#cert{position:absolute;left:0;top:0;width:1280px;height:636px}.cc{position:absolute;left:0;top:0;width:1280px;height:636px;display:flex;flex-direction:column;align-items:center;padding-top:46px}
.c1{font:900 26px Fredoka,"Trebuchet MS",sans-serif;color:#2B2A4C}.c2{font:900 86px/92px Fredoka,"Trebuchet MS",sans-serif;color:#FF5C8A;-webkit-text-stroke:7px #2B2A4C;paint-order:stroke fill;letter-spacing:4px}
.c3{background:#2B2A4C;color:#FFC93C;font:900 34px Fredoka,"Trebuchet MS",sans-serif;padding:4px 36px;border-radius:30px;margin:4px 0 8px}.c4{font-size:26px}.c5{width:560px;height:50px;border-bottom:5px solid #2B2A4C}.c6{font-size:20px;color:#6b6a85;margin-bottom:10px}
.c7{width:760px;text-align:center;font-size:26px;line-height:34px}.c8{display:flex;align-items:center;gap:8px;font:900 32px Fredoka,"Trebuchet MS",sans-serif;margin:8px 0}
.c9{display:flex;gap:300px;margin-top:6px;font-size:22px;line-height:28px;text-align:center}.sg{min-width:300px}.sl{border-bottom:4px solid #2B2A4C;height:26px;margin-bottom:4px}
.bar{position:absolute;left:0;top:646px;width:1280px;display:flex;gap:20px;justify-content:center}
@page{size:A4 landscape;margin:0}
@media print{html,body{background:#fff!important;overflow:visible!important}#stage{position:absolute!important;left:0!important;top:0!important;transform:scale(.87)!important;transform-origin:0 0!important;height:640px!important;overflow:visible}#rot,.noprint{display:none!important}*{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
.pol2{width:300px;height:277px}
.mbox{width:1220px;max-height:696px;padding:16px 34px;line-height:29px;gap:4px}.mbox h2{line-height:44px}.mbox p{margin-bottom:4px}

/* ===== v6: polesan UI ===== */
.ib.tool{width:68px;height:68px;box-shadow:0 5px 0 rgba(43,42,76,.3);transition:transform .08s,background .15s}
.ib.tool:active{transform:scale(.92)}.ib.tool.off{background:#DADAE2}
#top .ib.tool{border-color:#FFF4DC;width:64px;height:64px;box-shadow:none}
.btn.sub{background:#fff;gap:10px}.btn.sub svg{flex:none}
.btn:not(:disabled):hover{filter:brightness(1.04)}
/* panel pengaturan */
.set{width:660px;background:#FFF4DC;border:6px solid #2B2A4C;border-radius:36px;padding:22px 30px 26px;display:flex;flex-direction:column;gap:12px;box-shadow:0 10px 0 rgba(43,42,76,.35)}
.seth{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:4px}.seth h2{font:900 40px Fredoka,"Trebuchet MS",sans-serif}
.row{display:flex;align-items:center;gap:16px;width:100%;min-height:84px;padding:8px 18px 8px 12px;border:5px solid #2B2A4C;border-radius:26px;background:#fff;text-align:left;color:#2B2A4C;box-shadow:0 5px 0 rgba(43,42,76,.22);transition:transform .08s,background .15s}
.row:active{transform:scale(.97)}.row:disabled{opacity:.5}
.ri{width:58px;height:58px;flex:none;border-radius:50%;background:#FFF4DC;border:4px solid #2B2A4C;display:grid;place-items:center}
.rl{flex:1;display:flex;flex-direction:column;line-height:1.1}.rl b{font:900 28px Fredoka,"Trebuchet MS",sans-serif}.rl small{font:800 20px Nunito,"Trebuchet MS",sans-serif;color:#5d5c7a;margin-top:3px}
.tg{width:88px;height:48px;flex:none;border-radius:24px;background:#DADAE2;border:4px solid #2B2A4C;position:relative;transition:background .2s}
.tg i{position:absolute;left:4px;top:3px;width:34px;height:34px;border-radius:50%;background:#fff;border:4px solid #2B2A4C;transition:left .2s cubic-bezier(.65,0,.35,1)}
.row.on .tg{background:#3DDBB0}.row.on .tg i{left:42px}
.rsr .ri{background:#FFE3A8}.rsr.warn{background:#FFE0E8;border-color:#E0356A}.rsr.warn b{color:#E0356A}
/* kartu misi */
.mgo{display:inline-flex;align-items:center;gap:6px;background:#3DDBB0;border:4px solid #2B2A4C;border-radius:22px;padding:2px 16px 2px 12px;font:900 24px Fredoka,"Trebuchet MS",sans-serif;font-style:normal}
.mc.op .mgo{background:#FFF4DC}
/* tim pengembang */
.dvb{gap:6px;padding:14px 30px 18px}
.dvh{display:flex;align-items:center;justify-content:space-between;padding:0 92px}
.dots{display:flex;gap:10px}.dots i{width:18px;height:18px;border-radius:9px;border:4px solid #2B2A4C;background:#fff;transition:width .25s,background .25s}.dots i.on{width:44px;background:#FF5C8A}
.dvs{display:flex;align-items:center;gap:14px}
.arw{width:76px;height:76px;flex:none;border-radius:50%;border:6px solid #2B2A4C;background:#FFC93C;display:grid;place-items:center;box-shadow:0 6px 0 rgba(43,42,76,.3);transition:transform .08s}.arw:active{transform:scale(.92)}
.dvw{flex:1;overflow:hidden;touch-action:pan-y}#dvc{will-change:transform}
.dvb .dev{gap:36px;align-items:flex-end;min-height:478px}
.dvb .dp{width:300px;height:478px}.dvb .dp .bgc{top:100px}.dvb .dp img{height:468px}
.dvb .dv2 .dp .bgc{background:linear-gradient(160deg,#3DDBB0,#4FB3FF 60%,#8A63FF)}
.dvb .dv2 .dp img{height:auto;width:286px;bottom:6px;clip-path:inset(-10px -10px 0 -10px round 0 0 38px 38px)}
.dinfo{flex:1;align-self:center;display:flex;flex-direction:column;gap:2px}
.dinfo h2{font:900 46px/52px Fredoka,"Trebuchet MS",sans-serif}.dinfo h3{font:900 28px Fredoka,"Trebuchet MS",sans-serif;color:#E0356A;margin-top:8px}
.dinfo ul{padding-left:28px;font-size:22px;line-height:29px}.dinfo p{margin:0}
.dkr{align-self:flex-start;background:#2B2A4C;color:#FFC93C;border-radius:18px;padding:2px 16px;font:900 20px Fredoka,"Trebuchet MS",sans-serif}
.dsk{font:900 28px Fredoka,"Trebuchet MS",sans-serif;color:#8A63FF}
.dct{font-size:24px;line-height:34px}
.dig{display:flex;align-items:center;gap:12px;margin:4px 0!important}.dig img{width:40px;height:40px;border-radius:11px;box-shadow:0 0 0 3px #2B2A4C}.dig span{font:900 28px Fredoka,"Trebuchet MS",sans-serif}
/* panel susun kata */
#dsc{border-radius:40px 40px 0 0;border-top:6px solid #FFC93C;background:linear-gradient(#3a3866,#2B2A4C 40%);animation:up .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes up{from{transform:translateY(100%)}}
#rack{border-top:6px solid #FFC93C}
/* sertifikat: tanggal + dua pengembang */
.c9{gap:36px;font-size:20px;line-height:26px;align-items:flex-end}.c9 .sd{min-width:180px}.c9 .sg{width:380px;min-width:0}
/* layar hasil */
.rhd{display:flex;align-items:center;justify-content:space-between;font:900 52px/60px Fredoka,"Trebuchet MS",sans-serif}.rst{display:flex;align-items:center;gap:8px;font-size:42px}
.wchs{display:flex;flex-wrap:wrap;gap:6px 8px;margin:2px 0 8px}
.wch{border:3px solid #2B2A4C;border-radius:14px;padding:0 12px;font:900 22px/32px Fredoka,"Trebuchet MS",sans-serif;box-shadow:0 3px 0 rgba(43,42,76,.25)}
#res{padding:30px 50px}#res .col{gap:12px}#res .card2{padding:12px 24px;line-height:30px}
.gnote{display:block;margin-top:6px;font-size:20px;line-height:26px;color:#5d5c7a}
#res .cl{flex:1.18}#res .cr{flex:1}
#res .sk{flex:1}#res .sk p{margin:0}
.rbt{display:flex;gap:12px}
.rph{display:flex;align-items:center;gap:18px}.rph .pol2{width:250px;height:231px;align-self:auto;flex:none}
.rfl{display:flex;flex-direction:column;font:900 28px/34px Fredoka,"Trebuchet MS",sans-serif}.rfl b{font-size:46px;line-height:52px;color:#E0356A}
#res .gc{flex:1}
#res .col,.rbt .btn{min-width:0}#res .cl{flex:1.18 1 0}#res .cr{flex:1 1 0}
#res .sk{position:relative}.skk{position:absolute;right:16px;bottom:12px;width:150px;height:auto;transform:rotate(4deg)}
.pin.dn{background:#3DDBB0}

/* v6 tahap 2: karakter gambar, Referensi, medali */
.ch .xh,.ch .xc{display:none}
.ch[data-e=h] .xn,.ch[data-e=c] .xn,.ch[data-e=t] .xn{display:none}
.ch[data-e=h] .xh,.ch[data-e=c] .xc,.ch[data-e=t] .xc{display:inline}
.ch[data-e=h] .xs{display:none}
.mh2{display:flex;align-items:center;gap:12px}
.mref{gap:6px}
.rfg{display:flex;gap:30px;margin-top:2px}.rfg section{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.rfg h3{margin:0}
.rfc{display:flex;gap:12px;align-items:flex-start;background:#fff;border:4px solid #2B2A4C;border-radius:22px;padding:10px 16px;font-size:21px;line-height:28px;box-shadow:0 4px 0 rgba(43,42,76,.18)}
.rfc p{margin:0!important}.rfc i{font-style:italic;font-weight:800}
.rfn{flex:none;width:36px;height:36px;border-radius:50%;background:#FFC93C;border:4px solid #2B2A4C;display:grid;place-items:center;font:900 20px Fredoka,"Trebuchet MS",sans-serif}
.rfi{margin:0!important;font-size:22px;line-height:28px}
.rfa{list-style:none;padding:0!important;margin:0;display:flex;flex-direction:column;gap:6px;font-size:21px;line-height:27px}
.rfa li{display:flex;gap:10px;align-items:center}.rfic{flex:none;width:40px;height:40px;border-radius:12px;background:#FFF4DC;border:3px solid #2B2A4C;display:grid;place-items:center}
.rfj{background:#FFF0F4}.rfk{display:block;font:900 22px Fredoka,"Trebuchet MS",sans-serif;color:#E0356A;margin-bottom:2px}
.c8 .med{height:64px;width:auto;margin:-10px 6px -10px 0;transform:rotate(-6deg)}
.rfg section:first-child{flex:1.12}.rfa{gap:10px}
.rfj{margin-top:6px;flex:none}.rfj .rfk{display:inline;margin-right:10px}.rfa{gap:6px}.rfc{font-size:20px;line-height:26px;padding:8px 14px}.rfa{font-size:20px;line-height:25px}