html, body {
  margin: 0;
  padding: 0;
  background: #000;
  height: 100%;
  overflow: hidden;
  font-family: system-ui;
  color: #fff;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
}
#lbl_lives{
  width: 40%;
  text-align: left;
  padding-left: 1rem;
  box-sizing: border-box;
}
#lbl_level{
  width: 60%;
  text-align: center;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}
#lbl_score{
  width: 40%;
  text-align: right;
  padding-right: 1rem;
  box-sizing: border-box;
}
.game_version{
  color: #666666;
  font-size: clamp(.25rem, 2.1cqw, 8rem);
  font-weight: normal;
  letter-spacing: normal;
  text-shadow: none;
}
.game_title{
  transition: none;
  color: #000000;
  font-size: clamp(.25rem, 7.5cqw, 8rem);
  font-weight: bold;
  text-shadow: 2px 2px 2px #78e7cc, 2px -2px 2px #78e7cc, -2px 2px 2px #78e7cc, -2px -2px 2px #78e7cc, 0 0 20px #00FF44;
}
#gameContainer {
  position: relative;
  container-type: inline-size;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  background: #000;
  overflow: hidden;
}
canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: none;
  background: #000;
}
#info {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  position: absolute;
  top: 1.2cqh;
  font-size: 1.4cqw;
  text-shadow: 0 0 6px #000;
  pointer-events: none;
  z-index: 10;
}
#announce {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 6cqw;
  font-weight: bold;
  letter-spacing: 0.5cqw;
  text-align: center;
  text-shadow: 0 0 2cqw #fff, 0 0 4cqw #88f;
  opacity: 0;
  pointer-events: none;
  transition: none;
  z-index: 20;
  white-space: pre;
}
