:root{--cells:21;--board-size:min(80vw, 80vh);--cell-size:calc(var(--board-size) / var(--cells))}body{background-color:#00008b;flex-direction:column;justify-content:center;align-items:center;height:100vh;margin:0;display:flex}.panel{width:var(--board-size);flex-direction:row;justify-content:space-between;margin-top:.5rem;display:flex}#score{color:#fff;font-size:xx-large;font-weight:700}.control{grid-gap:.1rem;background-color:#a9a9a9;border-radius:50%;grid-template:".up."4fr"left.right"3fr".down."4fr/4fr 3fr 4fr;width:10vh;height:10vh;padding:.5rem;display:grid}.control button{color:gray;background:currentColor;border:none;position:relative}.control button:hover,.control button:active{color:#d3d3d3}#up{border-radius:.5rem .5rem 0 0;grid-area:up}#left{border-radius:.5rem 0 0 .5rem;grid-area:left}#right{border-radius:0 .5rem .5rem 0;grid-area:right}#down{border-radius:0 0 .5rem .5rem;grid-area:down}#board{grid-template-rows:repeat(var(--cells), var(--cell-size));grid-template-columns:repeat(var(--cells), var(--cell-size));background-color:#2f4f4f;gap:1px;display:grid}.cell{width:var(--cell-size);height:var(--cell-size);background-color:#f4a460;margin:1px}.snake,.tail{background-color:#006400}.food.slug{background-color:#556b2f}.food.rat{background-color:#d2691e}.food.frog{background-color:#9acd32}.trap{background-color:#8b0000}