:root{--kc: #3a3d42;--kc-edge: #24262a;--kc-fg: #ffffff;--kc-green: #79b543;--kc-green-edge: #5a8f2e;--kc-red: #ef4135;--kc-red-edge: #be2b22;--rb: #444547;--rb-edge: #2b2c2e;--hud-red: #ff6a5f;--shade: rgb(10 12 18 / .55);--yellow: #f5bf00;--gold: #ffd84a;--font-display: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;--font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#141821;overflow:hidden;overscroll-behavior:none}body{font-family:var(--font-body);color:#fff;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#app{position:fixed;inset:0}#app canvas{display:block;width:100%;height:100%;touch-action:none}.layer{position:absolute;inset:0;pointer-events:none}.layer>*{pointer-events:auto}#fx{pointer-events:none;overflow:hidden}#fx>*{pointer-events:none}[hidden]{display:none!important}.kc{position:relative;display:inline-grid;place-items:center;min-width:2.7em;height:2.7em;padding:0 .8em;border-radius:.5em;background:var(--kc);color:var(--kc-fg);font:700 1rem/1 var(--font-body);letter-spacing:.02em;border:0;cursor:pointer;box-shadow:inset 0 -.3em 0 var(--kc-edge),0 3px 8px #0000004d;touch-action:none;transition:transform .05s}.kc:before{content:"";position:absolute;left:.3em;top:.3em;width:36%;height:40%;border-top-left-radius:.5em;border-top:.2em solid rgb(255 255 255 / .32);border-left:.2em solid rgb(255 255 255 / .32);pointer-events:none}.kc:active,.kc.down{transform:translateY(2px);box-shadow:inset 0 -.12em 0 var(--kc-edge),0 1px 3px #0000004d}.kc.green{background:var(--kc-green);box-shadow:inset 0 -.3em 0 var(--kc-green-edge),0 3px 8px #0000004d}.kc.red{background:var(--kc-red);box-shadow:inset 0 -.3em 0 var(--kc-red-edge),0 3px 8px #0000004d}.kc:focus-visible,.rb:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}.kc[disabled]{opacity:.45;cursor:default}.kc svg{width:1.2em;height:1.2em}.rb{position:relative;width:78px;height:78px;border-radius:50%;border:0;background:var(--rb);cursor:pointer;box-shadow:inset 0 -5px 0 var(--rb-edge),0 4px 10px #00000059;display:grid;place-items:center;touch-action:none}.rb:before{content:"";position:absolute;left:11px;top:9px;width:34px;height:34px;border-radius:50%;border-top:4px solid rgb(255 255 255 / .28);border-left:4px solid rgb(255 255 255 / .28);transform:rotate(-8deg);pointer-events:none}.rb:active,.rb.down{transform:translateY(2px)}.rb svg{width:46px;height:46px}.rb .tag{position:absolute;right:-6px;top:-8px;font:400 .95rem/1 var(--font-display);color:var(--hud-red);text-shadow:0 1px 2px rgb(0 0 0 / .5);transform:rotate(12deg)}.rb .key{position:absolute;left:-6px;bottom:-6px;background:var(--kc);border-radius:6px;font:700 .7rem/1 var(--font-body);padding:5px 6px;box-shadow:inset 0 -2px 0 var(--kc-edge)}#hud{font-family:var(--font-display)}.hud-tl{position:absolute;left:max(14px,env(safe-area-inset-left));top:max(14px,env(safe-area-inset-top));display:flex;gap:10px;align-items:center;flex-wrap:wrap;max-width:60vw}.hud-tr{position:absolute;right:max(14px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));display:flex;gap:8px}.hud-mid{position:absolute;left:50%;top:max(14px,env(safe-area-inset-top));transform:translate(-50%);display:grid;gap:6px;justify-items:center;pointer-events:none}.chip{background:var(--shade);padding:6px 12px;border-radius:999px;font:600 .85rem/1 var(--font-body);letter-spacing:.03em;white-space:nowrap}.pill{display:flex;align-items:center;gap:6px;background:var(--shade);padding:5px 10px;border-radius:10px;font:400 1.2rem/1 var(--font-display);white-space:nowrap}.pill svg{width:24px;height:24px}.pill.warn{box-shadow:0 0 0 2px var(--hud-red)}.coinbox{display:flex;align-items:center;gap:6px}.coinbox .kc{font-family:var(--font-display);font-size:1.5rem;min-width:2.2em;height:1.9em;cursor:default;font-variant-numeric:tabular-nums}.coin-ico{width:40px;height:40px;filter:drop-shadow(0 2px 3px rgb(0 0 0 / .3))}.hp{display:grid;gap:3px;background:var(--shade);padding:6px 10px 8px;border-radius:10px;min-width:140px}.hp-label{font:700 .7rem/1 var(--font-body);letter-spacing:.08em;display:flex;justify-content:space-between}.bar{height:9px;border-radius:5px;background:#fff3;overflow:hidden}.bar b{display:block;height:100%;width:100%;background:linear-gradient(90deg,#3cc46a,#8be36b);transition:width .25s}.bar.low b{background:linear-gradient(90deg,#e6402f,#ff8a5c)}.dist{background:var(--shade);border-radius:10px;padding:5px 10px 7px;min-width:200px;display:grid;gap:4px}.dist-row{display:flex;justify-content:space-between;gap:12px;font:700 .7rem/1 var(--font-body);letter-spacing:.06em;font-variant-numeric:tabular-nums}.dist .bar{height:6px}.dist .bar b{width:0;background:var(--yellow)}.controls-l{position:absolute;left:max(14px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));display:flex;gap:10px;align-items:flex-end}.controls-r{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));display:flex;gap:14px;align-items:flex-end}.controls-l .kc{font-size:1.35rem}body:not(.touch) .controls-l{opacity:0;pointer-events:none}body.touch .keyhint{display:none}.keyhint{position:absolute;left:50%;bottom:14px;transform:translate(-50%);font:600 .8rem/1.3 var(--font-body);white-space:nowrap;background:var(--shade);padding:7px 12px;border-radius:999px;transition:opacity .6s}.keyhint.gone{opacity:0}.ammo{font:400 1rem/1 var(--font-display)}.ftxt{position:absolute;transform:translate(-50%,-50%);font-family:var(--font-display);white-space:nowrap;animation:rise .95s ease-out forwards;text-shadow:0 2px 3px rgb(0 0 0 / .45)}.ftxt.dmg{color:var(--hud-red);font-size:1.5rem}.ftxt.pow{color:var(--hud-red);font-size:2.4rem;-webkit-text-stroke:1.5px #fff;animation-name:pop}.ftxt.coin{color:var(--gold);font-size:1.4rem}.ftxt.heal{color:#8be36b;font-size:1.4rem}.ftxt.info{color:#fff;font:600 1rem/1 var(--font-body);background:var(--shade);padding:5px 9px;border-radius:8px;text-shadow:none}.ftxt.heart{color:#ff6b9a;font-size:1.8rem}@keyframes rise{0%{opacity:1;margin-top:0}to{opacity:0;margin-top:-56px}}@keyframes pop{0%{opacity:0;scale:.4}20%{opacity:1;scale:1.15}70%{opacity:1;scale:1}to{opacity:0;scale:1}}.bubble{position:absolute;transform:translate(-10%,-100%);background:#fff;color:#111;font:400 1.1rem/1 var(--font-display);padding:10px 14px;border-radius:18px 18px 18px 4px;box-shadow:0 4px 12px #00000040;white-space:nowrap}.screen{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;z-index:5}.screen .stack{display:grid;gap:22px;justify-items:center;max-width:900px}.title-screen{background:radial-gradient(120% 90% at 30% 20%,#5b6f92d1,#2a3448e6 55%,#141a26f5)}.logo{font-family:var(--font-display);font-size:clamp(2.4rem,8vw,5.2rem);line-height:.95;color:var(--yellow);text-shadow:0 4px 0 #b88a00,0 8px 18px rgb(0 0 0 / .45)}.logo small{display:block;font-size:.3em;color:#fff;text-shadow:none;letter-spacing:.22em;margin-top:.6em;font-family:var(--font-body);font-weight:700}.btns{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}.btns .kc{font-size:clamp(1rem,2.4vw,1.35rem);min-width:6.5em;height:3.2em}.note{font:500 .9rem/1.4 var(--font-body);color:#ffffffc7;max-width:560px}.link{background:none;border:0;color:#fffc;font:600 .9rem var(--font-body);text-decoration:underline;cursor:pointer}.loading-screen{background:radial-gradient(90% 80% at 35% 30%,#8b8379eb,#4a433df5 45%,#151210)}.loading-screen .num{font:500 clamp(5rem,18vw,11rem)/1 var(--font-body)}.loading-screen .word{font:500 clamp(1.8rem,5vw,3.4rem)/1 var(--font-body)}.loading-screen .sub{font:600 1rem/1.4 var(--font-body);color:#ffffffd1}.bricks{display:flex;gap:6px}.bricks i{width:26px;height:15px;border-radius:3px;background:#ffffff2e}.bricks i.on{background:var(--yellow)}.dim{background:#0e1118b8;backdrop-filter:blur(6px)}.panel{background:#1e2430f0;border-radius:18px;padding:22px;display:grid;gap:16px;min-width:min(560px,92vw);max-width:92vw;max-height:90vh;overflow:auto;box-shadow:0 20px 60px #00000080}.panel h2{font:400 2rem/1 var(--font-display);margin:0;color:var(--yellow)}.row{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;text-align:left}.item{background:#ffffff0f;border-radius:14px;padding:12px;display:grid;gap:8px;align-content:start}.item b{font:400 1.15rem/1.1 var(--font-display)}.item span{font-size:.85rem;color:#ffffffbf}.item img{width:100%;aspect-ratio:1;object-fit:contain;background:#ffffff0f;border-radius:10px}.item .kc{height:2.4em;font-size:.9rem;justify-self:start}.item.owned{box-shadow:inset 0 0 0 2px #8be36b}.price{display:inline-flex;align-items:center;gap:4px}.seg{display:inline-flex;background:#ffffff14;border-radius:10px;padding:3px;gap:3px}.seg button{border:0;background:none;color:#fff;font:600 .85rem var(--font-body);padding:7px 12px;border-radius:8px;cursor:pointer}.seg button[aria-pressed=true]{background:var(--kc);box-shadow:inset 0 -2px 0 var(--kc-edge)}.won .logo{color:#8be36b;text-shadow:0 4px 0 #3c8a2a,0 8px 18px rgb(0 0 0 / .45)}.fade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .35s;z-index:4}.fade.on{opacity:1}.warp-flash{position:absolute;inset:0;opacity:0;pointer-events:none;z-index:6;background:radial-gradient(circle at var(--x, 50%) var(--y, 50%),#fff 0,#fbf4ff 22%,#e4c8ff 60%,#b98cf0 100%)}#perf{position:absolute;right:8px;bottom:8px;font:600 11px/1 ui-monospace,monospace;background:var(--shade);padding:4px 6px;border-radius:6px}@media (max-width: 720px){.hp{min-width:110px}.dist{min-width:160px}.hud-mid{top:auto;bottom:108px}.rb{width:66px;height:66px}}@media (prefers-reduced-motion: reduce){.ftxt{animation-duration:1.4s}}@media (max-height: 520px){.hud-mid{top:auto;bottom:max(12px,env(safe-area-inset-bottom))}.hud-tl{gap:6px}.coinbox .kc{font-size:1.15rem}.coin-ico{width:30px;height:30px}.hp{min-width:100px;padding:4px 8px 6px}.pill{font-size:1rem;padding:4px 8px}.pill svg{width:20px;height:20px}.dist{min-width:150px}.chip{font-size:.72rem;padding:4px 9px}.keyhint{display:none}}.rotate{display:none}@media (orientation: portrait) and (pointer: coarse){.rotate{display:grid;position:fixed;inset:0;z-index:20;place-items:center;text-align:center;padding:32px;background:#141821;font:400 1.6rem/1.3 var(--font-display);color:var(--yellow)}}
