@charset "UTF-8";#root{margin:0 auto;text-align:center;height:100vh;width:100%;display:flex;align-items:center;justify-content:center;background:rgb(176,255,0);background:linear-gradient(124deg,rgb(176,255,0) 0%,rgb(255,255,255) 38%,rgb(255,255,255) 58%,rgb(0,119,8) 100%)}.App{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;max-width:100%}.arena{outline:5px double #000;background:url(/snek/assets/white-waves.webp);background-position:0 0;position:relative}@media screen and (max-width: 767px){.arena{transform:scale(.7);top:-86px;margin-bottom:-160px}}.arena:after{content:"";background:rgba(255,240,104,.2);position:absolute;top:0;left:0;bottom:0;right:0;pointer-events:none}.score{font-weight:700;font-family:Impact,Arial Narrow Bold,sans-serif;display:flex;justify-content:space-between;width:500px;max-width:100%;font-size:30px}@media screen and (max-width: 1027px){.score p{margin:1rem 0}}@media screen and (max-width: 767px){.score{font-size:24px;max-width:90%}}.bling{animation-duration:.5s;animation-iteration-count:1;animation-name:bling}.effect{position:absolute;color:red;z-index:1;font-weight:700;text-shadow:0 0 5px #fff;opacity:0}.effect.animate{animation-duration:.5s;animation-iteration-count:1;animation-name:celebrate}@keyframes wiggle{0%{border-top-left-radius:20px;border-bottom-left-radius:5px}to{border-top-left-radius:5px;border-bottom-left-radius:20px}}@keyframes big-wiggle{0%{border-top-left-radius:200px;border-bottom-left-radius:100%}to{border-top-left-radius:100%;border-bottom-left-radius:200px}}@keyframes tongue{0%{transform:rotate(80deg)}to{transform:rotate(100deg)}}@keyframes float{0%{transform:translateY(0)}to{transform:translateY(-5px)}}@keyframes celebrate{0%{transform:translateY(0);opacity:0}50%{opacity:1}to{transform:translateY(-30px)}}@keyframes bling{0%{transform:scale(1);color:#000}50%{transform:scale(1.2);color:#fdcf00}to{transform:scale(1);color:#000}}.snek{width:10px;height:10px;position:absolute}.snek.head{border-top-right-radius:10px;border-bottom-right-radius:10px}.snek.tail{border-radius:none}.snek.tail:not(.stopWiggle){animation-duration:.1s;animation-iteration-count:infinite;animation-direction:alternate;animation-name:wiggle}.snek.undefined{display:none}.snek.left{transform:scaleX(-1)}.snek.up{transform:rotate(-90deg)}.snek.down{transform:rotate(90deg)}.snek.head:after{content:"Y";display:block;transform:rotate(90deg);position:absolute;color:red;right:-8px;bottom:-2px;font-size:12px;font-weight:700;animation-duration:.1s;animation-iteration-count:infinite;animation-direction:alternate;animation-name:tongue}.food{display:block;width:10px;height:10px;position:absolute;border-top-right-radius:10px;border-bottom-right-radius:10px;z-index:1;animation-duration:.5s;animation-iteration-count:infinite;animation-direction:alternate;animation-name:float}.food.steak:after{content:"\1f969"}.food.chicken:after{content:"\1f357"}.food.egg:after{content:"\1f95a"}.mobile-controls{width:100%;height:200px;position:relative;margin-top:10px;display:none}@media screen and (max-width: 1028px){.mobile-controls{display:block}}.mobile-controls button{background:none;font-size:60px;display:block;position:absolute;border:0;outline:0;filter:hue-rotate(255deg);transform-origin:center;padding:0;top:50%;left:50%;transform:translate(-50%,-50%)}.mobile-controls button:after{width:50px;height:50px}.mobile-controls button.ArrowRight{transform:translate(50%,-50%)}.mobile-controls button.ArrowRight:after{content:"\25b6\fe0f"}.mobile-controls button.ArrowDown{transform:translate(-50%,40%) scaleY(-1)}.mobile-controls button.ArrowDown:after{content:"\1f53c"}.mobile-controls button.ArrowUp{transform:translate(-50%,-140%)}.mobile-controls button.ArrowUp:after{content:"\1f53c"}.mobile-controls button.ArrowLeft{transform:translate(-150%,-50%)}.mobile-controls button.ArrowLeft:after{content:"\25c0\fe0f"}.game-over{display:flex;flex-direction:column;align-items:center;max-width:100%}.game-over p{border:5px solid red;font-weight:700;font-size:30px;text-transform:uppercase;padding:1rem 0;margin:0;width:500px;max-width:100%}@media screen and (max-width: 767px){.game-over p{max-width:90%}}.game-over button{margin-top:2rem}.start-screen h1{font-size:150px;text-transform:uppercase;font-family:Impact;text-shadow:0 0 50px rgb(246,255,116);animation-duration:.5s;animation-iteration-count:infinite;animation-direction:alternate;animation-name:float}.start-screen h1:first-letter{color:green}.start-screen button,.game-over button{background:green;position:relative;border-top-right-radius:100px;border-bottom-right-radius:100px;padding:10px 80px;color:#0f0;text-transform:uppercase;font-weight:700;animation-duration:.1s;animation-iteration-count:infinite;animation-direction:alternate;animation-play-state:paused;animation-name:big-wiggle;z-index:1}.start-screen button:hover,.game-over button:hover{animation-play-state:running}.start-screen button:hover .left-eye:after,.start-screen button:hover .right-eye:after,.game-over button:hover .left-eye:after,.game-over button:hover .right-eye:after{opacity:1}.start-screen button:before,.game-over button:before{content:"Y";display:block;transform:rotate(90deg);position:absolute;color:red;right:-16px;z-index:-1;bottom:4px;font-size:24px;font-weight:700;animation-duration:50ms;animation-iteration-count:infinite;animation-direction:alternate;animation-play-state:paused;animation-name:tongue}.start-screen button:hover:before,.game-over button:hover:before{animation-play-state:running}.start-screen .left-eye,.start-screen .right-eye,.game-over .left-eye,.game-over .right-eye{background:#fff;width:15px;height:10px;position:absolute;right:15px;top:2px;z-index:2;display:block;border-radius:50%;transform:rotate(10deg)}.start-screen .left-eye:after,.start-screen .right-eye:after,.game-over .left-eye:after,.game-over .right-eye:after{content:"";display:block;background:green;width:12px;height:8px;top:1px;right:-2px;position:absolute;border-radius:50%;opacity:0}.start-screen .right-eye,.game-over .right-eye{top:auto;bottom:2px;transform:rotate(-10deg)}:root{font-family:Inter,Avenir,Helvetica,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}