* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: clamp(16px, 1vw, 80px);
  font-weight: bold;
  text-shadow: 2px 2px 2px black;
  text-align: center;
}



#version-info {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 14px;
  color: #fff;

  padding: 5px 10px;
  border-radius: 5px;
}


/* Am Ende der Datei, damit nichts überschreibt */
#level-score {
  z-index: 2010;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  border: 2px solid #00e6c3;
  border-radius: 8px;
  box-shadow: 0 0 8px #00e6c3, 0 0 2px #fff inset;
  padding: 10px;
  margin: 0;
  animation: retroScoreGlow 1.2s infinite alternate;
}

@keyframes retroScoreGlow {
  0% {
    box-shadow: 0 0 8px #00e6c3, 0 0 2px #fff inset;
    text-shadow: 0 0 3px #00e6c3, 0 0 1px #fff;
    border-color: #00e6c3;
  }

  100% {
    box-shadow: 0 0 14px #00e6c3, 0 0 3px #fff inset;
    text-shadow: 0 0 5px #00e6c3, 0 0 2px #fff;
    border-color: #00e6c3;
  }
}

#interaction-buttons-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
  bottom: 15px;

  width: 100%;

}


#fullscreen-btn-container {
  z-index: 9999;
  width: 100%;
  margin-bottom: 2vh;
  display: flex;
  justify-content: center;
  align-items: center;

}


#fullscreen-btn {
  z-index: 2010;
  height: 40px;
  border: 2px solid #00e6c3;
  border-radius: 8px;
  box-shadow: 0 0 8px #00e6c3, 0 0 2px #fff inset;
  text-align: center;
  width: 100%;
  margin: 0;
  padding: 6px 6px;

  font-weight: 700;
  cursor: pointer;
  display: flex;
  color: #00e6c3;
  align-items: center;
  gap: 16px;
  transition: box-shadow 0.2s, background 0.2s;
  background-color: transparent;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
}


#fullscreen-btn:hover {
  color: #fff;
  text-shadow: 0 0 8px #00e6c3, 0 0 2px #fff;
}


/* Bug melden Button links unten */
.report-bug-container {

  z-index: 2010;

  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  border: 2px solid #00e6c3;
  border-radius: 8px;
  box-shadow: 0 0 8px #00e6c3, 0 0 2px #fff inset;
  padding: 6px;
  margin: 0;


}


#report-bug-button {
  color: #00e6c3;
  background: transparent;
  border: none;
  font-family: inherit;
  padding: 6px;
  text-align: center;
  text-align-last: center;
  font-weight: 700;
  text-decoration: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: color 0.2s, text-shadow 0.2s;
  display: inline-block;
}


#report-bug-button:hover {
  color: #fff;
  text-shadow: 0 0 8px #00e6c3, 0 0 2px #fff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 100vh;
  background-color: #222;
  overflow: hidden;
  font-family: Arial, sans-serif;
  user-select: none;

}





.blur-not-compatible-overlay {
  display: none;
  width: 100vw;
  height: 100vh;
  text-align: justify;
  justify-content: center;
  align-items: center;
  background-color: rgba(234, 234, 234, 1);
}

.sectionOne {
  display: flex;
  justify-items: center;
  align-items: center;
  flex-direction: column;
  border-radius: 0px 10px 10px 0px;
  padding: 1px;
  margin-left: 0px;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 15px;

  z-index: 100;
  background-color: #000000a2;
  backdrop-filter: blur(5px);



}

.login-parent {
  width: 100vw;
  height: 100vh;
  position: absolute;
  display: flex;
  flex-direction: row-reverse;
  z-index: 1001;

}

.titelbild-container {


  text-align: center;

  z-index: 1003;

  background-size: cover;
  backdrop-filter: saturate(180%) brightness(1.1);

  width: auto;


}

.titelbild-container img {


  background-size: cover;
  border-radius: 10px;
  width: 15vw;
  height: 100%;
}


.login-container h2 {
  margin-bottom: 25px;
  font-size: 35px;
  letter-spacing: 5px;
  text-decoration: none !important;
  border-bottom: solid 2px white;
  border-radius: 10px;
  background-color: #222;
}

