body { padding: 0; margin: 0 }
#unity-container { position: fixed; width: 100%; height: 100%; }
#unity-canvas { width: 100%; height: 100%; background: #231F20 }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('spinner.gif') no-repeat center;    background-size: contain; }
#unity-progress-bar-empty { width: 141px; height: 10px; margin-top: 10px; background: #111111;border-radius: 20px 20px;position:relative;overflow:hidden;box-shadow:inset 0 5px 5px -2px rgba(0,0,0,.8);width:100% }
#unity-progress-bar-full { left:0;width:0%;top:0;bottom:0;position:absolute;background:linear-gradient(to right,#C68C43,#FFC782);border-radius: 20px 20px; }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }


/* == Montserrat == */
@font-face {
  font-family: 'Montserrat';
  src: url('/Montserrat/Montserrat-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal
}
@font-face {
  font-family: 'Montserrat';
  src: url('/Montserrat/Montserrat-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/Montserrat/Montserrat-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/Montserrat/Montserrat-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/Montserrat/Montserrat-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/Montserrat/Montserrat-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/Montserrat/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/Montserrat/Montserrat-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/Montserrat/Montserrat-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/Montserrat/Montserrat-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/Montserrat/Montserrat-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/Montserrat/Montserrat-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/Montserrat/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/Montserrat/Montserrat-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/Montserrat/Montserrat-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/Montserrat/Montserrat-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/Montserrat/Montserrat-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/Montserrat/Montserrat-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
}
body.flex,html{
height:100%
}
body.flex{
display: flex;
align-items: center;
justify-content: center;
background:#121212;
}
body.flex *{
display: none !important;
}
body .splash{
display: none
}
body.flex .splash{
display: block !important;
font-size: 5vw;
padding:2rem;
color:white;
text-align:center;
font-family:'Montserrat'
}
body.flex .splash > div,
body.flex .splash > div img,
body.flex .splash > button,
body.flex .splash > button span{
display: block !important;
}
body.flex .splash > div img{
width:150px;
margin:0 auto;
}
body.flex .splash button{
color: #2d1700;
padding:0;
margin:0 auto;
margin-top:1rem;
border:none;
font-size:5vw;
text-transform:uppercase;
font-weight:bold;
border-radius: 5px;
}
button span{
background: url("/bg-button.png");
border: none;
border-radius: 5px;
padding: .8rem 2rem;
min-width: 160px;
color: white;
font-size: 16px;
font-weight: bold;
box-shadow: inset 0 -3px 0 rgb(0 0 0 / 60%), inset 1px 1px 3px 0 rgb(255 255 255 / 20%), inset 0 0 3px 0 rgb(255 255 255 / 15%);
position: relative;
text-transform: uppercase;
}
button.gold {
background: linear-gradient(-45deg, #8C4E00 0, #FFC782 45%, #ffcd95 50%, #FFC782 55%, #AA722C 100%);
box-shadow: -1px 2px 5px black;
}
button.gold span{
background: url("/bg-button-gold.png");
color: #2D1700;
box-shadow: inset 0 -3px 0 rgb(0 0 0 / 61%), inset 1px 1px 3px 0 rgb(255 255 255 / 40%), inset 0 0 3px 0 rgb(255 255 255 / 25%);
}
button.gold:focus,
button.gold:active{
filter:brightness(90%);
}
body .orientation-message{
display:none;
}
@media screen and (max-device-width: 767px) and (orientation:landscape){
body *{
  display: none !important;
}
body,html{
  height:100%
}
body{
  background:#121212;
  display: flex;
  align-items: center;
  justify-content: center;
}
body .orientation-message{
  display: block !important;
  font-size: 5vw;
  padding:2rem;
  color:white;
  text-align:center;
}
}