body {
  background: #111;
  color: #fff;
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 0;
  padding: 20px;
}

#arena {
  position: relative;
  margin: 20px auto;
  width: 800px;
  height: 500px;
  background: #333;
  border: 3px solid #555;
  border-radius: 10px;
  overflow: hidden;
}

/* Rover */
#rover {
  position: absolute;
  width: 60px;
  height: 40px;
  top: 230px;
  left: 370px;
  transform-origin: center center;
}

#body {
  position: relative;
  width: 100%;
  height: 100%;
  background: #0af;
  border-radius: 10px;
  box-shadow: 0 0 10px #0af, 0 0 20px rgba(0,170,255,0.4);
}

/* Räder */
.wheel {
  position: absolute;
  width: 10px;
  height: 20px;
  background: #222;
  border-radius: 5px;
  top: 50%;
  transform: translateY(-50%);
}
.wheel.left { left: -5px; }
.wheel.right { right: -5px; }

#headlight {
  position: absolute;
  width: 60px;           /* Breite des Lichtkegels */
  height: 150px;         /* Länge des Strahls */
  top: -150px;           /* direkt vorne am Rover */
  left: 50%;
  transform: translateX(-50%) rotate(180deg); /* mittig */
  background: radial-gradient(
    ellipse at center top,
    rgba(255,255,200,0.8) 0%,      /* hell in der Mitte */
    rgba(255,255,200,0.3) 50%,     /* leicht transparent */
    rgba(255,255,200,0) 100%       /* zu den Rändern hin unsichtbar */
  );
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* spitzer Kegel */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

#headlight.on {
  opacity: 0.8;
}

/* Hindernisse */
.obstacle {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #a33;
  border-radius: 5px;
}

/* Status */
#status {
  margin-top: 20px;
  font-size: 1.2em;
  color: #0af;
}

.coin {
  position: absolute;
  width: 20px;
  height: 20px;
  background: gold;
  border-radius: 50%;
  box-shadow: 0 0 8px #ff0, 0 0 15px rgba(255,255,0,0.5);
}
#score {
  margin-top: 10px;
  font-size: 1.2em;
  color: #ff0;
}