.q3-game-canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  image-rendering: auto;
}

.q3-game-launcher {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: #090000 url("../assets/q3/original/logo512.jpg") 0 0 / 100% 100% no-repeat;
}

.q3-game-screen[data-state="running"] .q3-game-launcher {
  display: none;
}

.q3-game-banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 25%;
}

.q3-game-banner-fallback {
  position: absolute;
  top: 8.75%;
  left: 0;
  width: 100%;
  color: #a40000;
  font: 700 5.6cqw/1 var(--ui-sans);
  text-align: center;
  text-shadow: .32cqw .32cqw #000;
}

.q3-game-screen[data-font="loaded"] .q3-game-banner-fallback {
  display: none;
}

.q3-game-loading {
  position: absolute;
  top: 35%;
  left: 15%;
  width: 70%;
  color: #ff6e00;
  font: 700 2.5cqw/1.35 var(--ui-sans);
  text-align: center;
}

.q3-game-loading p {
  margin: 0 0 2.5cqw;
}

.q3-game-loading progress {
  width: 100%;
  height: 2.5cqw;
  margin-bottom: 2.5cqw;
  border: .3125cqw solid #730600;
  border-radius: 0;
  color: #d31b0a;
  background: #080000;
  accent-color: #d31b0a;
}

.q3-game-note {
  color: #9e6a4a;
  font-size: 1.9cqw;
}

.q3-game-error {
  color: #f33;
}

.q3-game-start {
  padding: 0;
  border: 0;
  background: transparent;
}

@media (max-aspect-ratio: 3 / 4) {
  .q3-game-screen {
    width: 100vw;
  }
}

@media (forced-colors: active) {
  .q3-game-start:focus-visible {
    outline: 2px solid Highlight;
  }
}