/* =========================================
   🎮 AUTO CLICKER GAME: DESIGN & STYLE (CSS) 🎮
   ========================================= */
@font-face {
  font-family: font;
  src: url(text/TitilliumWeb-Regular.ttf);
}
/* --- MAIN PAGE SETUP --- */
body {
  /* 📝 TODO: Pick your background and text colors! */
  color: #0cf25d /* Add a light text color here, e.g., #fff */;
  font-family: "font" /* Pick a font, e.g., "Verdana", sans-serif */;

  text-align: center;
  /* 🧠 HOW IT WORKS: The next 3 lines create a side-by-side (2-column) layout! */
  margin: 0;
  display: flex; /* "flex" puts the game zone and shop zone next to each other */
  height: 100vh; /* "100vh" means it takes up 100% of the screen height */
}

/* --- LEFT SIDE: The Game Zone --- */
.game-zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #034159;
  border-right: 20px solid #4444448b;
  gap: 20px; /* Space between Title and Button */
}

/* --- 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: #02735e;
  padding: 20px;
}

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

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

/* --- THE MAIN CLICKER BUTTON --- */
#click-btn {
  cursor: pointer;

  /* 📝 TODO: Add your custom image and give it a width and height! */
  background-image: url(assets/New\ Piskel\ \(1\).gif); /* 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: 100px;
}

/* 🧠 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%;
  flex-wrap: wrap;
  padding: 10px 20px;
  background-color: #038c3e;
  color: #162d59;
  border: none;
  margin-bottom: 1px;
  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;
}
.buy-btn span {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* 📝 TODO: Style the cost text so it stands out from the rest of the button */
.cost-text {
  color: #ffd700;
  font-weight: bold;
}

.logoImg {
  width: 20px;
  display: block;
  flex-shrink: 0;
  width: 20px;
}

.bounce-anim {
  animation: pulse-scale 2s infinite;
}

@keyframes pulse-scale {
  0% {
    transform: scale(1); /* Normal size at start */
  }
  50% {
    transform: scale(1.5); /* Slightly larger at midpoint */
  }
  100% {
    transform: scale(1); /* Back to normal at end */
  }
}