:root{--ink:#23303a;--cream:#fff7e0;--gold:#ffc83a;--red:#ff5a4a;--green:#6adf6a;--panel:rgba(35,48,58,.8);--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;-webkit-touch-callout:none}
html,body{margin:0;height:100%;overflow:hidden;background:#8fcf6a;font-family:var(--f);color:var(--ink);overscroll-behavior:none;font-synthesis:none}
button{font-family:var(--f);color:inherit;border:0;background:none;padding:0;cursor:pointer}
#c{position:fixed;inset:0;display:block;width:100%;height:100%;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%;fill:currentColor}
#rings{position:fixed;inset:0;pointer-events:none;z-index:2}
#rings i{position:absolute;transform:translate(-50%,-50%);font-style:normal;font-weight:700;font-size:15px;color:#fff;-webkit-text-stroke:4px rgba(35,48,58,.85);paint-order:stroke fill;font-variant-numeric:tabular-nums;opacity:.9}
#rings i.big{font-size:17px;opacity:1}
#vig{position:fixed;inset:0;pointer-events:none;z-index:3;opacity:0;transition:opacity .3s;background:radial-gradient(ellipse at center,rgba(255,60,40,0) 50%,rgba(255,40,30,.5) 100%)}
#vig.on{opacity:1}#vig.slow{background:radial-gradient(ellipse at center,rgba(60,140,255,0) 45%,rgba(40,100,255,.5) 100%)}
#flashw{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:0;background:#fff}
#flashw.on{opacity:.55;transition:none}#flashw.off{transition:opacity .25s}
#pops{position:fixed;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.pop{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font-weight:700;font-size:26px;color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;animation:pop .95s ease-out forwards}
.pop.big{font-size:42px;color:#ffd23a}.pop.pts{font-size:20px;color:#fff6c0}.pop.bad{color:#ff7a6a}.pop.cool{color:#9fe8ff}
@keyframes pop{0%{transform:translate(-50%,-30%) scale(.4);opacity:0}15%{transform:translate(-50%,-60%) scale(1.25);opacity:1}30%{transform:translate(-50%,-70%) scale(1)}100%{transform:translate(-50%,-190%) scale(1);opacity:0}}
#aimL{position:fixed;z-index:5;pointer-events:none;transform:translate(-50%,-100%);padding:4px 10px;border-radius:14px;background:var(--panel);color:#fff;font-weight:700;font-size:18px;white-space:nowrap;font-variant-numeric:tabular-nums;border:2px solid rgba(255,255,255,.4)}
#aimL b{color:#ffd23a;font-size:22px}#aimL.bad{background:rgba(180,40,40,.85)}
#hud{position:fixed;inset:0;pointer-events:none;z-index:5;color:#fff}
.btn-ic{position:absolute;width:46px;height:46px;border-radius:50%;border:3px solid var(--ink);background:var(--cream);color:var(--ink);font-size:22px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 0 var(--ink);pointer-events:auto}
.btn-ic:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
#btnPause{left:calc(10px + env(safe-area-inset-left));top:calc(10px + env(safe-area-inset-top))}
#hpB{position:absolute;left:calc(66px + env(safe-area-inset-left));right:calc(110px + env(safe-area-inset-right));top:calc(12px + env(safe-area-inset-top));height:30px;display:flex;align-items:center;gap:6px}
#hpB .ic{font-size:26px;color:#ff6a7a;filter:drop-shadow(0 2px 0 var(--ink));flex:none}
#hpB .bar{flex:1;height:18px;border-radius:9px;background:rgba(35,48,58,.7);border:3px solid var(--ink);overflow:hidden}
#hpB .bar u{display:block;height:100%;width:100%;background:linear-gradient(90deg,#6adf6a,#b8f06a);transform-origin:left;transition:background .3s}
#hpB.low .bar u{background:linear-gradient(90deg,#ff5a4a,#ffa04a);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.55}}
#hpB.hit{animation:shk .35s}
@keyframes shk{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
#windB{position:absolute;right:calc(10px + env(safe-area-inset-right));top:calc(8px + env(safe-area-inset-top));width:92px;height:46px;border-radius:14px;background:var(--panel);display:flex;align-items:center;justify-content:center;gap:6px;font-weight:700;font-size:17px;border:2px solid rgba(255,255,255,.35)}
#windB .arr{width:26px;height:26px;display:inline-block}#windB .arr svg{width:100%;height:100%;fill:#9fe8ff;transition:transform .3s}
#windB b{font-variant-numeric:tabular-nums}
#infoB{position:absolute;left:calc(12px + env(safe-area-inset-left));top:calc(62px + env(safe-area-inset-top));display:flex;gap:8px}
#infoB span{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px;border-radius:15px;background:var(--panel);font-size:17px;font-weight:700;border:2px solid rgba(255,255,255,.3);font-variant-numeric:tabular-nums}
#infoB .ic{color:var(--gold)}
#scoreB{position:absolute;right:calc(12px + env(safe-area-inset-right));top:calc(62px + env(safe-area-inset-top));font-size:30px;font-weight:700;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;font-variant-numeric:tabular-nums;line-height:1.1}
#comboB{position:absolute;right:calc(12px + env(safe-area-inset-right));top:calc(98px + env(safe-area-inset-top));font-size:26px;font-weight:700;color:#ffd23a;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill}
#distB{position:absolute;left:50%;transform:translateX(-50%);top:calc(104px + env(safe-area-inset-top));display:inline-flex;align-items:center;gap:6px;padding:4px 14px;border-radius:18px;background:var(--panel);font-weight:700;font-size:22px;border:2px solid rgba(255,255,255,.35);font-variant-numeric:tabular-nums}
#distB.warn{background:rgba(200,50,40,.9);animation:pulse .8s ease-in-out infinite}
@keyframes pulse{50%{transform:translateX(-50%) scale(1.08)}}
#bombs{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom));display:flex;gap:10px;pointer-events:auto}
.bb{position:relative;width:66px;height:66px;border-radius:20px;border:3px solid var(--ink);background:var(--cream);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 0 var(--ink);overflow:hidden}
.bb .ic{font-size:30px}.bb b{font-size:15px;line-height:1;margin-top:1px;font-variant-numeric:tabular-nums}
.bb.on{background:#ffd23a;transform:translateY(-6px)}
.bb.empty{opacity:.4}
.bb u{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(35,48,58,.45);pointer-events:none}
.bb.a-he .ic{color:#ff7a2a}.bb.a-cluster .ic{color:#c88a00}.bb.a-smoke .ic{color:#7d8ea6}.bb.a-flare .ic{color:#e0b800}
#banner{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-size:44px;font-weight:700;color:#fff;-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;opacity:0;white-space:nowrap}
#banner.on{animation:ban 1.3s ease-out}
@keyframes ban{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}30%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0}}
.scr{position:fixed;inset:0;z-index:8;background:linear-gradient(#bfe6ff,#8fcf6a);overflow:auto;padding:calc(16px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom))}
.scr h2{margin:0 0 10px;text-align:center;font-size:30px;color:#fff;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill}
.scr .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.scr .world{margin:14px 0 6px;font-weight:700;font-size:20px;color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.cell{aspect-ratio:1;border-radius:16px;border:3px solid var(--ink);background:var(--cream);box-shadow:0 4px 0 var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:24px;font-weight:700;position:relative}
.cell.boss{background:#ffd9a0}.cell.lock{opacity:.5;background:#cfd6dc}.cell .stars{display:flex;gap:1px;font-size:13px;color:#d9d9d9}.cell .stars .on{color:#ffb800}
.cell:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.upg{display:flex;align-items:center;gap:10px;background:var(--cream);border:3px solid var(--ink);border-radius:18px;padding:10px 12px;margin:8px 0;box-shadow:0 4px 0 var(--ink)}
.upg .ic{font-size:34px;color:#2dadb7}.upg .nm{flex:1;font-weight:700;font-size:18px}.upg .lv{display:flex;gap:4px;margin-top:4px}.upg .lv i{width:16px;height:8px;border-radius:4px;background:#ccc}.upg .lv i.on{background:#2dadb7}
.upg button{min-width:84px;height:44px;border-radius:14px;border:3px solid var(--ink);background:#ffd23a;font-weight:700;font-size:17px;display:inline-flex;align-items:center;justify-content:center;gap:4px;box-shadow:0 3px 0 var(--ink)}
.upg button[disabled]{opacity:.45}
.mini{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:19px;background:var(--cream);border:3px solid var(--ink);font-weight:700;font-size:17px;box-shadow:0 3px 0 var(--ink)}
.mini .ic{color:#d99a00}
#ob{position:fixed;left:12px;right:12px;top:calc(150px + env(safe-area-inset-top));z-index:7;pointer-events:none;display:flex;justify-content:center}
#ob .card{pointer-events:auto;width:min(420px,100%);padding:12px 14px;border-radius:20px;background:var(--cream);border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink)}
#ob .tx{font-size:18px;font-weight:700;line-height:1.35;margin-bottom:10px}
#ob .row{display:flex;align-items:center;gap:8px}#ob .dots{flex:1;display:flex;gap:6px}#ob .dots i{width:10px;height:10px;border-radius:50%;background:#c9c0a8}#ob .dots i.on{background:#ff7a2a}
#ob button{height:40px;padding:0 16px;border-radius:14px;border:3px solid var(--ink);font-weight:700;font-size:16px;box-shadow:0 3px 0 var(--ink);background:#ffd23a}#ob button.sk{background:#e8e2cf}
#finger{position:fixed;z-index:9;width:56px;height:72px;pointer-events:none;transform:translate(-30%,-8%);filter:drop-shadow(0 4px 0 rgba(0,0,0,.25))}
#loadMsg{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#bfe6ff}
.spin{width:44px;height:44px;border-radius:50%;border:6px solid #fff;border-top-color:#2dadb7;animation:sp .8s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
#nogl{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#fff;font-size:28px;z-index:30}

#waveB b{color:#ffd23a}
#nextB{position:absolute;right:calc(12px + env(safe-area-inset-right));top:calc(138px + env(safe-area-inset-top));pointer-events:auto;display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 14px;border-radius:21px;background:#ffd23a;border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);font-weight:700;font-size:16px;color:var(--ink)}
#nextB b{font-size:14px;color:#7a4a00}#nextB:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
#newR{position:absolute;left:calc(12px + env(safe-area-inset-left));top:calc(146px + env(safe-area-inset-top));display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:16px;background:var(--cream);color:var(--ink);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);font-size:17px;animation:ban2 .4s ease-out}
#newR i{font-style:normal;background:#ff5a4a;color:#fff;border-radius:8px;padding:1px 6px;font-size:13px;font-weight:700}#newR .ic{font-size:22px;color:#e8553a}
@keyframes ban2{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
#perkB{position:absolute;inset:0;pointer-events:auto;background:rgba(20,30,40,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px}
#perkB .ph{font-size:26px;font-weight:700;color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill}
#perkB .pc{display:flex;gap:10px;width:min(420px,100%)}
#perkB button{flex:1;min-height:150px;border-radius:20px;background:var(--cream);border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--ink);padding:8px 4px}
#perkB button .ic{font-size:42px;color:#2dadb7}#perkB button b{font-size:16px}#perkB button em{font-style:normal;font-weight:700;font-size:22px;color:#e8553a}
#perkB button:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.rx{display:flex;align-items:center;justify-content:center;gap:6px;margin:4px 0;font-size:17px}.rx .ic{font-size:22px;color:#d99a00}
