:root{--ink:#2a1a14;--cream:#fff4dc;--gold:#ffc83a;--red:#ff4a4a;--panel:rgba(42,26,20,.78);--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:#f6c98a;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;touch-action:none}
#fx{position:fixed;inset:0;pointer-events:none;z-index:2}
[hidden]{display:none!important}
.ic{display:inline-flex;width:1.1em;height:1.1em;vertical-align:middle}.ic svg{width:100%;height:100%}
#vig{position:fixed;inset:0;pointer-events:none;z-index:3;opacity:0;transition:opacity .25s;background:radial-gradient(ellipse at center,rgba(60,120,255,0) 45%,rgba(40,90,255,.5) 100%);mix-blend-mode:multiply}
#vig.on{opacity:1}
#smoke{position:fixed;inset:0;pointer-events:none;z-index:3;opacity:0;transition:opacity .5s;background:radial-gradient(circle at 30% 40%,rgba(255,120,40,.55),transparent 55%),radial-gradient(circle at 75% 60%,rgba(220,60,30,.55),transparent 55%),rgba(140,50,20,.35)}
#smoke.on{opacity:1}
#flashw{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:0;background:#fff}
#flashw.on{opacity:.85;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:30px;color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink);animation:pop .9s ease-out forwards}
.pop.big{font-size:44px;color:#ffd23a}.pop.pts{font-size:22px;color:#fff6c0}.pop.bad{color:#ff6a6a}.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}}
#hud{position:fixed;inset:0;pointer-events:none;z-index:5;color:#fff}
.btn-ic{position:absolute;width:44px;height:44px;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))}
#scoreB{position:absolute;left:50%;transform:translateX(-50%);top:calc(8px + env(safe-area-inset-top));font-size:34px;font-weight:700;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink);font-variant-numeric:tabular-nums;line-height:1.1}
#hearts{position:absolute;right:calc(10px + env(safe-area-inset-right));top:calc(12px + env(safe-area-inset-top));display:flex;gap:2px;max-width:42vw;flex-wrap:wrap;justify-content:flex-end}
#hearts .ic{font-size:22px;color:#ff4a6a;filter:drop-shadow(0 2px 0 var(--ink))}#hearts .off{color:#6a5a5a;opacity:.55}
#hearts.hit{animation:shk .4s}
@keyframes shk{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
#goalB{position:absolute;left:calc(12px + env(safe-area-inset-left));top:calc(62px + env(safe-area-inset-top));display:inline-flex;align-items:center;gap:6px;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)}
#goalB .ic{color:var(--gold)}#goalB b{font-variant-numeric:tabular-nums}
#timeBar{position:absolute;left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right));top:calc(98px + env(safe-area-inset-top));height:7px;border-radius:4px;background:rgba(42,26,20,.5);overflow:hidden}
#timeBar u{display:block;height:100%;width:100%;background:linear-gradient(90deg,#9fe8ff,#4aa8ff);transform-origin:left}
#timeBar.low u{background:linear-gradient(90deg,#ff9a6a,#ff4a4a)}
#orders{position:absolute;left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right));top:calc(112px + env(safe-area-inset-top));display:flex;gap:6px;flex-wrap:wrap}
#orders span{padding:3px 10px;border-radius:12px;background:var(--panel);font-size:15px;font-weight:700;border:2px solid rgba(255,255,255,.3)}
#orders span.on{background:#ffd23a;color:var(--ink);border-color:var(--ink)}#orders span.done{opacity:.4;text-decoration:line-through}
#comboB{position:absolute;right:calc(12px + env(safe-area-inset-right));top:calc(58px + env(safe-area-inset-top));font-size:34px;font-weight:700;color:#ffd23a;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink);transform-origin:right center}
#comboB.bump{animation:bump .18s}
@keyframes bump{0%{transform:scale(1.5)}100%{transform:scale(1)}}
#focusB{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom));width:min(60vw,240px);height:12px;border-radius:6px;background:rgba(42,26,20,.55);border:2px solid rgba(255,255,255,.5);overflow:hidden}
#focusB u{display:block;height:100%;width:0;background:linear-gradient(90deg,#9fe8ff,#fff);transform-origin:left}
#bossB{position:absolute;left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right));top:calc(114px + env(safe-area-inset-top));height:14px;border-radius:7px;background:rgba(42,26,20,.6);border:2px solid #fff;overflow:hidden}
#bossB u{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff6a4a,#ffb04a);transform-origin:left}
#cd{position:absolute;left:0;right:0;top:34%;text-align:center;font-size:84px;font-weight:700;color:#fff;-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;text-shadow:0 8px 0 var(--ink)}
#cd small{display:block;font-size:30px;-webkit-text-stroke:5px var(--ink)}
.scr{position:fixed;inset:0;z-index:20;background:linear-gradient(#ffe9c4,#f6c98a);overflow:auto;padding:calc(14px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom));touch-action:pan-y}
.scr h2{margin:6px 0 10px;font-size:26px;text-align:center}
.scr .top{display:flex;align-items:center;gap:8px;justify-content:space-between}
.scr .coin{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:17px;background:var(--panel);color:#fff;font-weight:700;font-size:18px}.scr .coin .ic{color:var(--gold)}
.chip-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;padding:0 14px;border-radius:22px;border:3px solid var(--ink);background:var(--cream);box-shadow:0 4px 0 var(--ink);font-weight:700;font-size:17px}
.chip-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.knives{display:flex;gap:8px;margin:10px 0;justify-content:center}
.knives button{flex:1;max-width:120px;padding:8px 6px;border-radius:14px;border:3px solid var(--ink);background:var(--cream);box-shadow:0 4px 0 var(--ink);font-size:15px;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:2px}
.knives button.sel{background:#ffd23a}.knives button.lock{opacity:.7}
.knives .kc{width:36px;height:5px;border-radius:3px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:6px}
.cell{position:relative;padding:10px 10px 8px;border-radius:16px;border:3px solid var(--ink);background:var(--cream);box-shadow:0 5px 0 var(--ink);text-align:left;display:flex;flex-direction:column;gap:3px;min-height:88px}
.cell:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.cell.lock{opacity:.55;filter:grayscale(.6)}
.cell .no{font-size:24px;font-weight:700}.cell .nm{font-size:15px;font-weight:700}
.cell .gl{display:flex;align-items:center;gap:5px;font-size:15px}.cell .gl .ic{color:#c0392b}
.cell .stars{display:flex;gap:2px;margin-top:auto}.cell .stars .ic{font-size:18px;color:#ddc9a5}.cell .stars .on{color:#ffb000}
.cell .lk{position:absolute;right:10px;top:10px;font-size:22px}
.cell.boss{background:#ffe0d6}
#ob{position:fixed;inset:0;z-index:15;pointer-events:none}
#obp{position:absolute;left:12px;right:12px;bottom:calc(18px + env(safe-area-inset-bottom));padding:12px 14px;border-radius:18px;background:var(--panel);color:#fff;pointer-events:auto;display:flex;flex-direction:column;gap:10px;border:3px solid rgba(255,255,255,.4)}
#obp .tx{font-size:19px;font-weight:700;line-height:1.35;text-align:center}
#obp .row{display:flex;align-items:center;justify-content:space-between;gap:8px}
#obp .dots{display:flex;gap:6px}#obp .dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.35)}#obp .dots i.on{background:#ffd23a}
#obp .chip-btn{height:38px;font-size:16px;min-width:0}
#finger{position:fixed;z-index:16;width:46px;height:60px;pointer-events:none;margin:-6px 0 0 -22px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.35))}
#finger svg{width:100%;height:100%}
#helpBtn{position:fixed;z-index:12;right:calc(12px + env(safe-area-inset-right));bottom:calc(120px + env(safe-area-inset-bottom))}
#loadMsg{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#f6c98a}
.spin{width:44px;height:44px;border-radius:50%;border:6px solid rgba(42,26,20,.2);border-top-color:#2a1a14;animation:sp 0.9s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
#nogl{position:fixed;inset:0;z-index:60;background:#fff;display:flex;align-items:center;justify-content:center;font-size:30px}

.bal{position:absolute;transform:translate(-50%,-50%);text-align:center;animation:balIn 1.5s ease-out forwards;color:#fff}
.bal small{display:block;font-size:20px;font-weight:700;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill}
.bal b{display:block;font-size:44px;font-weight:700;line-height:1.05;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink);font-variant-numeric:tabular-nums}
.bal .bar{display:flex;width:150px;height:14px;margin:4px auto 0;border-radius:7px;border:3px solid var(--ink);overflow:hidden;background:#fff}
.bal .bar i{display:block;background:#4ab0ff}.bal .bar u{display:block;background:#ff8a4a}
.bal.perfect b,.bal.perfect small{color:#ffd23a}.bal.good b{color:#9fffb0}.bal.miss b,.bal.miss small{color:#ff7a7a}
.bal.miss{animation:balMiss 1.5s ease-out forwards}
@keyframes balIn{0%{transform:translate(-50%,-30%) scale(.3);opacity:0}12%{transform:translate(-50%,-60%) scale(1.2);opacity:1}25%{transform:translate(-50%,-60%) scale(1)}80%{opacity:1}100%{transform:translate(-50%,-130%) scale(1);opacity:0}}
@keyframes balMiss{0%{transform:translate(-50%,-30%) rotate(-12deg) scale(.3);opacity:0}12%{transform:translate(-50%,-60%) rotate(8deg) scale(1.2);opacity:1}25%{transform:translate(-50%,-60%) rotate(-5deg) scale(1)}80%{opacity:1}100%{transform:translate(-50%,-120%) rotate(0) scale(1);opacity:0}}