.blur-login-div {
  background-color: #0000008c;

  z-index: 1001;

  backdrop-filter: blur(5px);

  padding: 40px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

#username {
  border: solid 2px rgb(255, 255, 255);
  padding: 12px;
  font-size: clamp(20px, 1vw, 50px);
  margin-top: 10px;
  margin-bottom: 10px;

  outline: none;

  border-radius: 30px;
  color: #499bff;

  height: 40px;
  text-align: center;
  transition: box-shadow 0.3s ease;
  width: 30%;
  background-color: #00000000;
}


#username::placeholder {
  color: white;
}

.login-description {
  color: #ffffff;
  font-size: clamp(30px, 1.5vw, 70px);
  font-weight: 600;
  text-align: center;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;

}

.login-container input:focus {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}




@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.agree-input-div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  margin-top: 10vh;
  margin-bottom: 10px;
  font-size: clamp(30px, 1.5vw, 70px);
}


.nickname-div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 2vh;
  margin-bottom: 10px;
}

#dsgvo-parent {

  margin-top: 0vh;
  align-items: center;
}




label {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  justify-items: space-between;
  align-items: space-between;
  align-content: space-between;

  color: white;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 10px;
  font-size: 16px;



}

a {
  color: white;
  text-decoration: underline;
}

label span {
  width: 100%;
  text-align: center;
  margin-left: 20px;
  font-size: clamp(10px, 0.6vw, 50px);



}


#einwilligung-nutzung-und-datenschutz {
  appearance: none;
  width: 25px;
  height: 25px;
  background-color: transparent;
  border: 2px solid white;
  border-radius: 25px;
  cursor: pointer;
  position: relative;

}

#checkbox-label {
  padding: 0px;
  font-size: clamp(20px, 1vw, 50px);
}

/* Häkchen anzeigen bei Checked */
#einwilligung-nutzung-und-datenschutz:checked::after {
  content: "✓";
  /* Unicode-Häkchen */
  color: rgb(73, 155, 255);
  font-size: 30px;
  font-weight: 900;
  position: absolute;
  top: -15px;
  right: -2px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-link {

  text-decoration: underline;
  font-size: clamp(10px, 0.6vw, 50px);
}

#start-game-button {
  background-color: #00000000;
  width: 30%;
  border: solid 2px #FFFFFF;
  padding: 12px;
  font-size: 24px;
  border-radius: 30px;
  cursor: pointer;
  color: #FFFFFF;

  margin-top: 3%;


}


#start-game-button:hover {
  background-color: #00000077;
  backdrop-filter: blur(5px);
  transform: scale(1.01);


}


.copyright-link-parent {


  padding-left: 5px;
  padding-right: 5px;

  text-align: center;
  color: #FFFFFF;
  margin-top: 5vh;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0px;


  color: white;
  z-index: 2009;
  border-radius: 10px;
  padding: 10px;

}

.copyright-link,
.formal-link {
  font-size: 14px;
  color: white;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;

}

.copyright-link {
  position: absolute;
  bottom: 15px;
  right: 15px;
}

.formal-link {

  border-radius: 0px;
  text-decoration: none;
  padding-left: 10px;
  padding-right: 10px;

}

.formal-link:hover {
  text-decoration: underline;

}


.copyright-link {
  font-size: 10px;
}

#magic-banner {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgb(2, 0, 36);
  background: linear-gradient(180deg, rgba(2, 0, 36, 1) 0%, rgba(255, 0, 0, 1) 15%, rgba(255, 0, 0, 0.6054796918767507) 85%, rgba(2, 0, 36, 1) 100%);
  color: white;
  padding: 20px 50px;
  font-size: 4rem;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  border-radius: 15px;

  opacity: 0;
  text-shadow: 2px 2px 2px black;
  z-index: 100;
  width: 110%;
  text-align: center;
}

@keyframes fadeInOut {
  from {
    opacity: 0;
    transform: translate(-50%, -60%) scale(0.8);
  }

  20% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -40%) scale(1.5);
  }
}

