body {
  margin:0;
  padding:0;
  font-family: monospace;
  background-color: #000;
  color: #0f0;
  overflow-x: hidden; /* verhindert horizontales Scrollen */
}

#highscores button {
  margin-top: 10px;
  padding: 8px 16px;
  font-size: 16px;
  cursor: pointer;
  border: 2px solid #0F0;
  background: #000;
  color: #0F0;
  transition: 0.2s;
}

#highscores button:hover {
  background: #0F0;
  color: #000;
}
#left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin: 20px auto;
}

canvas {
  background-color: #000;
  border: 2px solid #0f0;
}

#score {
  margin-top: 10px;
  font-size: 1.2em;
}

#gameOver {
  color: #f00;
  font-size: 2em;
  display: none;
  margin-top: 10px;
}

/* Button Container */
#buttonContainer {
  display: flex;
  justify-content: space-between;
  width: 90vw;
  margin-top: 10px;
}

#buttonContainer button {
  flex: 1;
  margin: 0 5px;
  padding: 10px;
  font-size: 1em;
  cursor: pointer;
  background-color: #000;
  color: #0f0;
  border: 2px solid #0f0;
}

#controls button {
  width: 50px;
  height: 50px;
  font-size: 1.5em;
  background-color: #000;
  color: #0f0;
  border: 2px solid #0f0;
  cursor: pointer;
}

/* Highscore Overlay */
#highscoresOverlay {
  display: none;
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color: rgba(0,0,0,0.95);
  color: #0f0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

#highscoresOverlay button {
  margin-bottom: 20px;
  padding:10px 20px;
  cursor:pointer;
  background-color:#000;
  color:#0f0;
  border:2px solid #0f0;
  font-size:1em;
}

#highscoresOverlay ol {
  list-style:none;
  padding:0;
  font-size:1.2em;
}

/* PC Highscore permanent */
@media(min-width:769px){
  #controls { display: none; }
  #highscoresOverlay { display: none !important; }
  #highscores{
    display:block;
    width:220px;
    border-left:3px solid #0f0;
    padding:10px;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    background-color: #000;
    overflow-y:auto;
  }

  #toggleScores { display:none; }
  #buttonContainer { justify-content:flex-start; width:auto; margin:10px auto; }
}

/* Mobile Styles */
@media(max-width:768px){
  canvas { width:90vw; height:90vw; }
  #highscores { display:none; }

  /* Steuerung ergonomisch unten */
  #controls {
    display: grid;
    grid-template-columns: 60px 60px 60px;
    grid-template-rows: 60px 60px;
    gap: 10px;
    justify-content: center;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
  }
  #controls .up { grid-column: 2; grid-row: 1; }
  #controls .left { grid-column: 1; grid-row: 2; }
  #controls .down { grid-column: 2; grid-row: 2; }
  #controls .right { grid-column: 3; grid-row: 2; }
}