/*------------------HAUPT-----------------*/
body {
margin: 0;
padding: 0;
background-image: url(images/BackGround\ \(2\).png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;

font-family: Arial, Helvetica, sans-serif;
color: white;
min-height: 94vh;

overflow-x: hidden;
}

#mainContent {
display: flex;
justify-content: center;
align-items: center;
min-height: 70vh;
}
.game-wrapper {
  text-align: center;
}

canvas {
  width: 600px;
  height: 600px;

  background: radial-gradient(circle at center, #0a0a1a, #000);

  border: 3px solid #00ffc3;
  border-radius: 15px;

  box-shadow:
    0 0 10px #00ffc3,
    0 0 20px #00ffc3,
    0 0 40px rgba(0, 255, 200, 0.5),
    inset 0 0 20px rgba(0, 255, 200, 0.2);

  display: block;
}
canvas.hidden {
display: none;
}
#gameOverScreen {
  width: 400px;
  height: 400px;
  background: rgba(10, 10, 20, 0.9);
  color: white;
  border-radius: 15px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;

  box-shadow:
    0 0 20px rgba(0, 255, 200, 0.4),
    inset 0 0 20px rgba(0, 255, 200, 0.2);

  border: 2px solid rgba(0, 255, 200, 0.3);
}
#gameOverScreen::before {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 15px;

  background: repeating-linear-gradient(
    rgba(255,255,255,0.03) 0px,
    rgba(255,255,255,0.03) 1px,
    transparent 1px,
    transparent 3px
  );

  pointer-events: none;
}
#gameOverScreen.hidden {
  display: none;
}
/*------------------BUTTONS-----------------*/
button {
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
}

#restartBtn {
  padding: 10px 25px;
  font-size: 1rem;
  border: none;
  border-radius: 8px;

  background: linear-gradient(45deg, #00ff99, #00ccff);
  color: black;
  font-weight: bold;
  cursor: pointer;

  box-shadow:
    0 0 10px rgba(0, 255, 200, 0.6),
    0 0 20px rgba(0, 255, 200, 0.4);

  transition: all 0.2s ease;
}
#restartBtn:hover {
  transform: scale(1.1);
  box-shadow:
    0 0 20px rgba(0, 255, 200, 0.9),
    0 0 40px rgba(0, 255, 200, 0.6);
}

/*------------------TEXT-----------------*/
h1 {
  font-family: Arial, sans-serif;
  font-size: 4rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 6px;
  color: #b7ff00;
  text-align: center;
  margin-bottom: 20px;

  text-shadow:
    0 0 5px #b7ff00,
    0 0 10px #7cff00,
    0 0 20px #39ff14,
    3px 3px 0 #145a00,
    -3px -3px 0 #0a2d00;

  transform: rotate(-2deg) skew(-5deg);
  animation: snakeTitle 1.8s infinite alternate ease-in-out;
}

@keyframes snakeTitle {
  0% {
    transform: rotate(-2deg) skew(-5deg) scale(1);
  }
  100% {
    transform: rotate(2deg) skew(5deg) scale(1.05);
  }
}
#score {
  font-family: Arial, sans-serif;
  font-size: 1.5rem;
  letter-spacing: 2px;

  color: #03ff18;

  text-shadow:
    0 0 5px #0ca132,
    0 0 10px #095716,
    0 0 20px #15680d;

  margin-bottom: 10px;
}

#gameOverScreen h2 {
  font-size: 2.5rem;
  letter-spacing: 4px;
  color: #00ffc3;

  text-shadow:
    0 0 5px #00ffc3,
    0 0 10px #00ffc3,
    0 0 20px #00ff99,
    0 0 40px #00ff99;

  animation: flicker 1.5s infinite alternate;
}
#finalScore {
  font-size: 1.2rem;
  color: #ffffff;
  letter-spacing: 2px;
}

/*------------------ANIMATIONEN-----------------*/
@keyframes flicker {
  0% { opacity: 1; }
  100% { opacity: 0.7; }
}