#game-over-heading {
  display: none;
  font-family: 'Share Tech Mono', 'VT323', monospace;
  font-size: 100px;
  font-weight: 900;
  margin-bottom: 50px;
  color: #ff003c;
  backdrop-filter: blur(25px);
  border: 2px solid #ff003c;
  text-decoration: none;
  border-radius: 30px;

  padding: 16px 32px;
  letter-spacing: 2px;

  animation: retroGameOverGlow 1.2s infinite alternate;
}

@keyframes retroGameOverGlow {
  0% {
    box-shadow: 0 0 0px #ff003c, 0 0 4px #ff003c inset;
    text-shadow: 0 0 0px #ff003c, 0 0 2px #ff003c, 0 0 24px #ff003c;
    border-color: #ff003c;
  }

  100% {
    box-shadow: 0 0 16px #ff003c, 0 0 8px #ff003c inset;
    text-shadow: 0 0 8px #ff003c, 0 0 4px #ff003c, 0 0 32px #ff003c;
    border-color: #ff003c;
  }
}


#statistic-score {
  font-size: 40px;
  border-bottom: solid 1px;
  margin-bottom: 10px;
  margin-top: 25px;
}


#restart-button {
  display: none;
  width: 200px;
  height: 60px;
  margin-top: 40px;
  margin-bottom: 40px;
  font-size: 34px;
  font-family: 'Share Tech Mono', 'VT323', monospace;
  color: #00e6c3;
  background-color: transparent;
  border: 2px solid #00e6c3;
  border-radius: 25px;
  box-shadow: 0 0 8px #00e6c3, 0 0 2px #fff inset;
  text-shadow: 0 0 3px #00e6c3, 0 0 1px #fff;
  letter-spacing: 1px;
  font-weight: 600;
  cursor: pointer;
  animation: retroScoreGlow 1.2s infinite alternate;
  transition: color 0.2s, box-shadow 0.2s, background 0.2s;
}

#restart-button:hover {
  color: #fff;
  background: #00e6c3;
  box-shadow: 0 0 16px #00e6c3, 0 0 4px #fff inset;
}

.keybind-container {
  display: flex;
  flex-direction: column;
  gap: 8px;

  align-items: center;
  color: white;
  margin-top: 5px;
  border-radius: 10px;
  width: max-content;

  margin-bottom: 40px;

}

.key-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.key {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #444;
  border-radius: 5px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  font-weight: bold;
}

.large {
  width: 85px;
}

.game-statistic-parent {


  padding: 0px;
  padding-right: 5px;
  padding-left: 5px;
  border-radius: 10px;
  text-align: center;
  color: #FFFFFF;

  font-weight: 800;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  z-index: 0;
  padding-top: 5px;
  padding-bottom: 25px;


}

.statistik-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.wellen-container {

  width: 90%;

  border-radius: 10px;

  text-align: center;
  color: #FFFFFF;

  font-weight: 900;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 0;
  padding-top: 15px;
  padding-bottom: 15px;

}

#wellen-heading {
  border-top: solid 2px #00e6c400;
  border-bottom: solid 2px #00e6c400;
  border-radius: 10px;
  padding: 10px 10px 10px 10px;
  width: 90%;
  font-size: clamp(1rem, 1.2vw, 1.5rem);
}

.wellen-container-effekt {
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 20px inset,
    rgba(0, 0, 0, 0.3) 0px 0px 30px inset,
    rgba(0, 0, 0, 0.2) 0px 0px 40px inset;

  color: #000000;
  border-color: #000000;
  background-color: #FFFFFF;
}

h2 {

  font-size: clamp(1rem, 1.2vw, 1.5rem);
  margin-bottom: 5px;
  padding: 10px 10px 10px 10px;

}


.game-statistic-parent p {
  text-align: left;
  font-size: 20px;
  margin: 5px;
}

.leaderboard-container {
  width: 100%;


  padding-top: 15px;
  padding-bottom: 15px;

}


.leaderboard-name {

  text-align: justify;
  font-weight: 300;
  margin-bottom: 10px;
  color: #00e6c3;
}


