.snake-game-container{width:620px;height:320px;margin:0 auto;position:relative;overflow:hidden}.snake-game-container *{box-sizing:border-box}.snake-game-container{color:#fff;background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:.5rem;font-family:sans-serif;overflow:hidden}.snake-score{color:#ffffff80;text-align:center;z-index:10;padding:10px;font-size:16px;font-weight:700;position:absolute;top:0;left:0;right:0}.snake-stage{z-index:2;background-color:#262626;width:100%;height:100%;position:absolute;top:.5%;left:.5%}.tile{background:#09090b;transition-property:background,box-shadow,opacity,transform;transition-duration:3s;position:absolute;transform:translateZ(0)}.tile:before{content:"";opacity:0;width:0;height:0;margin:auto;transition:opacity .3s;position:absolute;inset:0}.tile.path:before{opacity:.15!important}.tile.up:before{border-left:4px solid #0000;border-right:4px solid #0000;border-bottom:4px inset #ffffff26!important}.tile.down:before{border-left:4px solid #0000;border-right:4px solid #0000;border-top:4px inset #ffffff26!important}.tile.left:before{border-top:4px solid #0000;border-bottom:4px solid #0000;border-right:4px inset #ffffff26!important}.tile.right:before{border-top:4px solid #0000;border-bottom:4px solid #0000;border-left:4px inset #ffffff26!important}@media (max-width:900px),(max-height:900px){.tile.up:before,.tile.down:before,.tile.left:before,.tile.right:before{border-width:3px}}@media (max-width:500px),(max-height:500px){.tile.up:before,.tile.down:before,.tile.left:before,.tile.right:before{border-width:2px}}.tile.pressed{background:#0000004d;transition-duration:0s;box-shadow:inset 0 0 10px #0009}