@font-face {
  font-family: 'Black Ops One';
  src: url('fonts/BlackOpsOne-Regular.ttf') format('truetype');
  font-weight: normal; font-style: normal;
}


*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:#222;
  display:flex;justify-content:center;align-items:center;
  height:100vh;overflow:hidden;
  touch-action:none;user-select:none;
}
canvas{display:block;cursor:pointer;}
#loading{
  position:fixed;inset:0;background:#2a2a2f;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  z-index:999;transition:opacity 0.5s;
}
#loading.fade{opacity:0;pointer-events:none;}
#loading-ball{font-size:64px;animation:spin 0.8s linear infinite;}
#loading-title{color:#f5a623;font-family:'Black Ops One',Arial;font-size:32px;margin-top:16px;letter-spacing:2px;}
#loading-sub{color:rgba(255,255,255,0.5);font-family:'Black Ops One',Arial;font-size:14px;margin-top:8px;}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
#rotate-msg{
  display:none;position:fixed;inset:0;background:#1a1a1e;
  flex-direction:column;justify-content:center;align-items:center;z-index:1000;
}
#rotate-msg.show{display:flex;}
#rotate-msg span{font-size:64px;}
#rotate-msg p{color:#fff;font-family:'Black Ops One',Arial;font-size:18px;margin-top:16px;}
@media(orientation:landscape) and (max-height:500px){
  #rotate-msg{display:flex!important;}
  canvas,#loading{display:none!important;}
}