body{

  margin:0;

  font-family:Arial, sans-serif;

  background:#1b1b1b;

  color:#ff4fd8;

  text-align:center;

}



header{

  padding:20px;

}



.game-button{

  background:#ff4fd8;

  color:#1b1b1b;

  border:none;

  padding:10px 16px;

  border-radius:10px;

  cursor:pointer;

  font-weight:bold;

  margin-bottom:10px;

}



#game{

  position:relative;

  width:100%;

  max-width:600px;

  height:320px;

  margin:20px auto;

  background:#111;

  border:2px solid #ff4fd8;

  border-radius:14px;

  overflow:hidden;

}


#game-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* This prevents the image from stretching weirdly */
  object-fit: cover; 
  /* Ensures it sits at the very back */
  z-index: 0; 
  /* Pointer-events: none ensures it doesn't block clicks */
  pointer-events: none;
}


#bunny{

  position:absolute;

  bottom:0;

  left:50px;

  width:55px;

  height:60px;

  object-fit:contain;

}



#obstacle {
  position: absolute;
  bottom: 0;
  left: 100%;
  width: 40px;
  height: 70px;

  /* Dark Purple Stone Base */
  background-color: #2e1a47;
  border: 3px solid #1a0f2b;
  border-radius: 4px;

  /* Subtle "Polished" Texture */
  background-image: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
    linear-gradient(45deg, #4b2c73 50%, #3d235e 50%);
  background-size: 10px 10px;
  
  /* Hard pixelated edges */
  image-rendering: pixelated;
  
  /* Subtle highlight instead of neon glow */
  box-shadow: inset -2px -2px 0px #1a0f2b, inset 2px 2px 0px #5c3b8a;
}

#surface {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px; /* ارتفاع السقف */

  /* نفس مظهر الـ Obstacle */
  background-color: #2e1a47;
  border: 3px solid #1a0f2b;
  border-radius: 4px;

  background-image: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
    linear-gradient(45deg, #4b2c73 50%, #3d235e 50%);
  background-size: 10px 10px;
  
  image-rendering: pixelated;
  box-shadow: inset -2px -2px 0px #1a0f2b, inset 2px 2px 0px #5c3b8a;
  
  z-index: 5; /* لضمان ظهوره فوق السحاب وتحت واجهة المستخدم */
}

#ground {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background-color: #190736; /* Solid base */
  border-top: 1px solid #261d3f; /* Sharp pink highlight */
  
  /* Subtle Texture: Very faint cross-hatch/diagonal pattern */
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.05) 0px,
    rgba(255, 255, 255, 0.05) 2px,
    transparent 2px,
    transparent 10px
  );
  
  z-index: 2;
  image-rendering: pixelated;
}

#heartTemplate {
  position: absolute;
  width: 30px;
  height: 30px;
  
  /* Adds a neon pink glow effect */
  filter: drop-shadow(0 0 5px #ff4fd8) drop-shadow(0 0 10px #ff4fd8);
  
  /* Optional: adds a subtle pulsing animation to make them look alive */
  animation: heartPulse 1.5s infinite ease-in-out;
}

@keyframes heartPulse {
  0%, 100% { filter: drop-shadow(0 0 5px #ff4fd8); }
  50% { filter: drop-shadow(0 0 15px #ff4fd8); }
}


#score{

  position:absolute;

  top:10px;

  left:10px;

  color:white;

  font-weight:bold;

}



.cloud{

  position:absolute;

  top:10px;

  width:120px;

  opacity:0.7;

  animation:move 18s linear infinite;

}



.c2{ top:50px; width:150px; animation-duration:22s; }

.c3{ top:90px; width:100px; animation-duration:26s; }



@keyframes move{

  from{ transform:translateX(-200px); }

  to{ transform:translateX(700px); }

}



#gameOver,

#startScreen{

  position:absolute;

  inset:0;

  background:rgba(0,0,0,0.75);

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:center;

  color:white;

  padding:20px;

  text-align:center;

}



.hidden{

  display:none !important;

}



#restartBtn{

  margin-top:10px;

  padding:10px 14px;

  background:#ff4fd8;

  border:none;

  border-radius:10px;

  cursor:pointer;

  font-weight:bold;

}

/* 1. The lowest layer: The background clouds and floating hearts */

.cloud, [src="heart.png"] {

  z-index: 1;

}



/* 2. The middle layer: Your player bunny and the danger obstacle bar */

#bunny, #obstacle {

  z-index: 10;

  position: absolute; /* Ensure position is absolute so z-index works */

}



/* 3. The highest layer: Text counters and Menu Overlays */

#score {

  z-index: 20;

  position: absolute;

}



.overlay {

  z-index: 30;

  position: absolute;

}