Adapt player UI to mobile devices.

Hey there, hope you're having a great day !
After playing for quite a while on this website, I couldn't be bothered to awkwardly zoom in to try to click things each time I desired to use the website on my phone.

So I decided to create a little PR to solve this issue :)

List of changes

CSS

Units

To the extent to which it was possible, I swapped px values for em, rem, and % to allow for slightly better scaling across devices.

Dynamic placement

The two top characters which are randomly chosen in the header now get smaller if they ever come close to overlapping the title too much, instead of just going offscreen.

Media Queries

I've used quite a lot of them to change the direction of some carefully placed flex layouts, as well as tweak the width/height of some elements. Eg. The navigation bar.

Others

The view used to check evidence details has a tweaked behavior, it is slightly smaller and has a "fixed" position, so mobile users don't get misaligned when reviewing evidence.

For portrait mobile users, I use a non-standard CSS property: zoom. It allows a slightly better fit on chromium based browsers, while not affecting firefox users in a negative way.

HTML viewport tag

All HTML pages now have the generic viewport tag to have a mobile device report a size smaller than the actual screen. It allows much a better fit with elements that had to be kept in pixels (eg. DS like Screens).

Notes

• One commit is missing from this PR as of now since I don't know where to integrate it. The commit in question disables the context menu via javascript, avoiding the context menu when we long press (or just spam press) an image on android.

• Since I had to test my changes somewhere, you can find the website up to date with my repository here

• Maintainers can reply to this Pull Request in French if it is their native language.

Screenshots, everybody loves those, right ?