/* styles.css für Neon Runner */
*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  font-family: Inter, Roboto, Arial;
  background: linear-gradient(180deg, #0a1f3c, #012a4a);
}

#game{
  position:relative;
  width:100vw;
  height:100vh;
  overflow:hidden;
  color:#fff;
}


/* HUD */
#hud, #hud *{box-sizing:border-box}
#hud{position:absolute;top:8px;left:8px;z-index:900}
#hud .panel{background:rgba(255,255,255,0.06);padding:6px 10px;border-radius:8px;margin-bottom:6px;font-weight:700}
#hud .panel small{display:block;font-weight:400}

/* Straße */
#road{position:absolute;left:22%;width:56%;top:0;height:100%;overflow:hidden;border-left:6px solid rgba(255,255,255,0.03);border-right:6px solid rgba(255,255,255,0.03);z-index:10}
#road::before{
  content:'';
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(180deg,#1b1b1b 0px,#131313 6px,#1b1b1b 6px,#131313 12px);
  opacity:1;
  filter:contrast(1.1) brightness(0.7);
}

/* Fahrspuren */
.roadLane{position:absolute;top:0;height:100%}

/* Spieler */
#player{position:absolute;width:56px;bottom:30px;z-index:50;transition:left 140ms cubic-bezier(.2,.9,.3,1)}

/* Hindernisse */
.obstacle{
  position:absolute;
  width:56px;
  height:56px;
  background: linear-gradient(180deg,#ff6b6b,#c92a2a);
  border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,0.6);
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:800;
  font-size:24px;
}

/* Münzen */
.coin{
  position:absolute;width:28px;height:28px;border-radius:50%;
  background:radial-gradient(circle,#ffd166,#f5a623);
  box-shadow:0 6px 16px rgba(0,0,0,0.5);
  z-index:45;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#802b00;
}

/* Popup */
.transPopup{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:80px;background:#fff;color:#111;
  padding:8px 12px;border-radius:8px;
  box-shadow:0 8px 22px rgba(0,0,0,0.4);
  display:none;z-index:999
}

/* HUD oben */
#score{position:fixed;left:18px;top:14px;color:#fff;font-weight:800;z-index:999}
#level{position:fixed;left:160px;top:14px;color:#fff;font-weight:800;z-index:999}
#info{position:fixed;right:14px;top:14px;color:#ddd;font-size:13px;z-index:999}

/* Mobil */
@media (max-width:640px){
  #road{left:14%;width:72%}
  #player{width:46px}
  .obstacle{width:48px;height:48px}
}

#player {
  position: absolute;
  width: 155px;
  height: auto;
  bottom: 55px;
  z-index: 100;
  transition: left 140ms cubic-bezier(.2,.9,.3,1);
}