:root{--ink:#1d2540;--cream:#fff8e6;--gold:#ffc83a;--sky:#6cc9f0;--red:#ff5a5f;--panel:rgba(22,30,62,.82);--green:#3dff88;--f:var(--kp-font,'KekeFont','Apple SD Gothic Neo','Noto Sans KR',system-ui,sans-serif)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;overflow:hidden;background:#7cc8ff;font-family:var(--f);color:var(--ink);overscroll-behavior:none;touch-action:none;font-synthesis:none}
button{font-family:var(--f);color:inherit;border:0;background:none;padding:0}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
[hidden]{display:none!important}
.ic{display:inline-flex;width:1.1em;height:1.1em;vertical-align:middle;flex:none}.ic svg{width:100%;height:100%}
#hud{position:fixed;inset:0;pointer-events:none;z-index:5;color:#fff}
#touch{position:absolute;inset:0;pointer-events:auto;touch-action:none}
.ic-btn{position:absolute;top:calc(10px + env(safe-area-inset-top));width:42px;height:42px;border-radius:50%;border:3px solid var(--ink);background:var(--cream);color:var(--ink);box-shadow:0 3px 0 var(--ink);pointer-events:auto;display:grid;place-items:center;font-size:20px}
#btnPause{left:calc(10px + env(safe-area-inset-left))}#btnHelp{left:calc(60px + env(safe-area-inset-left))}
.ic-btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.pill{position:absolute;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:16px;background:var(--panel);font-size:17px;font-weight:700;border:2px solid rgba(255,255,255,.22)}
.pill b{font-variant-numeric:tabular-nums}.pill .ic{color:var(--gold)}
#clock{left:50%;transform:translateX(-50%);top:calc(12px + env(safe-area-inset-top));min-width:128px;justify-content:flex-start;height:36px;overflow:hidden;font-size:18px}
#clock .tbar{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.18)}#clock .tbar u{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd23a,#ff9a3a)}
#coinB{right:calc(10px + env(safe-area-inset-right));top:calc(12px + env(safe-area-inset-top))}
#repB{right:calc(10px + env(safe-area-inset-right));top:calc(50px + env(safe-area-inset-top));height:28px;font-size:15px}#repB .ic{color:#ff8ab0}
#order{position:absolute;left:50%;transform:translateX(-50%);top:calc(56px + env(safe-area-inset-top));display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:18px;background:var(--panel);border:2px solid rgba(255,255,255,.22);font-size:15px;font-weight:700;min-width:210px;justify-content:center}
#order .pat{width:70px;height:10px;border-radius:5px;background:rgba(255,255,255,.2);overflow:hidden}#order .pat u{display:block;height:100%;background:linear-gradient(90deg,#ff5a5f,#ffd23a,#3dff88)}
#order .svc{display:flex;gap:3px;align-items:center}#order .svc .ic{font-size:20px}
#order .nm{max-width:92px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#prog{position:absolute;left:50%;transform:translateX(-50%);top:calc(100px + env(safe-area-inset-top));width:170px;height:8px;border-radius:4px;background:rgba(10,16,40,.5);overflow:hidden}#prog u{display:block;height:100%;width:0;background:linear-gradient(90deg,#6cc9f0,#3dff88)}
#tags{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.tag{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;pointer-events:none}
.tag.dirt{width:36px;height:36px;border-radius:50%;background:var(--cream);border:3px solid var(--ink);color:var(--ink);box-shadow:0 3px 0 var(--ink);font-size:20px;animation:bob 1s ease-in-out infinite}
.tag.pin{animation:bob 1.2s ease-in-out infinite}
@keyframes bob{50%{margin-top:-6px}}
.tag.ring{width:46px;height:46px;border-radius:50%;background:conic-gradient(var(--c,#3dff88) calc(var(--p,1)*360deg),rgba(10,16,40,.55) 0);display:grid;place-items:center}
.tag.ring i{width:36px;height:36px;border-radius:50%;background:var(--cream);color:var(--ink);display:grid;place-items:center;font-size:19px;border:2px solid var(--ink)}
.tag.ring.low{animation:pulse .5s ease-in-out infinite}@keyframes pulse{50%{transform:translate(-50%,-50%) scale(1.14)}}
#pops{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pop{position:absolute;left:50%;top:40%;transform:translate(-50%,0);font-size:30px;font-weight:700;color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink);animation:rise 1.3s ease-out forwards;white-space:nowrap;display:flex;gap:6px;align-items:center}
.pop.coin{color:var(--gold)}.pop.bad{color:#ff7a7a}.pop.big{font-size:44px}
@keyframes rise{0%{transform:translate(-50%,10px) scale(.5);opacity:0}15%{transform:translate(-50%,-6px) scale(1.15);opacity:1}100%{transform:translate(-50%,-120px) scale(1);opacity:0}}
#toast{position:absolute;left:50%;top:32%;transform:translate(-50%,-10px);padding:8px 16px;border-radius:16px;background:var(--panel);font-size:18px;line-height:1.35;font-weight:700;opacity:0;transition:opacity .2s,transform .2s;white-space:normal;max-width:320px;text-align:center}#toast.on{opacity:1;transform:translate(-50%,0)}
#tools{position:absolute;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom));display:flex;justify-content:center;gap:9px;pointer-events:none}
.tool{position:relative;width:62px;height:70px;border-radius:20px;border:3px solid var(--ink);background:var(--cream);color:var(--ink);box-shadow:0 5px 0 var(--ink);pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:11px;font-weight:700;transition:transform .08s}
.tool .ic{font-size:30px}.tool.on{background:var(--gold);transform:translateY(-8px);box-shadow:0 11px 0 var(--ink)}
.tool.lock{opacity:.4;filter:grayscale(1)}
.tool.pulse{animation:tp .8s ease-in-out infinite}@keyframes tp{50%{transform:translateY(-6px)}}
.tool.hint::after{content:'';position:absolute;inset:-7px;border-radius:24px;border:4px solid #3dff88;animation:ring 1s ease-out infinite}@keyframes ring{from{transform:scale(.9);opacity:1}to{transform:scale(1.2);opacity:0}}
.side-btn{position:absolute;right:calc(12px + env(safe-area-inset-right));bottom:calc(112px + env(safe-area-inset-bottom));width:56px;height:56px;border-radius:50%;border:3px solid var(--ink);background:var(--cream);color:var(--ink);box-shadow:0 4px 0 var(--ink);pointer-events:auto;display:grid;place-items:center;font-size:28px}
.side-btn.blink{animation:tp .7s ease-in-out infinite;background:var(--gold)}
.done-btn{position:absolute;left:calc(12px + env(safe-area-inset-left));bottom:calc(112px + env(safe-area-inset-bottom));width:70px;height:56px;border-radius:28px;border:3px solid var(--ink);background:#3dd68c;color:#fff;box-shadow:0 4px 0 var(--ink);pointer-events:auto;display:grid;place-items:center;font-size:32px;opacity:.55}
.done-btn.ready{opacity:1;animation:tp .7s ease-in-out infinite}
#coach{position:absolute;left:12px;right:12px;top:calc(160px + env(safe-area-inset-top));display:none;pointer-events:none}
#coach.on{display:block}
#coach .box{margin:0 auto;max-width:340px;padding:10px 14px;border-radius:18px;background:var(--cream);color:var(--ink);border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);font-size:16px;font-weight:700;line-height:1.35;text-align:center}
#coach .dots{display:flex;gap:6px;justify-content:center;margin-top:8px}#coach .dots i{width:9px;height:9px;border-radius:50%;background:#c9c3ae}#coach .dots i.on{background:var(--ink)}
#coach .skip{pointer-events:auto;display:block;margin:10px auto 0;padding:7px 18px;border-radius:16px;background:var(--panel);color:#fff;font-size:15px;font-weight:700}
#finger{position:fixed;width:54px;height:54px;z-index:9;pointer-events:none;display:none;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
#finger.on{display:block}
#ui{position:fixed;inset:0;z-index:20;pointer-events:none}#ui>*{pointer-events:auto}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:calc(14px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));overflow:auto;color:#fff}
.scr.dim{background:rgba(10,16,40,.6)}.scr.solid{background:linear-gradient(#5ec3f0,#a8e6ff 60%,#fff2c6)}
.title-row{width:100%;max-width:440px;display:flex;align-items:center;gap:10px;font-size:24px;font-weight:700;margin-bottom:10px}
.title-row .sp{flex:1}
.mid-btn{min-width:48px;height:48px;border-radius:24px;padding:0 14px;border:3px solid var(--ink);background:var(--cream);color:var(--ink);box-shadow:0 4px 0 var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:17px;font-weight:700}
.mid-btn:active,.big-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.big-btn{min-width:200px;height:60px;border-radius:30px;padding:0 26px;border:4px solid var(--ink);background:linear-gradient(#ffb04a,#ff7a1a);color:#fff;box-shadow:0 6px 0 var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:24px;font-weight:700;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.big-btn.blue{background:linear-gradient(#5ac8fa,#2a8fe0)}.big-btn.off{filter:grayscale(1);opacity:.55}
.panel{width:100%;max-width:440px;background:var(--panel);border-radius:22px;padding:14px;border:2px solid rgba(255,255,255,.18);margin-bottom:10px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}.col{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.stage-card{position:relative;border-radius:20px;padding:10px 12px;color:var(--ink);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);display:flex;align-items:center;gap:10px;font-weight:700;cursor:pointer}
.stage-card .num{font-size:28px;min-width:36px;text-align:center}.stage-card .nm{flex:1;font-size:17px;line-height:1.15}
.stage-card .st{display:flex;gap:2px;color:#ffb800;font-size:18px}.stage-card .st .off{color:rgba(0,0,0,.25)}
.stage-card.lock{opacity:.5;filter:grayscale(.6)}.stage-card.cur{outline:4px solid #fff;animation:tp 1s ease-in-out infinite}
.dh{width:100%;max-width:440px;font-size:20px;font-weight:700;margin:10px 0 6px;color:var(--ink);-webkit-text-stroke:0}
.up-row{display:flex;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px solid rgba(255,255,255,.12);font-weight:700;font-size:17px}
.up-row:last-child{border:0}.up-row .nm{flex:1}.up-row .lv{display:flex;gap:3px}.up-row .lv i{width:10px;height:16px;border-radius:3px;background:rgba(255,255,255,.2)}.up-row .lv i.on{background:var(--gold)}
.res-line{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700;padding:3px 0}.res-line .sp{flex:1}.res-line .ic{color:var(--gold)}
.bar5{display:flex;gap:2px;font-size:20px;color:#ffc83a}.bar5 .off{color:rgba(255,255,255,.25)}
.story{max-width:420px;text-align:center;font-size:21px;font-weight:700;line-height:1.5;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.story .who{font-size:16px;color:#ffd23a;margin-bottom:6px}
.stats{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:15px;background:rgba(255,255,255,.14);font-weight:700;font-size:16px}.chip .ic{color:var(--gold)}
.dex-grid{width:100%;max-width:440px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.dex-c{border-radius:14px;background:rgba(255,255,255,.14);padding:6px 2px;text-align:center;font-size:12px;font-weight:700;min-height:74px;display:flex;flex-direction:column;align-items:center;gap:2px;justify-content:center}
.dex-c.lock{opacity:.4}.dex-c .ic{font-size:28px}
#loadMsg{position:fixed;inset:0;display:grid;place-items:center;background:#7cc8ff;z-index:99}#loadMsg.hide{display:none}
.spin{width:46px;height:46px;border-radius:50%;border:6px solid #fff;border-top-color:var(--gold);animation:sp 1s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
#ob{position:fixed;inset:0;z-index:30}
.fade{animation:fd .35s ease-out}@keyframes fd{from{opacity:0}to{opacity:1}}
.res-line span{white-space:nowrap}

#btnDoor{bottom:calc(178px + env(safe-area-inset-bottom))}#btnDoor.blink{animation:tp .7s ease-in-out infinite;background:var(--gold)}

#rival{position:absolute;left:50%;transform:translateX(-50%);top:calc(128px + env(safe-area-inset-top));width:220px;display:flex;align-items:center;gap:6px;color:#fff;font-size:18px}#rival .bar{flex:1;height:12px;border-radius:6px;background:rgba(10,16,40,.55);overflow:hidden;display:flex;border:2px solid rgba(255,255,255,.3)}#rival .bar u{display:block;height:100%}#rvMe{background:linear-gradient(90deg,#5ac8fa,#3dff88)}#rvRv{background:#ff5a5f;margin-left:auto}#icMe{color:#ffd23a}#icRv{color:#ff5a5f}

#goalB{right:calc(10px + env(safe-area-inset-right));top:calc(82px + env(safe-area-inset-top));height:26px;font-size:14px;padding:0 9px}#goalB .ic{color:#6cc9f0}#goalB.ok{background:rgba(30,120,70,.85)}#goalB.ok .ic{color:#3dff88}

#starPrev{position:absolute;left:50%;transform:translateX(-50%);top:calc(110px + env(safe-area-inset-top));display:flex;gap:1px;font-size:13px;color:#ffd23a;filter:drop-shadow(0 1px 0 #1d2540)}#starPrev .off{color:rgba(255,255,255,.3)}
#parts{position:absolute;left:calc(8px + env(safe-area-inset-left));top:calc(150px + env(safe-area-inset-top));width:74px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;border-radius:14px;background:rgba(22,30,62,.72);border:2px solid rgba(255,255,255,.18)}
#partsSvg{width:64px;height:120px;display:block}#partsSvg rect,#partsSvg circle{stroke:#1d2540;stroke-width:1.2;transition:fill .25s}#partsSvg .act{stroke:#fff;stroke-width:2.4}#partsSvg .flash{animation:pf .5s ease-in-out infinite}@keyframes pf{50%{opacity:.35}}
#partLbl{font-size:13px;font-weight:700;color:#fff;text-align:center;line-height:1.15;min-height:30px;max-width:72px}
#stages{display:flex;gap:3px}#stages i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.15);color:#fff;font-size:12px;border:2px solid transparent}#stages i.done{background:#3dd68c}#stages i.cur{border-color:#ffd23a;background:rgba(255,210,58,.35);animation:tp .9s ease-in-out infinite}
.tag.pin{width:36px;height:36px;pointer-events:auto;cursor:pointer}.tag.pin .k{position:absolute;inset:0;border-radius:50%;background:var(--cream);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);display:grid;place-items:center;font-size:18px}.tag.pin .t{position:absolute;right:-9px;bottom:-7px;width:22px;height:22px;border-radius:50%;background:#1d2540;color:#fff;display:grid;place-items:center;font-size:14px;border:2px solid #fff}
.tag.pin.hi .k{background:#ffd23a;transform:scale(1.12)}.tag.pin.dim{opacity:.55}.tag.pin.warn .k{background:#ff5a5f;color:#fff}.tag.pin.miss .k{background:#ff5a5f;color:#fff;animation:pulse .5s ease-in-out infinite}
.tag.pin .lb{position:absolute;top:-24px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:14px;font-weight:700;color:#fff;-webkit-text-stroke:3px #1d2540;paint-order:stroke fill}
.diff-row{display:flex;gap:8px;justify-content:center}