/* styles.css for Neon Runner */
*{box-sizing:border-box}
html,body{height:100%;margin:0;
font-family: Inter, Roboto, Arial;
background: linear-gradient(180deg, #0a1f3c, #012a4a); /* dark blue gradient */
#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}


/* road */ #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); }

/* road lanes visuals (transparent) */
.roadLane{position:absolute;top:0;height:100%}

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

/* obstacles */
.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;
}



/* coins */
.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;
}

/* billboard / 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 top */
#hud2{position:absolute;top:8px;right:8px;z-index:999}
#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}

/* overlay */
#overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);z-index:1000}
#overlay.hidden{display:none}
#overlay .panel{background:#fff;color:#111;padding:18px;border-radius:10px;text-align:center}

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


#player {
  position: absolute;
  width: 155px;      /* adjust width to fit your image */
  height: auto;     /* maintain aspect ratio */
  bottom: 55px;     /* keeps it above the road */
  z-index: 100;
  transition: left 140ms cubic-bezier(.2,.9,.3,1); /* smooth lane movement */
}