:root{--ink:#2b2142;--cream:#fff8e6;--gold:#ffc83a;--sky:#6cc9f0;--grass:#4fb046;--red:#ff5a5f;--pink:#ff8fb3;--panel:rgba(35,28,60,.72);
  --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:#6cc9f0;font-family:var(--f);color:var(--ink);overscroll-behavior:none;touch-action:none;font-synthesis:none}
button,a{font-family:var(--f);color:inherit;text-decoration:none}
#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}.ic svg{width:100%;height:100%}
.ic-btn{width:46px;height:46px;border-radius:50%;border:3px solid var(--ink);background:var(--cream);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 4px 0 var(--ink);cursor:pointer;padding:0}
.ic-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.big-btn{min-width:200px;height:68px;border-radius:34px;border:4px solid var(--ink);background:linear-gradient(#ffd95a,#ffb52e);color:var(--ink);font-size:28px;font-weight:700;display:inline-flex;gap:10px;align-items:center;justify-content:center;box-shadow:0 6px 0 var(--ink);cursor:pointer;padding:0 28px}
.big-btn.small{min-width:92px;height:58px;padding:0 20px;font-size:24px}
.big-btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--ink)}
.mid-btn{height:54px;min-width:54px;padding:0 14px;border-radius:27px;border:3px solid var(--ink);background:var(--cream);color:var(--ink);font-size:24px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 4px 0 var(--ink);cursor:pointer}
.mid-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.mid-btn b{font-size:16px}
.row{display:flex;gap:12px;justify-content:center;align-items:center}.row.col{flex-direction:column;gap:20px}
.chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:18px;background:var(--panel);color:#fff;font-size:17px;font-weight:700;border:2px solid rgba(255,255,255,.35)}
.chip b{font-weight:700;font-variant-numeric:tabular-nums}
.chip .ic{color:var(--gold)}
/* HUD */
#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
#touchzone{position:absolute;inset:0;pointer-events:auto;touch-action:none}
.tl{position:absolute;left:calc(10px + env(safe-area-inset-left));top:calc(10px + env(safe-area-inset-top));pointer-events:auto;z-index:3}
#top{position:absolute;left:0;right:0;top:calc(14px + env(safe-area-inset-top));display:flex;justify-content:flex-start;gap:6px;padding:0 0 0 62px}
#top .chip{height:38px;padding:0 9px}
#stageChip b{font-size:19px}.zdot{width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--ink)}
#quotaChip .ic{color:#9be37a}#timeChip .ic{color:#ffd1d1}
#coinChip{position:absolute;right:calc(10px + env(safe-area-inset-right));top:calc(14px + env(safe-area-inset-top))}
#goals{position:absolute;left:0;right:0;top:calc(62px + env(safe-area-inset-top));display:flex;gap:8px;justify-content:center}
#goals .g{display:flex;align-items:center;gap:5px;height:32px;padding:0 10px;border-radius:16px;background:rgba(35,28,60,.55);color:#fff;font-size:15px;font-weight:700;border:2px solid rgba(255,255,255,.25)}
#goals .g.ok{background:#2e9a4a;border-color:#bff5c8}
#goals .g .ic{color:var(--gold)}
#bossBar{position:absolute;left:12px;right:12px;top:calc(60px + env(safe-area-inset-top));display:flex;align-items:center;gap:8px}
#bossBar .ic{font-size:30px;color:var(--red);filter:drop-shadow(0 2px 0 var(--ink))}
#bossBar .bar{flex:1;height:18px;border-radius:9px;background:rgba(35,28,60,.7);border:3px solid var(--ink);overflow:hidden;position:relative}
#bossBar .bar u{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(#ff7a7a,#e23c3c);transition:width .12s}
#bossBar .bar s{position:absolute;left:0;top:0;bottom:0;width:100%;background:#ffe6a0;transition:width .7s .25s}
#bossHearts{display:flex;gap:3px;color:var(--red);font-size:22px}
#bossHearts .ic{filter:drop-shadow(0 2px 0 var(--ink))}#bossHearts .gone{color:#555;opacity:.5}
#combo{position:absolute;left:12px;top:calc(110px + env(safe-area-inset-top));color:#fff;opacity:0;transition:opacity .2s;text-shadow:0 3px 0 var(--ink),0 0 10px rgba(0,0,0,.4)}
#combo.on{opacity:1}
#comboN{font-size:44px;font-weight:700;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;display:block;line-height:1}
#comboN::before{content:'x';font-size:26px;margin-right:2px}
.cbar{width:74px;height:8px;border-radius:4px;background:rgba(0,0,0,.4);overflow:hidden;border:2px solid var(--ink)}
.cbar u{display:block;height:100%;width:100%;background:var(--gold)}
#combo.fever #comboN{color:#ff9a3a}#combo.fever .cbar u{background:#ff6a2a}
#ammo{position:absolute;left:12px;bottom:calc(18px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:6px;color:#fff;font-weight:700;font-size:20px;text-shadow:0 2px 0 var(--ink)}
#ammo .row2{display:flex;gap:3px;flex-wrap:wrap;max-width:200px}
#ammo i.a{width:7px;height:30px;border-radius:3px;background:#fff6d8;border:2px solid var(--ink);position:relative}
#ammo i.a::before{content:'';position:absolute;left:-2px;right:-2px;top:-8px;height:8px;background:var(--ink);clip-path:polygon(50% 0,100% 100%,0 100%)}
#ammo i.a.off{opacity:.18}
#ammo.low i.a:not(.off){background:#ff9a9a}
/* 조준 링 */
#aim{position:absolute;width:0;height:0;pointer-events:none}
#aim i{position:absolute;left:0;top:0;border-radius:50%;transform:translate(-50%,-50%)}
#aim .inner{width:var(--r,62px);height:var(--r,62px);border:4px solid rgba(255,255,255,.95);box-shadow:0 0 0 2px var(--ink),inset 0 0 0 2px var(--ink)}
#aim .outer{width:var(--r,62px);height:var(--r,62px);border:5px solid #ffd95a;box-shadow:0 0 0 2px var(--ink);transform:translate(-50%,-50%) scale(2.6)}
#aim .dot{width:10px;height:10px;background:var(--red);border:2px solid var(--ink)}
#aim.lock .inner{border-color:#ff7a7a}
#aim.perfect .inner{border-color:#ffd95a;background:rgba(255,217,90,.28)}
#aim.perfect .outer{border-color:#9be37a}
#aim.over .inner{border-color:#999}
#hint{position:absolute;left:50%;top:48%;transform:translate(-50%,0);font-size:64px;color:#fff;filter:drop-shadow(0 4px 0 var(--ink))}
#hint .ic{width:1em;height:1em;animation:hintMove 2.2s ease-in-out infinite}
@keyframes hintMove{0%{transform:translate(-70px,50px)}30%{transform:translate(0,0)}85%{transform:translate(0,0)}100%{transform:translate(0,0)}}
#pops{position:absolute;inset:0;overflow:hidden}
.pop{position:absolute;transform:translate(-50%,-50%);font-weight:700;font-size:26px;color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;white-space:nowrap;animation:popUp 1s ease-out forwards;display:flex;align-items:center;gap:4px}
.pop.big{font-size:40px;color:var(--gold)}.pop.head{color:#ff8a8a;font-size:32px}.pop.perf{color:#9be37a;font-size:38px}.pop.coin{color:var(--gold)}
@keyframes popUp{0%{opacity:0;transform:translate(-50%,-30%) scale(.5)}12%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}25%{transform:translate(-50%,-70%) scale(1)}100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}
.coinfly{position:absolute;width:20px;height:20px;color:var(--gold);filter:drop-shadow(0 2px 0 var(--ink));transition:transform .7s cubic-bezier(.4,0,.8,.4),opacity .7s;opacity:1}
.coinfly svg{width:100%;height:100%}
#vig{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:0;transition:opacity .3s;background:radial-gradient(ellipse at center,transparent 45%,rgba(255,106,42,.55) 100%)}
#vig.fever{opacity:.55}#vig.hurt{background:radial-gradient(ellipse at center,transparent 35%,rgba(255,40,40,.7) 100%);opacity:1;transition:none}
#vig.slow{background:radial-gradient(ellipse at center,transparent 35%,rgba(20,10,60,.55) 100%);opacity:1}
#banner{position:fixed;left:0;right:0;top:34%;text-align:center;font-size:52px;font-weight:700;color:#fff;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;pointer-events:none;z-index:8;opacity:0;text-shadow:0 6px 0 var(--ink)}
#banner.show{animation:bannerIn 1.5s ease-out forwards}
#banner small{display:block;font-size:30px;margin-top:4px;-webkit-text-stroke:5px var(--ink)}
@keyframes bannerIn{0%{opacity:0;transform:scale(.4)}12%{opacity:1;transform:scale(1.12)}22%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(1)}}
/* 화면 */
.screen{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(18px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom))}
.screen.dim{background:rgba(20,14,40,.62);justify-content:center}
#menu{background:linear-gradient(rgba(108,201,240,.0) 40%,rgba(30,60,30,.35));pointer-events:none}#menu>*{pointer-events:auto}
.hub-link{position:absolute;left:calc(12px + env(safe-area-inset-left));top:calc(12px + env(safe-area-inset-top))}
.logo-wrap{margin-top:46px;text-align:center}
.logo{margin:0;display:flex;flex-direction:column;line-height:.95;font-size:54px;font-weight:700;color:#fff;-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;text-shadow:0 7px 0 var(--ink)}
.logo span:last-child{color:var(--gold)}
.best-m{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:20px;font-weight:700;color:#fff;text-shadow:0 2px 0 var(--ink);background:var(--panel);padding:6px 16px;border-radius:20px}
.best-m .ic{color:var(--gold)}.sep{width:2px;height:18px;background:rgba(255,255,255,.4)}
.menu-bottom{width:100%;display:flex;flex-direction:column;gap:16px;align-items:center}
#pick{display:flex;align-items:center;gap:10px;width:100%;justify-content:center}
#tile{width:min(250px,60vw);border-radius:22px;border:4px solid var(--ink);background:var(--cream);box-shadow:0 5px 0 var(--ink);padding:10px;text-align:center;position:relative;overflow:hidden}
#tile .tz{height:8px;border-radius:4px;margin-bottom:6px}
#tile .tn{font-size:34px;font-weight:700;display:flex;justify-content:center;align-items:center;gap:8px}
#tile .tn .ic{color:var(--red)}
#tile .ta{display:flex;justify-content:center;gap:2px;height:46px}
#tile .ta img{height:46px;width:46px;object-fit:contain}
#tile .tst{display:flex;justify-content:center;gap:4px;font-size:22px;color:#ddd;margin-top:2px}.tst .on{color:var(--gold)}
#tile.lock{opacity:.7;filter:grayscale(.7)}
#tile .lk{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:50px;color:var(--ink);background:rgba(255,248,230,.65)}
.arrow{width:48px;height:48px}
.panel{background:var(--panel);border:3px solid rgba(255,255,255,.35);border-radius:28px;padding:22px 20px;display:flex;flex-direction:column;align-items:center;gap:14px;width:min(340px,92vw);color:#fff}
#over{justify-content:center;background:rgba(20,14,40,.45)}
.over-title{font-size:48px;font-weight:700;color:var(--gold);-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink)}
.over-title.fail{color:#ff8a8a}
.stage-tag{font-size:22px;font-weight:700;display:flex;gap:8px;align-items:center}
.stars-o{display:flex;gap:10px;font-size:54px}
.stars-o .ic{color:#6b6b80;filter:drop-shadow(0 3px 0 var(--ink));transform:scale(.6);opacity:.5}
.stars-o .ic.on{color:var(--gold);animation:starIn .5s cubic-bezier(.3,1.6,.5,1) forwards;opacity:1}
@keyframes starIn{0%{transform:scale(0) rotate(-90deg)}100%{transform:scale(1) rotate(0)}}
.rewards{display:flex;flex-direction:column;gap:6px;width:100%}
.rw{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:700;padding:4px 10px;background:rgba(255,255,255,.1);border-radius:12px}
.rw .ic{color:var(--gold)}.rw .v{margin-left:auto}.rw.goal.ok .ic{color:#9be37a}.rw.goal:not(.ok){opacity:.55}
.acts{margin-top:4px}
.sheet{width:min(360px,94vw);max-height:84vh;background:var(--cream);border:4px solid var(--ink);border-radius:26px;padding:14px;display:flex;flex-direction:column;gap:12px;box-shadow:0 6px 0 var(--ink);overflow:hidden}
.sheet-h{display:flex;justify-content:space-between;align-items:center;font-size:24px;font-weight:700}
.sheet-h .chip{background:var(--ink)}
#dexGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;overflow:auto;touch-action:pan-y}
.dc{aspect-ratio:1;border-radius:12px;background:#fff;border:2px solid var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}
.dc img{width:90%;height:90%;object-fit:contain}
.dc.no img{filter:brightness(0) opacity(.28)}
.dc b{position:absolute;right:3px;bottom:1px;font-size:13px;color:var(--ink)}
.dc.boss{border-color:var(--red)}
.dz{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700}.dz i{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink)}
#upgList{display:flex;flex-direction:column;gap:8px;overflow:auto;touch-action:pan-y}
.ur{display:flex;align-items:center;gap:10px;background:#fff;border:3px solid var(--ink);border-radius:16px;padding:8px 10px}
.ur>.ic{font-size:32px;color:var(--ink)}
.ur .nm{font-size:17px;font-weight:700;min-width:64px}
.pips{display:flex;gap:3px;flex:1;flex-wrap:wrap}.pips i{width:10px;height:14px;border-radius:3px;background:#ddd;border:2px solid var(--ink)}.pips i.on{background:var(--gold)}
.ur button{height:44px;min-width:84px;border-radius:22px;border:3px solid var(--ink);background:var(--gold);font-size:18px;font-weight:700;display:inline-flex;gap:4px;align-items:center;justify-content:center;box-shadow:0 3px 0 var(--ink);cursor:pointer}
.ur button:disabled{background:#c9c9c9;opacity:.7}
.ur button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
#loading{background:linear-gradient(#8fd3f4,#74d05a);justify-content:center;z-index:50;transition:opacity .4s}
#loading.done{opacity:0;pointer-events:none}
.spin{width:54px;height:54px;border-radius:50%;border:7px solid rgba(255,255,255,.4);border-top-color:#fff;animation:sp 1s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
#nogl{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#222;color:#fff;font-size:40px;z-index:99}

.sec{display:flex;justify-content:center;font-size:26px;color:var(--ink);opacity:.7;padding-top:4px}
.ur.gr{padding:6px 8px;gap:8px}.ur.gr.on{border-color:#2e9a4a;background:#effbe9}.ur.gr img{object-fit:contain;flex:none}
.sts{display:flex;flex-wrap:wrap;gap:3px 8px;flex:1;font-size:14px}.st{display:inline-flex;align-items:center;gap:2px;font-weight:700}.st .ic{color:var(--ink);font-size:14px}
.ur button.eq{background:#9be37a}.ur.gr button{min-width:76px}
.dz b{margin-left:auto;font-size:13px}

#over .panel{max-height:94vh;overflow-y:auto;touch-action:pan-y}
#over .panel::-webkit-scrollbar{display:none}

#hofForm,.hof-pop{color:#07131d}
#bossBar .bar s{z-index:0}#bossBar .bar u{z-index:1}
#dexGrid{grid-auto-rows:60px;align-content:start;min-height:0;flex:1}.dc{aspect-ratio:auto;min-height:0}
.dz{grid-column:1/-1;height:24px}

.pop.newsp{font-size:24px;color:#9be37a;-webkit-text-stroke:4px var(--ink)}

#dexGrid{grid-auto-rows:auto}.dc{height:60px}.dz{height:auto;padding-top:4px}
.ur.gr img{background:#efe6cf;border-radius:10px;padding:2px}