html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: #000; overflow: hidden;
}
#wrap {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #000;
}
#game { display: block; background: #000; cursor: default; }

#loading {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #1e160e; color: #d2aa3c;
  font-family: Georgia, "Times New Roman", serif; z-index: 10;
}
#loading .title { font-size: 40px; letter-spacing: 3px; margin-bottom: 18px; font-weight: bold; }
#loading .bar-bg { width: 420px; height: 18px; background: #2c2010; border: 1px solid #5a442b; }
#loading .bar-fill { height: 100%; width: 0%; background: #d2aa3c; transition: width 0.1s linear; }
#loading .pct { margin-top: 10px; font-size: 15px; color: #8c7850; }

#rotate-hint {
  position: fixed; inset: 0; z-index: 99999;
  display: none; align-items: center; justify-content: center;
  background: #000; color: #d2aa3c;
  font-family: Georgia, serif; font-size: 22px; text-align: center; padding: 2em;
}
@media screen and (orientation: portrait) and (max-width: 900px) {
  #rotate-hint { display: flex !important; }
  #wrap { display: none !important; }
}