CSS guidelines

1. As the game was not initially developed with Vue SFC, some of the CSS code is in separate .css files, and some is in the <style> tags in .vue files. New CSS code should go inside .vue files.
2. Use BEM for CSS class names: https://getbem.com/
3. In addition to BEM, Use the following namespaces:
   • o- for the most fundamental objects (like o-primary-btn or o-achievement)
   • c- for all other building blocks. Note that these classes contain no layout stuff (width and height are not layout stuff, so put them here)
   • l- for layouting c- components. The most usual stuff is display, flex-direction, margin, padding
   • t- for themes (see below)
4. Theming is implemented via classes instead of loading additional CSS files. Basically, when theme Theme Name is active, a class t-theme-name is added to the body. So, because of that, all theming is now done in the main CSS file near themed component (ex. .t-inverted-metro .c-primary-btn { /* stuff */ }). Secret themes are t-s1 to t-s11.