body {
    margin: 0;
    overflow: hidden;
    background: #000000;
    font-family: sans-serif;
    user-select: none;
    position: relative;
  }
  #main-stage{
    overflow: hidden;
    width: min(100vw, calc(100vh * 16 / 9));
    aspect-ratio: 16 / 9;
    left: 50%;
    top: 50dvh;
    transform: translate(-50%, -50%);
    position: relative;
  }
  #gpuCanvas {
    touch-action: none;
    width: 100%;
    height: auto;
    display: block;
    position: relative;
  }
  #ui {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-around;
    color: #78cce7;
    font-size: clamp(0.5rem, 1vw, 1.5rem);
    font-weight: bold;
    text-shadow: 2px 2px 2px black,
                 2px -2px 2px black,
                 -2px 2px 2px black,
                 -2px -2px 2px black;
    pointer-events: none;
    z-index: 10;
    padding: 1rem;
    box-sizing: border-box;
    container-type: inline-size;
  }
  #hp-display-con {
    width: 20%;
    height: 1rem;
    font-size: clamp(.25rem, 1cqw, 5rem);
  }
  #hp-display {
    background-color: #2d46a5;
    width: 100%;
    transform: scaleX(calc(1 / 10 * 3));
    height: 2.5cqh;
    transform-origin: left;
    transition: all 1.5s ease;
    box-sizing: border-box;
    border: 2px solid #000000;
  }
  #wp-display {
    background-color: #2d46a5;
    width: 100%;
    height: 2.5cqh;
    transform: scaleX(0);
    transform-origin: left;
    transition: all .5s ease;
    box-sizing: border-box;
    border: 2px solid #000000;
  }
  .score_out{
    font-size: clamp(.25rem, 3cqw, 8rem);
    color: #78cce7;
    font-weight: bold;
    text-shadow: 2px 2px 2px black,
                 2px -2px 2px black,
                 -2px 2px 2px black,
                 -2px -2px 2px black;
  }
  #score-label,
  #highscore-label,
  #weapon-label,
  #wave-label {
    width: 20%;
    color: #78cce7;
    text-shadow: 2px 2px 2px black,
                 2px -2px 2px black,
                 -2px 2px 2px black,
                 -2px -2px 2px black;
    font-size: clamp(.25rem, 1cqw, 5rem);
  }
  #startscreen {
    position: absolute;
    inset: 0;
    background: #03030a;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #0093ff;
    z-index: 30;
    text-align: center;
    container-type: inline-size;
  }
  #startscreen h1 {
    color: #000000;
    font-size: clamp(.25rem, 4cqw, 8rem);
    text-shadow: 2px 2px 2px #78cce7,
                 2px -2px 2px #78cce7,
                 -2px 2px 2px #78cce7,
                 -2px -2px 2px #78cce7,
                 0 0 20px #0044FF;
    margin-bottom: 1rem;
  }
  #start-hint {
    font-weight: bold;
    font-size: clamp(.25rem, 2cqw, 8rem);
    color: #ffcc00;
    animation: blink 1.2s infinite;
    margin-top: 40px;
  }
  #start-info {
    color:#aaa;
    font-size: clamp(.25rem, 1.6cqw, 8rem);
  }
  .start-text {
    color:#aaa;
    font-size: clamp(.25rem, 1.6cqw, 8rem);
  }
  #start-version {
    color: #0093ff;
    font-size: clamp(.25rem, 1.2cqw, 8rem);
  }
  #wave-announce {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 16;
    font-size: 4.2rem;
    font-weight: bold;
    letter-spacing: 0.18em;
    color: #92bf09;
    text-shadow: 2px 2px 2px black,
                 -2px 2px 2px black,
                 2px -2px 2px black,
                 -2px -2px 2px black,
                 0 0 22px #647f16;
    transform: scale(0);
    opacity: 0;
    container-type: inline-size;
  }
  #wave-announce.show {
    display: flex;
    animation: wavePop 5s ease-out forwards;
  }
  @keyframes wavePop {
    0% { transform: scale(0); opacity: 0; }
    40% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1); opacity: 1; }
    80% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
  }
  #gameover {
    position: absolute;
    inset: 0;
    background: transparent;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #000000;
    font-weight: bold;
    z-index: 20;
    opacity: 0;
    container-type: inline-size;
  }
  .wave-title{
    font-weight: bold;
    font-size: clamp(.25rem, 5cqw, 15rem);
  }
  .pause-title{
    font-weight: bold;
    font-size: clamp(.25rem, 7cqw, 15rem);
  }
  .game-over-title{
    font-weight: bold;
    font-size: clamp(.25rem, 7cqw, 15rem);
    text-shadow: 2px 2px 2px #ff3333,
                 2px -2px 2px #ff3333,
                 -2px 2px 2px #ff3333,
                 -2px -2px 2px #ff3333,
                 0 0 20px #660000;
  }
  @keyframes GameOverOut {
    0% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
  }
  #restart-hint {
    font-weight: bold;
    font-size: clamp(.25rem, 2cqw, 8rem);
    color: #ffffff;
    margin-top: 20px;
    text-shadow: none;
    text-align: center;
  }
  #pause-overlay {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(5, 5, 20, 0.72);
    color: #78cce7;
    z-index: 25;
    text-shadow: 2px 2px 2px black;
    pointer-events: none;
    container-type: inline-size;
  }
  #pause-hint {
    font-size: clamp(.25rem, 2cqw, 8rem);
    font-weight: bold;
    color: #ffcc00;
    margin-top: 20px;
  }
  #submit-score{
    display: inline-block;
    width: 46%;
    font-size: 1rem;
    font-weight: normal;
    text-shadow: none;
    color: #FFFFFF;
    box-sizing: border-box;
  }
  #submit-player-country{
    width: calc(40% - 0.25rem);
    height: 5.5cqh;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 3cqw auto;
    background-position: calc(100% - 1rem) 50%;
    margin-right: 0.25rem;
    font-size: clamp(.25rem, 1.6cqw, 8rem);
  }
  #submit-buttons{
    width: 100%;
    margin-top: 0.5rem;
    text-align: center;
    box-sizing: border-box;
  }
  #submit-ok,
  #submit-cancel{
    display: inline-flex;
    background-color: #222222;
    align-items: center;
    justify-content: center;
    border-radius: 0.1rem;
    width: 10cqw;
    height: 6cqh;
    margin: 0.5rem;
    padding: 0.5rem;
    font-weight: bold;
    font-size: clamp(.25rem, 1.8cqw, 8rem);
    cursor: pointer;
  }
  #submit-player-name{
    width: 60%;
    height: 5.5cqh;
    box-sizing: border-box;
    font-size: clamp(.25rem, 1.6cqw, 8rem);
  }
  #selected_player,
  #selected_player + .hof-country,
  #selected_player + .hof-country + .hof-name,
  #selected_player + .hof-country + .hof-name + .hof-score {
    background: rgba(0, 255, 0, 0.20);
  }
  .country_img{
    height: 100%;
    margin: 0px;
    padding: 0px;
  }
  .hof-wrp{
    container-type: inline-size;
  }
  .hof-con::-webkit-scrollbar {
    display: none;
  }
  .hof-con{
    display: grid;
    grid-template-columns: 0.4fr 4cqw 1fr 0.4fr;
    grid-auto-rows: 5cqh;
    align-items: center;
    position: fixed;
    width: 60%;
    height: 100%;
    color: #FFFFFF;
    z-index: 999;
    font-family: sans-serif;
    font-size: clamp(.25rem, 1.4cqw, 5rem);
    font-weight: bold;
    opacity: 0;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    padding: 1rem;
    animation: HighscoreIn 10s ease-out forwards;
    overflow-y: scroll;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  @keyframes HighscoreIn {
    0% { opacity: 0; }
    80% { opacity: 0; }
    100% { opacity: 1; }
  }
  .hof-rank{
    width: 100%;
    text-align: right;
    padding: 0.25rem;
    box-sizing: border-box;
  }
  .hof-country{
    width: 100%;
    text-align: right;
    padding: 0.25rem;
    box-sizing: border-box;
  }
  .hof-name{
    width: 100%;
    padding: 0.25rem;
    box-sizing: border-box;
  }
  .hof-score{
    width: 100%;
    padding: 0.25rem;
    box-sizing: border-box;
  }
  @keyframes blink {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.2;
    }
  }