@import"https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Pixelify+Sans&family=Press+Start+2P&display=swap";*,*:before,*:after{box-sizing:border-box}html,body{height:100%}body{margin:0;min-height:100%;line-height:1.5}img,video{display:block;max-width:100%;height:auto}input,textarea,select,button{font:inherit}canvas{display:block;image-rendering:pixelated}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}:root{--font-ui: "Manrope", sans-serif;--font-pixel: "Pixelify Sans", monospace;--text-xs: 13px;--text-s: 15px;--text-m: 16px;--text-l: 20px;--text-xl: 27px;--color-gray-0: #7b7b80;--color-gray-1: #34363a;--color-gray-2: #2b2d30;--color-gray-3: #26282b;--color-white: #fff;--color-mint-1: #ddefe4;--color-mint-2: #99ad9d;--color-mint-3: #c6e590;--color-bg: var(--color-gray-2);--color-panel: var(--color-gray-1);--color-field: var(--color-gray-3);--color-surface-accent: var(--color-mint-1);--stat-text: var(--game-color-6);--text-on-accent: var(--color-gray-1);--game-color-1: #a8d5ba;--game-color-2: #e6b8cf;--game-color-3: #c9c2e8;--game-color-4: #f1d9b6;--game-color-5: #f5acac;--game-color-6: #99d9ff;--game-palette-size: 4;--border: 2px solid var(--game-color-1);--border-radius-s: 4px;--border-radius-m: 8px;--box-shadow: 0 0 12px rgb(230 184 207 / 35%);--transition-duration: .2s}html,body,#root{height:100%}html{font-size:clamp(14px,2.4vw,18px)}body{font-family:var(--font-pixel)}button{transition-duration:var(--transition-duration)}button,label{cursor:pointer}svg *{transition-property:fill,stroke}:focus-visible{outline:2px dashed var(--game-color-2);outline-offset:4px;transition-duration:0s!important}.game-snake{background:var(--color-bg);color:var(--text-on-accent);min-height:100vh;display:grid;place-items:center}.game{display:flex;flex-direction:column;width:420px;background-color:var(--color-panel);border-radius:var(--border-radius-m);border:var(--border);overflow:hidden;box-shadow:var(--box-shadow)}.game__header{display:flex;justify-content:space-between;align-items:center;padding:16px;background-color:var(--color-surface-accent);border-bottom:var(--border)}.game__name{font-family:var(--font-ui);font-weight:500;font-size:var(--text-s)}.game__close{display:grid;place-items:center;width:28px;height:28px;padding:0;border:none;background:transparent;border-radius:var(--border-radius-s);transition:background-color var(--transition-duration)}.game__close:hover{background-color:var(--color-white)}.game__close-icon path{stroke:var(--color-gray-3);stroke-width:2;stroke-linecap:round;transition:stroke var(--transition-duration)}.game__close:hover .game__close-icon path{stroke:var(--color-gray-0)}.game__close-icon{width:20px;height:20px}.game__body{padding:30px;background-color:var(--color-panel)}.game__play{display:flex;flex-direction:column}.game__stats{display:flex;justify-content:space-around;align-items:baseline;margin-bottom:16px}.game__field{width:100%;aspect-ratio:1 / 1;overflow:hidden}.game-canvas-frame{width:100%;border:2px solid transparent;border-radius:var(--border-radius-m);overflow:hidden;background:linear-gradient(90deg,var(--game-color-1),var(--game-color-2),var(--game-color-3),var(--game-color-4),var(--game-color-1)) border-box;background-size:300% 100%;animation:frame-border-flow 4s linear infinite}@keyframes frame-border-flow{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.game-canvas{display:block;width:100%;image-rendering:pixelated;border-radius:var(--border-radius-m)}.stat{display:flex;gap:8px;color:var(--stat-text);font-size:var(--text-m)}.game-screen{width:100%;height:100%;display:grid;place-items:center}.game-screen--game-over{display:flex;flex-direction:column;align-items:center;gap:20px;padding-top:50px}.game-screen__title,.game-screen__final{color:var(--stat-text)}.game-screen__final{font-size:var(--text-xl)}.button{display:inline-flex;justify-content:center;align-items:center;min-height:40px;padding:10px 37px;background-color:var(--game-color-5);color:var(--text-on-accent);transition:background-color var(--transition-duration);box-shadow:var(--transition-duration)}.button:hover{background-color:var(--game-color-2);transform:scale(1.05);box-shadow:var(--box-shadow)}