html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #09111f;
}

body {
  display: grid;
  min-height: 100vh;
  place-items: center;
  overflow: hidden;
}

#game-container {
  position: relative;
  width: min(100vw, calc(100vh * 1000 / 563));
  height: min(100vh, calc(100vw * 563 / 1000));
  overflow: hidden;
}

#boot-loading {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: grid;
  place-content: center;
  gap: 0.9rem;
  padding: 2rem;
  color: #f3eee4;
  background:
    radial-gradient(circle at 72% 28%, rgba(243, 189, 91, 0.1), transparent 0 0.16rem),
    radial-gradient(circle at 23% 36%, rgba(219, 231, 255, 0.22), transparent 0 0.12rem),
    #09111f;
  font-family: 'Barlow', system-ui, sans-serif;
  text-align: center;
}

#boot-loading[hidden] {
  display: none;
}

#boot-loading > p,
#boot-loading h1 {
  margin: 0;
}

#boot-loading > p:first-child {
  color: #f3bd5b;
  font: 700 0.64rem/1 'Barlow', system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#boot-loading h1 {
  color: #f3eee4;
  font: 700 clamp(1.35rem, 4vw, 2rem)/1.05 'Arterfak', 'Barlow', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#boot-loading-status {
  margin: 0;
  color: #c4cbd0;
  font: 400 0.9rem/1.35 'Barlow', system-ui, sans-serif;
}

#boot-loading-progress {
  width: min(22rem, 72vw);
  height: 0.6rem;
  accent-color: #f3bd5b;
}

#boot-loading-percent {
  color: #f3bd5b;
  font: 700 0.78rem/1 'Barlow', system-ui, sans-serif;
  letter-spacing: 0.08em;
}

#game-container[aria-busy='true'] .touch-controls {
  visibility: hidden;
  pointer-events: none;
}