#leaderboard-name-1 {
  color: #D4AF37;
}

#leaderboard-name-2 {
  color: #C0C0C0
}

#leaderboard-name-3 {
  color: #CD7F32;
}

.health-bar-container {
  position: relative;
  left: 0px;
  width: 90%;
  height: 40px;
  background-color: #33333300;
  border: 2px solid #00e6c400;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;



}

.health-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(to right, #00e6c3, #01c8aa);
  transition: width 0.3s ease-in-out;

}

.health-text {
  z-index: 100;
  width: 100%;
  position: absolute;

  color: white;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 2px 2px 2px black;
  text-align: center;

}

.destroyed {
  background: red !important;
  transition: none;
}


.container-legende-parent {



  text-align: center;
  color: #FFFFFF;
  display: flex;
  justify-items: center;
  align-items: center;
  flex-direction: column;
  border-radius: 10px 0px 0px 10px;
  padding: 10px;
  margin-left: 0px;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 0px;
  z-index: 100;
  background-color: #000000a2;
  backdrop-filter: blur(5px);


  z-index: 100;

}

.container-legende-child {
  display: flex;
  justify-content: center;

  flex-direction: column;
  align-items: center;
  margin-top: 3px;
  margin-bottom: 3px;



  padding: 10px;

}




.container-legende-p {
  margin-top: 10px;
}


#game-container {



  width: 100vw;
  /* Breite des Spielfelds */
  height: 100vh;
  /* Höhe des Spielfelds */
  overflow: hidden;

  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 20px #00e6c3, 0 0 2px #fff inset;


  position: absolute;
  will-change: transform;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#road {
  position: absolute;
  will-change: transform;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url('assets/Ground.png') repeat-y;
  background-size: 100% 200%;
  /* 100% Breite, 200% Höhe für nahtlose Wiederholung */


}



#tmr-container {
  z-index: 30 !important;
  position: absolute;
  bottom: 0;

  margin-bottom: 15px;
  width: 200%;
  display: flex;
  justify-content: center;
  align-items: center;
}




#TMR-IMG {
  width: 100% auto;
  max-height: 40vh;
  display: block !important;
  position: relative;
  margin: 0 auto;
  z-index: 30;
}


.collusion-box-parent {

  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;



}

.collusion-box-tmrvehicle {

  width: 175px;
  height: 80%;



}

.collusion-box-tmrscan {

  width: 186px;
  height: 1px;
  z-index: -1;
  margin-left: 15px;
}



.tmr-explosion-container {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  z-index: 10;


}

.explusion-img {
  width: 150px;
  height: 150px;
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;

}

#explusion1 {
  position: absolute;
  top: -100px;
  left: 0;
}

#explusion2 {
  top: 100px;
  left: -50px;

}

#explusion3 {
  top: 0px;
  left: 40px;
}

.tmr-lines-parent {

  margin-left: 7.5%;
  margin-right:
    7.5%;
  width: 100vw;
  height: 100vh;

  display: flex;
  flex-direction: row;


}

.tmr-line-container {
  width: 100%;

  height: 100%;
  position: relative;




}

.container-spawn-container {
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  z-index: 5;
  transform-origin: center;

}


.container-spawn-heart {
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  z-index: 5;
  transform-origin: center;


}


.container-spawn-heart img {

  transform: rotate(-90deg);

  position: relative;
  width: auto;

  height: 150px;
}



#tmr-container {
  transform-origin: center;

}

#tmr-container * {
  transform: inherit;
}


.container-spawn-img {
  z-index: 5 !important;
  position: relative;
  width: 150%;
  height: auto;
}


/* Container für den Röntgen-Effekt */
.xray-container {
  position: relative;
  top: -100px;
  left: -25px;
  display: inline-block;
  margin-top: 100px;
  padding-top: 18px;
  padding-bottom: 28px;
  padding-left: 120px;
  padding-right: 80px;
  font-size: 2rem;
  color: white;
  z-index: 1;


  overflow: hidden;
}

/* Röntgenstrahlen-Effekt */


