.arcade{display:grid;grid-template-columns:minmax(0,520px) 200px;justify-content:center;align-items:start;gap:1.5rem}@media(max-width:800px){.arcade{grid-template-columns:minmax(0,520px)}}.cabinet{position:relative;padding:1rem;border:1px solid #4a1d5c;border-radius:1rem;background:radial-gradient(ellipse at 50% 0%,rgb(217 70 239 / .2),transparent 60%),linear-gradient(160deg,#1a0b2e,#0b0614);box-shadow:0 20px 50px -20px #0b0614cc;color:#e9d5ff;touch-action:none;user-select:none;outline:none}.cabinet:focus-visible{box-shadow:0 0 0 3px #34d399}.hud{display:flex;justify-content:space-between;gap:.5rem;margin-bottom:.75rem}.hud .stat{display:flex;flex-direction:column}.hud .stat span{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#a78bfa}.hud .stat strong{display:flex;gap:.25rem;min-height:1.5rem;align-items:center;font-variant-numeric:tabular-nums;font-size:1.2rem;color:#f8fafc}.life{width:.95rem;height:.8rem;border-radius:50% 50% 40% 40%/65% 65% 35% 35%;background:radial-gradient(circle at 35% 45%,#064e3b 12%,transparent 14%),radial-gradient(circle at 65% 45%,#064e3b 12%,transparent 14%),radial-gradient(circle at 35% 25%,#a7f3d0,#34d399 50%,#059669)}.maze{--tile: calc(100% / var(--cols));position:relative;display:grid;grid-template-columns:repeat(var(--cols),1fr);aspect-ratio:var(--cols) / var(--rows)}.tile{position:relative}.wall{--line: 2px solid #d946ef;border:var(--line);border-radius:30%;background:#701a7559;box-shadow:0 0 6px #d946ef80}.wall.n{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.wall.s{border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.wall.e{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.wall.w{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.frightened .wall{--line: 2px solid #22d3ee}.door:after{content:"";position:absolute;inset:45% 0;background:#a3e635}.gem:after{content:"";position:absolute;inset:38%;border-radius:2px;background:linear-gradient(135deg,#cffafe,#22d3ee);rotate:45deg}.crystal{animation:glow 1.4s var(--clock) ease-in-out infinite alternate}@keyframes glow{0%{filter:drop-shadow(0 0 2px #e879f9)}to{filter:drop-shadow(0 0 7px #e879f9) drop-shadow(0 0 2px #fdf4ff)}}.crystal:before,.crystal:after{content:"";position:absolute;inset:8% 22%;clip-path:polygon(50% 0,100% 35%,50% 100%,0 35%);animation:float 2.4s var(--clock) ease-in-out infinite}.crystal:after{background:linear-gradient(90deg,transparent 49%,rgb(255 255 255 / .35) 50%,transparent 51%),linear-gradient(transparent 34%,rgb(255 255 255 / .35) 35%,transparent 37%),linear-gradient(160deg,#fdf4ff,#e879f9 45%,#7e22ce)}.crystal:before{z-index:1;background:linear-gradient(115deg,transparent 40%,rgb(255 255 255 / .95) 50%,transparent 60%) 0 0 / 300% 100% no-repeat;animation:float 2.4s var(--clock) ease-in-out infinite,glint 1.8s var(--clock) ease-in-out infinite}@keyframes float{0%,to{translate:0 8%;scale:1 1}25%{translate:0 -8%}45%{scale:1 1}50%{translate:0 8%;scale:.2 1}55%{scale:1 1}75%{translate:0 -8%}}@keyframes glint{0%{background-position:100% 0}60%,to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.sprite,.sprite *,.sprite:before,.sprite:after,.sprite *:before,.sprite *:after,.overlay{animation:none!important}.sparkles{display:none}.crystal,.crystal:before,.crystal:after{animation:none!important}.points{animation:none;opacity:0}}.sprite{position:absolute;left:calc(var(--x) * var(--tile));top:calc(var(--y) * 100% / var(--rows));width:var(--tile);height:calc(100% / var(--rows));padding:1px;box-sizing:border-box;animation:slide calc(var(--tick) * var(--gap, 1)) linear calc(var(--tick) * var(--elapsed, 0) * -1) both}@keyframes slide{0%{transform:translate(calc(var(--dx) * 100%),calc(var(--dy) * 100%))}}.maze{overflow-x:clip}.tunnel.west{background:linear-gradient(to right,#0b0614 10%,transparent)}.tunnel.east{background:linear-gradient(to left,#0b0614 10%,transparent)}.sparkles{position:absolute;z-index:1;left:calc(var(--x) * var(--tile));top:calc(var(--y) * 100% / var(--rows));width:var(--tile);height:calc(100% / var(--rows));pointer-events:none}.star{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:.7rem;color:#a7f3d0;text-shadow:0 0 4px #34d399,0 0 8px #e879f9;opacity:0;--direction: rotate(calc(var(--angle) + (var(--side) - 1) * -90deg));animation:star calc(var(--tick) * 6) ease-out both;animation-delay:calc(var(--tick) * (var(--delay) * 10 - var(--elapsed)))}@keyframes star{0%{opacity:0;transform:var(--direction) translate(0) scale(.3)}20%{opacity:1}to{opacity:0;transform:var(--direction) translate(calc(var(--reach) * 120%)) scale(1) rotate(180deg)}}.sprite.tunnel-exit{animation-name:tunnel-exit}.sprite.tunnel-enter{animation-name:tunnel-enter}@keyframes tunnel-exit{to{transform:translate(calc(var(--tx) * 100%)) scale(.4);opacity:0;filter:blur(2px)}}@keyframes tunnel-enter{0%{transform:translate(calc(var(--dx) * 100%)) scale(.4);opacity:0;filter:blur(2px)}}.sprite:before{content:"";display:block;width:100%;height:100%}.player:before{border-radius:50% 50% 40% 40%/65% 65% 35% 35%;background:radial-gradient(circle at 35% 25%,#a7f3d0,#34d399 50%,#059669);filter:drop-shadow(0 0 4px rgb(52 211 153 / .7));transform-origin:50% 100%}.player.hopping:before,.player.hopping .eyes{animation:bounce .36s var(--clock) ease-in-out infinite alternate}@keyframes bounce{0%{scale:1.04 .96;translate:0 0}to{scale:.98 1.03;translate:0 -4%}}.player .eyes{inset:28% 18% 42%;background:radial-gradient(circle at 30% 50%,#064e3b 22%,#fff 24% 40%,transparent 42%),radial-gradient(circle at 70% 50%,#064e3b 22%,#fff 24% 40%,transparent 42%)}.player.caught{animation:none}.player.caught:before{animation:melt 1.1s .3s ease-in both}.player.caught .eyes{animation:melt-eyes 1.1s .3s ease-in both}@keyframes melt{30%{scale:.85 1.15}70%{scale:1.5 .3;opacity:1}to{scale:1.7 .1;opacity:0}}@keyframes melt-eyes{30%{translate:0 -15%}70%{translate:0 90%;scale:1.2 .4;opacity:1}to{translate:0 120%;opacity:0}}.player.caught:after{content:"";position:absolute;inset:-20% 0 20%;background:radial-gradient(ellipse 32% 9% at 50% 14%,transparent 50%,#a7f3d0 58% 80%,transparent 88%),radial-gradient(circle at 50% 62%,rgb(167 243 208 / .85) 0 18%,rgb(52 211 153 / .35) 28%,transparent 34%);filter:drop-shadow(0 0 4px #34d399);opacity:0;animation:soul 1.6s 1.2s ease-out both}@keyframes soul{0%{opacity:0;translate:0 20%;scale:.5}15%{opacity:1;scale:1}40%{translate:-15% -60%}65%{translate:15% -120%;opacity:.8}to{translate:0 -200%;opacity:0;scale:.8}}.dying .drone{animation:vanish .4s .2s ease-in both}@keyframes vanish{to{opacity:0;transform:scale(.6)}}.overlay.caught,.overlay.over{animation:appear .3s 2.2s ease-out both}@keyframes appear{0%{opacity:0;transform:translateY(.5rem)}}.drone{--body: #ef4444;filter:drop-shadow(0 0 4px var(--body))}.drone.pink{--body: #f472b6}.drone.cyan{--body: #22d3ee}.drone.orange{--body: #fb923c}.drone:before{display:none}.bot{position:absolute;inset:14% 8% 4%;animation:sway .7s var(--clock) ease-in-out infinite alternate}.bot:before{content:"";position:absolute;inset:0;border-radius:50% 50% 44% 44%/55% 55% 45% 45%;background:radial-gradient(circle at 20% 70%,rgb(255 255 255 / .45) 0 9%,transparent 11%),radial-gradient(circle at 80% 70%,rgb(255 255 255 / .45) 0 9%,transparent 11%),radial-gradient(circle at 35% 25%,color-mix(in srgb,var(--body),#fff 45%),var(--body) 55%,color-mix(in srgb,var(--body),#000 25%))}@keyframes sway{0%{rotate:-9deg;translate:0 -6%}to{rotate:9deg;translate:0 6%}}.prop{position:absolute;top:-34%;left:15%;width:70%;height:22%;border-radius:50%;background:radial-gradient(ellipse,#fef9c3 0 30%,#facc15 32% 60%,transparent 64%);animation:spin .12s var(--clock) linear infinite alternate}.prop:after{content:"";position:absolute;top:50%;left:46%;width:8%;height:130%;background:#78716c}@keyframes spin{to{scale:.15 1}}.eye{position:absolute;inset:14% 26% 38%;border-radius:50%;background:#fff;box-shadow:inset 0 -1px #00000026;animation:blink 3.2s var(--clock) infinite}.eye:after{content:"";position:absolute;inset:26%;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0 14%,#1e1b4b 18%);transform:var(--look)}@keyframes blink{0%,92%,to{scale:1 1}96%{scale:1 .1}}.mouth{position:absolute;left:32%;right:32%;top:64%;height:18%;border-bottom:2px solid #1e1b4b;border-radius:0 0 50% 50%}.drone.scared{--body: #a5b4fc}.drone.ending{--body: #f8fafc}.drone.scared .bot{animation:shiver .09s var(--clock) linear infinite alternate}@keyframes shiver{0%{translate:-5% 0;rotate:-3deg}to{translate:5% 0;rotate:3deg}}.drone.scared .prop{animation-duration:.06s}.drone.scared .eye{inset:8% 20% 34%;animation:none}.drone.scared .eye:after{inset:38%;animation:jitter .15s var(--clock) steps(2) infinite}@keyframes jitter{0%{translate:-60% 0}to{translate:60% 20%}}.drone.scared .mouth{top:70%;height:12%;border:0;border-radius:0;background:radial-gradient(circle at 50% 0,transparent 35%,#1e1b4b 40% 58%,transparent 62%) 0 0 / 34% 100% repeat-x}.drone.scared .bot:after{content:"";position:absolute;top:0;right:-4%;width:18%;height:22%;border-radius:0 50% 50%;rotate:45deg;background:#bae6fd;box-shadow:0 0 3px #e0f2fe;animation:sweat .8s var(--clock) ease-in infinite}@keyframes sweat{0%{translate:0 0;opacity:1}to{translate:0 160%;opacity:0}}.drone.eaten .bot:before,.drone.eaten .prop,.drone.eaten .mouth{animation:reform calc(var(--tick) * 4) ease-out both;animation-delay:calc(var(--tick) * var(--reform, 0))}@keyframes reform{0%{opacity:0;scale:.2}60%{opacity:.8;scale:1.15}}.drone.eaten .eye{filter:drop-shadow(0 0 3px #fff)}.points{position:absolute;z-index:2;left:calc(var(--x) * var(--tile));top:calc(var(--y) * 100% / var(--rows));width:var(--tile);height:calc(100% / var(--rows));display:grid;place-items:center;font-size:.75rem;font-weight:800;color:#f0abfc;text-shadow:0 0 6px #e879f9;pointer-events:none;animation:points calc(var(--tick) * 8) ease-out both;animation-delay:calc(var(--tick) * var(--elapsed) * -1)}@keyframes points{0%{opacity:0;scale:.4}15%{opacity:1;scale:1.3}30%{scale:1}to{opacity:0;translate:0 -150%}}.eyes{position:absolute;transform:var(--look)}.overlay{position:absolute;inset:40% 10% auto;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.75rem 1rem;border:1px solid #34d399;border-radius:.75rem;background:#0b0614e6;text-align:center}.overlay strong{font-size:1.5rem;color:#34d399}.overlay span{font-size:.9rem}.pad{display:grid;grid-template-columns:repeat(3,1fr);grid-template-areas:"start start start" ". up ." "left . right" ". down ." "help help help";gap:.4rem}.pad .key{margin:0;padding:.6rem;border:1px solid #334155;border-radius:.6rem;background:#0f172a;color:#e2e8f0;font-size:1.1rem;cursor:pointer;touch-action:manipulation}.pad .key:hover{border-color:#34d399}.pad .start{grid-area:start;font-size:.9rem;background:#34d399;color:#022c22}.pad .up{grid-area:up}.pad .left{grid-area:left}.pad .right{grid-area:right}.pad .down{grid-area:down}.pad .help{grid-area:help;margin:.5rem 0 0;font-size:.85rem}