:root{--font-display: "Lilita One", "Fredoka", system-ui, sans-serif;--font-body: "Fredoka", system-ui, sans-serif;--ink: #1d1530;--white: #ffffff;--cream: #fff8e7;--green: #4fd14a;--green-d: #2b9c2f;--blue: #3d9bff;--blue-d: #1f67c9;--yellow: #ffcf2e;--yellow-d: #d99a12;--orange: #ff8a2b;--orange-d: #d2601b;--red: #ff4d5e;--red-d: #c42638;--purple: #a463ff;--purple-d: #6f36c9;--pink: #ff5fa8;--pink-d: #c93478;--grey: #c9d3dd;--grey-d: #8e9aa8;--panel: #fff8e7;--panel-d: #f0d9a8;--r-common: #c9d3dd;--r-uncommon: #6fd35a;--r-rare: #4aa8ff;--r-epic: #b565f2;--r-legendary: #ffb627;--r-mythic: #ff4f8b;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px);--hud-scale: 1}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:#8fd3ff;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}body{font-family:var(--font-body);color:var(--ink)}#game{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none}#ui{position:fixed;inset:0;pointer-events:none;z-index:10;overflow:clip}#ui .interactive,#ui button,#ui input,#ui .panel{pointer-events:auto}.outline{text-shadow:0 2px 0 var(--ink),2px 0 0 var(--ink),-2px 0 0 var(--ink),0 -2px 0 var(--ink),2px 2px 0 var(--ink),-2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -2px 0 var(--ink),0 4px 0 rgba(0,0,0,.35)}.display{font-family:var(--font-display);letter-spacing:.5px}.btn{--c: var(--green);--cd: var(--green-d);font-family:var(--font-display);font-size:18px;color:#fff;letter-spacing:.5px;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 80%,white) 0%,var(--c) 55%);border:3px solid var(--ink);border-radius:16px;padding:10px 18px;box-shadow:0 5px 0 var(--cd),0 5px 0 3px var(--ink),0 10px 18px #00000040;cursor:pointer;transform:translateY(0);transition:transform .06s,box-shadow .06s,filter .15s;text-shadow:0 2px 0 rgba(0,0,0,.35);position:relative;white-space:nowrap}.btn:hover{filter:brightness(1.07)}.btn:active,.btn.pressed{transform:translateY(4px);box-shadow:0 1px 0 var(--cd),0 1px 0 3px var(--ink),0 4px 8px #0003}.btn[disabled],.btn.disabled{--c: var(--grey);--cd: var(--grey-d);filter:saturate(.4);cursor:default}.btn.blue{--c: var(--blue);--cd: var(--blue-d)}.btn.yellow{--c: var(--yellow);--cd: var(--yellow-d);color:var(--ink);text-shadow:0 2px 0 rgba(255,255,255,.5)}.btn.orange{--c: var(--orange);--cd: var(--orange-d)}.btn.red{--c: var(--red);--cd: var(--red-d)}.btn.purple{--c: var(--purple);--cd: var(--purple-d)}.btn.pink{--c: var(--pink);--cd: var(--pink-d)}.btn.small{font-size:15px;padding:6px 12px;border-radius:12px}.btn .key{position:absolute;top:-10px;right:-10px;background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:8px;font-size:12px;padding:1px 6px;font-family:var(--font-body);font-weight:700;text-shadow:none}body.mode-touch .key{display:none}.icon-btn{width:56px;height:56px;padding:0;display:grid;place-items:center;border-radius:18px}.icon-btn svg{width:30px;height:30px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}.icon-btn .badge{position:absolute;top:-8px;right:-8px;min-width:24px;height:24px;border-radius:12px;padding:0 6px;background:var(--red);color:#fff;border:3px solid var(--ink);font-size:13px;line-height:18px;text-align:center}.hud-top-left{position:absolute;top:calc(10px + var(--safe-top));left:calc(10px + var(--safe-left));display:flex;flex-direction:column;gap:8px;transform-origin:top left;transform:scale(var(--hud-scale))}.hud-top-right{position:absolute;top:calc(10px + var(--safe-top));right:calc(10px + var(--safe-right));display:flex;gap:10px;transform-origin:top right;transform:scale(var(--hud-scale))}.pill{display:flex;align-items:center;gap:8px;background:#1d1530b8;border:3px solid var(--ink);border-radius:999px;padding:4px 14px 4px 4px;color:#fff;font-family:var(--font-display);font-size:22px;box-shadow:0 4px #00000040;min-width:120px}.pill .ico{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:3px solid var(--ink);flex:none}.pill .ico svg{width:22px;height:22px}.pill .sub{font-family:var(--font-body);font-weight:700;font-size:13px;opacity:.85;margin-left:2px}.pill.coins .ico{background:var(--yellow)}.pill.speed .ico{background:var(--blue)}.pill.bump{animation:bump .25s ease-out}@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.12)}to{transform:scale(1)}}.hud-bottom-right{position:absolute;right:calc(16px + var(--safe-right));bottom:calc(18px + var(--safe-bottom));display:grid;grid-template-columns:auto auto;gap:14px;align-items:end;transform-origin:bottom right;transform:scale(var(--hud-scale))}.action-btn{width:96px;height:96px;border-radius:50%;font-size:20px;padding:0;display:grid;place-items:center;text-align:center;line-height:1}.action-btn.hidden{visibility:hidden}.action-btn .act-ico{display:block;width:38px;height:38px;margin:0 auto}.action-btn .act-label{display:block;font-size:19px;margin-top:2px}.action-btn .act-label.long{font-size:15px}.icon-btn.action-btn{width:70px;height:70px}.icon-btn.action-btn .act-ico{width:30px;height:30px}.icon-btn.action-btn .act-label{display:none}.action-btn.pulse{animation:pulse 1s infinite}@keyframes pulse{0%,to{filter:brightness(1)}50%{filter:brightness(1.25)}}.jump-btn{width:70px;height:70px;border-radius:50%;padding:0;display:grid;place-items:center}.jump-btn svg{width:32px;height:32px}body.mode-kbm .jump-btn{display:none}.hint-bar{position:absolute;left:50%;bottom:calc(16px + var(--safe-bottom));transform:translate(-50%);font-family:var(--font-display);font-size:18px;color:#fff;background:#1d153099;border-radius:12px;padding:6px 14px;white-space:nowrap;opacity:0;transition:opacity .2s}.hint-bar.show{opacity:1}.hint-bar i{display:inline-block;width:22px}body.mode-touch .hint-bar{bottom:calc(130px + var(--safe-bottom))}.joy{position:absolute;width:130px;height:130px;margin:-65px 0 0 -65px;border-radius:50%;background:#ffffff2e;border:3px solid rgba(29,21,48,.5);display:none}.joy.show{display:block}.joy .knob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:#ffffffd9;border:3px solid var(--ink)}.joy-hint{position:absolute;left:calc(70px + var(--safe-left));bottom:calc(80px + var(--safe-bottom));width:110px;height:110px;border-radius:50%;border:3px dashed rgba(255,255,255,.55);display:none}body.mode-touch .joy-hint.show{display:block}.modal-wrap{position:absolute;inset:0;display:grid;place-items:center;background:#140c2873;pointer-events:auto;animation:fadeIn .15s;z-index:30}@keyframes fadeIn{0%{opacity:0}}.panel{width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 40px - var(--safe-top) - var(--safe-bottom));background:var(--panel);border:4px solid var(--ink);border-radius:26px;box-shadow:0 8px 0 var(--panel-d),0 8px 0 4px var(--ink),0 20px 40px #00000059;display:flex;flex-direction:column;overflow:hidden;animation:popIn .25s cubic-bezier(.2,1.6,.4,1)}@keyframes popIn{0%{transform:scale(.6);opacity:0}}.panel-head{position:relative;padding:12px 56px 12px 18px;font-family:var(--font-display);font-size:28px;color:#fff;background:linear-gradient(180deg,var(--hc, var(--blue)) 0%,color-mix(in srgb,var(--hc, var(--blue)) 75%,black) 100%);border-bottom:4px solid var(--ink)}.panel-close{position:absolute;top:8px;right:8px;width:42px;height:42px;padding:0;border-radius:12px;font-size:22px}.panel-body{padding:14px;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}.panel-tabs{display:flex;gap:6px;padding:10px 12px 0;flex-wrap:wrap}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}.card{background:#fff;border:3px solid var(--ink);border-radius:16px;padding:6px;text-align:center;position:relative;box-shadow:0 4px #0000002e;cursor:pointer}.card .thumb{width:100%;aspect-ratio:1;border-radius:10px;background:radial-gradient(circle at 50% 40%,#fff,var(--rc, var(--r-common)));display:grid;place-items:center;overflow:hidden}.card .thumb img{width:100%;height:100%;object-fit:contain}.card .name{font-family:var(--font-display);font-size:14px;margin-top:4px}.card .val{font-weight:700;font-size:12px;color:var(--green-d)}.card.equipped{outline:4px solid var(--green)}.tag{display:inline-block;font-family:var(--font-display);font-size:11px;color:#fff;border:2px solid var(--ink);border-radius:8px;padding:0 5px}.rarity-common{--rc: var(--r-common)}.rarity-uncommon{--rc: var(--r-uncommon)}.rarity-rare{--rc: var(--r-rare)}.rarity-epic{--rc: var(--r-epic)}.rarity-legendary{--rc: var(--r-legendary)}.rarity-mythic{--rc: var(--r-mythic)}.rarity-bg{background:var(--rc)}.toasts{position:absolute;top:calc(70px + var(--safe-top));left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:40}.toast{font-family:var(--font-display);font-size:20px;color:#fff;background:#1d1530d9;border:3px solid var(--ink);border-radius:16px;padding:8px 16px;animation:toastIn .3s cubic-bezier(.2,1.6,.4,1);white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}.toast.good{background:linear-gradient(180deg,#57d957,#2b9c2f)}.toast.bad{background:linear-gradient(180deg,#ff6b78,#c42638)}.toast.gold{background:linear-gradient(180deg,#ffd84d,#d99a12);color:var(--ink);text-shadow:none}.toast.out{animation:toastOut .3s forwards}@keyframes toastIn{0%{transform:translateY(-20px) scale(.8);opacity:0}}@keyframes toastOut{to{transform:translateY(-14px);opacity:0}}.banner{position:absolute;top:28%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-display);font-size:clamp(42px,11vw,96px);color:#fff;z-index:35;animation:bannerIn .5s cubic-bezier(.2,1.8,.4,1);white-space:nowrap}.banner.red{color:#ff4d5e}.banner.gold{color:#ffcf2e}.banner.green{color:#57e157}.banner.out{animation:bannerOut .35s forwards}@keyframes bannerIn{0%{transform:translate(-50%,-50%) scale(2.2) rotate(-6deg);opacity:0}}@keyframes bannerOut{to{transform:translate(-50%,-80%) scale(.8);opacity:0}}.world-label{position:absolute;left:0;top:0;transform:translate(-50%,-100%);font-family:var(--font-display);color:#fff;white-space:nowrap;will-change:transform}.float-text{font-size:26px;animation:floatUp 1.2s ease-out forwards}.float-text.money{color:#7dff6b}.float-text.big{font-size:38px;color:#ffcf2e}@keyframes floatUp{0%{opacity:0;margin-top:10px}15%{opacity:1}to{opacity:0;margin-top:-60px}}.nametag{font-size:16px;opacity:.95}.timer-tag{font-size:18px;background:#1d1530b3;border:3px solid var(--ink);border-radius:10px;padding:1px 8px}.timer-tag.ready{background:linear-gradient(180deg,#57d957,#2b9c2f);animation:pulse .8s infinite}#loading{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#a8ec72,#3fae38 70%);transition:opacity .5s}#loading.hide{opacity:0;pointer-events:none}.load-card{text-align:center}.load-logo{font-family:var(--font-display);font-size:clamp(54px,14vw,110px);color:#fff;line-height:.95;display:flex;flex-direction:column;align-items:center;text-shadow:0 4px 0 var(--ink),4px 0 0 var(--ink),-4px 0 0 var(--ink),0 -4px 0 var(--ink),4px 4px 0 var(--ink),-4px 4px 0 var(--ink),4px -4px 0 var(--ink),-4px -4px 0 var(--ink),0 10px 0 rgba(0,0,0,.25);animation:logoBob 2s ease-in-out infinite}.load-logo .small{font-size:.45em;color:#ffcf2e}@keyframes logoBob{50%{transform:translateY(-8px) rotate(-2deg)}}.load-bar{width:min(320px,70vw);height:26px;margin:22px auto 10px;border:4px solid var(--ink);border-radius:14px;background:#fff;overflow:hidden}.load-fill{height:100%;width:0%;background:linear-gradient(180deg,#ffe066,#ffb627);transition:width .2s}.load-text{font-family:var(--font-display);color:#fff;font-size:20px;text-shadow:0 2px 0 var(--ink)}.tap-start{margin-top:16px;font-size:26px}.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:34}.flash.go{animation:flash .45s}.flash.red.go{background:#ff3048}@keyframes flash{0%{opacity:.75}to{opacity:0}}@media(max-width:520px),(max-height:520px){:root{--hud-scale: .86}.pill{font-size:19px}}kbd{display:inline-block;min-width:1.75em;padding:0 .4em;margin:0 .3em 0 0;text-align:center;vertical-align:.08em;font:400 .9em/1.45 var(--font-display);color:var(--ink);text-shadow:none;letter-spacing:.5px;background:linear-gradient(180deg,#fff,#ebe6f6);border:3px solid var(--ink);border-radius:9px;box-shadow:0 4px #9d92b8,0 4px 0 3px var(--ink)}body.mode-kbm .btn .key{font-family:var(--font-display);font-weight:400;font-size:15px;line-height:20px;min-width:28px;padding:1px 7px;text-align:center;top:-12px;right:-12px;border:3px solid var(--ink);border-radius:9px;background:linear-gradient(180deg,#fff,#ebe6f6);box-shadow:0 3px #9d92b8,0 3px 0 3px var(--ink)}body.mode-kbm .hud-top-right .btn .key{inset:auto auto -15px 50%;transform:translate(-50%)}body.mode-kbm .hud-top-right{padding-bottom:12px}body.mode-kbm .hud-bottom-right{right:calc(30px + var(--safe-right));bottom:calc(30px + var(--safe-bottom));gap:24px}body.mode-kbm .action-btn{width:132px;height:132px;border-width:4px}body.mode-kbm .action-btn .act-ico{width:52px;height:52px}body.mode-kbm .action-btn .act-label{font-size:26px;margin-top:4px}body.mode-kbm .action-btn .act-label.long{font-size:20px}body.mode-kbm .icon-btn.action-btn{width:104px;height:104px}body.mode-kbm .icon-btn.action-btn .act-ico,body.mode-kbm .icon-btn.action-btn svg{width:42px;height:42px}body.mode-kbm .icon-btn.action-btn .act-label{display:block;font-size:17px;margin-top:3px}body.mode-kbm .icon-btn.action-btn .act-label.long{font-size:15px}body.mode-kbm .action-btn .key{font-size:27px;line-height:34px;min-width:46px;padding:1px 10px;border-radius:12px;top:-16px;right:-16px;box-shadow:0 5px #9d92b8,0 5px 0 3px var(--ink),0 9px 14px #0000004d}body.mode-kbm .icon-btn.action-btn .key{font-size:23px;line-height:30px;min-width:40px}body.mode-kbm .hint-bar{font-size:23px;padding:10px 20px 12px;border-radius:16px;bottom:calc(26px + var(--safe-bottom));background:#1d1530b8;max-width:calc(100vw - 600px);overflow:hidden;text-overflow:ellipsis}@media(max-width:1279px){body.mode-kbm .hint-bar i:has(+.hint-q),body.mode-kbm .hint-bar .hint-q:not(:first-child){display:none}}@media(min-height:900px)and (min-width:1200px){body.mode-kbm .hud-bottom-right{transform:scale(calc(var(--hud-scale) * 1.15))}body.mode-kbm .hint-bar{font-size:26px}}
