:root{--ink:#1b2433;--cream:#fff8e6;--gold:#ffc83a;--sky:#52b8ff;--red:#ff5a5f;--teal:#2dadb7;--panel:rgba(255,255,255,.94);--f:var(--kp-font,'KekeFont','Apple SD Gothic Neo','Noto Sans KR',system-ui,sans-serif);--st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px)}
*{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:#52b8ff;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;cursor:pointer}
#c,#fx{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
#fx{pointer-events:none;z-index:2}
[hidden]{display:none!important}
svg{fill:currentColor}
.ic{display:inline-flex;width:1.1em;height:1.1em;vertical-align:middle}.ic svg{width:100%;height:100%}
#hud{position:fixed;inset:0;pointer-events:none;z-index:5;color:var(--ink)}
#touch{position:absolute;inset:0;pointer-events:auto;touch-action:none}
#hud button{pointer-events:auto}
.ic-btn{position:absolute;left:calc(12px + env(safe-area-inset-left));top:calc(12px + var(--st));width:46px;height:46px;border-radius:16px;background:var(--panel);display:grid;place-items:center;box-shadow:0 4px 0 rgba(27,36,51,.2),0 8px 18px rgba(27,36,51,.18);font-size:22px}
.ic-btn:active{transform:translateY(2px)}
.pill{position:absolute;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-radius:16px;background:var(--ink);color:#fff;font-size:20px;font-weight:700;box-shadow:0 6px 16px rgba(27,36,51,.3)}
.pill b{font-weight:700;font-variant-numeric:tabular-nums}
#predB{left:50%;top:calc(12px + var(--st));transform:translateX(-50%);height:46px;font-size:24px;min-width:128px;justify-content:center;transition:background .12s,color .12s,transform .12s}
#predB.gold{background:var(--gold);color:var(--ink);transform:translateX(-50%) scale(1.14)}
#coinB{right:calc(12px + env(safe-area-inset-right));top:calc(12px + var(--st))}
#fatB{position:absolute;left:calc(14px + env(safe-area-inset-left));bottom:calc(126px + var(--sb));display:flex;align-items:center;gap:6px;color:var(--ink);font-size:20px;background:rgba(255,255,255,.8);border-radius:12px;padding:5px 9px}
#fatB .bar{width:78px;height:10px;border-radius:6px;background:rgba(27,36,51,.18);overflow:hidden}
#fatB u{display:block;height:100%;width:0;background:linear-gradient(90deg,#5ad06a,#ffc83a,#ff5a5f);background-size:78px 100%;border-radius:6px}
#fatB.warn{animation:blink .5s steps(2) infinite}
@keyframes blink{50%{background:rgba(255,90,95,.55)}}
#holdB{position:absolute;left:calc(22px + env(safe-area-inset-left));bottom:calc(30px + var(--sb));width:84px;height:84px;border-radius:50%;border:5px solid rgba(255,255,255,.85);background:rgba(27,36,51,.28);display:grid;place-items:center;transition:transform .08s,background .08s,border-color .08s}
#holdB i{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.85);transition:transform .08s}
#holdB.cue{border-color:var(--gold);box-shadow:0 0 0 6px rgba(255,200,58,.35);animation:cue .5s ease-in-out infinite alternate}
#holdB.on{background:var(--gold);transform:scale(.92)}#holdB.on i{transform:scale(1.4);background:var(--ink)}
@keyframes cue{to{box-shadow:0 0 0 14px rgba(255,200,58,.12)}}
#btnJump{position:absolute;right:calc(18px + env(safe-area-inset-right));bottom:calc(26px + var(--sb));width:104px;height:104px;border-radius:50%;background:var(--gold);color:var(--ink);border:5px solid var(--ink);box-shadow:0 7px 0 var(--ink);display:grid;place-items:center;font-size:52px;transition:transform .08s}
#btnJump:active{transform:translateY(5px);box-shadow:0 2px 0 var(--ink)}
#btnJump.gold{animation:glow .35s ease-in-out infinite alternate;background:#ffe27a}
@keyframes glow{to{box-shadow:0 7px 0 var(--ink),0 0 36px 12px rgba(255,214,60,.85)}}
#pitchB{position:absolute;right:calc(26px + env(safe-area-inset-right));top:32%;width:14px;height:34%;border-radius:8px;background:rgba(255,255,255,.55);border:3px solid rgba(27,36,51,.5)}
#pitchB i{position:absolute;left:-9px;width:32px;height:32px;border-radius:50%;background:var(--gold);border:4px solid var(--ink);top:50%;margin-top:-16px}
#spdB{position:absolute;left:50%;bottom:calc(20px + var(--sb));transform:translateX(-50%);color:#fff;text-shadow:0 2px 0 rgba(27,36,51,.5);font-size:34px;font-weight:700;text-align:center}
#spdB small{font-size:15px;margin-left:4px}
#liveB{position:absolute;left:50%;top:calc(12px + var(--st));transform:translateX(-50%);min-width:150px;height:56px;padding:0 18px;border-radius:18px;background:var(--ink);color:#fff;font-size:32px;font-weight:700;display:grid;place-items:center;box-shadow:0 6px 16px rgba(27,36,51,.3)}
#pops{position:absolute;inset:0;overflow:hidden}
.pop{position:absolute;left:50%;top:34%;transform:translate(-50%,0);font-size:40px;font-weight:700;color:#fff;-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;white-space:nowrap;animation:pop 1.25s ease-out forwards}
.pop.gold{color:var(--gold)}.pop.red{color:var(--red)}.pop.sm{font-size:28px;top:42%}
@keyframes pop{0%{transform:translate(-50%,10px) scale(.4);opacity:0}15%{transform:translate(-50%,0) scale(1.2);opacity:1}30%{transform:translate(-50%,0) scale(1)}100%{transform:translate(-50%,-70px) scale(1);opacity:0}}
#vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(255,60,60,0) 100%);transition:background .2s}
#ob{position:fixed;inset:0;z-index:30;pointer-events:none}
#obTxt{position:absolute;left:50%;top:calc(116px + var(--st));transform:translateX(-50%);width:min(88vw,380px);padding:12px 16px;border-radius:18px;background:var(--panel);font-size:19px;font-weight:700;text-align:center;line-height:1.35;box-shadow:0 6px 18px rgba(27,36,51,.25)}
#obHand{position:absolute;width:76px;height:76px;color:#fff;filter:drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 0 3px var(--ink));transition:left .3s,top .3s}
#obHand.press{animation:press .9s ease-in-out infinite}
#obHand.drag{animation:drag 1.4s ease-in-out infinite}
#obHand.hold{transform:translate(0,8px) scale(.9)}
@keyframes press{50%{transform:translate(0,10px) scale(.88)}}
@keyframes drag{0%,100%{transform:translate(0,30px)}50%{transform:translate(0,-40px)}}
#obDots{position:absolute;left:50%;top:calc(186px + var(--st));transform:translateX(-50%);display:flex;gap:7px}
#obDots i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.7);border:2px solid var(--ink)}#obDots i.on{background:var(--gold)}
#obSkip{position:absolute;right:calc(14px + env(safe-area-inset-right));top:calc(64px + var(--st));width:40px;height:40px;border-radius:14px;background:var(--panel);display:grid;place-items:center;pointer-events:auto;font-size:20px}
.sheet{position:fixed;inset:0;z-index:20;background:rgba(27,36,51,.55);display:flex;align-items:flex-end;justify-content:center;touch-action:pan-y}
.sheet .box{width:min(100%,460px);max-height:86vh;overflow:auto;background:var(--cream);border-radius:26px 26px 0 0;padding:16px 14px calc(18px + var(--sb));border:4px solid var(--ink);border-bottom:0;touch-action:pan-y}
.sheet h2{margin:0 0 10px;font-size:24px;display:flex;align-items:center;justify-content:space-between}
.sheet .x{width:42px;height:42px;border-radius:14px;background:#fff;border:3px solid var(--ink);display:grid;place-items:center;font-size:20px}
.card{display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:10px;border-radius:18px;background:#fff;border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);width:100%;text-align:left}
.card.lock{opacity:.5}
.card .th{width:64px;height:64px;border-radius:14px;flex:none;border:3px solid var(--ink)}
.card .nm{font-size:20px;font-weight:700}.card .sub{font-size:14px;opacity:.75;margin-top:2px}
.card .rt{margin-left:auto;text-align:right;font-weight:700;font-size:18px}
.card .dots{display:flex;gap:4px;margin-top:6px}.card .dots i{width:14px;height:14px;border-radius:50%;background:#d6dae4;border:2px solid var(--ink)}.card .dots i.on{background:var(--gold)}
.buy{padding:9px 14px;border-radius:14px;background:var(--gold);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);font-size:17px;font-weight:700;display:inline-flex;align-items:center;gap:6px}
.buy:disabled{background:#d6dae4;opacity:.7;box-shadow:none}
#loadMsg{position:fixed;inset:0;z-index:60;background:#52b8ff;display:grid;place-items:center}
.spin{width:44px;height:44px;border-radius:50%;border:6px solid #fff;border-top-color:var(--gold);animation:sp 1s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
#nogl{position:fixed;inset:0;display:grid;place-items:center;background:#222;color:#fff;font-size:30px;z-index:99}
@media (min-aspect-ratio:1/1){#btnJump{width:120px;height:120px}}
#goalB{left:50%;top:calc(64px + var(--st));transform:translateX(-50%);height:32px;font-size:16px;background:rgba(255,255,255,.9);color:var(--ink)}
#hud.fly #goalB{top:calc(76px + var(--st))}
.wst{display:flex;gap:2px;justify-content:flex-end;margin-top:4px}.wst i{width:18px;height:18px;color:#d6dae4}.wst i.on{color:var(--gold)}.wst svg{width:100%;height:100%;stroke:var(--ink);stroke-width:1.5}
.hats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.hatb{position:relative;aspect-ratio:1;border-radius:16px;background:#fff;border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);display:grid;place-items:center}
.hatb canvas{width:70%;height:70%}.hatb.on{background:#fff2c2;border-color:var(--gold);box-shadow:0 3px 0 #b8860b}.hatb.lock canvas{opacity:.3}.hatb b{position:absolute;bottom:4px;right:6px;font-size:14px;display:flex;align-items:center;gap:2px}
.newhat{display:inline-flex;align-items:center;gap:6px;margin:6px auto;padding:6px 12px;border-radius:14px;background:#fff2c2;border:3px solid var(--ink);font-size:17px}.newhat svg{width:20px;height:20px;color:#e0a000}
#btnBoost{position:absolute;right:calc(18px + env(safe-area-inset-right));bottom:calc(26px + var(--sb));width:96px;height:96px;border-radius:50%;background:#ff7a2a;color:#fff;border:5px solid var(--ink);box-shadow:0 7px 0 var(--ink);display:grid;place-items:center;font-size:46px}
#btnBoost:active{transform:translateY(5px);box-shadow:0 2px 0 var(--ink)}
#btnBoost b{position:absolute;right:-6px;top:-6px;min-width:30px;height:30px;border-radius:15px;background:var(--gold);color:var(--ink);border:3px solid var(--ink);font-size:17px;display:grid;place-items:center}
#goalB.bad{background:#ffd6d6}