/* =========================================
   🎮 AUTO CLICKER GAME: DESIGN & STYLE (CSS) 🎮
   ========================================= */

@font-face {
  font-family: "caveat";
  src: url(Caveat-VariableFont_wght.ttf);
}

/* --- MAIN PAGE SETUP --- */
body {
  background-color: #f5b2f7;
  color: white;
  font-family: "Caveat", cursive;
  text-align: center;
  margin: 0;
  display: flex;
  height: 100vh;
  width: 100%;
  overflow: hidden;

  /* 1. Define exactly 10 duck images */
  background-image:
    url("duck.png"), url("duck.png"), url("duck.png"), url("duck.png"),
    url("duck.png"), url("duck.png"), url("duck.png"), url("duck.png"),
    url("duck.png"), url("duck.png");

  background-repeat: no-repeat;
  background-size: 50px 50px; /* Adjust size as needed */

  /* 2. Set 10 unique starting positions (Horizontal% Vertical-Offset) */
  background-position:
    5% -100px,
    15% -250px,
    25% -150px,
    35% -300px,
    45% -50px,
    55% -200px,
    65% -350px,
    75% -120px,
    85% -280px,
    95% -180px;

  animation: fall 8s linear infinite;
}

@keyframes fall {
  from {
    /* Must match the starting background-position exactly */
    background-position:
      5% -100px,
      15% -250px,
      25% -150px,
      35% -300px,
      45% -50px,
      55% -200px,
      65% -350px,
      75% -120px,
      85% -280px,
      95% -180px;
  }
  to {
    /* Add 100vh + the original offset so they fall completely off-screen */
    background-position:
      5% calc(100vh + 100px),
      15% calc(100vh + 250px),
      25% calc(100vh + 150px),
      35% calc(100vh + 300px),
      45% calc(100vh + 50px),
      55% calc(100vh + 200px),
      65% calc(100vh + 350px),
      75% calc(100vh + 120px),
      85% calc(100vh + 280px),
      95% calc(100vh + 180px);
  }
}

/* --- LEFT SIDE: The Game Zone --- */
.game-zone {
  /* 🧠 HOW IT WORKS: flex: 1 makes this take up exactly half (50%) of the screen.
     The other flex settings perfectly center whatever is inside this zone. */
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 5px solid #ffffff;
}

/* --- RIGHT SIDE: The Shop --- */
.shop-zone {
  /* 🧠 HOW IT WORKS: flex: 1 makes the shop take up the other 50% of the screen.
     overflow-y allows you to scroll down if you add lots of items to the shop. */
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  /* 📝 TODO: Give your shop a background color and some padding (inside spacing) */
  background-color: /* e.g., #333 */;
  padding: 20px;
}

/* --- TEXT & HEADINGS --- */
h1 {
  /* 📝 TODO: Make the main score huge and colorful! */
  margin: 0;
  font-size: /* e.g., 50px */ 50;
  color: /* e.g., #ffd700 or gold */ white;
}

h2 {
  /* 📝 TODO: Style your secondary headings (like "Upgrades") */
  color: /* e.g., #aaa */ white;
  margin-bottom: 30px;
}

/* --- THE MAIN CLICKER BUTTON --- */
#click-btn {
  /* 🧠 HOW IT WORKS: cursor: pointer changes the mouse to a pointing hand 
     so players know they can click it! */
  cursor: pointer;

  /* 📝 TODO: Add your custom image and give it a width and height! */
  background-image: url(New\ Piskel.png); /* Change this to your image file! */
  background-position: center;
  background-size: cover;
  /* Experiment with different button sizes and radiuses */
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

/* 🧠 HOW IT WORKS: :active tells the button what to do EXACTLY when being clicked.
   transform: scale(0.9) shrinks it to 90% size, making it look squished! */
#click-btn:active {
  transform: scale(0.9);
}

/* --- SHOP BUTTONS --- */
.buy-btn {
  /* 🧠 HOW IT WORKS: This flex layout pushes the item name to the left 
     and the price to the right, keeping things neat! */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;

  /* 📝 TODO: Style your shop buttons! Change colors, padding, and round the corners */
  background-color: #444;
  color: white;
  border: none;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;

  /* Smooth transition for when we hover over it */
  transition: background 0.2s;
}

/* 📝 TODO: What should the shop button look like when the mouse hovers over it? */
.buy-btn:hover {
  background-color: #555;
}

/* 📝 TODO: Style the cost text so it stands out from the rest of the button */
.cost-text {
  color: #ffd700;
  font-weight: bold;
}