@font-face{
  font-family:'OldSport';
  src:url('fonts/OldSport02AthleticNcv-E0gj.ttf') format('truetype');
  font-display:block;
}
@font-face{
  font-family:'Obelix';
  src:url('fonts/ObelixProB-cyr.ttf') format('truetype');
  font-display:block;
}

*{margin:0;padding:0;box-sizing:border-box;}

html,body{
  width:100%;height:100%;
  background:#0d1218;
  overflow:hidden;
  touch-action:none;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}

#wrap{
  position:fixed;
  left:0;top:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:#0d1218;
}

#game{
  display:block;
  image-rendering:auto;
  touch-action:none;
}

#rotate{
  position:fixed;left:0;top:0;width:100%;height:100%;
  display:none;
  align-items:center;justify-content:center;
  flex-direction:column;
  background:#0d1218;
  color:#fff;
  font-family:'OldSport',Impact,sans-serif;
  letter-spacing:2px;
  text-align:center;
  z-index:50;
}
#rotate .ico{
  width:70px;height:110px;
  border:6px solid #b9e546;
  border-radius:12px;
  margin-bottom:26px;
  animation:tilt 1.6s ease-in-out infinite;
}
#rotate p{font-size:22px;padding:0 20px;}
@keyframes tilt{
  0%,40%{transform:rotate(0deg)}
  60%,100%{transform:rotate(90deg)}
}

#loader{
  position:fixed;left:0;top:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  background:#0d1218;color:#fff;
  font-family:'OldSport',Impact,sans-serif;
  letter-spacing:3px;z-index:60;
}
#loader .bar{
  width:240px;height:14px;margin-top:18px;
  border:3px solid #fff;border-radius:8px;overflow:hidden;
}
#loader .fill{width:0%;height:100%;background:#b9e546;transition:width .15s linear;}