:root{
  --bg:#f7f7f7;
  --ground:#e0e0e0;
  --text:#222;
  --accent:#4CAF50;
}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Arial;}
body{
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(#ffffff,var(--bg));
  color:var(--text);
}

/* Game stage */
.stage{
  width:880px;
  max-width:95vw;
  height:200px;
  background:linear-gradient(#f9f9f9,#f0f0f0);
  border-radius:10px;
  box-shadow:0 8px 30px rgba(20,20,20,0.08);
  position:relative;
  overflow:hidden;
  border:1px solid rgba(0,0,0,0.04);
}

/* Sky */
.sky{
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* Ground */
.ground{
  position:absolute;
  left:0;right:0;
  bottom:0;
  height:36px;
  background:linear-gradient(#dcdcdc,var(--ground));
  border-top:2px solid rgba(0,0,0,0.06);
  display:flex;
  align-items:center;
  padding-left:16px;
  box-sizing:border-box;
}

/* Dino container */
.dino-wrap{
  position:absolute;
  left:80px;
  bottom:36px; /* sits on ground */
  width:88px;
  height:72px;
  transform-origin:center bottom;
  transition:transform 0.08s linear;
  user-select:none;
}

/* running animation */
.dino-run{
  animation: bob 0.3s steps(2) infinite;
}
@keyframes bob{
  0%{ transform:translateY(0) }
  50%{ transform:translateY(1px) }
  100%{ transform:translateY(0) }
}

/* Obstacles */
.obstacle{
  position:absolute;
  bottom:36px;
  width:22px;
  height:36px;
  background:linear-gradient(#6b8e23,#4b6b12);
  border-radius:4px;
  box-shadow:inset 0 -4px rgba(0,0,0,0.12);
}
.obstacle.small{ width:14px; height:28px; }
.obstacle.tall{ width:26px; height:44px; bottom:36px; }

/* Score area */
.hud{
  position:absolute;
  right:12px;
  top:12px;
  font-size:14px;
  background:rgba(255,255,255,0.7);
  padding:6px 8px;
  border-radius:6px;
  border:1px solid rgba(0,0,0,0.05);
}

/* Game over overlay */
.overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(rgba(255,255,255,0.6),rgba(255,255,255,0.2));
  z-index:30;
  pointer-events:none;
  opacity:0;
  transition:opacity 0.18s;
}
.overlay.show{opacity:1;pointer-events:auto;}
.panel{
  background:#fff;
  border-radius:10px;
  padding:16px 20px;
  box-shadow:0 8px 30px rgba(0,0,0,0.12);
  text-align:center;
  min-width:220px;
}
.btn{
  display:inline-block;
  margin-top:10px;
  padding:8px 12px;
  border-radius:8px;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  cursor:pointer;
  border:none;
  font-weight:600;
}

/* Responsive */
@media (max-width:480px){
  .dino-wrap{ left:48px; width:64px; height:54px; }
}