.xray-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 0, 0.7) 50%, transparent 100%);
  animation: xray-scan 0.5s infinite ease-in-out;
  opacity: 0;
  visibility: hidden;
  z-index: -1;
  /* Hinter dem Container */

}

.xray-container.xray-visible::before {
  opacity: 1;
  visibility: visible;
  z-index: -1;
  /* Hinter dem Container */
}




@keyframes xray-scan {
  0% {
    left: -100%;
  }

  50% {
    left: 100%;
  }

  100% {
    left: -100%;
  }
}


@keyframes containerMoveRoad {
  from {
    top: -120px;
    transform: translateX(-50%) rotate(90deg);
  }

  to {
    top: calc(100vh + 120px);
    transform: translateX(-50%) rotate(90deg);
  }
}

.container-spawn-container {
  top: -120px;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
  position: absolute;
  z-index: 5;
  animation-name: containerMoveRoad;
}

.container-spawn-container {
  top: 0;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
  position: absolute;
  z-index: 5;

  animation-name: containerMoveRoad;
}



@keyframes moveRoad {
  from {
    background-position: 0 100%;
  }

  to {
    background-position: 0 0;
  }
}


.pulsierend {
  font-weight: bold;
  color: red;
  animation: pulse 0.5s infinite alternate ease-in-out;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(1.2);
    opacity: 0.7;
  }
}

.pulsierenRed {
  animation: pulsierenRed 2s ease-in-out forwards;
}

@keyframes pulsierenRed {
  0% {
    box-shadow: rgba(255, 0, 0, 0.5) 0px 0px 50px,
      rgba(255, 0, 0, 0.3) 0px 0px 100px,
      rgba(255, 0, 0, 0.2) 0px 0px 150px inset;
  }

  50% {
    box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 50px,
      rgba(255, 255, 255, 0.3) 0px 0px 100px,
      rgba(255, 255, 255, 0.2) 0px 0px 150px inset;
  }

  100% {
    box-shadow: rgba(255, 0, 0, 0.5) 0px 0px 50px,
      rgba(255, 0, 0, 0.3) 0px 0px 100px,
      rgba(255, 0, 0, 0.2) 0px 0px 150px inset;
  }
}



@keyframes pulsierenGreen {
  0% {
    box-shadow: rgba(0, 255, 0, 0.5) 0px 0px 50px,
      rgba(0, 255, 0, 0.3) 0px 0px 100px,
      rgba(0, 255, 0, 0.2) 0px 0px 150px inset;
  }

  50% {
    box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 50px,
      rgba(255, 255, 255, 0.3) 0px 0px 100px,
      rgba(255, 255, 255, 0.2) 0px 0px 150px inset;
  }

  100% {
    box-shadow: rgba(0, 255, 0, 0.5) 0px 0px 50px,
      rgba(0, 255, 0, 0.3) 0px 0px 100px,
      rgba(0, 255, 0, 0.2) 0px 0px 150px inset;
  }
}

.pulsierenGreen {
  animation: pulsierenGreen 2s ease-in-out forwards;
}

.warning-exclamation {
  font-size: 100px;
  /* Größe des Ausrufezeichens */
  font-weight: bold;
  color: red;
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.8), 0 0 20px rgba(255, 0, 0, 0.6);
  animation: blink 3s infinite alternate ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  border: 5px solid red;
  border-radius: 50%;
  /* Kreisform */
  background-color: rgba(255, 0, 0, 0.1);
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
  margin: 20px auto;
}

@keyframes blink {
  0% {
    transform: scale(1);
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.8), 0 0 20px rgba(255, 0, 0, 0.6);
  }

  100% {
    transform: scale(1.2);
    opacity: 0.7;
    text-shadow: 0 0 20px rgba(255, 0, 0, 1), 0 0 30px rgba(255, 0, 0, 0.8);
  }
}



@keyframes shimmer-donation {
  0% {
    left: -60%;
  }

  100% {
    left: 120%;
  }
}

.donation-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.donation-button:active {
  transform: translateY(0);
  filter: brightness(.98);
}

