body {
  margin: 0;
  font-family: sans-serif;
  background: #e0f7fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

#game {
  position: relative;
  width: 800px;
  height: 300px;
  background-image: url('data:image/png;base64,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'); /* Replace or add full data URL */
  background-size: cover;
  background-position: top;
  border: 2px solid #00796b;
  overflow: hidden;
}

#player {
  position: absolute;
  bottom: 0;
  left: 100px;
  font-size: 40px;
}

#obstacle {
  position: absolute;
  bottom: 0;
  right: -50px;
  font-size: 40px;
}

.jump {
  animation: jumpAnim 0.5s;
}

@keyframes jumpAnim {
  0%   { bottom: 0; }
  50%  { bottom: 120px; }
  100% { bottom: 0; }
}

#startBtn {
  margin: 10px;
  padding: 10px 20px;
  background-color: #00796b;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
}

#scoreDisplay,
#highScoreDisplay {
  font-size: 20px;
  color: #004d40;
}
