.snake-grid{display:grid;grid-template-rows:repeat(20,1fr);grid-template-columns:repeat(20,1fr);width:100%;max-width:350px;aspect-ratio:1/1;background:white;border:4px solid #22c55e;border-radius:1rem;box-shadow:0 4px 20px -5px rgba(34,197,94,.3);overflow:hidden}@media (min-width:640px){.snake-grid{max-width:400px}}.snake-cell{border:1px solid rgba(34,197,94,.1)}.snake{background:linear-gradient(135deg,#22c55e,#16a34a);border-radius:2px}.head{background:linear-gradient(135deg,#15803d,#166534);border-radius:3px}.food{background:linear-gradient(135deg,#ef4444,#dc2626);border-radius:50%;animation:foodPulse 1s ease-in-out infinite}@keyframes foodPulse{0%,to{transform:scale(.8)}50%{transform:scale(1)}}.direction-controls{display:flex;flex-direction:column;align-items:center;gap:.5rem}.horizontal-controls{display:flex;gap:2rem}.direction-button{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#22c55e,#16a34a);color:white;font-size:1.25rem;font-weight:700;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px -3px rgba(34,197,94,.4);transition:all .2s ease;user-select:none}@media (min-width:640px){.direction-button{width:60px;height:60px;font-size:1.5rem}}.direction-button:hover{transform:translateY(-2px);box-shadow:0 6px 15px -3px rgba(34,197,94,.5)}.direction-button:active{transform:scale(.9)}@media (prefers-color-scheme:dark){.snake-grid{background:rgba(30,30,50,.8);border-color:#22c55e}.snake-cell{border-color:rgba(34,197,94,.05)}}