.donation-footnote {
  margin-top: 25px;
  font-size: .9rem;
  opacity: .75;
}

.sr-only {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

@media (max-width: 520px) {
  .donation-card {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .donation-icon {
    justify-self: start;
  }
}


@media (max-width: 2200px) {

  /* CSS-Regeln für Bildschirme mit einer Breite von maximal 768px */
  .container-legende-img {
    width: 84px;
    height: 45.33px;


  }


}


@media (max-width: 1500px) {

  #game-container {
    display: none;

  }

  .login-parent {
    display: none;

  }

  .container-legende-parent {
    display: none;
  }

  body {
    height: 100vh;
    width: 100vw;
  }

}




@media (max-height: 630px) {


  #game-container {
    display: none;

  }

  .login-parent {
    display: none;

  }

  .container-legende-parent {
    display: none;
  }

  body {
    height: 100vh;
    width: 100vw;
  }

}


/* Basis: unsichtbar, bis Media Query greift */
.blur-not-compatible-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  /* wird per Media Query auf flex gesetzt */
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 8, 20, 0.75);
  /* Fallback-Hintergrund */
  width: 100vw;
  height: 100vh;
}

/* Schöner mit Blur, wenn unterstützt */
@supports (backdrop-filter: blur(10px)) {
  .blur-not-compatible-overlay {
    backdrop-filter: blur(10px) saturate(120%);
    background: rgba(5, 8, 20, 0.55);
  }
}

/* Karte / Inhalt */
.blur-not-compatible-overlay .bnco-card {
  max-width: 560px;
  width: 100%;
  border-radius: 18px;
  padding: 22px 22px 18px;
  color: #eaf0ff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)) border-box,
    radial-gradient(120% 120% at 0% 0%, rgba(110, 231, 183, 0.25), rgba(96, 165, 250, 0.15)) border-box;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Titel + Akzent */
.blur-not-compatible-overlay .bnco-title {
  margin: 0 0 6px 0;
  font-size: 1.6rem;
  letter-spacing: 0.4px;
  font-weight: 800;
  text-transform: uppercase;
}

.blur-not-compatible-overlay .bnco-msg {
  margin: 6px 0 10px 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #dbe6ff;
}

.blur-not-compatible-overlay .bnco-tips {
  margin: 0 0 12px 18px;
  padding: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.blur-not-compatible-overlay .bnco-footnote {
  margin: 0;
  font-size: 0.8rem;
  opacity: 0.8;
}

/* Sichtbarkeitsregeln: hier die Mindestgröße anpassen */
@media (max-width: 1500px),
(max-height: 600px),
(min-width: 2560px) {
  .blur-not-compatible-overlay {
    display: flex;
  }


}

/* Optional: weniger Animationen für Nutzer mit Reduzierung */
@media (prefers-reduced-motion: reduce) {
  .blur-not-compatible-overlay {
    transition: none;
  }

  .blur-not-compatible-overlay .bnco-card {
    transition: none;
  }
}

/* Pause Button Styling */
.pause-button-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 2vh;
}

#pause-button {
  width: 100%;
  height: 40px;

  font-family: 'Share Tech Mono', 'VT323', monospace;
  color: #00e6c3;
  background-color: transparent;
  border: 2px solid #00e6c3;
  border-radius: 8px;
  box-shadow: 0 0 8px #00e6c3, 0 0 2px #fff inset;

  letter-spacing: 1px;
  font-weight: 700;
  cursor: pointer;


  transition: box-shadow 0.2s, background 0.2s;
  background-color: transparent;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 2px solid #00e6c3;
  border-radius: 8px;
  box-shadow: 0 0 8px #00e6c3, 0 0 2px #fff inset;
  text-align: center;
  width: 100%;
  margin: 0;
  padding: 6px;

  font-weight: 700;
  cursor: pointer;
  display: flex;
  color: #00e6c3;
  align-items: center;

}

#pause-button:hover {
  color: #fff;
  text-shadow: 0 0 8px #00e6c3, 0 0 2px #fff;
}

#pause-button:active {
  transform: scale(0.98);
}